2020年第3次「居红乡」装修记录

本文最后更新于 2022年3月28日 晚上

关于本文

本文记录了2020年10月28日的一次网站更新，主要是升级了主题 Fluid 的版本。

　

　

站点设置（根目录\_config.yml）

设置网站标题、副标题、作者、语言、时区等

1
2
3
4
5
6
7
8
# Site
title: 居红乡 # 已修改-原值：Hexo
subtitle: 'rsreland.net' # 已修改-原值：''
description: '千年调，一旦空，惟有纸钱灰晚风吹送。' # 已修改-原值：''
keywords:
author: 百二一 # 已修改-原值：John Doe
language: zh-CN # 已修改-原值：en
timezone: 'Asia/Shanghai' # 已修改-原值：''

　

设置网站地址、文章地址格式

1
2
3
4
5
6
7
8
9
# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: https://rsreland.net # 已修改-原值：http://yoursite.com
root: /
permalink: blog/:year:month:day:hour:minute/ # 已修改-原值：:year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

　

设置新建文章的文件名格式

1
2
# Writing
new_post_name: :year:month:day-:title.md # 已修改-原值：:title.md # File name of new posts

　

设置当前所用主题

1
2
3
4
# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: fluid # 已修改-原值：landscape

　

设置网站部署到github和coding

1
2
3
4
5
6
7
8
9
10
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: git # 已修改-原值：''
  repo: https://github.com/rsreland/rsreland.github.io.git # 已修改-新增
  branch: master # 已修改-新增

- type: git # 已修改-新增
  repo: https://e.coding.net/rsreland/r2net/r2net.git # 已修改-新增
  branch: master # 已修改-新增

备注：如上设置，运行 hexo d 命令时，将会把网站同时上传到 github 和 coding。目的是通过智能解析，使国内用户访问coding，国外用户访问github。（还需到域名托管商处设置域名解析）

　

　

主题设置（fluid\_config.yml）

设置标签页图标

1
2
favicon: /img/r2net_favicon.png # 已修改-原值：/img/favicon.png # 网站标签页的 icon
apple_touch_icon: /img/r2net_favicon.png # 已修改-原值：/img/favicon.png # 用于苹果设备的 icon

　

设置标签页标题分隔符

1
title_join_string: ' | ' # 已修改-原值：' - '  # 浏览器标签页中的标题分隔符，效果： 文章名 - 站点名

　

设置图片链接为https

1
force_https: true # 已修改-原值：false  # 强制所有链接升级为 HTTPS（适用于图片等资源出现 HTTP 混入报错）

　

设置代码高亮样式随背景色改变

1
2
3
4
5
6
7
8
code:  # 代码块相关的配置
  copy_btn: true  # 是否开启复制代码的按钮
  highlight:  # 代码高亮
    enable: true
    lib: 'highlightjs'  # 实现高亮的库，可选：highlightjs | prismjs，对应下面的配置项
    highlightjs:
      style: 'Github Gist'  # 高亮样式见：https://highlightjs.org/static/demo/  在页面挑选 style 填入
      bg_color: true # 已修改-原值：false  # 是否根据 style 改变代码背景色，**如果 style 是深色背景别忘了开启此项**

　

设置网站访问统计、运行时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
web_analytics:  # 网页访问统计
  enable: true #已修改-原值：false
  baidu:  # 百度统计的 Key，参见 https://tongji.baidu.com/sc-web/10000033910/home/site/getjs?siteId=13751376 代码获取中 hm.js? 后边的字符串
  google:  # Google 统计的 Tracking ID，参见 https://analytics.google.com/analytics/web/
  gtag:  # Google gtag.js 的媒体资源 ID，参见 https://analytics.google.com/analytics/web/ 中的 管理 -> 媒体资源设置 -> 跟踪 ID
  tencent:  # 腾讯统计的 H5 App id，参见 https://mta.qq.com/h5/manage/ctr_app_manage (开启高级功能才有cid)
    sid:
    cid:
  tajs:   # 腾讯统计早期版站点统计 sID，参见 https://ta.qq.com/#/site/list
  woyaola:  # 51.la 站点统计 ID，参见 https://www.51.la/user/site/index
  cnzz:  12■■■■■390 # 已修改-空值 # 友盟/cnzz 站点统计 web_id，参见 https://web.umeng.com/main.php?c=site&a=show
  leancloud:  # LeanCloud 计数统计，可用于 PV UV 展示，如果 web_analytics.enable 没有开启，PV UV 展示只会查询，不会增加
    app_id: Or■■■■■mzz■■F0Df■■■6q3U■■■■■■oHs■ # 已修改-空值
    app_key: jb■■■8yiw0■■■■■5egu4■■■■ # 已修改-空值
    server_url:  # REST API 服务器地址，国际版不填
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#---------------------------
# 页脚
# Footer
#---------------------------
footer:
  content: '
    <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a>
    <i class="iconfont icon-love"></i>
    <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a>
    <div>
      <span id="timeDate">载入天数...</span>
      <span id="times">载入时分秒...</span>
      <script src="/js/duration.js"></script>
    </div>
  '  # 已修改-新增：<div>……</div>之间的代码 # 页脚第一行文字的 HTML，建议保留 Fluid 的链接，用于向更多人推广本主题
  statistics:  # 展示网站的 PV、UV 统计数
    enable: true # 已修改-原值：false
    source: "leancloud" # 已修改-原值："busuanzi"  # 统计数据来源，可选：busuanzi | leancloud，使用 leancloud 需要在 web_analytics 中设置 api 参数，使用 busuanzi 注意可能间歇抽风
    pv_format: "总访问量 {} 次"  # 显示的文本，{}是数字的占位符（必须包含)，下同
    uv_format: "总访客数 {} 人"

备注：增加“网站运行时间”参考：https://hexo.fluid-dev.com/posts/fluid-footer-custom 。

　

设置导航栏标题、网站目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#---------------------------
# 页头
# Header
#---------------------------
navbar:
  blog_title: 居红乡 # 已修改-原值：Fluid # 导航栏左侧的标题，为空则按 hexo config.title 显示
  ground_glass:  # 导航栏毛玻璃特效，实验性功能，可能会造成页面滚动掉帧和抖动，部分浏览器不支持会自动不生效
    enable: false
    px: 3  # 模糊像素，只能为数字，数字越大模糊度越高
    alpha: 0.7   # 透明度，只能为数字，范围 0~1，数字越大透明度越低，注意透明过度可能看不清菜单字体
  menu:  # 可自行增减，key 用来关联 languages/*.yml，如不存在关联则显示 key 本身的值；icon 是 css class，可以省略；增加 name 可以强制显示指定名称
    - { key: 'home', link: '/', icon: 'iconfont icon-home-fill' }
    - { key: 'archive', link: '/archives/', icon: 'iconfont icon-archive-fill' }
    - { key: 'category', link: '/categories/', icon: 'iconfont icon-category-fill' }
    - { key: 'tag', link: '/tags/', icon: 'iconfont icon-tags-fill' }
    - { key: 'series', link: '/series/', icon: 'iconfont icon-codeforces'} # 已修改-新增
    - { key: 'thanks', link: '/thanks/', icon: 'iconfont icon-bookmark-fill'} # 已修改-新增
    - { key: 'about', link: '/about/', icon: 'iconfont icon-user-fill' }
    - { key: 'links', link: '/links/', icon: 'iconfont icon-link-fill' }  # 已修改-取消注释 # 友链页，把前面#去掉即可展示

（主题根目录\languages\zh-CN.yml）

1
2
3
4
5
6
7
series: # 已修改-新增
  title: 系列
  subtitle: 文章系列

thanks: # 已修改-新增
  title: 感谢
  subtitle: 感谢

备注：增添目录项时，需同步修改 languages\zh-CN.yml 文件，新增翻译项目（如上所示）。

　

设置首页横幅图片、首页副标题、关闭自动摘录、在新窗口打开链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#---------------------------
# 首页
# Index Page
#---------------------------
index:
  banner_img: /img/r2net_banner.jpg # 已修改-原值：/img/default.png  # 首页 Banner 头图，以下相同
  banner_img_height: 100  # 头图高度，屏幕百分比，available: 0 - 100
  banner_mask_alpha: 0.3  # 头图黑色蒙版的透明度，available: 0 - 1.0， 0 是完全透明（无蒙版），1 是完全不透明
  post_default_img: '/img/r2net_thumbnail.png' # 已修改-原值：'' # 默认的文章封面图，当没有指定 index_img 时会使用该图片，若都为空则不显示任何图片
  slogan:  # 首页副标题的独立设置
    enable: true  # 为 false 则不显示任何内容
    text: '如图片无法正常加载，请在本站搜索“图片无法显示”。' # 已修改-原值：'An elegant Material-Design theme for Hexo'  # 为空则按 hexo config.subtitle 显示
  auto_excerpt:
    enable: false # 已修改-原值：true
  post_url_target: _blank # 已修改-原值：_self  # available: _blank | _self
  post_meta: # 是否显示文章信息（时间、分类、标签）
    date: true
    category: true
    tag: true
  post_sticky:  # 文章通过 sticky 排序后，在首页文章标题前显示图标
    enable: true
    icon: 'iconfont icon-top'

　

设置展示页面横幅图片

1
2
3
4
5
6
# 通过 hexo new page 命令创建的页面
# Custom Page
page:
  banner_img: /img/r2net_banner.jpg # 已修改-原值：/img/default.png
  banner_img_height: 70 # 已修改-原值：60  # available: 0 - 100
  banner_mask_alpha: 0.3  # available: 0 - 1.0

　

设置文章页面横幅图片、阅读次数、文章更新时间、版权声明、开启评论

1
2
3
4
5
6
#---------------------------
# 文章页
# Post Page
#---------------------------
post:  # 部分配置同时控制自定义页面，注意备注
  banner_img: /img/r2net_banner.jpg # 已修改-原值：/img/default.png
1
2
3
4
views:  # 阅读次数
  enable: true # 已修改-原值：false
  source: leancloud # 已修改-原值："busuanzi"  # 统计数据来源，可选：busuanzi | leancloud，使用 leancloud 需要在 web_analytics 中设置 api 参数，使用 busuanzi 注意可能间歇抽风
  format: "{} 次"
1
2
3
4
updated:  # 在文章开头显示文章更新时间，该时间默认是 md 文件更新时间，可通过 front-matter 中 `updated` 手动指定（和 date 一样格式）
  enable: true # 已修改-原值：false
  content: 本文最后更新于：  # 描述文字
  relative: false  # 是否使用相对时间表示，比如："3 天前"
1
2
3
copyright:  # 版权声明
  enable: true
  content: '本站所有文章由「百二一」所著，除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="nofollow noopener">CC BY-NC-SA 4.0 协议</a> ，转载请注明出处！'
1
2
3
comments:  # 评论
  enable: true # 已修改-原值：false  # 开启评论
  type: valine # 已修改-原值：disqus  # 指定使用的评论模块  available: disqus | valine | gitalk | utterances | changyan | livere | remark42

　

设置“Valine”评论接口

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Valine
# 完整文档 https://valine.js.org/configuration.html
# 注意：下列配置项中的 true/false 不要用引号括起来
valine:
  appid: Or■■■■■mzz■■F0Df■■■6q3U■■■■■■oHs■ # 已修改-空值 # 从 LeanCloud 的应用中得到的 appId
  appkey: jb■■■8yiw0■■■■■5egu4■■■■ # 已修改-空值 # 从 LeanCloud 的应用中得到的 APP Key
  placeholder: 说点什么 # 评论框占位提示符
  path: window.location.pathname # 当前文章页路径，用于区分不同的文章页，以保证正确读取该文章页下的评论列表
  avatar: retro # Gravatar 头像展示方式
  meta: ['nick', 'mail', 'link']  # 评论者相关属性
  pageSize: 10 # 评论列表分页，每页条数
  lang: zh-CN # zh-CN | zh-TW | en | ja
  highlight: false # 代码高亮
  recordIP: true # 已修改-原值：false # 是否记录评论者IP
  serverURLs:  # REST API 服务器地址，国际版不填

　

设置归档页横幅图片、分类页横幅图片、标签页横幅图片

1
2
3
4
5
6
7
8
9
#---------------------------
# 归档页
# Archive Page
#---------------------------
archive:
  banner_img: /img/r2net_banner.jpg # 已修改-原值：/img/default.png
  banner_img_height: 70 # 已修改-原值：60  # available: 0 - 100
  banner_mask_alpha: 0.3  # available: 0 - 1.0
  subtitle:  # 打字机内容
1
2
3
4
5
6
7
8
9
10
11
12
#---------------------------
# 分类归档页
# Categories Page
#---------------------------
category:
  banner_img: /img/r2net_banner.jpg # 已修改-原值：/img/default.png
  banner_img_height: 70 # 已修改-原值：60  # available: 0 - 100
  banner_mask_alpha: 0.3  # available: 0 - 1.0
  subtitle:  # 打字机内容
  post_limit: 10  # 单个分类中折叠展示文章数的最大值，超过限制会显示 More
  order_by: '-length'  # 排序字段，前面带减号是倒序，不带减号是正序，可选项：name | length
  collapse_depth: 1 # 已修改-原值：0  # 层级的折叠深度，0 是全部折叠，大于 0 后如果存在子分类则默认展开
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#---------------------------
# 标签归档页
# Tags Page
#---------------------------
tag:
  banner_img: /img/r2net_banner.jpg # 已修改-原值：/img/default.png
  banner_img_height: 70 # 已修改-原值：80  # available: 0 - 100
  banner_mask_alpha: 0.3  # available: 0 - 1.0
  subtitle:  # 打字机内容
  tagcloud: # 标签云
    min_font: 15
    max_font: 30
    unit: px  # 字号单位
    start_color: "#BBBBEE"
    end_color: "#337ab7"

　

设置关于页横幅图片、头像、名字、介绍等

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#---------------------------
# 关于页
# About Page
#---------------------------
about:  # 关于页需要手动创建，具体请见：https://hexo.fluid-dev.com/docs/guide/#%E5%85%B3%E4%BA%8E%E9%A1%B5
  banner_img: /img/r2net_banner.jpg # 已修改-原值：/img/default.png
  banner_img_height: 70 # 已修改-原值：60  # available: 0 - 100
  banner_mask_alpha: 0.3  # available: 0 - 1.0
  subtitle:  # 打字机内容
  avatar: /img/r2net_avatar.png #已修改-原值：/img/avatar.png # 头像
  name: 百二一 #已修改-原值：myname
  introduce: '不要停止思考。' # 已修改-原值：'一句简短的介绍' # 支持 HTML
  icons: # 更多图标可从 https://hexo.fluid-dev.com/docs/icon/ 查找，class 代表图标的 css class
    # 已修改-删除：- { class: 'iconfont icon-github-fill', link: 'https://github.com', tip: 'GitHub' }
    # 已修改-删除：- { class: 'iconfont icon-douban-fill', link: 'https://douban.com', tip: '豆瓣' }
    # 已修改-删除：- { class: 'iconfont icon-wechat-fill', qrcode: '/img/favicon.png' }  # 添加 qrcode 后，点击不再跳转，而是悬浮二维码，需要指定 image
    - { class: 'iconfont icon-images', link: 'https://img.50121.top', tip: '图片库' } # 已修改-新增
    - { class: 'iconfont icon-speakernotes', link: 'https://leancloud.app/', tip: '评论数据库' } # 已修改-新增
    - { class: 'iconfont icon-plan', link: 'https://www.umeng.com/', tip: '统计平台' } # 已修改-新增

　

设置404页横幅图片、打字机内容

1
2
3
4
5
6
7
8
9
#---------------------------
# 404页
# 404 Page
#---------------------------
page404:
  banner_img: /img/r2net_banner.jpg # 已修改-原值：/img/default.png
  banner_img_height: 85  # available: 0 - 100
  banner_mask_alpha: 0.3  # available: 0 - 1.0
  subtitle: '页面失踪了……（请使用本站“搜索功能”查找您想看的文章。）' # 已修改-原值：'Page not found'  # 打字机内容

　

设置友情链接页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
#---------------------------
# 友链页
# Links Page
#---------------------------
links:
  banner_img: /img/r2net_banner.jpg # 已修改-原值：/img/default.png
  banner_img_height: 70 # 已修改-原值：60  # available: 0 - 100
  banner_mask_alpha: 0.3  # available: 0 - 1.0
  subtitle:  # 打字机内容
  items:  # intro 与 image 可省略
    - {
      title: 'UrDoll', # 已修改-原值：'Fluid Docs',
      intro: '赋予机器与灵魂。', # 已修改-原值：'主题使用指南',
      link: 'https://50121.top', # 已修改-原值：'https://hexo.fluid-dev.com/docs/',
      image: '/img/r2net_link.png' # 已修改-原值：'/img/favicon.png'
    }
    - {
      title: '节操导航', # 已修改-原值：'Fluid Repo',
      intro: '动漫导航', # 已修改-原值：'主题 GitHub 仓库',
      link: 'http://jiecao12.com/', # 已修改-原值：'https://github.com/fluid-dev/hexo-theme-fluid',
      image: '/img/r2net_link.png' # 已修改-原值：'/img/favicon.png'
    }

　

　

修改代码

添加文章打赏

1
2
3
4
5
6
7
8
9
10
<!-- 已修改-新增：打赏代码 开始 -->
<div>
  <details style="text-align:center">
    <summary style="font-size:1.7em; color: #f2481b;">捐赠一元，支持我们！</summary>
    <img src="/img/r2net_alipay.jpg" style="width:150px; height:150px;">　　
    <img src="/img/r2net_wechatpay.jpg" style="width:150px; height:150px;">
  </details>
  <br/><br/>
</div>
<!-- 已修改-新增：打赏代码 结束 -->

备注：需修改 主题根目录\layout\post.ejs 文件，将上述代码放到适当的地方。收款二维码放到 \source\img\ 目录下。

　

　

修改模板（根目录\scaffolds\）

设定展示页面模板正文样式

1
2
3
<div class="markdown-body">
正文
</div>

备注：根据主题官方文档，正文默认没有 Markdown 样式，如果希望和文章相同的样式，可以加上上述代码。

　

添加文章模板分类、首页缩略图、本页横幅图片、密码属性

1
2
3
4
5
6
7
8
9
10
title: {{ title }}
date: {{ date }}
categories:
tags:
banner_img: /img/r2net_banner.jpg # 如不需要设置文章顶部横幅，则删掉本行
index_img: /img/r2net_thumbnail.png # 如不需要设置首页缩略图，则删掉本行
excerpt: 摘要
sticky: 100 # 如不需要手动排序文章，则删掉本行。数值越大，文章越靠前，可达到置顶效果。
password: 123456 # 如不需要加密文章，则删掉本行
hide: true # 如果不需要隐藏文章，则删掉本行

备注：设置了默认的缩略图。文章加密使用插件：https://github.com/D0n9X1n/hexo-blog-encrypt 。

　

　

其他优化

加速图片加载速度

通过将「图片库」托管到 Vercel 上，利用它自带的 CDN 对图片加载速度进行提升。

Vercel：https://vercel.com

　

　

待增加功能

增加推荐文章功能

插件：hexo-related-popular-posts

地址：https://github.com/tea3/hexo-related-popular-posts

插件：hexo-related-posts

地址：https://github.com/sergeyzwezdin/hexo-related-posts

备注：在 Hexo 5 以上版本，hexo-related-popular-posts 失效了，可能需要尝试 hexo-related-posts 插件。需要等待一段时间，看看是否有人会修复问题。

　

　

捐赠一元，支持一下！ 　

注：捐赠时如在留言中注明网名或昵称，即可被列入到感谢名单中。否则，会以佚名身份列入名单。

本站 > 建造
#Hexo #搭建博客 #Fluid
2020年第3次「居红乡」装修记录
https://rsreland.net/blog/202010281754/
作者
百二一
发布于
2020年10月28日
许可协议