绑定域名

xxx.github.io 这种统一标识的域名冗长难记，可以绑定自己的个性化域名。

  1. 购买域名，并且将域名的 @、www 子域名以 CNAME 的方式解析到 agedcat.github.io;

  2. 在 Github 仓库中，选择 Settings – Pages，在 Custom domain 这里， 输入个性化域名,保存并勾选 enforce https 选项；

  3. 在本地博客文件夹中，./source 目录下，创建一个记事本文件，输入你购买的域名，文件命名为 CNAME，保存类型为所有文件(*.*)；

  4. 输入下述命令，将改动的配置同步到 Github：

1
2
3
hexo clean 
hexo g
hexo d

完成后在浏览器中输入个性化域名，验证效果。

自定义主题

默认的 Hexo 博客主题为 landscape，功能简陋，可以根据自己的爱好更换其他主题。

我选择的主题为 Butterfly, 具体过程参见 安装和配置文档。

大部分设置可以参见官方文档，部分配置需要自行修改。

永久链接设置

  • 安装插件
1
npm install hexo-abbrlink --save
  • 修改配置文件

将根目录站点配置文件 _config.yml 的对应内容修改为：

1
2
3
4
permalink: posts/:abbrlink.html  # 此处可以自己设置，也可以直接使用 /:abbrlink  posts也可改也可以去掉
abbrlink:
    alg: crc32   #算法： crc16(default) and crc32
    rep: hex     #进制： dec(default) and hex

社交图标设置

Butterfly 虽然支持调用 font-awesome v5 图标，但是 Font Awesome 无论是 v4 还是 v5 支持的图标都很少，所以考虑使用阿里 iconfont 图标库。

  • 进入 阿里 iconfont 图标库 ，注册账号，选择想要的图标将其加入购物车；

  • 点击购物车选项卡，选择添加至项目，同时新建一个项目，转到项目管理页面；

  • 在项目管理页面，选择 Font class 模式，同时点击查看在线链接，之后点击生成代码，获得在线链接；

  • 点击在线链接，得到了一个 CSS 文件，右键另存为到 \themes\butterfly\source\css 文件夹下 font.css 文件；

  • 在 Butterfly 主题配置文件 _config.butterfly.yml 中修改对应配置，以 inject 的方式引入自定义 CSS 文件；

  • Butterfly 主题配置文件 _config.butterfly.yml 中社交图标设置如下所示：

1
2
3
4
5
6
social:
  iconfont icon-github: https://github.com/agedcat || Github
  iconfont icon-gitee: https://gitee.com/agedcat || Gitee
  iconfont icon-youtube: https://www.youtube.com/channel/UCbG3UhFWruKnERPcdYkDRLQ || Youtube
  iconfont icon-bilibili: https://space.bilibili.com/49241011 || bilibili
  iconfont icon-email: mailto:admin@agedcat.com || Email
  • 如果图标比较小，可以在 font.css 文件中修改对应配置：
1
2
3
4
5
6
7
.iconfont {
  font-family: "iconfont" !important;
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

备案信息设置

将根目录站点配置文件 _config.yml 的对应内容修改为：

1
2
3
4
5
6
footer:
  owner:
    enable: true
    since: 2022
  custom_text: <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">陇ICP备2021000516号-1</a><br /><img src="https://picbed.agedcat.com/config/beian.png"> <a href="https://www.beian.gov.cn/portal/index.do" target="_blank" rel="nofollow" ><i class="police-ico"></i>甘公网安备 62082602000159号</a>
  copyright: true # Copyright of theme and framework

背景图优化

参见 Butterfly主题 一图流背景与顶部图修改。

参考资料