hexo博客搭建

今天成功使用hexo搭建了博客，并配置了butterfly主题并且进行了一些自定义的美化，目前看起来效果相当不错的。
（顺带一提，hexo是使用MD写作的，这一点我觉得很赞！）

分享一下自己的美化。

搭建环境

至于博客是如何搭建的，可以在网上搜索github page和hexo。

需要准备什么

一个github账户，以及域名一枚。
原理是通过hexo生成样式丰富的网页，github page托管静态文件实现。

关于美化

hexo的部署和美化相对wordpress这种框架是要繁琐许多的，需要手动去配置很多选项，但只要好好参照butterfly主题文档去操做，基本上没什么问题。

自定义字体效果图

修改字体

我采用引入css的方式进行美化，这样不用担心更新会覆盖。

首先确保已经把字体font.woff2上传至cdn中，方便以超链接的形式引用。

font.css

1
2
3
4
5
@font-face {
  font-family: 'font';
  font-display: swap;
  src: url('https://cdn.example.com/fonts/font.woff2') format("woff2"); 
}

在主题配置文件 _config.butterfly.yml 的inject中引用font.css：

1
2
3
4
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    - <link rel="stylesheet" href="https://cdn.example.com/fonts/font.css">

设置字体“font”

1
2
3
4
5
6
# Don't modify the following settings unless you know how they work (非必要不要修改)
font:
  global-font-size: 
  code-font-size:
  font-family: font
  code-font-family: font

修改透明度

参考：https://blog.csdn.net/qq_44138925/article/details/128843200
同样是引入css的方式实现。

transpancy.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 文章页背景 */
.layout_post>#post {
    /* 以下代表透明度为0.7 可以自行修改*/
    background: rgba(255,255,255,.7);
}
 
/* 所有页面背景 */
#aside_content .card-widget, #recent-posts>.recent-post-item, .layout_page>div:first-child:not(.recent-posts), .layout_post>#page, .layout_post>#post, .read-mode .layout_post>#post{
    /* 以下代表透明度为0.7 */
    background: rgba(255,255,255,.7);
}
/*侧边卡片的透明度 */
:root {
  --card-bg: rgba(255, 255, 255, .7);
}
/* 页脚透明 */
#footer {
	/* 以下代表透明度为1,即完全透明 */
	background: rgba(255,255,255, .0);
}

同样在 _config.butterfly.yml 的inject中引用transpancy.css：

1
2
3
4
# 插入代码到头部 </head> 之前 和 底部 </body> 之前
inject:
  head:
    - <link rel="stylesheet" href="https://cdn.example.com/transpancy.css">

注意，这会让footer页面也呈现透明状，可以根据自己需求修改。

总结

hexo是一个很棒的博客框架，可以利用github page进行托管，这样做的优点是不需要服务器，近乎是0成本，缺点是需要配置很多东西。但如果你喜欢折腾，相信你也一定会从中找到乐趣的。

折腾不止，美化还在继续。

可爱的洁丝小天使