我将开始使用Hexo! 作为博客。
重点还是偏向于hexo的,可能部署wp的服务器要逐渐当成api来用(api服务器目前在俄罗斯)
图片存储服务器是国内的,图片格式为webp。
hexo的图片我打算存到github毕竟免费,加上jsdelivr速度也快!
快手抖音当图床也是不错的选择,但是不打算用,本身就不太喜欢这个软件,对我来说,视频没有分类,这样刷就是浪费时间。
不明确内容,视频没有分类,不知道讲的是什么,你喜欢看的内容纯粹靠人工智能猜你喜欢,我个人喜欢看的都比较乱,一时喜欢,过会就厌倦了。
回归正题!
因为重点偏向是Hexo,美化自然是必须的!
开始主题的修改
主题修改是模仿Glume大佬博客进行的修改!(扒css)
JS/CSS 如何引用
此篇文章所说的一切引用(包括 css 和 js)都可以参考这里。
打开主题配置文件(butterfly.yml)
示例:
1 2 3 4 5
| inject: head: - <link rel="stylesheet" href="/css/background.css"> bottom:
|
评论背景的修改
1 2 3 4 5 6 7 8 9 10 11 12
| #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; }
|
一个往下缩的效果,以及图片尺寸的限制!
侧栏不自动展开
1 2 3
| ul.menus_item_child { display: none; }
|
侧边评论圆角
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| #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文件更方便!
富文本按钮
理论上这些动效是可以给任意 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
适配页面的大小
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| .media-wrap { position: relative;
max-width: 100% !important; height: 0; padding-bottom: 45%;
margin-bottom:20px; }
@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代码:
1 2 3
| <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>
|