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

本文最后更新于:2021年3月22日 下午

关于本文

本文记录了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/202102261355

 

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

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">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.urdoll.net", 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://urdoll.net", # 已修改-原值:"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
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 # 如果不需要隐藏文章,则删掉本行

备注:设置了默认的缩略图。文章加密使用插件: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 两个插件都失效了。需要等待一段时间,看看是否有人会修复问题。

 

 


捐赠一元,支持我吧!  

注:捐赠时,如在留言中署名,则会被列入感谢名单中。否则,会以佚名身份列入名单。