版权声明优化

目的:修改文章页底部版权声明内容,实现显示 “本文作者”、“本文地址”、“版权声明” 的内容。
目前 Fluid 版本(v1.8.1)中文章末尾版权声明仅设置显示为:
notion image
而看到许多博客文章末尾都有完整的文章信息,例如“本文作者”,“本文地址”,“版权声明”等。
在 Next 等主题中自带文章末尾可以添加“文章链接”,只需要在 _config.yml 中 enable 相应模块即可,效果如下图所示。
notion image
而在 Fluid 主题中则需要用户对相应配置文件进行修改。
在网上搜寻方法时发现 七夏浅笑 针对 Fluid 主题修改的版本实现了版权声明处的文章链接显示。因为都是使用 Fluid 主题,所以想着对方应该能够解答自己的疑惑所以通过邮件进行了联系。很快得到了大佬答复:
notion image
根据大佬的提示(还贴心地标出代码位置,小姐姐很 nice 了),并结合网上相应对版权声明修改的资料进行了操作。
步骤
  1. 打开 themes\fluid\layout 中的 post.ejs 文件;
    1. notion image
  1. 找到以下内容进行修改;
    1. notion image
      将红色部分替换为以下代码:
      替换结果:
      notion image
  1. 保存文件,cmd hexo clean hexo s 查看效果;
    1. 实现目标:版权声明处添加“本文链接”并能自动生成文章链接。
      notion image
  1. cmd hexo g -d 部署博客。Bingo!
修改 Tag 颜色
  1. 根据 官方文档 了解到 Tag 相应的语法;
    1. notion image
  1. 如果要修改 Tag 颜色只需要修改 <p class="note note-warning"> 即可。
错误做法
  1. 修改主题配置文件 config.yml
    1. 一开始笔者以为只需要简单的修改主题配置文件 _config.yml 里面版权声明处,但在“本文链接”无法正常生成链接。即使在“本文链接”后面加上代码仍然失败。
notion image
 hexo s hexo g 生成结果如下图:
notion image
2. 单纯复制修改主题的代码
前面谈到有位小姐姐修改的 Fluid主题 能实现我的目标,我寻思着直接找她改动的代码不就行了吗。于是直接就把相应位置的代码给 copy 了过来,结果造成了页面错误。
notion image
最后进行修改调试,才恢复正常。

添加运行时间

目的:在站点页面页脚处实时显示网站运行时间 & 自定义页脚信息。
步骤
  1. 打开文件夹 \themes\fluid\layout\_partial 下的 footer.ejs 文件。
  1. 在任意处添加如下代码:
  1. 在标注处修改你自己的建站时间,同时自定义显示内容。例如笔者自定义的内容就是 “🚀 for 55 days 18 hr 09 min 37 sec”。
  1. (可选)修改字体样式和大小:
    1. notion image
  1. 修改页脚信息,只需将 footer.ejs 中对应位置改为你想显示的内容即可。例如笔者的代码如下:
  1. 实现效果:
notion image

关于页添加评论

目的:在关于页添加评论功能,以实现更好的博客互动。
本文以 Valine 评论系统作为示范。
步骤
  1. 打开之前自行创建的关于页 .md 文件:
    1. notion image
  1. 在你想要的位置添加 Valine 评论系统的代码。你可在别处 CCS 文件找到你对应的 Valine 评论系统代码,也可以直接复制以下代码(复制用纯文本,这样才是 HTML 代码,否则系统会以为是文章内容代码)。注意将 app_id 和 app_key 换成你自己的。
    1. 实现效果参考:https://erenship.com/about/

更新

由于在使用覆盖方式升级 Fluid 主题到 1.8.3 后关于页评论板块消失。更新添加评论方法。
打开 \themes\fluid\layout 文件下的 about.ejs 文件,在文件末尾添加以下评论代码即可。

自定义字体

目的:在网站中引入自定义字体;
本教程以引入思源宋体为例。
如需引入本地字体,可使用 字蛛(font-spider) 对字体文件进行压缩,但由于未知原因笔者使用字蛛压缩失败。故而使用在线托管字体网址进行字体引用。
字体,作为影响网页美观的重要因素。我们常常需要个性化字体来突显网站的风格。但由于中文字体不同于英文字体只需覆盖 26 个字母 ,中文字体包由于包含大量中文字库,其文件大小通常有几兆甚至十几兆。这给网页浏览来带极大的流量负担,拖慢加载速度,影响用户体验。
在 Fluid 官方文档 中也建议使用系统自带字体。
需要注意:最好使用系统自带的字体,否则需要通过自定义功能额外引入 @font-face,字体一般较大,不建议引入;应当至少添加一个通用的字体族名(如 serif,具体见上方链接文章)。
但是,这怎么能止住我们追求美的脚步呢?

引入字体

2018 年在 Google Fonts 上已经托管了思源宋体,所以我们可以直接通过托管引入到我们的博客中。打开 Google Fonts,搜索思源宋体的英文名:Noto Serif SC,在列表中选择我们个人觉得合适的字体样式,点击右侧的 Select this style,注意此处可根据自己需要选择多个样式。关于字体引用概念和前期准备工作请参考以下教程,在 本地设置 中会针对 Fluid 主题的自定义操作进行讲解。

本地设置

  1. 在按照上述教程将 代码复制好之后,打开 \themes\fluid\layout\_partial 目录下的 head.ejs 文件,将引入链接添加进文档中。
    1. notion image
      notion image
  1. 将字体英文名称添加到 \themes\fluid\source\css\variables\ 目录下的 base.styl 文件中,具体位置为 font-family: 。例如笔者引入的字体位思源宋体,其英文名称为 “Noto Serif SC”。
    1. notion image
至此,我们就完成了自定义字体引入。你可以执行部署命令来检查是否成功引入。

评论样式美化

目的:展现评论者身份标识
由于当前版本的 Valine 不能实现评论者身份标识的功能,所以我们需要使用魔改版的 Valine。
  • 打开 \themes\fluid\layout\_partial\comments 中的 valine.ejs 文件,替换红标处内容为https://cdn.jsdelivr.net/gh/HCLonely/Valine@latest/dist/Valine.min.js
  • 新增以下内容。
notion image
  • 打开主题配置文件 \MyBlog\source\_data 在 valine 评论系统处新增
notion image
  • hexo s , hexo g -d 重新部署便能看到效果。
  • 若想在关于页也实现这样的效果,则对应地在about.ejs 里更新相关代码。
效果图:
notion image
badge