Hexo系列(4)—Matery优化一

Matery初步配置及优化一

        因为涉及到各方各面，所以以配置、修改、删除和增加来就此分类，分为两篇文章。由于想要面面俱到，所以篇幅过长，可以根据目录来跳转到需要的地方。

配置

1. 新建分类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"
   ---

2. 新建标签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"
   ---

3. 新建关于我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"
   ---

4. 新建留言板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 行的“菜单”配置，取消关于留言板的注释即可。评论系统参看至后面的Valine评论。

5. 新建友情链接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": "前去学习"
   }]

6. 新建404页

   如果在你的博客 source 目录下还没有 404.md 文件，那么你就需要新建一个。

   hexo new page 404

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

   ---
   title: 404
   date: 2018-09-30 17:25:30
   type: "404"
   layout: "404"
   description: "Oops～，我崩溃了！找不到你想要的页面 :("
   ---

修改

修改主题的基本信息

Hexo根目录下配置文件_config.yml

# Site
title: LRBlog #网站标题
subtitle: 'Method' #网站副标题subtitle
# 下面description,keywords，如果想让搜索引擎收录需要填上，这个做SEO优化必不可忽视的两个属性
description: '记录生活，促进学习'#网站描述
keywords: [信息安全, Heox, Matery, LeetCode, Python3, 期末题等]#网站的关键词
author: Liuruibin #作者，文章版权所显示的
language: zh-CN #网站语言，不填写，默认为英文
timezone: '' #时区，可以不填写

修改打赏的二维码图片

在主题文件的 source/medias/reward 文件中，你可以替换成你的的微信和支付宝的打赏二维码图片。

修改主题的logo和favicon图标

主题根目录下配置文件_config.yml，更改成你的logo和favicon路径就可以啦。

# Configure website favicon and LOGO
# 配置网站favicon和网站LOGO
favicon: /favicon.png
logo: /medias/logo.png

修改社交链接

在主题的 _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>
<% } %>

添加时的社交图标Font Awesome中找的:

• Facebook: fab fa-facebook
• Twitter: fab fa-twitter
• Google-plus: fab fa-google-plus
• Linkedin: fab fa-linkedin
• Tumblr: fab fa-tumblr
• Medium: fab fa-medium
• Slack: fab fa-slack
• Sina Weibo: fab fa-weibo
• Wechat: fab fa-weixin
• QQ: fab fa-qq
• Zhihu: fab fa-zhihu

修改最上方导航栏颜色

打开themes/matery/source/css/matery.css文件，大约在250行，有一个.bg-color属性，修改其属性值即可，代码如下：

.bg-color {
    background-image: linear-gradient(to right,	#1E90FF 0%, #1E90FF 100%);
    opacity: 0.9;  //透明效果 值范围 0~1，看情况自己修改
}

颜色是RGB十六进制表示的，可以百度选取要的颜色。

去掉主页图动态滤镜颜色

打开themes/matery/source/css/matery.css文件，查找rainbow属性，然后将其注释即可。如下：

/*如果想去掉banner图的颜色渐变效果，请将以下的css属性注释掉或者删除掉即可*/
@-webkit-keyframes rainbow {
   /* 动态切换背景颜色. */
}
@keyframes rainbow {
    /* 动态切换背景颜色. */
}

修改banner图和文章特色图

你可以直接在 /source/medias/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 做同步修改。如果想改为每小时或者每分钟切换banner图的话，需要将getDay()改为getHours()或者getMinutes()即可。

因为我只想选择一张图片，因此在主题被指文件中关闭了轮换，并且在banner文件夹中放入自己的图片，把它改名为’0.jpg’（这样就不用改代码了）。另外更改了featurimages中的图片也要修改主题配置文件。

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

# The post featured images that needs to be displayed when there is no image.
# 无文章特色图片时需要显示的文章特色图片.
featureImages:
- /medias/featureimages/0.jpg

修改首页动态打字效果副标题

在主题配置文件中，找到下面的配置：

subtitle:
  enable: true
  loop: true # 是否循环
  showCursor: true # 是否显示光标
  startDelay: 300 # 开始延迟
  typeSpeed: 110 # 打字速度
  backSpeed: 30 # 删除速度
  sub:
    - 十年生死两茫茫，写程序，到天亮
    - 千行代码，Bug何处藏。
    - 纵使上线又怎样，朝令改，夕断肠。
    - 别看了说你呐，秃头小宝贝（doge

注：速度值越小速度越快

修改滑动条

在themes\Matery\source\css\matery.css样式添加（不是修改）如下：

/* 滚动条 */
::-webkit-scrollbar-thumb {
    background-color: #4169E1;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
    border-radius: 3em;
}
::-webkit-scrollbar-track {
    background-color: #00BFFF;
    border-radius: 3em;
}
::-webkit-scrollbar {
    width: 8px;
    height: 15px;
}

其中background可以更改的，thumb是滑动条颜色，track是轨道颜色，依然是RGB16进制。

修改文章发布统计图的开始时间

发布时间统计图开始的时间过早，但是那个时间段还没网站，哪里可能发布文章，因此把开始点更改下，从近期开始。这个时间统计图实现的方法就是运用了 JavaScript 技术，使用的 JS 文件是 moment.js，Moment.js是一个轻量级的 JavaScript 时间库，它方便了日常开发中对时间的操作，提高了开发效率。更改位置themes/matery/layout/_widget/post-charts.ejs:

var startDate = moment().subtract(1, 'months').startOf('month');//表示现在时间减去一个月，并从月初开始

修改渲染数学公式引擎

        在写文章中遇到需要写数学公式的时候，在Typora中数学公式根据语法写出后可以显示，而渲染上传到网站上显示的时源代码。这是因为Hexo默认使用hexo-renderer-marked引擎渲染网页，该引擎会把一些特殊的 markdown 符号转换为相应的 html 标签，比如在 markdown 语法中，下划线_代表斜体，会被渲染引擎处理为<em>标签。因为类 Latex 格式书写的数学公式下划线_表示下标，有特殊的含义，如果被强制转换为<em>标签，那么 MathJax 引擎在渲染数学公式的时候就会出错。类似的语义冲突的符号还包括*, {, }, \\等。

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

        解决方法为:更换原来的渲染引擎为hexo-renderer-kramed。之后因为kramed也存在语义冲突的问题，因此需要到博客根目录下，找到node_modules\kramed\lib\rules\inline.js，把第11行的 escape 变量的值做相应的修改，第20行的em变量也要做相应的修改：

//escape: /^\\([\\`*{}\[\]()#$+\-.!_>])/,
escape: /^\\([`*\[\]()#$+\-.!_>])/,

//em: /^\b_((?:__|[\s\S])+?)_\b|^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,
em: /^\*((?:\*\*|[\s\S])+?)\*(?!\*)/,

        之后重新启动Hexo（先clean再generate），注意要在主题中开启数学公式，在文章配置中加入mathjax: true~。

删除

去掉右上角的Github图标

主题根目录下配置文件_config.yml，更改enable值。

# Whether to display fork me on github icon and link, default true, You can change it to your repo address
# 配置是否在 header 中显示 fork me on github 的图标，默认为true，你可以修改为你的仓库地址.
githubLink:
  enable: false
  url: https://github.com/Liu-rui-bin
  title: Fork Me

去掉主页的Github按钮

主题配置文件_config.yml，更改enable值。

# The configuration of the second button in the home banner,
# including the display name of the button, the font awesome icon, and the hyperlink to the button.
# 首页 banner 中的第二个按钮的配置，包括按钮的显示名称、font awesome图标和按钮的超链接.
indexbtn:
  enable: false
  name: Github
  icon: fab fa-github-alt
  url: https://github.com/Liu-rui-bin

去掉文章banner图片中间的标题

在不少情况下，文章标题在背景图片下根本重叠看不出来，索性把这个标题删除，在文章最开始写上标题就好啦呀。在themes\hexo-theme-matery\source\css\matery.css中搜索.bg-cover .post-title将其中字大小改为0即可：

.bg-cover .post-title {
    margin: 0 auto;
    font-size: 0rem;
    font-weight: 400;
}

鸣谢❀参考大佬文章

• Matery官方文档
• Hexo+Github博客搭建之Matery主题个性化修改篇（一）
• Hexo+Github博客搭建之Matery主题个性化修改篇（二）
• hexo（matery）背景、滚动条优化+增加点击跳评论
• Hexo+Github: 博客网站搭建完全教程(看这篇就够了)
• 在Hexo博客中加入豆瓣读书页面
• Hexo 博客添加 Valine 评论系统
• matery 主题修改文章发布统计图的开始时间