原Blog连接:Hexo + Butterfly主题美化 , 查看原文可获得更好的体验!
搭建时是Hexo + Next主题,Next主题比较简约直观,本打算就直接用Next,但之后发现了Butterfly主题也很好看,就配置了Butterfly主题
1. 文章加密
利用 hexo-blog-encrypt 实现文章加密,安装命令:
npm install --save hexo-blog-encrypt
passwordabstract
---
title: Hello World
...
password: mikemessi
abstract: Here's something encrypted, password is required to continue reading.
message: Hey, password is required here.
wrong_pass_message: Oh, this is an invalid password. Check and try again, please.
wrong_hash_message: Oh, these decrypted content cannot be verified, but you can still have a look.
---
但是有个问题就是加密后,主页文章预览会显示一串乱码,暂时不知如何解决。
2. 主页Subtitle打字效果
_config.ymlenabletrue
subtitle:
enable: true
# Typewriter Effect (打字效果)
effect: true
# Customize typed.js (配置typed.js)
# https://github.com/mattboldt/typed.js/#customization
typed_option:
# source 調用第三方服務
# source: false 關閉調用
# source: 1 調用一言網的一句話(簡體) https://hitokoto.cn/
# source: 2 調用一句網(簡體) https://yijuzhan.com/
# source: 3 調用今日詩詞(簡體) https://www.jinrishici.com/
# subtitle 會先顯示 source , 再顯示 sub 的內容
source: false
# 如果關閉打字效果,subtitle 只會顯示 sub 的第一行文字
sub:
- They were only two, on the planet.
typed.jscdnjs
<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
themes_config.ymltyped
option:
typed: https://unpkg.com/[email protected]/dist/typed.umd.js
3. 文章结尾版权信息
默认文章结尾的版权信息中虽然文章作者是对的,但是作者跳转的链接以及文章链接都是是一个例子网站,修改themes下的_config.yml中的post_copyright:
post_copyright:
enable: true
decode: true
author_href: https://wei-ll.github.io/
license: CC BY-NC-SA 4.0
license_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
_config.yml
4. 文章页面以及侧边栏卡片颜色及透明度设置
为配合背景图片以及Head图片,可设置文章页面以及侧边栏卡片颜色及透明度,基本参考https://zhuanlan.zhihu.com/p/582638450 ,用博文里的代码只实现了背景图片的设置,其他均没有其作用,通过大量搜索和查阅代码,一点一点搞好了。
步骤如下:
#web_bg {
background-image: url("../img/banner.jpg"),
linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35))
}
#post_bg {
background-image: url("../img/banner.jpg"),
linear-gradient(60deg, rgba(255, 165, 150, 0.5) 5%, rgba(0, 228, 255, 0.35))
}
/* 侧边栏个人信息卡片动态渐变色 */
#aside-content>.card-widget.card-info{
background: linear-gradient(-45deg, rgba(225,235,255,.6),
rgba(225,235,255,.9),
rgba(225,235,255,.9),
rgba(225,235,255,.6));
}
[data-theme=dark] #aside-content>.card-widget.card-info {
background: linear-gradient(-45deg, rgba(24,40,72,.2),
rgba(35,37,58,.9),
rgba(35,37,58,.9),
rgba(24,40,72,.2));
}
/* 侧边栏公告栏卡片渐变色 */
#aside-content>.card-widget.card-announcement{
background: linear-gradient(-45deg, rgba(225,235,255,.6),
rgba(225,235,255,.9),
rgba(225,235,255,.9),
rgba(225,235,255,.6));
}
[data-theme=dark] #aside-content>.card-widget.card-announcement{
background: linear-gradient(-45deg, rgba(24,40,72,.2),
rgba(35,37,58,.9),
rgba(35,37,58,.9),
rgba(24,40,72,.2));
}
/* 侧边栏目录最新文章卡片渐变色 */
#aside-content>.sticky_layout>.card-widget{
background: linear-gradient(-45deg, rgba(225,235,255,.6),
rgba(225,235,255,.9),
rgba(225,235,255,.9),
rgba(225,235,255,.6));
}
[data-theme=dark] #aside-content>.sticky_layout>.card-widget{
background: linear-gradient(-45deg, rgba(24,40,72,.2),
rgba(35,37,58,.9),
rgba(35,37,58,.9),
rgba(24,40,72,.2));
}
/* 个人信息Follow me按钮 */
#aside-content>.card-widget.card-info>#card-info-btn {
background-color: #3eb8be;
border-radius: 8px;
}
/*文章页面*/
.layout>#post {
background: linear-gradient(-45deg, rgba(225,235,255,.8),
rgba(225,235,255,.9),
rgba(225,235,255,.9),
rgba(225,235,255,.8));
}
[data-theme=dark] .layout>#post {
background: linear-gradient(-45deg, rgba(24,40,72,.2),
rgba(35,37,58,.9),
rgba(35,37,58,.9),
rgba(24,40,72,.2));
}
/*主页文章预览页面*/
#recent-posts>.recent-post-item{
background: linear-gradient(-45deg, rgba(225,235,255,.8),
rgba(225,235,255,.9),
rgba(225,235,255,.9),
rgba(225,235,255,.8));
}
[data-theme=dark] #recent-posts>.recent-post-item{
background: linear-gradient(-45deg, rgba(24,40,72,.2),
rgba(35,37,58,.9),
rgba(35,37,58,.9),
rgba(24,40,72,.2));
}
/*分类页面*/
.layout>#page {
background: linear-gradient(-45deg, rgba(225,235,255,.8),
rgba(225,235,255,.9),
rgba(225,235,255,.9),
rgba(225,235,255,.8));
}
[data-theme=dark] .layout>#page {
background: linear-gradient(-45deg, rgba(24,40,72,.2),
rgba(35,37,58,.9),
rgba(35,37,58,.9),
rgba(24,40,72,.2));
}
/*时间轴页面*/
.layout>#archive {
background: linear-gradient(-45deg, rgba(225,235,255,.8),
rgba(225,235,255,.9),
rgba(225,235,255,.9),
rgba(225,235,255,.8));
}
[data-theme=dark] .layout>#archive {
background: linear-gradient(-45deg, rgba(24,40,72,.2),
rgba(35,37,58,.9),
rgba(35,37,58,.9),
rgba(24,40,72,.2));
}
inject:
head:
- <link rel="stylesheet" href="/self/css/myStyle.css">
中间其实一部分代码没什么问题,却一直不起作用,无意中删除了前后的一些空行或者空格,发现居然管用了,突然感觉估计是代码缩进的问题,因为我是直接用记事本打开的.css文件,之后记着还是用Pycharm打开吧。
5. 字体颜色修改
source-css-var.styl
$font-color = #FFFFFF //#1F2D3D
$font-black = #FFFFFF //#4C4948
侧边栏目录标题颜色修改:
$toc-link-color = #ffffff #666261
这样,深色模式切换时就只是背景和整体的亮度变暗。
6. 添加看板娘
npm uninstall hexo-helper-live2d
script(src='/live2d-widget/autoload.js')
# 看板娘
live2d:
enable: true
下面是一些自定义配置:
- 修改首次加载的模型:
live2d-widgetsrcindex.js
(function initModel() {
let modelId = localStorage.getItem("modelId"),
modelTexturesId = localStorage.getItem("modelTexturesId");
if (modelId === null) {
// 首次访问加载 指定模型 的 指定材质
modelId = 3; // 模型 ID
modelTexturesId = 53; // 材质 ID
}
live2d-widgetwaifu-tips.js
margin-bottom
#waifu {
bottom: -1000px;
left: 0;
line-height: 0;
margin-bottom: 10px;
position: fixed;
transform: translateY(3px);
transition: transform .3s ease-in-out, bottom 3s ease-in-out;
z-index: 1;
}
- 人物大小
#live2d {
cursor: grab;
height: 200px;
position: relative;
width: 200px;
}
- 按钮位置
#waifu-tool {
color: #aaa;
opacity: 0;
position: absolute;
right: 10px;
top: 20px;
transition: opacity 1s;
}
- 按钮间距
#waifu-tool span {
display: block;
height: 25px;
text-align: center;
}
- 按钮大小
#waifu-tool svg {
fill: #7b8c9d;
cursor: pointer;
height: 20px;
transition: fill .3s;
}
7. 主页文章封面
_config.ymlcovertrue
cover:
# display the cover or not (是否顯示文章封面)
index_enable: true
aside_enable: true
archives_enable: true
# the position of cover in home page (封面顯示的位置)
# left/right/both
position: both
# When cover is not set, the default cover is displayed (當沒有設置cover時,默認的封面顯示)
default_cover:
- /self/img/banner.jpg
Fort-mattercover
cover: https://lxmusic.toside.cn/img/logo.svg
cover: /self/img/cover/最后的问题.jpg
这里相对路径是根目录下source里我自己建立的self文件夹下存放的图片。
8. 评论系统
_config.yml
comments:
# Up to two comments system, the first will be shown as default
# Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo/Giscus/Remark42/Artalk
use: Valine # Valine,Disqus
text: true # Display the comment name next to the button
# lazyload: The comment system will be load when comment element enters the browser's viewport.
# If you set it to true, the comment count will be invalid
lazyload: false
count: true # Display comment count in post's top_img
card_post_count: false # Display comment count in Home Page
Valine
9. 搜索
我这里之开启了本地搜索local_search,按照butterfly说明文档,安装hexo-generator-searchdb:
npm install hexo-generator-searchdb
修改主题配置文件:
local_search:
enable: true
# Preload the search data when the page loads.
preload: false
# Show top n results per article, show all results by setting to -1
top_n_per_article: 1
# Unescape html strings to the readable one.
unescape: true
CDN:
配置完成后网站右上角首页旁边会出现搜索按钮:
sourcecssvar.styl
$search-bg = #25253A //#f6f8fa
10. 设置图床
本来打算使用Gitee仓库作为图床,因为国内可以访问,但是配置完发现不显示,查询后才知道Gitee 开启了防盗链,所以还是使用Github仓库 + Picgo + jsDelivr CDN的方案:
Github - Settings - Personal access tokens
https://cdn.jsdelivr.net/gh/用户名/仓库名jsDelivr CDN
- 配置Typora,在偏好设置,图像里设置PicGo:
- image-20230701184154528.png
之后文章中的图片只需要粘贴进去就会自动上传。