2024

2024/03

2024-03-27

花了将近 4 个小时，终于成功上线我的 Hexo 博客了，当然时间主要是花在了写这篇 《Hexo 博客搭建新手教程》上，截点好看的图是真麻烦啊。

修改 Logo、标题，字体

日期：2024-03-28

  • 完善 Logo、Title
  • 自定义博客字体
  • 优化永久链接格式
  1. 听从作者的 指导 ，直接在根目录创建主题 _config.stellar.yml 文件。后面的所有代码都是直接放在这个文件内
  2. 修改网页字体为霞鹜文楷，直接在 _config.stellar.yml 文件内使用以下代码
1
2
3
inject:
  head:
    - <link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-screen-webfont/style.css" media="print" onload="this.media='all'"> #字体
1
2
3
style:
  font-family:
    body: '"LXGW WenKai Screen", sans-serif'
  1. 但是文章的标题也变成霞鹜文楷了，不太好看，有时间得找个办法修改

注：修改为鸿蒙字体的方法见 👉 https://www.panoshu.top/blog/7f3b7e3a/

修改永久链接格式

日期：2024-03-28

修改原因：

Hexo 默认文章链接生成规则是按照年、月、日、标题来生成的。一旦文章标题或者发布时间被修改，URL 就会发生变化，之前文章地址也将不可访问。

修改方法：安装 hexo-abbrlink 插件

  1. 在终端中，使用 CD 命令进入 Hexo 的文件夹
  2. 使用以下代码安装插件
1
npm install hexo-abbrlink --save
  1. 修改博客根目录配置文件 _config.yml 的 permalink
1
2
# permalink: :year/:month/:day/:title/
permalink: posts/:abbrlink.html  # posts 是可以自定义的前缀
  1. 将以下代码放到博客根目录的 _config.stellar.yml Stellar 主题文件中
1
2
3
4
5
## abbrlink config
abbrlink:
  alg: crc32      #support crc16(default) and crc32 进制
  rep: hex        #support dec(default) and hex  算法
  drafts: false   #(true)Process draft,(false)Do not process draft. false(default)

一些参考过的文章

添加 51la 流量统计代码

不蒜子

尝试了一下 不蒜子 的统计代码，非常简单，但是效果太简陋了，而且会将本地访问的流量统计进去。

51La

51la 目前看来个人用户完全可以免费使用，安装方法也很简单。

  1. 注册账号，并打开代码配置面板
  2. 复制如下图所示的参数

  1. 将这串代码粘贴到 Hexo 文件夹根目录的 _config.stellar.yml 文件内

代码格式如下：

1
2
3
4
footer:
  content: |
    <script charset="UTF-8" id="LA_COLLECT" src="//sdk.51.la/js-sdk-pro.min.js"></script>
    <script>LA.init({id:"",ck:""})</script>

注意，上面的代码不能直接复制，你需要替换成你从 51 中获取的代码，另外代码生效的时间有点慢，需要稍等几分钟。

网站备案

  • 3 月 28 日，根据腾讯云的 这份文档，提交了备案信息，等待备案中。
  • 4 月 9 日，收到备案通过的短信

日期：2024-03-29

Obsidian 管理 Hexo 文档库

相关记录见：

修改 Stellar 主题细节

侧边栏顶部导航按钮

最终目的是要实现这样的导航栏按钮效果：

Arc20240329Stellar：使用 Stellar 主题的博客 - XAOXUU004826@2x.png

首先需要在你想要跳转的目标文章的 Front-Matter 位置添加一个 menu_id 字段，并给这个字段一个自定义的值，例如下图我就给 hello-world 这篇文章设置了 test 的 menu_id：

Obsidian20240329hello-world - Hexo - Obsidian v1.5.11004828@2x.png

然后在 Hexo 文件夹根目录的 _config.stellar.yml 文件内，添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
# 侧边栏主功能导航菜单

menubar:
	columns: 4 # 一行多少个
	items: # 可按照自己需求增加，符合以下格式即可
		- id: test # 页面中高亮的 menu_id
		theme: '#1BCDFC' # 高亮时的颜色，仅 svg 中 fill="currentColor" 时有效
		icon: solar:documents-bold-duotone # 支持 svg/img 标签，可以定义在 icons.yml 文件中，也支持外部图片的 URL
		title: 博客 # 标题
		url: https://space.bilibili.com/319417 # 跳转链接，支持相对路径和绝对路径

其中 id 后面的值对应自定义的 id 值，url 则如注释所写，支持绝对路径或相对路径。

开发者写的教程如下：

Arc20240329Stellar：侧边栏配置 - XAOXUU004830@2x.png

侧边栏底部社交按钮

在 Hexo 文件夹根目录的 _config.stellar.yml 文件内，添加以下代码：

1
2
3
4
5
6
7
8
9
10
11
footer:
	social:
		bilibili:
			icon: '<img src="https://pic.eryinote.com/PicGo/202403292128856.svg"/>'
			url: https://space.bilibili.com/319417
		Notion:
			icon: '<img src="https://pic.eryinote.com/PicGo/202403292126678.svg"/>'
			url: https://sspai.com/series/303/list
		Twitter:
			icon: '<img src="https://pic.eryinote.com/PicGo/202403292132510.svg"/>'
			url: https://twitter.com/eryidebiji

就能实现如下效果：

Arc20240330二一的笔记004832@2x.png

2024-03-31

安装「相关文章推荐」插件

  1. CD 进入 Hexo 文件夹，并执行以下命令
1
npm i hexo-related-popular-posts
  1. 在主题配置文件中开启：
1
2
3
4
5
article:
  # npm i hexo-related-popular-posts
  related_posts:
    enable: true
    title: 您可能感兴趣的文章

但是似乎没有生效？可能是文章数量不够多，需要再多发几篇文章试试。

[X] 修改文章许可协议

创建独立页面：About

  1. 在 Source 文件夹创建 about 文件夹

2024/04

许可协议

本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。