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
21
22
23
24
25
/* 文章页背景 */
.layout_post > #post {
  /* 以下代表透明度为0.7 可以自行修改*/
  background: rgba(255, 255, 255, 0.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, 0.7);
}
/*侧边卡片的透明度 */
:root {
  --card-bg: rgba(255, 255, 255, 0.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 成本，缺点是需要配置很多东西。但如果你喜欢折腾，相信你也一定会从中找到乐趣的。

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

可爱的洁丝小天使