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

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

站点设置（根目录\_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

设置文章文件的名称格式

1 2	`# 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）

设置标签页图标

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 混入报错）`

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

highlight: # 代码高亮
  enable: true
  style: 'Github Gist'  # 高亮样式见：https://highlightjs.org/static/demo/  在页面挑选 style 填入
  bg_color: true # 已修改-原值：false  # 是否根据 style 改变代码背景色，**如果 style 是深色背景别忘了开启此项**
  copy_btn: true  # 是否开启复制代码的按钮

设置网站访问统计

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:
  statistics:  # 展示网站的 PV、UV 统计数
    enable: true # 已修改-原值：false
    source: "leancloud" # 已修改-原值："busuanzi"  # 统计数据来源，可选：busuanzi | leancloud，使用 leancloud 需要在 web_analytics 中设置 api 参数，使用 busuanzi 注意可能间歇抽风
    pv_format: "总访问量 {} 次"  # 显示的文本，{}是数字的占位符（必须包含)，下同
    uv_format: "总访客数 {} 人"

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

#---------------------------
# 页头
# 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' }  # 已修改-取消注释 # 友链页，把前面#去掉即可展示

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: 'rsreland.net' # 已修改-原值：'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

设置展示页面横幅图片

# 通过 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 天前"

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: livere # 已修改-原值：disqus  # 指定使用的评论模块  available: disqus | valine | gitalk | utterances | changyan | livere  推荐 utterances

1
2
3

custom:  # 文章底部自定义内容
  enable: true # 已修改-原值：false
  content: '<p style="text-align:center"><img src="/img/r2net_alipay.jpg" style="width:150px; height:150px;"><span  style="color: red ">捐赠一元，支持我们！</span><img src="/img/r2net_wechatpay.jpg" style="width:150px; height:150px;"></p>' # 已修改-原值：'<img src="https://octodex.github.com/images/jetpacktocat.png" class="rounded mx-auto d-block mt-5" style="width:150px; height:150px;">' # 自定义区域，支持 HTML，可自行插入赞赏码、公众号二维码等内容

设置“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: 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

#---------------------------
# 标签归档页
# Tags Page
#---------------------------
tag:
  banner_img: /img/r2net_banner.jpg # 已修改-原值：/img/default.png
  banner_img_height: 70 # 已修改-原值：60 # 已修改-原值：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: 'http://img.rsreland.net', 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://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'
    }

修改代码

添加网站运行时间

<div class="text-center py-3">
  <span id="timeDate">载入天数...</span>
  <span id="times">载入时分秒...</span>
  <script>
  var now = new Date();
  function createtime(){
      var grt= new Date("05/02/2014 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("createtime()",250);
  </script>
</div>

备注：参考主题官方示例， https://hexo.fluid-dev.com/posts/fluid-footer-custom/ 网站运行时间统计。

添加文章打赏

<!-- 已修改-新增：打赏代码 开始 -->
<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 样式，如果希望和文章相同的样式，可以加上上述代码。

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

title: {{ title }}
date: {{ date }}
categories:
tags:
banner_img:
index_img: /img/r2net_thumbnail.png
excerpt: 摘要
password:

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

待增加功能

增加 Daovoice 在线客服

1
2
3

daovoice:  # 在线客服 Daovoice 参考：http://dashboard.daovoice.io
  enable: false # 是否开启在线客服聊天
  appid: ''  # 应用 ID 设置

增加 jsDelivr 服务

官方文档： https://hexo.fluid-dev.com/docs/example/# 使用-jsdelivr-服务（可选）。

增加推荐文章功能

插件：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年第2次「居红乡」装修记录

https://rsreland.net/blog/202008150816/

作者

百二一

发布于

2020年8月15日

许可协议

【干了啥】8月第2周：《神奇动物在哪里》、《舌尖上的中国》、装修记录上一篇

【干了啥】8月第1周：《侠饭》、MC最困难的生存、图片无法显示下一篇