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 插件。需要等待一段时间,看看是否有人会修复问题。

 

 


捐赠一元,支持一下!  

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


2020年第3次「居红乡」装修记录
https://rsreland.net/blog/202010281754/
作者
百二一
发布于
2020年10月28日
许可协议