改用Hexo部署站点

赤月未咲

发布于 2023-03-17 09:20:46

3170

发布于 2023-03-17 09:20:46

文章被收录于专栏：Akatsuki

我将开始使用Hexo! 作为博客。

重点还是偏向于hexo的，可能部署wp的服务器要逐渐当成api来用（~~api服务器目前在俄罗斯~~）图片存储服务器是国内的，图片格式为webp。 hexo的图片我打算存到github毕竟免费，加上jsdelivr速度也快！快手抖音当图床也是不错的选择，但是不打算用，本身就不太喜欢这个软件，对我来说，视频没有分类，这样刷就是浪费时间。不明确内容，视频没有分类，不知道讲的是什么，你喜欢看的内容纯粹靠人工智能猜你喜欢，我个人喜欢看的都比较乱，一时喜欢，过会就厌倦了。

回归正题！因为重点偏向是Hexo，美化自然是必须的！

开始主题的修改

主题修改是模仿Glume大佬博客进行的修改！（扒css）

JS/CSS 如何引用此篇文章所说的一切引用（包括 css 和 js）都可以参考这里。打开主题配置文件（butterfly.yml）示例：

inject: 
  head:
   - <link rel="stylesheet" href="/css/background.css">
  bottom:
    # - <script src="xxxx"></script>

评论背景的修改

/*评论背景*/
#vcomment textarea:focus {
    background-position-y:150px;
    transition: all 0.25s ease-in-out 0s;
}
#vcomment textarea {
    background: url(图片链接) 100% 100% no-repeat;
    -moz-background-size: contain;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;
}

一个往下缩的效果，以及图片尺寸的限制！

侧栏不自动展开

ul.menus_item_child {
    display: none;
}

侧边评论圆角

#aside_content .aside-list>.aside-list-item .thumbnail>img {
    border-radius:70px;
    width:70%;
    height:70%;
}
#aside_content .aside-list>.aside-list-item .content {
    padding-left:0px;
}
#aside_content .aside-list>.aside-list-item .thumbnail>img:hover {
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
    transform:rotate(360deg);
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition: all 1s;
}

其实我非常建议你F12扒css文件更方便！

富文本按钮

On DOM load	On hover	On parent hover
faa-wrench animated	faa-wrench animated-hover	faa-wrench
faa-ring animated	faa-ring animated-hover	faa-ring
faa-horizontal animated	faa-horizontal animated-hover	faa-horizontal
faa-vertical animated	faa-vertical animated-hover	faa-vertical
faa-flash animated	faa-flash animated-hover	faa-flash
faa-bounce animated	faa-bounce animated-hover	faa-bounce
faa-spin animated	faa-spin animated-hover	faa-spin
faa-float animated	faa-float animated-hover	faa-float
faa-pulse animated	faa-pulse animated-hover	faa-pulse
faa-shake animated	faa-shake animated-hover	faa-shake
faa-tada animated	faa-tada animated-hover	faa-tada
faa-passing animated	faa-passing animated-hover	faa-passing
faa-passing-reverse animated	faa-passing-reverse animated-hover	faa-passing-reverse
faa-burst animated	faa-burst animated-hover	faa-burst
faa-falling animated	faa-falling animated-hover	faa-falling
faa-rising animated	faa-rising animated-hover	faa-rising

理论上这些动效是可以给任意 DOM 元素添加的。添加方式很简单，引入一个 css 库：https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/font-awesome-animation.min.css

然后在 DOM 元素的类名添加相应的动画即可。

例如网址导航栏可以写为 - 网址收藏 || https://dh.xiaokang.me/ || fas fa-infinity faa-shake animated

适配页面的大小

.media-wrap {
 position: relative;
/*改为max-width，并添加!important*/
 max-width: 100% !important;
 height: 0;
 padding-bottom: 45%;
/*增加margin-bottom*/
 margin-bottom:20px;
}
/*增加判断是否为@media*/
@media (max-width:736px){
 .media-wrap {
 padding-bottom: 56.25%;
 }
}
.media-wrap iframe,
.media-wrap embed,
.media-wrap object {
 position: absolute;
 top: 0;
 left: 0;
/* 改为max-width，并添加!important */
 max-width: 100% !important;
 height: 100% !important;
}

HTML代码：

<div class="media-wrap">
<iframe width="890" height="430" src="https://video.2w2.top/player/?url=https://pan.2w2.top/?/video/acg/nichijou.mp4" frameborder=0 allowfullscreen></iframe>
</div>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-04-27，如有侵权请联系 cloudcommunity@tencent.com 删除

css