2021年第1次「居红乡」装修记录

本文最后更新于 2024年2月16日 下午

关于本文

本文记录了2021年2月26日的一次网站更新，主要是升级了 Hexo 和 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
# 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/

备注：设置后的文章链接样式类似 https://rsreland.net/blog/202102261323 。

　

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

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

备注：设置后的文章原始文件的命名样式类似 20210226-2021年第1次「居红乡」装修记录.md 。

　

设置当前所用主题

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
3
4
5
6
7
# 用于浏览器标签的图标
# Icon for browser tab
favicon: /img/r2net_favicon.png # 已修改-原值：/img/favicon.png

# 用于苹果设备的图标
# Icon for Apple touch
apple_touch_icon: /img/r2net_favicon.png # 已修改-原值：/img/favicon.png

　

设置标签页标题分隔符

1
2
3
# 浏览器标签页中的标题分隔符，效果： 文章名 - 站点名
# Title separator in browser tab, eg: article - site
title_join_string: ' | ' # 已修改-原值：' - '

　

设置图片链接为https

1
2
3
# 强制所有链接升级为 HTTPS（适用于图片等资源出现 HTTP 混入报错）
# Force all links to be HTTPS (applicable to HTTP mixed error)
force_https: true # 已修改-原值：false

　

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

1
2
3
# 是否根据 style 改变代码背景色（如果 style 是深色背景别忘了开启此项）
# If true, the code background will change color based on the style (If style has a dark background, don't forget to true)
bg_color: true # 已修改-原值：false

　

设置网站访问统计和展示

1
2
3
4
# 网页访问统计
# Analysis of website visitors
web_analytics:  # 网页访问统计
  enable: true #已修改-原值：false
1
2
3
4
# 友盟/cnzz 站点统计 web_id
# cnzz analytics
# See: https://web.umeng.com/main.php?c=site&a=show
cnzz: 12■■■■■390 # 已修改-空值
1
2
3
4
5
6
7
8
# LeanCloud 计数统计，可用于 PV UV 展示，如果 `web_analytics: enable` 没有开启，PV UV 展示只会查询不会增加
# LeanCloud count statistics, which can be used for PV UV display. If `web_analytics: enable` is false, PV UV display will only query and not increase
leancloud:
  app_id: EK■■■■■IRB■■pmdh■■■D7sQ■■■■■■bMM■ # 已修改-空值
  app_key: 3x■■■OaU8o■■■■■n0JVL■■■■ # 已修改-空值
  # REST API 服务器地址，国际版不填
  # Only the Chinese mainland users need to set
  server_url:

（以下代码在设置「页脚」的位置处）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 展示网站的 PV、UV 统计数
# Display website PV and UV statistics
statistics:
  enable: true # 已修改-原值：false

  # 统计数据来源，如果使用 leancloud 需要设置 `web_analytics: leancloud` 中的参数；如果使用 busuanzi 可能会有请求失败的情况
  # Data source. If use leancloud, you need to set the parameter in `web_analytics: leancloud`
  # Options: busuanzi | leancloud
  source: "leancloud" # 已修改-原值："busuanzi"

  # 页面显示的文本，{}是数字的占位符（必须包含)，下同
  # Displayed text, {} is a placeholder for numbers (must be included), the same below
  pv_format: "总访问量 {} 次"
  uv_format: "总访客数 {} 人"

备注：设置网站的「访问统计功能」使用 cnzz 和 leancloud 两个提供商的统计服务。

　

设置导航栏标题

1
2
3
4
5
6
# 导航栏的相关配置
# Navigation bar
navbar:
  # 导航栏左侧的标题，为空则按 hexo config 中 `title` 显示
  # The title on the left side of the navigation bar. If empty, it is based on `title` in hexo config
  blog_title: "居红乡" # 已修改-原值："Fluid"

备注：设置导航栏标题为 居红乡 。

　

设置导航栏的网站目录

1
2
3
4
5
6
7
8
9
10
11
# 导航栏菜单，可自行增减，key 用来关联 languages/*.yml，如不存在关联则显示 key 本身的值；icon 是 css class，可以省略；增加 name 可以强制显示指定名称
# Navigation bar menu. `key` is used to associate languages/*.yml. If there is no association, the value of `key` itself will be displayed; if `icon` is a css class, it can be omitted; adding `name` can force the display of the specified name
menu:
  - { 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
#---------------------------
# 页脚
# Footer
#---------------------------
footer:
  # 页脚第一行文字的 HTML，建议保留 Fluid 的链接，用于向更多人推广本主题
  # HTML of the first line of the footer, it is recommended to keep the Fluid link to promote this theme to more people
  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>之间的代码

（主题根目录\source\js\duration.js）

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
26
27
!(function() {
    function update() {
      var now = new Date();
      var grt = new Date("2014-05-02 00:00:00");  /** 此处是计时的起始时间 **/
      now.setTime(now.getTime()+250);
      days = (now - grt ) / 1000 / 60 / 60 / 24;
      dnum = Math.floor(days);
      hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum);
      hnum = Math.floor(hours);
      if(String(hnum).length === 1 ){
        hnum = "0" + hnum;
      }
      minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
      mnum = Math.floor(minutes);
      if(String(mnum).length === 1 ){
        mnum = "0" + mnum;
      }
      seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
      snum = Math.round(seconds);
      if(String(snum).length === 1 ){
        snum = "0" + snum;
      }
      document.getElementById("timeDate").innerHTML = "「居红乡」从2014年至今，已运行&nbsp"+dnum+"&nbsp天";
      document.getElementById("times").innerHTML = hnum + "&nbsp小时&nbsp" + mnum + "&nbsp分&nbsp" + snum + "&nbsp秒";
    }
    setInterval(update, 1000);
  })();

备注：修改设置文件的同时，需新增 duration.js 文件，内容如上。增加“网站运行时间”参考：https://hexo.fluid-dev.com/posts/fluid-footer-custom 。

　

设置首页横幅图片

1
2
3
4
5
6
7
8
#---------------------------
# 首页
# Home Page
#---------------------------
index:
  # 首页 Banner 头图，可以是相对路径或绝对路径，以下相同
  # Path of Banner image, can be a relative path or an absolute path, the same on other pages
  banner_img: /img/r2net_banner.jpg # 已修改-原值：/img/default.png

　

设置首页副标题

1
2
3
4
5
6
7
8
# 首页副标题的独立设置
# Independent config of home page subtitle
slogan:
  enable: true

  # 为空则按 hexo config.subtitle 显示
  # If empty, text based on `subtitle` in hexo config
  text: "我们的头顶，还有广阔的星空！" # 已修改-原值："An elegant Material-Design theme for Hexo"

　

设置关闭自动摘录

1
2
3
4
# 自动截取文章摘要
# Auto extract post
auto_excerpt:
  enable: false # 已修改-原值：true

　

设置在新窗口打开链接

1
2
3
4
# 打开文章的标签方式
# The browser tag to open the post
# Available: _blank | _self
post_url_target: _blank # 已修改-原值：_self

　

设置展示页的横幅图片

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
7
8
#---------------------------
# 文章页
# Post Page
#---------------------------
post:
  banner_img: /img/r2net_banner.jpg # 已修改-原值：/img/default.png
  banner_img_height: 70
  banner_mask_alpha: 0.3

　

设置文章在首页的缩略图

1
2
3
# 文章在首页的默认封面图，当没有指定 index_img 时会使用该图片，若两者都为空则不显示任何图片
# Path of the default post cover when `index_img` is not set. If both are empty, no image will be displayed
default_index_img: /img/r2net_thumbnail.jpg # 已修改-空值

　

设置文章页展示文章阅读次数

1
2
3
4
5
6
7
8
9
# 浏览量计数
# Number of visits
views:
  enable: true # 已修改-原值：false
  # 统计数据来源
  # Data Source
  # Options: busuanzi | leancloud
  source: leancloud # 已修改-原值："busuanzi"
  format: "{} 次"

　

设置文章页展示文章更新时间

1
2
3
4
# 在文章开头显示文章更新时间，该时间默认是 md 文件更新时间，可通过 front-matter 中 `updated` 手动指定（和 date 一样格式）
# Update date is displayed at the beginning of the post. The default date is the update date of the md file, which can be manually specified by `updated` in front-matter (same format as date)
updated:
  enable: true # 已修改-原值：false

　

设置文章页展示的版权声明

1
2
3
4
5
6
# 版权声明，会显示在每篇文章的结尾
# Copyright, will be displayed at the end of each post
copyright:
  enable: true
  content: '本站所有文章由「百二一」所著，除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" rel="nofollow noopener">署名-非商业性使用-相同方式共享4.0国际(CC BY-NC-SA 4.0)</a> 协议，转载请注明出处！' # 已修改-原值：'本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！'

　

设置网站开启评论功能

1
2
3
4
5
6
7
8
# 评论插件
# Comment plugin
comments:
  enable: true # 已修改-原值：false
  # 指定的插件，需要同时设置对应插件的必要参数
  # The specified plugin needs to set the necessary parameters at the same time
  # Options: utterances | disqus | gitalk | valine | waline | changyan | livere | remark42 | twikoo
  type: valine # 已修改-原值：disqus

（以下代码在「评论」位置处。）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# Valine
# 基于 LeanCloud
# Based on LeanCloud
# See: https://valine.js.org/configuration.html
valine:
  appid: EK■■■■■IRB■■pmdh■■■D7sQ■■■■■■bMM■ # 已修改-空值
  appkey: 3x■■■OaU8o■■■■■n0JVL■■■■ # 已修改-空值
  placeholder: 说点什么
  path: window.location.pathname
  avatar: retro
  meta: ['nick', 'mail', 'link']
  pageSize: 10
  lang: zh-CN
  highlight: false
  recordIP: true # 已修改-原值：false
  serverURLs:

　

设置归档页横幅图片

1
2
3
4
5
6
7
#---------------------------
# 归档页
# Archive Page
#---------------------------
archive:
  banner_img: /img/r2net_banner.jpg # 已修改-原值：/img/default.png
  banner_img_height: 70 # 已修改-原值：60

　

设置分类页横幅图片

1
2
3
4
5
6
7
8
#---------------------------
# 分类页
# Category Page
#---------------------------
category:
  enable: true
  banner_img: /img/r2net_banner.jpg # 已修改-原值：/img/default.png
  banner_img_height: 70 # 已修改-原值：60

　

设置分类页目录折叠深度

1
2
3
# 层级的折叠深度，0 是全部折叠，大于 0 后如果存在子分类则默认展开
# Collapse depth. If 0, all posts collapsed. If greater than 0, it will be expanded by default if there are subcategories
collapse_depth: 1 # 已修改-原值：0

　

设置标签页横幅图片

1
2
3
4
5
6
7
8
#---------------------------
# 标签页
# Tag Page
#---------------------------
tag:
  enable: true
  banner_img: /img/r2net_banner.jpg # 已修改-原值：/img/default.png
  banner_img_height: 70 # 已修改-原值：80

　

设置关于页横幅图片

1
2
3
4
5
6
7
8
#---------------------------
# 关于页
# About Page
#---------------------------
about:
  enable: true
  banner_img: /img/r2net_banner.jpg # 已修改-原值：/img/default.png
  banner_img_height: 70 # 已修改-原值：60

　

设置关于页的作者头像、名字、介绍

1
2
3
4
5
6
7
8
9
10
11
12
13
#---------------------------
# 关于页
# About Page
#---------------------------
about:
  enable: true
  banner_img: /img/r2net_banner.jpg # 已修改-原值：/img/default.png
  banner_img_height: 70 # 已修改-原值：60
  banner_mask_alpha: 0.3
  subtitle:  # 打字机内容
  avatar: /img/r2net_avatar.png #已修改-原值：/img/avatar.png
  name: 百二一 #已修改-原值："Fluid"
  introduce: '不要停止思考。' # 已修改-原值："An elegant theme for Hexo"

　

设置关于页的图标

1
2
3
4
5
6
7
8
9
# 更多图标可从 https://hexo.fluid-dev.com/docs/icon/ 查找，`class` 代表图标的 css class，添加 `qrcode` 后，图标不再是链接而是悬浮二维码
# More icons can be found from https://hexo.fluid-dev.com/docs/en/icon/  `class` is the css class of the icon. If adding `qrcode`, The icon is no longer a link, but a hovering QR code
icons:
  # 已修改-删除：- { 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" }
  - { 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: "统计平台" } # 已修改-新增

　

设置展示页的横幅图片

1
2
3
4
5
6
7
8
9
10
11
#---------------------------
# 自定义页
# Custom Page
#
# 通过 hexo new page 命令创建的页面
# Custom Page through `hexo new page`
#---------------------------
page:
  banner_img: /img/r2net_banner.jpg # 已修改-原值：/img/default.png
  banner_img_height: 70 # 已修改-原值：60
  banner_mask_alpha: 0.3

　

设置404页的横幅图片和内容

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

　

设置友情链接页的横幅图片

1
2
3
4
5
6
7
8
#---------------------------
# 友链页
# Links Page
#---------------------------
links:
  enable: true
  banner_img: /img/r2net_banner.jpg # 已修改-原值：/img/default.png
  banner_img_height: 70 # 已修改-原值：60

　

设置友情链接页面的成员

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# 友链的成员项
# Member item of page
items:
  - {
    title: "UrDoll", # 已修改-原值："Fluid Blog",
    intro: "赋予机器以灵魂。", # 已修改-原值："主题博客",
    link: "https://50121.top", # 已修改-原值："https://hexo.fluid-dev.com/",
    avatar: "/img/r2net_link.png" # 已修改-原值："/img/favicon.png"
  }
  - {
    title: "节操导航", # 已修改-原值："Fluid Docs",
    intro: "动漫导航网站。", # 已修改-原值："主题使用指南",
    link: "http://jiecao12.com/", # 已修改-原值："https://hexo.fluid-dev.com/docs/",
    avatar: "/img/r2net_link.png" # 已修改-原值："/img/favicon.png"
  }
  # 已修改-删除：- {
  # 已修改-删除：  title: "Fluid Repo",
  # 已修改-删除：  intro: "主题 GitHub 仓库",
  # 已修改-删除：  link: "https://github.com/fluid-dev/hexo-theme-fluid",
  # 已修改-删除：  avatar: "/img/favicon.png"
  # 已修改-删除：}

　

　

修改代码

添加文章底部打赏功能

1
2
3
4
5
6
7
8
9
10
11
<!-- 已修改-新增：打赏代码 开始 -->
<hr>
<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;">
    <p>注：捐赠时如在留言中注明网名或昵称，即可被列入到感谢名单中。否则，会以佚名身份列入名单。</p>
  </details>
</div>
<!-- 已修改-新增：打赏代码 结束 -->

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

　

　

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

修改展示页模板的顶部代码（page.md）

1
2
3
4
5
title: {{ title }}
date: {{ date }}
subtitle: 
banner_img: /img/r2net_banner.jpg # 如不需要设置文章顶部横幅，则删掉本行
comments: false

　

修改展示页模板的正文样式（page.md）

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

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

　

修改文章页模板的顶部代码（post.md）

1
2
3
4
5
6
7
8
9
10
11
title: {{ title }}
date: {{ date }}
categories:
tags:
banner_img: /img/r2net_banner.jpg  # 如不需要设置文章顶部横幅，则删掉本行
index_img: /img/r2net_thumbnail.jpg # 如不需要设置首页缩略图，则删掉本行
excerpt: 摘要
sticky: 100    # 如不需要手动排序文章，则删掉本行。数值越大，文章越靠前，可达到置顶效果。
password: 123456 # 如不需要加密文章，则删掉本行
hide: true     # 如果不需要隐藏文章，则删掉本行
copyright: 本文包含非原创内容，版权属于原作者！ # 如果不需要单独设置版权信息，则删掉本行

备注：设置了默认的缩略图。文章加密使用插件：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
2021年第1次「居红乡」装修记录
https://rsreland.net/blog/202102261323/
作者
百二一
发布于
2021年2月26日
许可协议