搭建Hexo theme metery主题博客记录

Hexo
计算机
发布日期:   2020-08-28

一、前言

Hexo主题搭建好处：

  • 主题种类多，可选择多种主题
  • 帮助文档友好

Matery主题特性：

  • 界面美观
  • 功能丰富
  • 动效效果丰富
  • 配置齐全
  • 完善稳定

搭建目的和用途：

  • 个性定制自由度高，完全可以按照自己的意图设计想要的网站

  • 做学习笔记

  • 学习分享

  • 资源分享

使用github静态网站托管平台搭建个人博客的理由：

  • 成本低

  • 不需要维护服务器

  • 可绑定个性域名

二、安装准备

1.搭建环境

  • Git：将本地文件上传到GitHub

下载地址：Git

  • nodejs：Hexo博客基于node.js编写

下载地址：nodejs

2.安装软件

定制修改博客时，所用的文本编辑器软件

3.Github注册与Github pages创建

4.基础配置

  • 添加国内镜像源
  • 生成SSH添加到Github

三、搭建博客

1.本地安装hexo静态博客框架

  • 安装hexo

首先选择一个位置作为你博客文件的存放位置，然后新建一个文件夹，比如名为MyBolg的文件夹，创建完后，先不要点进去，在此处点击鼠标右键，选择Git Bash Here，然后依次输入如下命令：

npm install -g hexo-cli # 安装hexo框架
hexo -v # 有版本信息输出代表安装成功
hexo init MyBlog #初始化文件夹
cd MyBlog
npm install  # 安装博客所需要的依赖文件

hexo init

等待运行完成，此时文件夹中多了许多文件。 注意：后续的命令均需要在站点目录下（即文件夹内）使用 Git Bash 运行。 此时 Hexo 框架的本地搭建已经完成了。我们来运行一下看看:

hexo s

hexo s

浏览器中打开 http://locakhost:4000 或者 127.0.0.1:4000，可以看到一个网页，说明 Hexo 博客已经成功在本地运行。

2.切换主题

  • 解压下载好的hexo-theme-matery博客主题

  • 将解压文件拷贝至/Myblog/themes/目录文件下，并重命名为matery

  • 删除原有landscape主题（可不删除）

  • 进入博客站点目录(MyBlog/)，用文本编辑器打开_config.yml（或者使用Vim/vi编辑文本）
    _config.yml 是Hexo博客的全局配置文件，在以后的博客修改，如个性化修改，博客 SEO 优化等都会使用到

  • 将文件中101行位置theme选项中的landscape主题命名为matery,保存并退出

    matery config

重新hexo cl && hexo g && hexo s一次可看到切换主题成功

切换主题

到此，博客本地搭建完成，接下来定制和优化博客

3.部署到GitHub pages

生成SSH添加到GitHub，连接Github与本地。
右键打开git bash，然后输入下面命令：

git config --global user.name "yourname"
git config --global user.email "youremail"

这里的yourname输入你的GitHub用户名，youremail输入你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户。可以用以下两条，检查一下你有没有输对

git config user.name
git config user.email

然后创建SSH,一路回车

ssh-keygen -t rsa -C "youremail"

这个时候它会告诉你已经生成了.ssh的文件夹。在你的电脑中找到这个文件夹。或者git bash中输入

cat ~/.ssh/id_rsa.pub

将输出的内容复制到框中，点击确定保存。

打开github，在头像下面点击settings，再点击SSH and GPG keys，新建一个SSH，名字随便取一个都可以，把你的id_rsa.pub里面的信息复制进去。如图：

img

在git bash输入ssh -T git@github.com，如果如下图所示，出现你的用户名，那就成功了。

img

安装hexo部署到github pages工具

npm install hexo-deployer-git --save

然后

hexo clean
hexo generate
hexo deploy

其中 hexo clean清除了你之前生成的东西，也可以不加。 hexo generate顾名思义，生成静态文章，可以用 hexo g缩写 ，hexo deploy部署文章，可以用hexo d缩写

注意deploy时可能要你输入username和password。

四、基本定制博客

参照Hexo-theme-mater_Readme.md对博客主题进行基本的设置：

1.初始页面

主题中带有的某些页面还未生成，不能正常打开，需要在hexo中先生成新建页面:

  • 新建分类 categories 页

categories 页是用来展示所有分类的页面，如果在你的博客 source 目录下还没有 categories/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "categories"

编辑你刚刚新建的页面文件 /source/categories/index.md，至少需要以下内容：

---
title: categories
date: 2018-09-30 17:25:30
type: "categories"
layout: "categories"
---
  • 新建标签 tags 页

tags 页是用来展示所有标签的页面，如果在你的博客 source 目录下还没有 tags/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "tags"

编辑你刚刚新建的页面文件 /source/tags/index.md，至少需要以下内容：

---
title: tags
date: 2018-09-30 18:23:38
type: "tags"
layout: "tags"
---
  • 新建关于我 about 页

about 页是用来展示关于我和我的博客信息的页面，如果在你的博客 source 目录下还没有 about/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "about"

编辑你刚刚新建的页面文件 /source/about/index.md，至少需要以下内容：

---
title: about
date: 2018-09-30 17:25:30
type: "about"
layout: "about"
---
  • 新建留言板 contact 页（可选的）

contact 页是用来展示留言板信息的页面，如果在你的博客 source 目录下还没有 contact/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "contact"

编辑你刚刚新建的页面文件 /source/contact/index.md，至少需要以下内容：

---
title: contact
date: 2018-09-30 17:25:30
type: "contact"
layout: "contact"
---

注：本留言板功能依赖于第三方评论系统，请激活你的评论系统才有效果。并且在主题的 _config.yml 文件中，第 19 至 21 行的“菜单”配置，取消关于留言板的注释即可。

  • 新建友情链接 friends 页（可选的）

friends 页是用来展示友情链接信息的页面，如果在你的博客 source 目录下还没有 friends/index.md 文件，那么你就需要新建一个，命令如下：

hexo new page "friends"

编辑你刚刚新建的页面文件 /source/friends/index.md，至少需要以下内容：

---
title: friends
date: 2018-12-12 21:25:30
type: "friends"
layout: "friends"
---

同时，在你的博客 source 目录下新建 _data 目录，在 _data 目录中新建 friends.json 文件，文件内容如下所示：

[{
    "avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg",
    "name": "码酱",
    "introduction": "我不是大佬，只是在追寻大佬的脚步",
    "url": "http://luokangyuan.com/",
    "title": "前去学习"
}, {
    "avatar": "http://image.luokangyuan.com/4027734.jpeg",
    "name": "闪烁之狐",
    "introduction": "编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬",
    "url": "https://blinkfox.github.io/",
    "title": "前去学习"
}, {
    "avatar": "http://image.luokangyuan.com/avatar.jpg",
    "name": "ja_rome",
    "introduction": "平凡的脚步也可以走出伟大的行程",
    "url": "https://me.csdn.net/jlh912008548",
    "title": "前去学习"
}]

初始页面全部搞定，现在主题的页面都能正常打开了。

2.代码简化与基本配置

好处：简化代码，剔除不适用不必要的功能，提高可读性，方便后期调整和他人学习。

Hexo全局配置优化

# 站点
title: 肆零肆 #网站标题
subtitle: '肆零肆  | 学习记录' #网站副标题
description: '' #网站描述
keywords: #关键词，seo优化
author: Sumsung #作者
language: zh-CN #语言
timezone: '' #时区

# URL
## 如果你的网站不是放在网站根目录下，将URL设置为'http://yoursite.com/child'；root： '/child/'
url: http://yoursite.com
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: false # 是否在永久链接中保留尾部的 index.html，设置为 false 时去除
  trailing_html: false # 是否在永久链接中保留尾部的.html, 设置为false时去除(对尾部的index.html无效)

# 目录
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# 文章
new_post_name: :title.md # 新建博客文章名称
default_layout: post #默认写作布置
titlecase: false # 把标题转换为 title case
external_link:
  enable: true # 在新标签中打开链接
  field: site 
  exclude: '' #需要排除的域名。主域名和子域名如 www 需分别配置
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

#主页设置
# path:博客首页的根目录 (默认 = '')
# per_page: 每页显示的博客文章数量. (0 = 关闭分页功能)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: -date

# "分类"和"标签"页
default_category: uncategorized
category_map:
tag_map:

meta_generator: true

# 日期/时间格式
## 详情:http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
updated_option: 'mtime'

# 分页
per_page: 10 # 0 = 关闭分页功能
pagination_dir: page

# Include / Exclude file(s) include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# 扩展
## 插件访问: https://hexo.io/plugins/
## 主题访问: https://hexo.io/themes/
theme: matery #使用的博客主题

# 部署
## 部署访问: https://hexo.io/docs/one-command-deployment
deploy:
  type: ''

Hexo官方全局设置说明文档：Hexo.io

Hexo主题全局配置文件_config.yml优化

主要的操作有：

  • 菜单导航配置

菜单导航名称可以是中文也可以是英文(如：Index或主页) 

# 二级菜单写法如下
  Medias:
    icon: fas fa-list
    children:
      - name: Musics
        url: /musics
        icon: fas fa-music
      - name: Movies
        url: /movies
        icon: fas fa-film
      - name: Books
        url: /books
        icon: fas fa-book
      - name: Galleries
        url: /galleries
        icon: fas fa-image
  • 配置基本菜单导航的名称、路径url和图标icon.

图标icon 可以在Font Awesome 中查找

3.删除无用文件

  • /themes/matery/Readme.md
  • /themes/matery/README_CN.md
  • /themes/matery/LICENSE
  • /layout/_partial/github-link.ejs
  • sources/libs/others/busuanzi.pure.mini.js
  • /layout/_partial/gitalk.ejs
  • /layout/_partial/gitment.ejs
  • /layout/_partial/gitment.ejs
  • /layout/_partial/disqus.ejs
  • /layout/_partial/livere.ejs
  • /layout/_partial/minivaline.ejs

4.插件安装及配置

代码高亮

由于 Hexo 自带的代码高亮主题显示不好看，所以主题中使用到了 hexo-prism-plugin 的 Hexo 插件来做代码高亮，安装命令如下：

npm i -S hexo-prism-plugin

然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并新增 prism 插件相关的配置，主要配置如下：

highlight:
  enable: false

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:

修复代码块行号不显示bug

修改themes/matery/source/css/matery.css第95行左右的pre和code两段改为如下代码：

pre {
    /* padding: 1.5rem !important; */
    padding: 1.5rem 1.5rem 1.5rem 3.3rem !important;
    margin: 1rem 0 !important;
    background: #272822;
    overflow: auto;
    border-radius: 0.35rem;
    tab-size: 4;
}

code {
    padding: 1px 5px;
    font-family: Inconsolata, Monaco, Consolas, 'Courier New', Courier, monospace;
    /* font-size: 0.91rem; */
    color: #e96900;
    background-color: #f8f8f8;
    border-radius: 2px;
}

Css

然后在根目录的_config.yml中设置prism_plugin.line_number为true

搜索

本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下：

npm install hexo-generator-search --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

search:
  path: search.xml
  field: post

文章字数统计插件

如果你想要在文章中显示文章字数、阅读时长信息，可以安装 hexo-wordcount插件。

安装命令如下：

npm i --save hexo-wordcount

然后只需在本主题下的 _config.yml 文件中，将各个文章字数相关的配置激活即可：

postInfo:
  date: true
  update: false
  wordCount: false # 设置文章字数统计为 true.
  totalCount: false # 设置站点文章总字数统计为 true.
  min2read: false # 阅读时长.
  readCount: false # 阅读次数.

其他

  • 添加emoji表情支持（可选的）

本主题新增了对emoji表情的支持，使用到了 hexo-filter-github-emojis 的 Hexo 插件来支持 emoji表情的生成，把对应的markdown emoji语法（::,例如：:smile:）转变成会跳跃的emoji表情，安装命令如下：

npm install hexo-filter-github-emojis --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

githubEmojis:
  enable: true
  className: github-emoji
  inject: true
  styles:
  customEmojis:
  • 添加 RSS 订阅支持（可选的）

本主题中还使用到了 hexo-generator-feed 的 Hexo 插件来做 RSS，安装命令如下：

npm install hexo-generator-feed --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

feed:
  type: atom
  path: atom.xml
  limit: 20
  hub:
  content:
  content_limit: 140
  content_limit_delim: ' '
  order_by: -date

执行 hexo clean && hexo g 重新生成博客文件，然后在 public 文件夹中即可看到 atom.xml 文件，说明你已经安装成功了。

  • 中文链接转拼音（建议安装）

如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。

安装命令如下：

npm i hexo-permalink-pinyin --save

在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：

permalink_pinyin:
  enable: true
  separator: '-' # default: '-'

注：除了此插件外，hexo-abbrlink 插件也可以生成非中文的链接。

  • 添加 DaoVoice 在线聊天功能（可选的）

前往 DaoVoice 官网注册并且获取 app_id，并将 app_id 填入主题的 _config.yml 文件中。

  • 添加 Tidio 在线聊天功能（可选的）

前往 Tidio 官网注册并且获取 Public Key，并将 Public Key 填入主题的 _config.yml 文件中。

五、深入定制博客

修改首页开始阅读字样

打开index-cover.ejs修改字段为<%= theme.indexbtn.index %>：

<a href="#indexCard" class="waves-effect waves-light btn">
    <i class="fa fa-angle-double-down"></i><%= theme.indexbtn.index %>
</a>

并在主题配置文件中加入indexbtn选项下添加index选项：

indexbtn:
  enable: true
  index: 学习记录
  name: 导航网站
  icon: fas fa-location-arrow
  url: /navigation

更改Logo及背景图片

  • 更改网站标题LOGO
    替换MyBolg/themes/matery/source/favicon.png

  • 更改网页LOGO
    替换MyBolg/themes/matery/source/medias/logo.png

  • 更改关于页面头像
    将主题文件下_config.yml中设置avatar:/medias/avatar.png替换MyBolg/themes/matery/source/medias/avatar.png

  • 更改网页背景图片

    替换MyBolg/themes/matery/source/medias/banner中图片

  • 更改特征图

    替换MyBolg/themes/matery/source/medias/featureimages中图片

  • 更改打赏二维码

    替换MyBolg/themes/matery/source/medias/reward中图片

修改主题颜色

在主题文件的 /source/css/matery.css 文件中，搜索 .bg-color 来修改背景颜色：

/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色.将渐变改成单色 */
.bg-color {
    background-image: linear-gradient(to right, #000000 0%, #000000 100%);
}

/*使用/**/屏蔽代码或直接删除代码，关闭背景图片滤镜效果*/

/*@-webkit-keyframes rainbow {

    0%,
    100% {
        background: rgba(156, 39, 176, 0.75);
        background: linear-gradient(45deg, rgba(156, 39, 176, 0.75) 0%, rgba(156, 39, 176, 0.65) 100%);
        background: -moz-linear-gradient(135deg, rgba(156, 39, 176, 0.75) 0%, rgba(156, 39, 176, 0.65) 100%);
        background: -webkit-linear-gradient(135deg, rgba(156, 39, 176, 0.75) 0%, rgba(156, 39, 176, 0.65) 100%);
    }

    16% {
        background: rgba(132, 13, 121, 0.75);
        background: linear-gradient(45deg, rgba(132, 13, 121, 0.75) 0%, rgba(132, 13, 121, 0.65) 100%);
        background: -moz-linear-gradient(135deg, rgba(132, 13, 121, 0.75) 0%, rgba(132, 13, 121, 0.65) 100%);
        background: -webkit-linear-gradient(135deg, rgba(132, 13, 121, 0.75) 0%, rgba(132, 13, 121, 0.65) 100%);
    }

    32% {
        background: rgba(239, 83, 80, 0.75);
        background: linear-gradient(45deg, rgba(239, 83, 80, 0.75) 0%, rgba(239, 83, 80, 0.65) 100%);
        background: -moz-linear-gradient(135deg, rgba(239, 83, 80, 0.75) 0%, rgba(239, 83, 80, 0.65) 100%);
        background: -webkit-linear-gradient(135deg, rgba(239, 83, 80, 0.75) 0%, rgba(239, 83, 80, 0.65) 100%);
    }

    48% {
        background: rgba(255, 87, 34, 0.75);
        background: linear-gradient(45deg, rgba(255, 87, 34, 0.75) 0%, rgba(255, 87, 34, 0.65) 100%);
        background: -moz-linear-gradient(135deg, rgba(255, 87, 34, 0.75) 0%, rgba(255, 87, 34, 0.65) 100%);
        background: -webkit-linear-gradient(135deg, rgba(255, 87, 34, 0.75) 0%, rgba(255, 87, 34, 0.65) 100%);
    }

    64% {
        background: rgba(255, 160, 0, 0.75);
        background: linear-gradient(45deg, rgba(255, 160, 0, 0.75) 0%, rgba(255, 160, 0, 0.65) 100%);
        background: -moz-linear-gradient(135deg, rgba(255, 160, 0, 0.75) 0%, rgba(255, 112, 66, 0.65) 100%);
        background: -webkit-linear-gradient(135deg, rgba(255, 160, 0, 0.75) 0%, rgba(255, 160, 0, 0.65) 100%);
    }

    80% {
        background: rgba(233, 30, 99, 0.75);
        background: linear-gradient(45deg, rgba(233, 30, 99, 0.75) 0%, rgba(233, 30, 99, 0.65) 100%);
        background: -moz-linear-gradient(135deg, rgba(233, 30, 99, 0.75) 0%, rgba(233, 30, 99, 0.65) 100%);
        background: -webkit-linear-gradient(135deg, rgba(2233, 30, 99, 0.75) 0%, rgba(233, 30, 99, 0.65) 100%);
    }
}

@keyframes rainbow {

    0%,
    100% {
        background: rgba(156, 39, 176, 0.75);
        background: linear-gradient(45deg, rgba(156, 39, 176, 0.75) 0%, rgba(156, 39, 176, 0.65) 100%);
        background: -moz-linear-gradient(135deg, rgba(156, 39, 176, 0.75) 0%, rgba(156, 39, 176, 0.65) 100%);
        background: -webkit-linear-gradient(135deg, rgba(156, 39, 176, 0.75) 0%, rgba(156, 39, 176, 0.65) 100%);
    }

    16% {
        background: rgba(132, 13, 121, 0.75);
        background: linear-gradient(45deg, rgba(132, 13, 121, 0.75) 0%, rgba(132, 13, 121, 0.65) 100%);
        background: -moz-linear-gradient(135deg, rgba(132, 13, 121, 0.75) 0%, rgba(132, 13, 121, 0.65) 100%);
        background: -webkit-linear-gradient(135deg, rgba(132, 13, 121, 0.75) 0%, rgba(132, 13, 121, 0.65) 100%);
    }

    32% {
        background: rgba(239, 83, 80, 0.75);
        background: linear-gradient(45deg, rgba(239, 83, 80, 0.75) 0%, rgba(239, 83, 80, 0.65) 100%);
        background: -moz-linear-gradient(135deg, rgba(239, 83, 80, 0.75) 0%, rgba(239, 83, 80, 0.65) 100%);
        background: -webkit-linear-gradient(135deg, rgba(239, 83, 80, 0.75) 0%, rgba(239, 83, 80, 0.65) 100%);
    }

    48% {
        background: rgba(255, 87, 34, 0.75);
        background: linear-gradient(45deg, rgba(255, 87, 34, 0.75) 0%, rgba(255, 87, 34, 0.65) 100%);
        background: -moz-linear-gradient(135deg, rgba(255, 87, 34, 0.75) 0%, rgba(255, 87, 34, 0.65) 100%);
        background: -webkit-linear-gradient(135deg, rgba(255, 87, 34, 0.75) 0%, rgba(255, 87, 34, 0.65) 100%);
    }

    64% {
        background: rgba(255, 160, 0, 0.75);
        background: linear-gradient(45deg, rgba(255, 160, 0, 0.75) 0%, rgba(255, 160, 0, 0.65) 100%);
        background: -moz-linear-gradient(135deg, rgba(255, 160, 0, 0.75) 0%, rgba(255, 112, 66, 0.65) 100%);
        background: -webkit-linear-gradient(135deg, rgba(255, 160, 0, 0.75) 0%, rgba(255, 160, 0, 0.65) 100%);
    }

    80% {
        background: rgba(233, 30, 99, 0.75);
        background: linear-gradient(45deg, rgba(233, 30, 99, 0.75) 0%, rgba(233, 30, 99, 0.65) 100%);
        background: -moz-linear-gradient(135deg, rgba(233, 30, 99, 0.75) 0%, rgba(233, 30, 99, 0.65) 100%);
        background: -webkit-linear-gradient(135deg, rgba(2233, 30, 99, 0.75) 0%, rgba(233, 30, 99, 0.65) 100%);
    }
}*/

设置隐藏的背景颜色

文件位于：MyBlog\themes\matery\source\libs\materialize/materialize.min.css查找.red{background-color:#F44336 !important}将{}中的background-color删除或修改颜色

.red{background-color:#335a91 !important}

关闭封面图轮播

主题文件_config.yml中设置：

# 首页封面轮播图的相关配置.
cover:
  showPrevNext: false # 是否显示左右切换按钮.
  showIndicators: false # 是否显示指示器.
  autoLoop: false # 是否自动轮播.
  duration: 120 # 切换延迟时间.
  intervalTime: 5000 # 自动切换下一张的间隔时间.
  useConfig: false # 是否使用配置文件, 在 _data/covers.json 下配置推荐文章, false则使用主题在文章中的配置 cover coverImg
  # useConfig 使用方式: 将主题 hexo-theme-matery/source/_data/covers.json 移动到 my-blog/source/_data/下修改配置即可

关闭每日切换banner

# banner 是否每日切换.
banner:
  enable: false # 若为 false, 则 banner 默认为 /medias/banner/0.jpg

修改 banner 图和文章特色图

banner 中的图片主题代码中是每天动态切换一张，只需 7 张即可。如果你会 JavaScript 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，banner 切换的代码位置在 /layout/_partial/bg-cover-content.ejs 文件的 <script></script> 代码中：

$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');

在 /source/medias/featureimages 文件夹中默认有 24 张特色图片，你可以再增加或者减少，并需要在 _config.yml 做同步修改。

修改社交链接

在主题的 _config.yml 文件中，默认支持 QQ、GitHub 和邮箱等的配置，你可以在主题文件的 /layout/_partial/social-link.ejs 文件中，新增、修改你需要的社交链接地址，增加链接可参考如下代码：

<% if (theme.socialLink.github) { %>
    <a href="<%= theme.socialLink.github %>" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>
<% } %>

现仅对内容进行删减，主题全局配置文件下设置仅仅留下QQ、Github、邮箱，同时关闭FORK ME：

socialLink:
  github:  https://github.com/Sumsung524
  email: me@xiongmengqi.top
  facebook: # https://www.facebook.com/xxx
  twitter: # https://twitter.com/xxx
  qq: 985247777
  weibo: # https://weibo.com/xxx
  zhihu: # https://www.zhihu.com/xxx
  rss: false # true、false

githubLink:
  enable: false
  url: https://github.com/Sumsung524
  title: Fork Me #或者直接删除

githubLink的设置在/layout/_partial/github-link.ejs中，关闭之后，可以直接移除github-link.ejs，如果以后需要设置其他形式的按键，可重新移入并在主题全局配置文件中设置

/layout/_partial/social-link.ejs 文件设置邮箱显示内容为自己邮箱：

<% if (theme.socialLink.github) { %>
    <a href="<%= theme.socialLink.github %>" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>
<% } %>
<% if (theme.socialLink.email) { %>
    <a href="mailto:<%= theme.socialLink.email %>" class="tooltipped" target="_blank" data-tooltip="me@xiongmengqi.top" data-position="top" data-delay="50">
        <i class="fas fa-envelope-open"></i>
    </a>
<% } %>
<% if (theme.socialLink.qq) { %>
    <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=<%= theme.socialLink.qq %>" class="tooltipped" target="_blank" data-tooltip="QQ:<%= theme.socialLink.qq %>" data-position="top" data-delay="50">
        <i class="fab fa-qq"></i>
    </a>
<% } %>

修改页脚

修改页脚的地方在主题文件的 /layout/_partial/footer.ejs 文件中，包括站点、使用的主题、访问量等。

  • 在_config.yml打开站点运行时间记录功能:
time:
  enable: true
  year: 2020 # 年份
  month: 08 # 月份
  date: 20 # 日期
  hour: 00 # 小时
  minute: 00 # 分钟
  second: 00 # 秒

去除小时、分钟、秒消掉：

将 + diffHours +" 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒"字段删除

  • 关闭运行时间记录，有需要的时候再开启

在主题文件中删除上述代码，删除/layout/_partial/footer.ejs中相关函数

主题配置文件中删除：

# busuanzi(http://busuanzi.ibruce.info/) website statistics
# 不蒜子(http://busuanzi.ibruce.info/) 网站统计
busuanziStatistics:
  enable: true
  totalTraffic: true # 总访问量
  totalNumberOfvisitors: true # 总人次

  busuanzi: /libs/others/busuanzi.pure.mini.js

在主题文件中删除不蒜子相关代码，删除/layout/_partial/footer.ejs中相关函数：

<% if (theme.postInfo.totalCount) { %>
&nbsp;<i class="fas fa-chart-area"></i>&nbsp;站点总字数:&nbsp;<span
    class="white-color"><%= totalcount(site) %></span>&nbsp;字
<% } %>
<% let socialClass = '' %>
<% if (theme.busuanziStatistics && theme.busuanziStatistics.enable) { %>
<% socialClass = 'social-statis' %>
<% } %>
<% if (theme.busuanziStatistics && theme.busuanziStatistics.totalTraffic) { %>
            <span id="busuanzi_container_site_pv">
                |&nbsp;<i class="far fa-eye"></i>&nbsp;总访问量:&nbsp;<span id="busuanzi_value_site_pv"
                    class="white-color"></span>&nbsp;次
            </span>
            <% } %>
            <% if (theme.busuanziStatistics && theme.busuanziStatistics.totalNumberOfvisitors) { %>
            <span id="busuanzi_container_site_uv">
                |&nbsp;<i class="fas fa-users"></i>&nbsp;总访问人数:&nbsp;<span id="busuanzi_value_site_uv"
        class="white-color"></span>&nbsp;人
</span>
<% } %>
<br>
<% if (theme.time.enable) { %>
<span id="sitetime">载入运行时间...</span>
<script>
function siteTime() {
   var seconds = 1000;
   var minutes = seconds * 60;
   var hours = minutes * 60;
   var days = hours * 24;
   var years = days * 365;
   var today = new Date();
   var startYear = "<%- theme.time.year %>";
   var startMonth = "<%- theme.time.month %>";
   var startDate = "<%- theme.time.date %>";
   var startHour = "<%- theme.time.hour %>";
   var startMinute = "<%- theme.time.minute %>";
   var startSecond = "<%- theme.time.second %>";
   var todayYear = today.getFullYear();
   var todayMonth = today.getMonth() + 1;
   var todayDate = today.getDate();
   var todayHour = today.getHours();
   var todayMinute = today.getMinutes();
   var todaySecond = today.getSeconds();
   var t1 = Date.UTC(startYear, startMonth, startDate, startHour, startMinute, startSecond);
                    var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
var diff = t2 - t1;
var diffYears = Math.floor(diff / years);
var diffDays = Math.floor((diff / days) - diffYears * 365);
var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) /
                        minutes);
var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours -
    diffMinutes * minutes) / seconds);
if (startYear == todayYear) {
    document.getElementById("year").innerHTML = todayYear;
    document.getElementById("sitetime").innerHTML = "本站已运行 " + diffDays + " 天 ";
} else {
document.getElementById("year").innerHTML = startYear + " - " + todayYear;
document.getElementById("sitetime").innerHTML = "本站已运行 " + diffYears + " 年 " + diffDays +
" 天 ";
}
    }
    setInterval(siteTime, 1000);
</script>
<% } %>
<br>

注意：

删除此段代码会出现部署问题，由于layout.ejs中设置过此函数，此函数删除而找不到会发生无法部署的错误。

因此，需要删除matery/layout/layout.ejs中字段：

    <% if (theme.busuanziStatistics && theme.busuanziStatistics.enable) { %>
    <script async src="<%- theme.jsDelivr.url %><%- url_for(theme.libs.js.busuanzi) %>"></script>
    <% } %>

按照代码提示footer.ejs中socialClass is not defined可以直接将<%- socialClass %>字段删除或者使用其他CSS样式，删除后再加上<br>：

<div class="col s12 m4 l4 social-link <%- socialClass %>"><%- partial('_partial/social-link') %></div>

layout.ejs用于设置布局，告诉网站解析时引用什么样的文件、脚本、函数等等，属于一个大体的框架文件，表达了整个网站的大致结构。

如备案信息不需要填写，可直接删除字段：

<% if (theme.icp.enable) { %>
    <span id="icp"><img src="<%- theme.jsDelivr.url %><%- url_for('/medias/icp.png') %>" style="vertical-align: text-bottom;" />
        <a href="<%- url_for(theme.icp.url) %>" target="_blank"><%= theme.icp.text %></a>
                          </span>
                          <% } %>

删除主题配置文件中：

#ICP备案信息尾部显示
icp:
  enable: false
  url: # 备案链接
  text: # 备案信息

最好删除：sources/libs/others/busuanzi.pure.mini.js

删除之后即可重新成功部署。

  • 将页脚变成窄边框

在sources/libs/materialize/materialize.min.css中查找.page-footer，找到.page-footer{padding-top:20px;color:#666;background-color:#ee6e73}删除padding-top:20px;

  • 修改页脚字体颜色

source/css/matery.css中搜索footer .copy-right {、footer a {color: #999;}将颜色修改:

footer a {
    color: #999;
}
footer .copy-right {
    color: #444;
}

修改文章卡片中标签颜色

在主题目录layout/matery.css中加入样式：

.tag-color {
    background-image: linear-gradient(to left, #00c9ff 0%, #66a6ff 100%);
}

打开layout/index.ejs中使用Ctrl+F搜索bg-color，替换为：tag-color，从而实现标签颜色与导航条颜色独立。

定制回到顶部

  • 修改回到顶部按钮颜色

source/css/matery.css中搜索.top-scroll .btn-floating {:

.top-scroll .btn-floating {
    background: linear-gradient(to bottom right, #00c8fe 0%, #66a6ff 100%);
    width: 48px;
    height: 48px;
}

博客文章菜单按钮调小

通过谷歌浏览器开发者模式定位到按钮样式，打开/layout/_partial/post-details-toc.ejs,Ctrl+F输入#floating-toc-btn .btn-floating ，修改样式：

#floating-toc-btn .btn-floating {
    width: 32px;
    height: 32px;
}
#floating-toc-btn .btn-floating i {
    line-height: 48px;
    font-size: 1.2rem;
    position: absolute;
    bottom: -8px;
    left: 0px;
}

position：absolute表示设置绝对定位，一般配bai合“top”和“left”属性同时使用进行定位

修改博客文章目录颜色

通过谷歌浏览器开发者模式定位到按钮样式，打开/layout/_partial/post-details-toc.ejs,Ctrl+F输入#toc-content .is-active-link ，修改样式：

#toc-content .is-active-link {
    color: #66a6ff;
}

通过谷歌浏览器开发者模式定位到按钮样式，打开/layout/_partial/post-details-toc.ejs,Ctrl+F输入#toc-content .toc-link:hover，修改样式：

#toc-content .toc-link:hover {
    color: #66a6ff;
    font-weight: 700;
    text-decoration: underline;
}

修改文章链接颜色

/source/css/matery.css:

#articleContent a {
    padding: 0 2px;
    color: #66a6ff;
    font-weight: 500;
    text-decoration: underline;
    word-wrap: break-word;
}
blockquote {
    border-left: 5px solid #66a6ff;
    padding: 1rem 0.8rem 0.2rem 0.8rem;
    color: #666;
    background-color: rgba(66, 185, 131, .1);
}
// 修改引用左侧竖线颜色

定制进度条

  • 更改底栏进度条色彩

source/css/matery.css中搜索.progress-bar {并设置:

.progress-bar {
   height: 4px;
   position: fixed;
   bottom: 0px;
   z-index: 300;
   background: linear-gradient(to right, #4285f4 0%,  #ea4335 75%, #fbbc05 80%, #4285f4 85%, #34a853 90%, #ea4335 100%);
   opacity: 1.0;
}
  • 更改浏览器默认的进度条样式

source/css/matery.css中最后添加：

考虑到进度条重复，故将width设置为0.1px隐藏导航条，方便以后需要时调用：

  /* 定义滚动条样式 */

  ::-webkit-scrollbar {

    width: 0.1px;

    height: 6px;

    background-color: rgba(240, 240, 240, 0);

  }



  /*定义滚动条轨道 内阴影+圆角*/

  ::-webkit-scrollbar-track {

    box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);

    border-radius: 7px;

    background-color: rgba(240, 240, 240, .5);

  }



  /*定义滑块 内阴影+圆角*/

  ::-webkit-scrollbar-thumb {

    border-radius: 10px;

    box-shadow: inset 0 0 0px rgba(240, 240, 240, .5);

    background-color: rgba(0, 0, 0, 0.5);

  }

鼠标点击效果

  • 添加“社会主义核心价值观”文字点击效果

在 /themes/matery/source/js 新建文件click_show_text.js，并添加如下代码:

"use strict";
   var a_idx=0;
   function delay(){
   $(".buryit").removeAttr("onclick")
   }
   jQuery(document).ready(function(n){
   n("body").click(function(e){
   var t=new Array("富强","民主","文明","和谐","自由","平等","公正","法治","爱国","敬业","诚信","友善"),
   o=n("<span/>").text(t[a_idx]);
       a_idx=(a_idx+1)%t.length;
       var a=e.pageX,i=e.pageY;
       o.css({
       "z-index":5,top:i-20,left:a,position:"absolute","font-weight":"bold",color:"#ea4335"}),
           n("body").append(o),o.animate({top:i-180,opacity:0},3e3,function(){o.remove()})}),setTimeout("delay()",2e3)});

在主题配置文件_config.yml下添加：

# 社会主义核心价值观文字点击效果
click_show_text:
  enable: true

在themes/source/layout/引用文件：

<script src="<%- theme.jsDelivr.url %><%- url_for('/js/click_show_text.js') %>"></script>

激活评论系统

主题中配置多种评论系统，个人认为最好用的时Valine:

  • 注册
  • 登录
  • APPID 和 APPKey 复制
  • 将对应的内容输入到主题配置文件中：
# Valine 评论模块的配置，默认为不激活，如要使用，就请激活该配置项，并设置 appId 和 appKey.
valine:
  enable: true
  appId: #粘贴APPID
  appKey: #粘贴APPKey
  notify: false
  verify: false
  visitor: true
  avatar: 'mm' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide
  pageSize: 10
  placeholder: 'just go go' # Comment Box placeholder
  background: /medias/comment_bg.png

配置好一个评论系统之后，可以将其他不需要的评论系统删除

删除操作注意对文件做好备份，以防出错

删除需要三处：主题配置文件相关代码、使用到评论模板页面的ejs文件、删除某个评论模板ejs文件

由于评论模块位于post、concat、frieds等页面，需要找到每个页面的.ejs文件，将代码删除

  • 删除Gitalk评论模块

    • 主题配置文件删除：
    # Gitalk 评论模块的配置，默认为不激活
    gitalk:
      enable: false
      owner:
      repo:
      oauth:
        clientId:
        clientSecret:
      admin:
    # Gitment 评论模块的配置，默认为不激活
    gitment:
      enable: false
      owner:
      repo:
      oauth:
        clientId:
        clientSecret:

    # Disqus评论模块的配置，默认为不激活
    disqus:
      enable: false
      shortname:

    # Livere 来必力评论模块的配置，默认为不激活
    livere:
      enable: false
      uid:

    # MiniValine 评论模块的配置，默认为不激活，如要使用，就请激活该配置项，并设置 appId 和 appKey.
    # See: https://github.com/MiniValine/MiniValine
    minivaline:
      enable: false
      appId: zhM0AOiqle17oPoE84CoYw1e-gzGzoHsz # Your leancloud application appid
      appKey: itmzT1JbXfAjVwMqDhGPzU45 # Your leancloud application appkey
      mode: DesertsP # DesertsP or xCss
      placeholder: Write a Comment # Comment box placeholder
      math: true # Support MathJax.
      md: true # Support Markdown.
      enableQQ: false # Enable QQ avatar API.
      NoRecordIP: false # Do not record commenter IP.
      visitor: true # Article reading statistics.
      maxNest: 6 # Sub-comment maximum nesting depth.
      pageSize: 6 # Pagination size.
      adminEmailMd5: de8a7aa53d07e6b6bceb45c64027763d # The MD5 of Admin Email to show Admin Flag.[Just Only DesertsP Style mode]
      tagMeta: # The String Array of Words to show Flag.[Just Only xCss Style mode]
        - 管理员
        - 小伙伴
        - 访客
      master: # The MD5 String Array of master Email to show master Flag.[Just Only xCss Style mode]
        - de8a7aa53d07e6b6bceb45c64027763d
      friends: # The MD5 String Array of friends Email to show friends Flag.[Just Only xCss Style mode]
        - b5bd5d836c7a0091aa8473e79ed4c25e
        - adb7d1cd192658a55c0ad22a3309cecf
        - 3ce1e6c77b4910f1871106cb30dc62b0
        - cfce8dc43725cc14ffcd9fb4892d5bfc
      # MiniValine's display language depends on user's browser or system environment
      # If you want everyone visiting your site to see a uniform language, you can set a force language value
      # Available values: en  | zh-CN | (and many more)
      # More i18n info: https://github.com/MiniValine/minivaline-i18n
      lang:
      # Expression Url.
      # https://github.com/MiniValine/MiniValine/blob/master/.github/FAQ.md#how-to-customize-emoticons
      emoticonUrl:
        - https://cdn.jsdelivr.net/npm/alus@latest
        - https://cdn.jsdelivr.net/gh/MiniValine/qq@latest
        - https://cdn.jsdelivr.net/gh/MiniValine/Bilibilis@latest
        - https://cdn.jsdelivr.net/gh/MiniValine/tieba@latest
        - https://cdn.jsdelivr.net/gh/MiniValine/twemoji@latest
        - https://cdn.jsdelivr.net/gh/MiniValine/weibo@latest

        gitalk: /libs/gitalk/gitalk.min.js
        minivaline:https://cdn.jsdelivr.net/npm/minivaline/dist/MiniValine.min.js
  • contact.ejs删除：
 <% if (theme.gitalk && theme.gitalk.enable) { %>
 <%- partial('_partial/gitalk') %>
 <% } %>

 <% if (theme.gitment.enable) { %>
 <%- partial('_partial/gitment') %>
 <% } %>

 <% if (theme.disqus.enable) { %>
 <%- partial('_partial/disqus') %>
 <% } %>

 <% if (theme.livere && theme.livere.enable) { %>
 <%- partial('_partial/livere') %>
 <% } %>

 <% if (theme.minivaline && theme.minivaline.enable) { %>
 <%- partial('_partial/minivaline') %>
 <% } %>
  • friends.ejs删除：
<% if (theme.gitalk && theme.gitalk.enable) { %>
<%- partial('_partial/gitalk') %>
<% } %>

<% if (theme.gitment.enable) { %>
<%- partial('_partial/gitment') %>
<% } %>

<% if (theme.disqus.enable) { %>
<%- partial('_partial/disqus') %>
<% } %>

<% if (theme.livere && theme.livere.enable) { %>
<%- partial('_partial/livere') %>
<% } %>
  • 删除post-detail.ejs：
<% if (theme.gitalk && theme.gitalk.enable) { %>
    <%- partial('_partial/gitalk') %>
<% } %>

<% if (theme.gitment.enable) { %>
    <%- partial('_partial/gitment') %>
<% } %>

<% if (theme.disqus.enable) { %>
    <%- partial('_partial/disqus') %>
<% } %>

<% if (theme.livere && theme.livere.enable) { %>
<%- partial('_partial/livere') %>
<% } %>
<% if (theme.minivaline && theme.minivaline.enable) { %>
<%- partial('_partial/minivaline') %>
<% } %>

​

  • 删除gitalk.ejs、gitment.ejs、gitment.ejs、disqus.ejs、livere.ejs、minivaline.ejs

在线聊天功能去除

  • 删除主题全局配置文件代码：
# DaoVoice online contact
daovoice:
  enable: false
  app_id:

# Tidio online contact
tidio:
  enable: false
  public_key:
  • 删除layout.ejs代码：
    <% if (theme.tidio.enable) { %>
        <script src="//code.tidio.co/<%- theme.tidio.public_key %>.js"></script>
        <script>
            $(document).ready(function () {
                setInterval(change_Tidio, 50);
                function change_Tidio() {
                    var tidio=$("#tidio-chat iframe");
                    if(tidio.css("display")=="block"&& $(window).width()>977 ){
                        document.getElementById("tidio-chat-iframe").style.bottom= ($("div#backTop.top-scroll").css("display")=="none" &&$(window).width()>977)>0? "-40px" : ($("div.toc-title").length&&$(window).width()>977)>0?"<%if(theme.toc.showToggleBtn){%>85px<%}else{%>20px<%}%>":"20px";
                        document.getElementById("tidio-chat-iframe").style.right="-15px";
                        document.getElementById("tidio-chat-iframe").style.height=parseInt(tidio.css("height"))>=520?"520px":tidio.css("height");
                        document.getElementById("tidio-chat-iframe").style.zIndex="997";
                    }
                    else if(tidio.css("display")=="block"&&$(window).width()>601 &&$(window).width()<992 ){
                        document.getElementById("tidio-chat-iframe").style.bottom= ($("div#backTop.top-scroll").css("display")=="none" && 601< $(window).width()<992)>0? "-40px":"20px" ;
                        document.getElementById("tidio-chat-iframe").style.right="-15px";
                        document.getElementById("tidio-chat-iframe").style.zIndex="997";
                    }
                    else if(tidio.css("display")=="block"&&$(window).width()<601 && parseInt(tidio.css("height"))<230){
                        document.getElementById("tidio-chat-iframe").style.bottom= ($("div#backTop.top-scroll").css("display")=="none" && $(window).width()<601)>0? "-10px":"45px" ;
                        document.getElementById("tidio-chat-iframe").style.zIndex="997";
                    }
                    if( tidio.css("display")=="block"&&$(window).width()<601 && parseInt(tidio.css("height"))>=230){
                        document.getElementById("tidio-chat-iframe").style.zIndex="998";
                    }
                }
            });
        </script>
    <% } %>

    <% if (theme.daovoice.enable) { %>
    <script>
        (function (i, s, o, g, r, a, m) {
            i["DaoVoiceObject"] = r;
            i[r] = i[r] || function () {
                (i[r].q = i[r].q || []).push(arguments)
            }, i[r].l = 1 * new Date();
            a = s.createElement(o), m = s.getElementsByTagName(o)[0];
            a.async = 1;
            a.src = g;
            a.charset = "utf-8";
            m.parentNode.insertBefore(a, m)
        })(window, document, "script", ('https:' == document.location.protocol ? 'https:' : 'http:') +
            "//widget.daovoice.io/widget/6984b559.js", "daovoice")
        daovoice('init', {
            app_id: "<%- theme.daovoice.app_id %>"
        });
        daovoice('update');
    </script>
    <% } %>

关闭转载功能

由于以后可能需要用到，故仅在主题配置文件中关闭：

# default 配置文章的默认转载规则
# 您可以使用在文章md文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则
# 可用的转载规则有：
# 这些转载规则的意义请参考：https://creativecommons.org/choose/?lang=zh
#选项： cc_by cc_by_nd cc_by_sa cc_by_nc cc_by_nc_nd cc_by_nc_sa cc0 noreprint（不允许转载 not allowed to reprint） pay（付费转载 pay for reprinting）
reprint:
  enable: false # whether enable reprint section 是否启用“转载规则限定模块”
  default: cc_by

合并标签和文章分类页

打开layout/tags.ejs,复制：

    <%- partial('_widget/tag-cloud') %>

    <% if (site.tags && site.tags.length > 0) { %>
    <%- partial('_widget/tag-wordcloud') %>
    <% } %>

由于属于直接粘贴会导致重叠，需要将文章标签的位置单独调整，故需要找到_widget/tags-cloud.ejs文件复制上，粘贴至layout/categories.ejs中，然后再class="container chip-container"后加上style="margin-top:25px;"

<%- partial('_partial/bg-cover') %>

<main class="content">

    <%- partial('_widget/category-cloud') %>
    <%
    var colorArr = ['#F9EBEA', '#F5EEF8', '#D5F5E3', '#E8F8F5', '#FEF9E7',
        '#F8F9F9', '#82E0AA', '#D7BDE2', '#A3E4D7', '#85C1E9', '#F8C471', '#F9E79F', '#FFF'];
    var colorCount = colorArr.length;
    var hashCode = function (str) {
        if (!str && str.length === 0) {
            return 0;
        }

        var hash = 0;
        for (var i = 0, len = str.length; i < len; i++) {
            hash = ((hash << 5) - hash) + str.charCodeAt(i);
            hash |= 0;
        }
        return hash;
    };
    var i = 0;
    var isTag = is_tag();
    %>

    <div id="tags" class="container chip-container"style="margin-top:25px;">
        <div class="card">
            <div class="card-content">
                <div class="tag-title center-align">
                    <i class="fas fa-tags"></i>&nbsp;&nbsp;<%= __('postTagTitle') %>
                </div>
                <div class="tag-chips">
                    <% site.tags.map(function(tag) { %>
                    <%
                        i++;
                        var color = i >= colorCount ? colorArr[Math.abs(hashCode(tag.name) % colorCount)]
                                : colorArr[i - 1];
                    %>
                    <a href="<%- url_for(tag.path) %>" title="<%- tag.name %>: <%- tag.length %>">
                        <span class="chip center-align waves-effect waves-light
                                <% if (isTag && tag.name == page.tag) { %> chip-active <% } else { %> chip-default <% } %>"
                                data-tagname="<%- tag.name %>" style="background-color: <%- color %>;"><%- tag.name %>
                            <span class="tag-length"><%- tag.length %></span>
                        </span>
                    </a>
                    <% }); %>
                </div>
            </div>
        </div>
    </div>

    <% if (site.tags && site.tags.length > 0) { %>
    <%- partial('_widget/tag-wordcloud') %>
    <% } %>
    <% if (site.categories && site.categories.length > 0) { %>
    <%- partial('_widget/category-radar') %>
    <% } %>

</main>

最后在主题配置文件中关闭tags页面链接即可

六、其他

1.自定义导航页

  • hexo new page navigation新建页面
  • 打开新建文件并编辑：
---
title: navigation
date: 2020-08-22 15:13:51
type: "navigation"
layout: "navigation"
---
  • 在主题配置中加入新页面：
menu:
  Index:
    url: /
    icon: fas fa-home
  记录:
    url: /categories #二级菜单中的主菜单链接
    icon: fas fa-list
    children:
      - name: 设计
        url: 
        icon: fas fa-book
      - name: 计算机
        url: 
        icon: fas fa-music
      - name: 土木工程
        url: 
        icon: fas fa-film
      - name: 其他
        url: 
        icon: fas fa-book
  清单:
    icon: fas fa-list
    children:
      - name: Windows软件
        url: /windows    #将友情链接页面模板变成软件清单页面
        icon: fas fa-address-book
      - name: Mac软件
        url: 
        icon: fas fa-film
      - name: 资源列表
        url: 
        icon: fas fa-book
  Tags:
    url: /tags
    icon: fas fa-tags
  导航:
    url: /navigation
    icon: fas fa-location-arrow
  About:
    url: /about
    icon: fas fa-user-circle
  Contact:
    url: /contact
    icon: fas fa-comments
#  隐藏Archives页面，时间轴等保留，方便以后再使用
#  Archives:
#    url: /archives
#    icon: fas fa-archive
  • 在主题目录下layout下新建 navigation.ejs，除拓展名为.ejs外，文件名要求和之前的统一：

2.导航的关于页面

  • 添加关于页面按键（入口），在主题目录下打开layout/nav.ejs，按住Ctrl+F搜索<% if (theme.navabout) { %>，下方加入代码：
<li>
    <a href="<%= url_for(theme.navabout.url3) %>">
        <i class="<%= theme.navabout.icon3 %>"></i>
        <span class="tooltip-blue"><%= theme.navabout.name3 %></span>
    </a>
</li>
  • 创建新页面：
hexo new page aboutnav
  • 打开index.md文件编辑：
---
title: 关于
layout: "aboutnav"
type: "aboutnav"
date: 2020-09-22 21:12:21
---
  • 在主题配置文件_config.yml下，搜索navabout并在子目录下添加：
  name3: 关于
  icon3: fas fa-info-circle
  url3: /aboutnav

注意格式缩进对齐

  • 在主题文件夹目录下/layout/新建aboutnav.ejs文件并写入：
---
layout: false
---
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>关于|肆零肆</title>
<style>
        .container_nav {
            width: 60%;
            margin: 10% auto 0;
            background-color: #ffffff;
            padding: 0% 0%;
            border-radius: 10px
        }
        .ul_nav {
            padding-left: 20px;
            line-height: 2.3
        }
</style>
<body>
    <div class="container_nav">
        <h1>肆零肆导航-聚合导航网页使用指南</h1>
        <h3>网页特征</h3>
        <ul class="ul_nav">
            <li>简洁舒适，无广告</li>
            <li>聚合搜索，多种搜索引擎自由选择</li>
            <li>夜间模式自由切换，保护你的双眼</li>
            <li>丰富的网页导航，一触即达</li>
            <li>黑科技网站聚合，高效生活</li>
            <li>细腻丝滑设计，沉浸其中</li>
            <li>设置搜索快捷方式，即刻搜索</li>
            <li>简洁强大，是初衷</li>
        </ul >
        <h3>使用技巧</h3>
        <ul class="ul_nav">
        <li>打开网页光标自动至搜索栏；无需点击输入框，即可直接输入搜索内容</li>
        <li>搜索框内按入↑/↓，快速清除输入框内容</li>
        <li>滚轮下滑自动清空已输入内容</li>
        <li>输入搜索内容后回车即可搜索</li>
        <li>搜索回车/点击搜索后自动全选输入内容，方便快速下次编辑搜索内容</li>
        <li>回车/Tab键自动定位光标到输入框，无需鼠标点击🖱</li>
        <li>点击“回到顶部”按钮后，无需点击输入框即可直接搜索</li>
        </ul>
        <h3>其他说明</h3>
        <ul class="ul_nav">
        <li>建议Ctrl + D收藏网站</li>
        <li>设置默认启动页（主页）：</li>
        <li>打开谷歌浏览器-设置-启动时-添加新网页-输入框输入：https://xmq.plus/nav-保存确定</li>
        <li>为了尽可能保证良好的使用体验，请使用谷歌浏览器</li>
        <li>谷歌浏览器下载地址:</li>
        <a href="https://sumsung.lanzous.com/i87Jufckfif">谷歌浏览器</a>
        </ul>
        <a href="/nav">回到首页</a>
    </div>
</body>
</html>
  • 效果图

效果图

  • 使用Typora创建页面

上述方法利用纯Html不方便添加其他样式，可以借助Typora软件，使用Markdown写作完成后，直接生成Html：

Html export
  • 将生成好的Html使用文本编辑器打开，全选代码复制，粘贴到aboutnav.ejs中，并在代码最前面加入(不经过渲染)：
---
layout: false
---
---
layout: false
---
<!doctype html>
<html>
<head>
<meta charset='UTF-8'><meta name='viewport' content='width=device-width initial-scale=1'>
<title>关于|肆零肆聚合导航网页使用指南</title><link href='https://fonts.loli.net/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext' rel='stylesheet' type='text/css' /><style type='text/css'>html {overflow-x: initial !important;}:root { --bg-color:#ffffff; --text-color:#333333; --select-text-bg-color:#B5D6FC; --select-text-font-color:auto; --monospace:"Lucida Console",Consolas,"Courier",monospace; }
html { font-size: 14px; background-color: var(--bg-color); color: var(--text-color); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body { margin: 0px; padding: 0px; height: auto; bottom: 0px; top: 0px; left: 0px; right: 0px; font-size: 1rem; line-height: 1.42857; overflow-x: hidden; background: inherit; tab-size: 4; }
iframe { margin: auto; }
a.url { word-break: break-all; }
a:active, a:hover { outline: 0px; }
.in-text-selection, ::selection { text-shadow: none; background: var(--select-text-bg-color); color: var(--select-text-font-color); }
#write { margin: 0px auto; height: auto; width: inherit; word-break: normal; overflow-wrap: break-word; position: relative; white-space: normal; overflow-x: visible; padding-top: 40px; }
#write.first-line-indent p { text-indent: 2em; }
#write.first-line-indent li p, #write.first-line-indent p * { text-indent: 0px; }
#write.first-line-indent li { margin-left: 2em; }
.for-image #write { padding-left: 8px; padding-right: 8px; }
body.typora-export { padding-left: 30px; padding-right: 30px; }
.typora-export .footnote-line, .typora-export li, .typora-export p { white-space: pre-wrap; }
.typora-export .task-list-item input { pointer-events: none; }
@media screen and (max-width: 500px) {
  body.typora-export { padding-left: 0px; padding-right: 0px; }
  #write { padding-left: 20px; padding-right: 20px; }
  .CodeMirror-sizer { margin-left: 0px !important; }
  .CodeMirror-gutters { display: none !important; }
}
#write li > figure:last-child { margin-bottom: 0.5rem; }
#write ol, #write ul { position: relative; }
img { max-width: 100%; vertical-align: middle; image-orientation: from-image; }
button, input, select, textarea { color: inherit; font: inherit; }
input[type="checkbox"], input[type="radio"] { line-height: normal; padding: 0px; }
*, ::after, ::before { box-sizing: border-box; }
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p, #write pre { width: inherit; }
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p { position: relative; }
p { line-height: inherit; }
h1, h2, h3, h4, h5, h6 { break-after: avoid-page; break-inside: avoid; orphans: 4; }
p { orphans: 4; }
h1 { font-size: 2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }
.md-math-block, .md-rawblock, h1, h2, h3, h4, h5, h6, p { margin-top: 1rem; margin-bottom: 1rem; }
.hidden { display: none; }
.md-blockmeta { color: rgb(204, 204, 204); font-weight: 700; font-style: italic; }
a { cursor: pointer; }
sup.md-footnote { padding: 2px 4px; background-color: rgba(238, 238, 238, 0.7); color: rgb(85, 85, 85); border-radius: 4px; cursor: pointer; }
sup.md-footnote a, sup.md-footnote a:hover { color: inherit; text-transform: inherit; text-decoration: inherit; }
#write input[type="checkbox"] { cursor: pointer; width: inherit; height: inherit; }
figure { overflow-x: auto; margin: 1.2em 0px; max-width: calc(100% + 16px); padding: 0px; }
figure > table { margin: 0px; }
tr { break-inside: avoid; break-after: auto; }
thead { display: table-header-group; }
table { border-collapse: collapse; border-spacing: 0px; width: 100%; overflow: auto; break-inside: auto; text-align: left; }
table.md-table td { min-width: 32px; }
.CodeMirror-gutters { border-right: 0px; background-color: inherit; }
.CodeMirror-linenumber { user-select: none; }
.CodeMirror { text-align: left; }
.CodeMirror-placeholder { opacity: 0.3; }
.CodeMirror pre { padding: 0px 4px; }
.CodeMirror-lines { padding: 0px; }
div.hr:focus { cursor: none; }
#write pre { white-space: pre-wrap; }
#write.fences-no-line-wrapping pre { white-space: pre; }
#write pre.ty-contain-cm { white-space: normal; }
.CodeMirror-gutters { margin-right: 4px; }
.md-fences { font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; overflow: visible; white-space: pre; background: inherit; position: relative !important; }
.md-diagram-panel { width: 100%; margin-top: 10px; text-align: center; padding-top: 0px; padding-bottom: 8px; overflow-x: auto; }
#write .md-fences.mock-cm { white-space: pre-wrap; }
.md-fences.md-fences-with-lineno { padding-left: 0px; }
#write.fences-no-line-wrapping .md-fences.mock-cm { white-space: pre; overflow-x: auto; }
.md-fences.mock-cm.md-fences-with-lineno { padding-left: 8px; }
.CodeMirror-line, twitterwidget { break-inside: avoid; }
.footnotes { opacity: 0.8; font-size: 0.9rem; margin-top: 1em; margin-bottom: 1em; }
.footnotes + .footnotes { margin-top: 0px; }
.md-reset { margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: top; background: 0px 0px; text-decoration: none; text-shadow: none; float: none; position: static; width: auto; height: auto; white-space: nowrap; cursor: inherit; -webkit-tap-highlight-color: transparent; line-height: normal; font-weight: 400; text-align: left; box-sizing: content-box; direction: ltr; }
li div { padding-top: 0px; }
blockquote { margin: 1rem 0px; }
li .mathjax-block, li p { margin: 0.5rem 0px; }
li { margin: 0px; position: relative; }
blockquote > :last-child { margin-bottom: 0px; }
blockquote > :first-child, li > :first-child { margin-top: 0px; }
.footnotes-area { color: rgb(136, 136, 136); margin-top: 0.714rem; padding-bottom: 0.143rem; white-space: normal; }
#write .footnote-line { white-space: pre-wrap; }
@media print {
  body, html { border: 1px solid transparent; height: 99%; break-after: avoid; break-before: avoid; font-variant-ligatures: no-common-ligatures; }
  #write { margin-top: 0px; padding-top: 0px; border-color: transparent !important; }
  .typora-export * { -webkit-print-color-adjust: exact; }
  html.blink-to-pdf { font-size: 13px; }
  .typora-export #write { break-after: avoid; }
  .typora-export #write::after { height: 0px; }
  .is-mac table { break-inside: avoid; }
}
.footnote-line { margin-top: 0.714em; font-size: 0.7em; }
a img, img a { cursor: pointer; }
pre.md-meta-block { font-size: 0.8rem; min-height: 0.8rem; white-space: pre-wrap; background: rgb(204, 204, 204); display: block; overflow-x: hidden; }
p > .md-image:only-child:not(.md-img-error) img, p > img:only-child { display: block; margin: auto; }
#write.first-line-indent p > .md-image:only-child:not(.md-img-error) img { left: -2em; position: relative; }
p > .md-image:only-child { display: inline-block; width: 100%; }
#write .MathJax_Display { margin: 0.8em 0px 0px; }
.md-math-block { width: 100%; }
.md-math-block:not(:empty)::after { display: none; }
[contenteditable="true"]:active, [contenteditable="true"]:focus, [contenteditable="false"]:active, [contenteditable="false"]:focus { outline: 0px; box-shadow: none; }
.md-task-list-item { position: relative; list-style-type: none; }
.task-list-item.md-task-list-item { padding-left: 0px; }
.md-task-list-item > input { position: absolute; top: 0px; left: 0px; margin-left: -1.2em; margin-top: calc(1em - 10px); border: none; }
.math { font-size: 1rem; }
.md-toc { min-height: 3.58rem; position: relative; font-size: 0.9rem; border-radius: 10px; }
.md-toc-content { position: relative; margin-left: 0px; }
.md-toc-content::after, .md-toc::after { display: none; }
.md-toc-item { display: block; color: rgb(65, 131, 196); }
.md-toc-item a { text-decoration: none; }
.md-toc-inner:hover { text-decoration: underline; }
.md-toc-inner { display: inline-block; cursor: pointer; }
.md-toc-h1 .md-toc-inner { margin-left: 0px; font-weight: 700; }
.md-toc-h2 .md-toc-inner { margin-left: 2em; }
.md-toc-h3 .md-toc-inner { margin-left: 4em; }
.md-toc-h4 .md-toc-inner { margin-left: 6em; }
.md-toc-h5 .md-toc-inner { margin-left: 8em; }
.md-toc-h6 .md-toc-inner { margin-left: 10em; }
@media screen and (max-width: 48em) {
  .md-toc-h3 .md-toc-inner { margin-left: 3.5em; }
  .md-toc-h4 .md-toc-inner { margin-left: 5em; }
  .md-toc-h5 .md-toc-inner { margin-left: 6.5em; }
  .md-toc-h6 .md-toc-inner { margin-left: 8em; }
}
a.md-toc-inner { font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; }
.footnote-line a:not(.reversefootnote) { color: inherit; }
.md-attr { display: none; }
.md-fn-count::after { content: "."; }
code, pre, samp, tt { font-family: var(--monospace); }
kbd { margin: 0px 0.1em; padding: 0.1em 0.6em; font-size: 0.8em; color: rgb(36, 39, 41); background: rgb(255, 255, 255); border: 1px solid rgb(173, 179, 185); border-radius: 3px; box-shadow: rgba(12, 13, 14, 0.2) 0px 1px 0px, rgb(255, 255, 255) 0px 0px 0px 2px inset; white-space: nowrap; vertical-align: middle; }
.md-comment { color: rgb(162, 127, 3); opacity: 0.8; font-family: var(--monospace); }
code { text-align: left; vertical-align: initial; }
a.md-print-anchor { white-space: pre !important; border-width: initial !important; border-style: none !important; border-color: initial !important; display: inline-block !important; position: absolute !important; width: 1px !important; right: 0px !important; outline: 0px !important; background: 0px 0px !important; text-decoration: initial !important; text-shadow: initial !important; }
.md-inline-math .MathJax_SVG .noError { display: none !important; }
.html-for-mac .inline-math-svg .MathJax_SVG { vertical-align: 0.2px; }
.md-math-block .MathJax_SVG_Display { text-align: center; margin: 0px; position: relative; text-indent: 0px; max-width: none; max-height: none; min-height: 0px; min-width: 100%; width: auto; overflow-y: hidden; display: block !important; }
.MathJax_SVG_Display, .md-inline-math .MathJax_SVG_Display { width: auto; margin: inherit; display: inline-block !important; }
.MathJax_SVG .MJX-monospace { font-family: var(--monospace); }
.MathJax_SVG .MJX-sans-serif { font-family: sans-serif; }
.MathJax_SVG { display: inline; font-style: normal; font-weight: 400; line-height: normal; zoom: 90%; text-indent: 0px; text-align: left; text-transform: none; letter-spacing: normal; word-spacing: normal; overflow-wrap: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; padding: 0px; margin: 0px; }
.MathJax_SVG * { transition: none 0s ease 0s; }
.MathJax_SVG_Display svg { vertical-align: middle !important; margin-bottom: 0px !important; margin-top: 0px !important; }
.os-windows.monocolor-emoji .md-emoji { font-family: "Segoe UI Symbol", sans-serif; }
.md-diagram-panel > svg { max-width: 100%; }
[lang="flow"] svg, [lang="mermaid"] svg { max-width: 100%; height: auto; }
[lang="mermaid"] .node text { font-size: 1rem; }
table tr th { border-bottom: 0px; }
video { max-width: 100%; display: block; margin: 0px auto; }
iframe { max-width: 100%; width: 100%; border: none; }
.highlight td, .highlight tr { border: 0px; }
svg[id^="mermaidChart"] { line-height: 1em; }
mark { background: rgb(255, 255, 0); color: rgb(0, 0, 0); }
.md-html-inline .md-plain, .md-html-inline strong, mark .md-inline-math, mark strong { color: inherit; }
mark .md-meta { color: rgb(0, 0, 0); opacity: 0.3 !important; }
@media print {
  .typora-export h1, .typora-export h2, .typora-export h3, .typora-export h4, .typora-export h5, .typora-export h6 { break-inside: avoid; }
  .typora-export h1::after, .typora-export h2::after, .typora-export h3::after, .typora-export h4::after, .typora-export h5::after, .typora-export h6::after { content: ""; display: block; height: 100px; margin-bottom: -100px; }
}


:root {
    --side-bar-bg-color: #fafafa;
    --control-text-color: #777;
}

@include-when-export url(https://fonts.loli.net/css?family=Open+Sans:400italic,700italic,700,400&subset=latin,latin-ext);

  html {
    font-size: 16px;
}

body {
    font-family: "Open Sans","Clear Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: rgb(51, 51, 51);
    line-height: 1.6;
}

#write {
    max-width: 860px;
      margin: 0 auto;
      padding: 30px;
}

@media only screen and (min-width: 1400px) {
    #write {
        max-width: 1024px;
    }
}

@media only screen and (min-width: 1800px) {
    #write {
        max-width: 1200px;
    }
}

#write > ul:first-child,
#write > ol:first-child{
    margin-top: 30px;
}

a {
    color: #4183C4;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-weight: bold;
    line-height: 1.4;
    cursor: text;
}
h1:hover a.anchor,
h2:hover a.anchor,
h3:hover a.anchor,
h4:hover a.anchor,
h5:hover a.anchor,
h6:hover a.anchor {
    text-decoration: none;
}
h1 tt,
h1 code {
    font-size: inherit;
}
h2 tt,
h2 code {
    font-size: inherit;
}
h3 tt,
h3 code {
    font-size: inherit;
}
h4 tt,
h4 code {
    font-size: inherit;
}
h5 tt,
h5 code {
    font-size: inherit;
}
h6 tt,
h6 code {
    font-size: inherit;
}
h1 {
    font-size: 2.25em;
    line-height: 1.2;
    border-bottom: 1px solid #eee;
}
h2 {
    font-size: 1.75em;
    line-height: 1.225;
    border-bottom: 1px solid #eee;
}

@media print {
    .typora-export h1,
    .typora-export h2 {
        border-bottom: none;
        padding-bottom: initial;
    }

    .typora-export h1::after,
    .typora-export h2::after {
        border-top: 1px solid #eee;
        margin-top: .3em;
    }
}

h3 {
    font-size: 1.5em;
    line-height: 1.43;
}
h4 {
    font-size: 1.25em;
}
h5 {
    font-size: 1em;
}
h6 {
   font-size: 1em;
    color: #777;
}
p,
blockquote,
ul,
ol,
dl,
table{
    margin: 0.8em 0;
}
li>ol,
li>ul {
    margin: 0 0;
}
hr {
    height: 2px;
    padding: 0;
    margin: 16px 0;
    background-color: #e7e7e7;
    border: 0 none;
    overflow: hidden;
    box-sizing: content-box;
}

li p.first {
    display: inline-block;
}
ul,
ol {
    padding-left: 30px;
}
ul:first-child,
ol:first-child {
    margin-top: 0;
}
ul:last-child,
ol:last-child {
    margin-bottom: 0;
}
blockquote {
    border-left: 4px solid #dfe2e5;
    padding: 0 15px;
    color: #777777;
}
blockquote blockquote {
    padding-right: 0;
}
table {
    padding: 0;
    word-break: initial;
}
table tr {
    border-top: 1px solid #dfe2e5;
    margin: 0;
    padding: 0;
}
table tr:nth-child(2n),
thead {
    background-color: #f8f8f8;
}
table tr th {
    font-weight: bold;
    border: 1px solid #dfe2e5;
    border-bottom: 0;
    margin: 0;
    padding: 6px 13px;
}
table tr td {
    border: 1px solid #dfe2e5;
    margin: 0;
    padding: 6px 13px;
}
table tr th:first-child,
table tr td:first-child {
    margin-top: 0;
}
table tr th:last-child,
table tr td:last-child {
    margin-bottom: 0;
}

.CodeMirror-lines {
    padding-left: 4px;
}

.code-tooltip {
    box-shadow: 0 1px 1px 0 rgba(0,28,36,.3);
    border-top: 1px solid #eef2f2;
}

.md-fences,
code,
tt {
    border: 1px solid #e7eaed;
    background-color: #f8f8f8;
    border-radius: 3px;
    padding: 0;
    padding: 2px 4px 0px 4px;
    font-size: 0.9em;
}

code {
    background-color: #f3f4f4;
    padding: 0 2px 0 2px;
}

.md-fences {
    margin-bottom: 15px;
    margin-top: 15px;
    padding-top: 8px;
    padding-bottom: 6px;
}


.md-task-list-item > input {
  margin-left: -1.3em;
}

@media print {
    html {
        font-size: 13px;
    }
    table,
    pre {
        page-break-inside: avoid;
    }
    pre {
        word-wrap: break-word;
    }
}

.md-fences {
    background-color: #f8f8f8;
}
#write pre.md-meta-block {
    padding: 1rem;
    font-size: 85%;
    line-height: 1.45;
    background-color: #f7f7f7;
    border: 0;
    border-radius: 3px;
    color: #777777;
    margin-top: 0 !important;
}

.mathjax-block>.code-tooltip {
    bottom: .375rem;
}

.md-mathjax-midline {
    background: #fafafa;
}

#write>h3.md-focus:before{
    left: -1.5625rem;
    top: .375rem;
}
#write>h4.md-focus:before{
    left: -1.5625rem;
    top: .285714286rem;
}
#write>h5.md-focus:before{
    left: -1.5625rem;
    top: .285714286rem;
}
#write>h6.md-focus:before{
    left: -1.5625rem;
    top: .285714286rem;
}
.md-image>.md-meta {
    /*border: 1px solid #ddd;*/
    border-radius: 3px;
    padding: 2px 0px 0px 4px;
    font-size: 0.9em;
    color: inherit;
}

.md-tag {
    color: #a7a7a7;
    opacity: 1;
}

.md-toc { 
    margin-top:20px;
    padding-bottom:20px;
}

.sidebar-tabs {
    border-bottom: none;
}

#typora-quick-open {
    border: 1px solid #ddd;
    background-color: #f8f8f8;
}

#typora-quick-open-item {
    background-color: #FAFAFA;
    border-color: #FEFEFE #e5e5e5 #e5e5e5 #eee;
    border-style: solid;
    border-width: 1px;
}

/** focus mode */
.on-focus-mode blockquote {
    border-left-color: rgba(85, 85, 85, 0.12);
}

header, .context-menu, .megamenu-content, footer{
    font-family: "Segoe UI", "Arial", sans-serif;
}

.file-node-content:hover .file-node-icon,
.file-node-content:hover .file-node-open-state{
    visibility: visible;
}

.mac-seamless-mode #typora-sidebar {
    background-color: #fafafa;
    background-color: var(--side-bar-bg-color);
}

.md-lang {
    color: #b4654d;
}

.html-for-mac .context-menu {
    --item-hover-bg-color: #E6F0FE;
}

#md-notification .btn {
    border: 0;
}

.dropdown-menu .divider {
    border-color: #e5e5e5;
}

.ty-preferences .window-content {
    background-color: #fafafa;
}

.ty-preferences .nav-group-item.active {
    color: white;
    background: #999;
}


</style>
</head>
<body class='typora-export os-windows'>
<div id='write'  class=''><p>&nbsp;</p><p>&nbsp;</p><h2><a name="肆零肆导航-聚合导航网页使用指南" class="md-header-anchor"></a><span>肆零肆导航-聚合导航网页使用指南</span></h2><p>&nbsp;</p><p><img src="https://images.xmq.plus/image-20200923095419036.png" alt="主页"  /></p><p>&nbsp;</p><h3><a name="网页特征" class="md-header-anchor"></a><span>网页特征</span></h3><ul><li><span>简洁舒适，无广告</span></li></ul><ul><li><span>聚合搜索，多种搜索引擎自由选择</span></li></ul><ul><li><span>夜间模式自由切换，保护你的双眼</span></li></ul><ul><li><span>丰富的网页导航，一触即达</span></li></ul><ul><li><span>黑科技网站聚合，高效生活</span></li><li><span>细腻丝滑设计，沉浸其中</span></li><li><span>设置搜索快捷方式，即刻搜索</span></li><li><span>简洁强大，是初衷</span></li></ul><p>&nbsp;</p><h3><a name="使用技巧" class="md-header-anchor"></a><span>使用技巧</span></h3><ul><li><span>打开网页光标自动锁定搜索栏；无需点击输入框，即可直接输入搜索内容</span></li></ul><ul><li><kbd><span>Enter</span></kbd><span>/</span><kbd><span>Tab</span></kbd><span>键自动定位光标到输入框，无需鼠标点击</span></li></ul><p><img src="https://images.xmq.plus/Tab.gif" alt="Tab" style="zoom: 67%;" /></p><ul><li><span>输入搜索内容后</span><kbd><span>Enter</span></kbd><span>即可搜索</span></li></ul><ul><li><kbd><span>Enter</span></kbd><span>/点击🖱搜索后自动全选输入内容，方便快速下次编辑搜索内容</span></li></ul><ul><li><span>搜索框内按入</span><kbd><span>↑</span></kbd><span>/</span><kbd><span>↓</span></kbd><span>，快速清除输入框内容</span></li></ul><p><img src="https://images.xmq.plus/clear.gif" alt="clear" style="zoom: 67%;" /></p><ul><li><span>滚轮下滑自动清空已输入内容</span></li></ul><p><img src="https://images.xmq.plus/scroll.gif" alt="scroll" style="zoom:67%;" /></p><ul><li><span>点击</span><code>回到顶部</code><span>按钮，无需点击输入框即可直接搜索</span></li></ul><p>&nbsp;</p><h3><a name="其他说明" class="md-header-anchor"></a><span>其他说明</span></h3><ul><li><p><span>建议</span><kbd><span>Ctrl</span></kbd><span> +</span><kbd><span>D</span></kbd><span>收藏网站</span></p></li><li><p><span>为了尽可能保证良好的使用体验，请使用谷歌浏览器，谷歌浏览器下载地址:</span><a href='https://sumsung.lanzous.com/i87Jufckfif'><span>谷歌浏览器</span></a></p></li><li><p><span>设置默认启动页（主页）：</span></p><p><span>    </span><span>打开谷歌浏览器-设置-启动时-添加新网页-输入框输入：</span><a href='https://xmq.plus/nav'><span>https://xmq.plus/nav</span></a><span>-保存确定</span></p></li></ul><p>&nbsp;</p><h3><a name="效果展示" class="md-header-anchor"></a><span>效果展示</span></h3><p><img src="https://images.xmq.plus/search.gif" alt="search" style="zoom:67%;" /></p><p><img src="https://images.xmq.plus/change.gif" alt="switch"  /></p><p><img src="https://images.xmq.plus/image-20200923104326356.png" alt="nav"  /></p><p>&nbsp;</p><p>&nbsp;</p><p><a href='https://xmq.plus/nav'><span>←回到首页</span></a></p><p>&nbsp;</p><p>&nbsp;</p><p><span>copyright © 2020 xmq.plus All rights reserved.  湘ICP备2020018001号</span></p></div>
</body>
</html>
  • Typora生成效果

导航-关于页面

4.建立软件清单页面

创建新页面hexo new page mac，更改新建index.md文件：

---
title: Mac软件
date: 2020-08-27 22:31:51
type: "mac"
layout: "mac"
---

在themes/layout/下新建文件mac.ejs:

<%- partial('_partial/bg-cover') %>
<style>
    .friends-container {
        margin-top: -100px;
        margin-bottom: 30px;
    }

    .friends-container .tag-title {
        margin-bottom: 10px;
        color: #3C4858;
        font-size: 1.75rem;
        font-weight: 400;
    }

    .frind-ship img {
        border-radius: 10%;
    }

    /* 以下是按钮样式 */

    .frind-ship {
        padding: 10px 20px;
    }

    .frind-ship .title {
        display: flex;
        align-items: center;
    }

    .frind-ship .title div {
        color: #fff;
        padding-left: 10px;
    }

    .frind-ship .title img {
        width: 100px;
        height: 100px;
        flex-shrink: 0;
    }

    .frind-ship .title h1 {
        padding-bottom: 5px;
        border-bottom: 2px solid #fff;
        position: relative;
        top:-15px;
        left: 3px;
    }

    .friend-button {
        display: flex;
        justify-content: center;
        margin-bottom: -27px;
    }

    .friend-button a {
        border-radius: 40px;
    }

    .friend-all .tag-post {
        margin-bottom: 30px;
    }

    .button-caution {
        background-color: #FF4351;
        border-color: #FF4351;
        color: #FFF;
    }

    .button {
        font-weight: 300;
        font-size: 16px;
        font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        text-decoration: none;
        text-align: center;
        line-height: 40px;
        height: 40px;
        padding: 0 40px;
        margin: 0;
        display: inline-block;
        appearance: none;
        cursor: pointer;
        border: none;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition-property: all;
        transition-property: all;
        -webkit-transition-duration: .3s;
        transition-duration: .3s;
    }

    .title {
        margin-bottom: 0rem !important;
    }

    .card {
        margin: 3rem 0 1rem 0 !important;
    }

    .button-glow.button-caution {
        -webkit-animation-name: glowing-caution;
        animation-name: glowing-caution;
    }

    @-webkit-keyframes glowing-caution {
        from {
            -webkit-box-shadow: 0 0 0 rgba(255, 67, 81, 0.3);
            box-shadow: 0 0 0 rgba(255, 67, 81, 0.3);
        }

        50% {
            -webkit-box-shadow: 0 0 20px rgba(255, 67, 81, 0.8);
            box-shadow: 0 0 20px rgba(255, 67, 81, 0.8);
        }

        to {
            -webkit-box-shadow: 0 0 0 rgba(255, 67, 81, 0.3);
            box-shadow: 0 0 0 rgba(255, 67, 81, 0.3);
        }
    }

    @keyframes glowing-caution {
        from {
            -webkit-box-shadow: 0 0 0 rgba(255, 67, 81, 0.3);
            box-shadow: 0 0 0 rgba(255, 67, 81, 0.3);
        }

        50% {
            -webkit-box-shadow: 0 0 20px rgba(255, 67, 81, 0.8);
            box-shadow: 0 0 20px rgba(255, 67, 81, 0.8);
        }

        to {
            -webkit-box-shadow: 0 0 0 rgba(255, 67, 81, 0.3);
            box-shadow: 0 0 0 rgba(255, 67, 81, 0.3);
        }
    }

    .button-caution:hover {
        background-color: #ff7680;
        border-color: #ff7680;
        color: #FFF;
        text-decoration: none;
    }

    .frind-card1 {
        background-image: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
    }

    .frind-card2 {
        background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .frind-card3 {
        background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
    }

    .frind-card4 {
        background-image: linear-gradient(to right, #6a11cb 0%, #2575fc 100%);
    }

    .frind-card5 {
        background-image: linear-gradient(to top, #c471f5 0%, #fa71cd 100%);
    }

    .frind-card6 {
        background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
    }

    .frind-card7 {
        background-image: linear-gradient(to top, #0ba360 0%, #3cba92 100%);
    }

    .frind-card8 {
        background-image: linear-gradient(to top, #0c3483 0%, #a2b6df 100%, #6b8cce 100%, #a2b6df 100%);
    }

    .frind-card9 {
        background-image: linear-gradient(to right, #ff758c 0%, #ff7eb3 100%);
    }

    .frind-card10 {
        background-image: linear-gradient(to top, #f77062 0%, #fe5196 100%);
    }

    article .card {
        overflow: visible !important;
    }
</style>

<main class="content">
    <div class="container friends-container">
        <div class="card">
            <div class="card-content">
                <div class="tag-title center-align">
                    <i class="fab fa-windows"></i>&nbsp;&nbsp;Mac软件清单
                </div>
                <article id="friends-link">
                    <% if (site.data && site.data.mac) { %>
                    <% var friends = site.data.mac; %>
                    <div class="row tags-posts friend-all">
                        <% for (var i = 0, len = friends.length; i < len; i++) { %>
                        <% var friend = friends[i]; %>
                        <div class="col s12 m6 l4 friend-div" data-aos="zoom-in-up">
                            <div class="card frind-card<%- ((i % 10) +1) %>">
                                <div class="frind-ship">
                                    <div class="title">
                                        <img src="<%- url_for(friend.avatar) %>" alt="img">
                                        <div>
                                            <h1 class="friend-name"><%= friend.name %></h1>
                                            <p style="position: relative;top: -35px;"><%= friend.introduction %></p>
                                        </div>
                                    </div>
                                    <div class="friend-button">
                                        <a href="<%- url_for(friend.url) %>" target="_blank"
                                            class="button button-glow button-rounded button-caution">
                                            <%= friend.title %>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <% } %>
                    </div>
                    <% } %>
                </article>
            </div>
        </div>
        <div class="card">
            <div class="card-content">
                <p style="text-align: center;">软件密码：1234</p>
            </div>
        </div>
    </div>
</main>

<script>
    $(function () {
        $('#friends-link').masonry({
            itemSelector: '.friend-div'
        });
    });
</script>

如需单独设置封面可将顶栏<%- partial('_partial/bg-cover') %>替换为相应ejs中的内容，相应修改即可。

5.文章生成永久链接

主题默认的文章链接配置是：

permalink: :year/:month/:day/:title

这种生成的链接地址很长，文章版权的链接地址会出现一大串字符编码，一点也不好看。因此需要修改文章生成链接的格式。

首先再根目录下执行下面的命令：

hexo-abbrlinkGitHub 地址

npm install hexo-abbrlink --save

然后站点配置文件下添加如下配置：

abbrlink:
    alg: crc16   #算法： crc16(default) and crc32
    rep: hex     #进制： dec(default) and hex: dec #输出进制：十进制和十六进制，默认为10进制。丨dec为十进制，hex为十六进制

再将站点配置文件的 permalink 的值修改为：

permalink: posts/:abbrlink.html  # 此处可以自己设置，也可以直接使用 /:abbrlink

生成文章的链接格式就会是如下样例（官方样例）:

crc16 & hex
https://post.zz173.com/posts/66c8.html

crc16 & dec
https://post.zz173.com/posts/65535.html
crc32 & hex
https://post.zz173.com/posts/8ddf18fb.html

crc32 & dec
https://post.zz173.com/posts/1690090958.html

生成完后，原 md 文件的 Front-matter 内会增加 abbrlink 字段，值为生成的 ID 。这个字段确保了在我们修改了 Front-matter 内的博客标题 title 或创建日期 date 字段之后而不会改变链接地址。

6.“关于”页面增加简历

修改/themes/matery/layout/about.ejs，找到<div class="card">标签，然后找到它对应的</div>标签，接在后面新增一个card，语句如下：

<div class="card">
    <div class="card-content">
        <div class="card-content article-card-content">
                <div class="title center-align" data-aos="zoom-in-up">
                    <i class="fa fa-address-book"></i>&nbsp;&nbsp;<%- __('myCV') %>
                </div>
                <div id="articleContent" data-aos="fade-up">
                    <%- page.content %>
                </div>
        </div>
    </div>
</div>

这样就会多出一张card，然后可以在/source/about/index.md下面写上你的简历了，当然这里的位置随你自己设置，你也可以把简历作为第一个card。

7.压缩代码

因为 hexo 生成的 html、css、js 等都有很多的空格或者换行，而空格和换行也是占用字节的，所以需要将空格换行去掉也就是我要进行的 “压缩”。

有人说空格换行能占多少字节？确实占不了多少，但是一个人访问是这么多字节，那么一百人，一万人呢？加起来这量就不少了吧，这都是流量啊！这也是很多 css/js 文件的后缀为.min.js 或.min.css 的原因。虽然我们可能没那么多访问量，但是能减小一点资源文件的大小也是对访问速度有那么一点提升的。

我们采用 gulp 代码压缩方式。

使用方法：

进入站点根目录下依次执行下面的命令：

# 全局安装gulp模块
npm install gulp -g
# 安装各种小功能模块  执行这步的时候，可能会提示权限的问题，最好以管理员模式执行
npm install gulp gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save
# 额外的功能模块
npm install gulp-debug gulp-clean-css gulp-changed gulp-if gulp-plumber gulp-babel babel-preset-es2015 del @babel/core --save

在 Hexo 根目录新建文件 gulpfile.js，并复制以下内容到文件中，有中文注释，可以根据自己需求修改。（注意：文件名不能错，一定为 gulpfile.js，否则会出错！）

var gulp = require("gulp");
var debug = require("gulp-debug");
var cleancss = require("gulp-clean-css"); //css压缩组件
var uglify = require("gulp-uglify"); //js压缩组件
var htmlmin = require("gulp-htmlmin"); //html压缩组件
var htmlclean = require("gulp-htmlclean"); //html清理组件
var imagemin = require("gulp-imagemin"); //图片压缩组件
var changed = require("gulp-changed"); //文件更改校验组件
var gulpif = require("gulp-if"); //任务 帮助调用组件
var plumber = require("gulp-plumber"); //容错组件（发生错误不跳出任务，并报出错误内容）
var isScriptAll = true; //是否处理所有文件，(true|处理所有文件)(false|只处理有更改的文件)
var isDebug = true; //是否调试显示 编译通过的文件
var gulpBabel = require("gulp-babel");
var es2015Preset = require("babel-preset-es2015");
var del = require("del");
var Hexo = require("hexo");
var hexo = new Hexo(process.cwd(), {}); // 初始化一个hexo对象

// 清除public文件夹
gulp.task("clean", function () {
    return del(["public/**/*"]);
});

// 下面几个跟hexo有关的操作，主要通过hexo.call()去执行，注意return
// 创建静态页面 （等同 hexo generate）
gulp.task("generate", function () {
    return hexo.init().then(function () {
        return hexo
            .call("generate", {
                watch: false
            })
            .then(function () {
                return hexo.exit();
            })
            .catch(function (err) {
                return hexo.exit(err);
            });
    });
});

// 启动Hexo服务器
gulp.task("server", function () {
    return hexo
        .init()
        .then(function () {
            return hexo.call("server", {});
        })
        .catch(function (err) {
            console.log(err);
        });
});

// 部署到服务器
gulp.task("deploy", function () {
    return hexo.init().then(function () {
        return hexo
            .call("deploy", {
                watch: false
            })
            .then(function () {
                return hexo.exit();
            })
            .catch(function (err) {
                return hexo.exit(err);
            });
    });
});

// 压缩public目录下的js文件
gulp.task("compressJs", function () {
    return gulp
        .src(["./public/**/*.js", "!./public/libs/**"]) //排除的js
        .pipe(gulpif(!isScriptAll, changed("./public")))
        .pipe(gulpif(isDebug, debug({ title: "Compress JS:" })))
        .pipe(plumber())
        .pipe(
            gulpBabel({
                presets: [es2015Preset] // es5检查机制
            })
        )
        .pipe(uglify()) //调用压缩组件方法uglify(),对合并的文件进行压缩
        .pipe(gulp.dest("./public")); //输出到目标目录
});

// 压缩public目录下的css文件
gulp.task("compressCss", function () {
    var option = {
        rebase: false,
        //advanced: true, //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
        compatibility: "ie7" //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
        //keepBreaks: true, //类型：Boolean 默认：false [是否保留换行]
        //keepSpecialComments: '*' //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
    };
    return gulp
        .src(["./public/**/*.css", "!./public/**/*.min.css"]) //排除的css
        .pipe(gulpif(!isScriptAll, changed("./public")))
        .pipe(gulpif(isDebug, debug({ title: "Compress CSS:" })))
        .pipe(plumber())
        .pipe(cleancss(option))
        .pipe(gulp.dest("./public"));
});

// 压缩public目录下的html文件
gulp.task("compressHtml", function () {
    var cleanOptions = {
        protect: /<\!--%fooTemplate\b.*?%-->/g, //忽略处理
        unprotect: /<script [^>]*\btype="text\/x-handlebars-template"[\s\S]+?<\/script>/gi //特殊处理
    };
    var minOption = {
        collapseWhitespace: true, //压缩HTML
        collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true, //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
        removeComments: true, //清除HTML注释
        minifyJS: true, //压缩页面JS
        minifyCSS: true, //压缩页面CSS
        minifyURLs: true //替换页面URL
    };
    return gulp
        .src("./public/**/*.html")
        .pipe(gulpif(isDebug, debug({ title: "Compress HTML:" })))
        .pipe(plumber())
        .pipe(htmlclean(cleanOptions))
        .pipe(htmlmin(minOption))
        .pipe(gulp.dest("./public"));
});

// 压缩 public/medias 目录内图片
gulp.task("compressImage", function () {
    var option = {
        optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级）
        progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
        interlaced: false, //类型：Boolean 默认：false 隔行扫描gif进行渲染
        multipass: false //类型：Boolean 默认：false 多次优化svg直到完全优化
    };
    return gulp
        .src("./public/medias/**/*.*")
        .pipe(gulpif(!isScriptAll, changed("./public/medias")))
        .pipe(gulpif(isDebug, debug({ title: "Compress Images:" })))
        .pipe(plumber())
        .pipe(imagemin(option))
        .pipe(gulp.dest("./public"));
});
// 执行顺序： 清除public目录 -> 产生原始博客内容 -> 执行压缩混淆 -> 部署到服务器
gulp.task(
    "build",
    gulp.series(
        "clean",
        "generate",
        "compressHtml",
        "compressCss",
        "compressJs",
        "compressImage",
        gulp.parallel("deploy")
    )
);

// 默认任务
gulp.task(
    "default",
    gulp.series(
        "clean",
        "generate",
        gulp.parallel("compressHtml", "compressCss", "compressJs","compressImage")
    )
);
//Gulp4最大的一个改变就是gulp.task函数现在只支持两个参数，分别是任务名和运行任务的函数

以后的执行方式有两种：

  • 直接在 Hexo 根目录执行 gulp 或者 gulp default ，这个命令相当于 hexo cl&&hexo g 并且再把代码和图片压缩。
  • 在 Hexo 根目录执行 gulp build ，这个命令与第 1 种相比是：在最后又加了个 hexo d ，等于说生成、压缩文件后又帮你自动部署了。

值得注意的是：这个加入了图片压缩，如果不想用图片压缩可以把第 154 行的 “compressImage”, 和第 165 行的 ,”compressImage” 去掉即可

七、常见问题

1.文章代码块乱码

问题描述： 一是代码块中的 { } 被转义，二是代码块中的代码可能会被渲染，甚至会影响整个文章页面的布局

代码显示异常

代码显示异常

解决办法：卸载现有新版本，更换hexo@4.2.1版本

具体步骤：

  • 将版本降为低版本

    先卸载现有版本 npm uninstall hexo-cli -g

  • 然后重新安装npm hexo@4.2.1

    npm install hexo@4.2.1

npm install hexo-cli -g

  • 重新创建一个文件夹matery，重新hexo init matery

  • 将所有文件跳过式移动到新文件夹中(千万不要点替换文件)

  • 然后再将自己的根目录下的_config.yml替换到新文件夹下根目录位置

  • 删除自带主题landscape

  • 以后不要安装Prism_plugin插件，否则会出现同样的问题

  • 卸载插件命令：npm un -S hexo-prism-plugin

2.卸载代码高亮插件后代码无法高亮

问题描述：卸载代码高亮插件Prism_plugin后代码无法高亮

解决办法：Prism_plugin插件在metary主题中无法正常使用，就换一种方式。

具体办法：

选择 theme 主题、language 支持的语言（不要选太多，够用就好）、plugin 插件（可以选Line Numbers、Copy to Clipboard Button，其他的看自己需求）；然后点击下载按钮就行了；

下载

  • 3.文件放置位置

step1. 在themes\matery\source\js下新建prism文件夹，用来存放js与css代码。

step2. 找到此文件hexo-theme-matery\layout_partial\head.ejs打开，在标签之前黏贴以下代码：

<link rel="stylesheet" href="/js/prism/prism.css">

如果不存在可以直接放在layout.ejs文件中

step3. 找到此文件hexo-theme-matery\layout_partial\footer.ejs打开，在最后部分黏贴以下代码：

<script src="/js/prism/prism.js" async></script>

step4. 记得在hexo的根目录_config.yml下设置enable: false

highlight: enable: false

step5. 重新生成博客文件，重启本地服务。

$ hexo clean hexo generate $ hexo server

3.代码压缩插件压缩后无法显示博客文章

问题描述：代码压缩脚本gulp生成的文章博客无法显示

解决办法：查看网页文章链接是否带有.html后缀，在配置文件中加上即可

具体步骤：

根目录下修改配置文件_config.yml：

pretty_urls:
    trailing_index: true # 是否在永久链接中保留尾部的 index.html，设置为 false 时去除
    trailing_html: true # 是否在永久链接中保留尾部的.html, 设置为false时去除(对尾部的index.html无效)

参考文章

Hexo
赏
评论
 上一篇
高等减振道床技术培训会议记录 高等减振道床技术培训会议记录
2020.08.26 星期三 培训流程： 培训人员对《高架线减振垫浮置板道床》进行详细解读； 培训过程中遇到的问题和疑问实时解答。 培训内容： 《高架线减振垫浮置板道床》设计说明解读； 高等减振道床施工工艺流程。 一、高架线高
2020-08-28 土木工程
高等减振道床
下一篇 
WJ-7B型扣件安装说明会议记录 WJ-7B型扣件安装说明会议记录
2020.08.24 星期一 培训流程：1.培训人员对本工程或本工程中的一项细节进行详细解说。 2.培训人员提出存在的疑问，培训人员进行答疑。 培训内容：1.WJ-7B扣件的组成及安装注意事项 一、部件组成及说明 弹条 一
2020-08-26 土木工程
扣件
  目录