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

本文最后更新于:2020年11月11日 上午

关于本文

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

 

 

站点设置(根目录\_config.yml)

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

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

 

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

# 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

 

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

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

 

设置当前所用主题

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

 

设置网站部署到github和coding

# 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)

设置标签页图标

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

 

设置标签页标题分隔符

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

 

设置图片链接为https

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

 

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

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 是深色背景别忘了开启此项**

 

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

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 服务器地址,国际版不填
#---------------------------
# 页脚
# 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/

 

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

#---------------------------
# 页头
# 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)

series: # 已修改-新增
  title: 系列
  subtitle: 文章系列

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

备注:增添目录项时,需同步修改 languages\zh-CN.yml 文件,新增翻译项目(如上所示)。

 

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

#---------------------------
# 首页
# 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'

 

设置展示页面横幅图片

# 通过 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

 

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

#---------------------------
# 文章页
# Post Page
#---------------------------
post:  # 部分配置同时控制自定义页面,注意备注
  banner_img: /img/r2net_banner.jpg # 已修改-原值:/img/default.png
views:  # 阅读次数
  enable: true # 已修改-原值:false
  source: leancloud # 已修改-原值:"busuanzi"  # 统计数据来源,可选:busuanzi | leancloud,使用 leancloud 需要在 web_analytics 中设置 api 参数,使用 busuanzi 注意可能间歇抽风
  format: "{} 次"
updated:  # 在文章开头显示文章更新时间,该时间默认是 md 文件更新时间,可通过 front-matter 中 `updated` 手动指定(和 date 一样格式)
  enable: true # 已修改-原值:false
  content: 本文最后更新于:  # 描述文字
  relative: false  # 是否使用相对时间表示,比如:"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> ,转载请注明出处!'
comments:  # 评论
  enable: true # 已修改-原值:false  # 开启评论
  type: valine # 已修改-原值:disqus  # 指定使用的评论模块  available: disqus | valine | gitalk | utterances | changyan | livere | remark42

 

设置“Valine”评论接口

# 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 服务器地址,国际版不填

 

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

#---------------------------
# 归档页
# 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:  # 打字机内容
#---------------------------
# 分类归档页
# 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 后如果存在子分类则默认展开
#---------------------------
# 标签归档页
# 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"

 

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

#---------------------------
# 关于页
# 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.rsreland.net', tip: '图片库' } # 已修改-新增
    - { class: 'iconfont icon-speakernotes', link: 'https://leancloud.app/', tip: '评论数据库' } # 已修改-新增
    - { class: 'iconfont icon-plan', link: 'https://www.umeng.com/', tip: '统计平台' } # 已修改-新增

 

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

#---------------------------
# 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'  # 打字机内容

 

设置友情链接页面

#---------------------------
# 友链页
# 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://urdoll.net', # 已修改-原值:'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'
    }

 

 

修改代码

添加文章打赏

<!-- 已修改-新增:打赏代码 开始 -->
<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\)

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

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

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

 

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

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

 

 


捐赠一元,支持我们!