hexo-theme-matery主题使用

• 简单漂亮，文章内容美观易读
• Material Design 设计
• 响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现
• 首页轮播文章及每天动态切换 Banner 图片
• 瀑布流式的博客文章列表（文章无特色图片时会有 24 张漂亮的图片代替）
• 时间轴式的归档页
• 词云 的标签页和 雷达图 的分类页
• 丰富的关于我页面（包括关于我、文章统计图、我的项目、我的技能、相册等）
• 可自定义的数据的友情链接页面
• 支持文章置顶和文章打赏
• 支持 MathJax
• TOC 目录
• 可设置复制文章内容时追加版权信息
• 可设置阅读文章时做密码验证
• Gitalk 、 Gitment 、 Valine 和 Disqus 评论模块（推荐使用 Gitalk ）
• 集成了 不蒜子统计 、谷歌分析（ Google Analytics ）和文章字数统计等功能
• 支持在首页的音乐播放和视频播放功能
• 支持 emoji 表情，用 markdown emoji 语法书写直接生成对应的能 跳跃 的表情。
• 支持 DaoVoice 、 Tidio 在线聊天功能。

本主题 推荐你使用 Hexo 5.0.0 及以上的版本 。如果，你已经有一个自己的 Hexo 博客了，建议你将 Hexo 升级到最新稳定的版本。

点击 这里 下载 master 分支的最新稳定版的代码，解压缩后，将 hexo-theme-matery 的文件夹复制到你 Hexo 的 themes 文件夹中即可。

当然你也可以在你的 themes 文件夹下使用 git clone 命令来下载:

git clone https://github.com/blinkfox/hexo-theme-matery.git
修改 Hexo 根目录下的 _config.yml 的 theme 的值：theme: hexo-theme-matery
 
_config.yml 文件的其它修改建议:
 
请修改 _config.yml 的 url 的值为你的网站主 URL（如：http://xxx.github.io）。
建议修改两个 per_page 的分页条数值为 6 的倍数，如：12、18 等，这样文章列表在各个屏幕下都能较好的显示。
如果你是中文用户，则建议修改 language 的值为 zh-CN。
 
新建分类 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": "前去学习"
新建 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～，我崩溃了！找不到你想要的页面 :("
菜单导航配置
 
配置基本菜单导航的名称、路径url和图标icon.
 
1.菜单导航名称可以是中文也可以是英文(如：Index或主页)
 2.图标icon 可以在Font Awesome 中查找
 
menu:
  Index:
    url: /
    icon: fas fa-home
  Tags:
    url: /tags
    icon: fas fa-tags
  Categories:
    url: /categories
    icon: fas fa-bookmark
  Archives:
    url: /archives
    icon: fas fa-archive
  About:
    url: /about
    icon: fas fa-user-circle
  Friends:
    url: /friends
    icon: fas fa-address-book
二级菜单配置方法
 
如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作
 
在需要添加二级菜单的一级菜单下添加children关键字(如:About菜单下添加children)
在children下创建二级菜单的 名称name,路径url和图标icon.
注意每个二级菜单模块前要加 -.
注意缩进格式
 
menu:
  Index:
    url: /
    icon: fas fa-home
  Tags:
    url: /tags
    icon: fas fa-tags
  Categories:
    url: /categories
    icon: fas fa-bookmark
  Archives:
    url: /archives
    icon: fas fa-archive
  About:
    url: /about
    icon: fas fa-user-circle-o
  Friends:
    url: /friends
    icon: fas fa-address-book
  Medias:
    icon: fas fa-list
    children:
      - name: Music
        url: /music
        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
执行 hexo clean && hexo g 重新生成博客文件，然后就可以在文章中对应位置看到你用emoji语法写的表情了。




    
 
从 Hexo5.0 版本开始自带了 prismjs 代码语法高亮的支持，本主题对此进行了改造支持。
 
如果你的博客中曾经安装过 hexo-prism-plugin 的插件，那么你须要执行 npm uninstall hexo-prism-plugin 来卸载掉它，否则生成的代码中会有 { 和 } 的转义字符。
 
然后，修改 Hexo 根目录下 _config.yml 文件中 highlight.enable 的值为 false，并将 prismjs.enable 的值设置为 true，主要配置如下：
 
highlight:
  enable: false
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: true
  preprocess: true
  line_number: true
  tab_replace: ''
主题中默认的 prismjs 主题是 Tomorrow Night，如果你想定制自己的主题，可以前往 prismjs 下载页面 定制下载自己喜欢的主题 css 文件，然后将此 css 主题文件取名为 prism.css，替换掉 hexo-theme-matery 主题文件夹中的 source/libs/prism/prism.css 文件即可。
 
本主题中还使用到了 hexo-generator-search 的 Hexo 插件来做内容搜索，安装命令如下：
 
npm install hexo-generator-search --save
在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：
 
search:
  path: search.xml
  field: post
中文链接转拼音（建议安装）
 
如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 SEO，且 gitment 评论对中文链接也不支持。我们可以用 hexo-permalink-pinyin Hexo 插件使在生成文章时生成中文拼音的永久链接。
 
安装命令如下：
 
npm i hexo-permalink-pinyin --save
在 Hexo 根目录下的 _config.yml 文件中，新增以下的配置项：
 
permalink_pinyin:
  enable: true
  separator: '-' # default: '-'
 
注：除了此插件外，hexo-abbrlink 插件也可以生成非中文的链接。
 
文章字数统计插件（建议安装）
 
如果你想要在文章中显示文章字数、阅读时长信息，可以安装 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 文件，说明你已经安装成功了。
 
添加 DaoVoice 在线聊天功能（可选的）
 
前往 DaoVoice 官网注册并且获取 app_id，并将 app_id 填入主题的 _config.yml 文件中。
 
添加 Tidio 在线聊天功能（可选的）
 
前往 Tidio 官网注册并且获取 Public Key，并将 Public Key 填入主题的 _config.yml 文件中。
 
页脚信息可能需要做定制化修改，而且它不便于做成配置信息，所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中，包括站点、使用的主题、访问量等。
 
修改社交链接
 
在主题的 _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>
<% } %>
其中，社交图标（如：fa-github）你可以在 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
 
 
注意: 本主题中使用的 Font Awesome 版本为 5.11.0。
 
修改打赏的二维码图片
 
在主题文件的 source/medias/reward 文件中，你可以替换成你的的微信和支付宝的打赏二维码图片。
 
配置音乐播放器（可选的）
 
要支持音乐播放，在主题的 _config.yml 配置文件中激活music配置即可：
 
# 是否在首页显示音乐
music:
  enable: true
  title:     	    # 非吸底模式有效
    enable: true
    show: 听听音乐
  server: netease   # require music platform: netease, tencent, kugou, xiami, baidu
  type: playlist    # require song, playlist, album, search, artist
  id: 503838841     # require song id / playlist id / album id / search keyword
  fixed: false      # 开启吸底模式
  autoplay: false   # 是否自动播放
  theme: '#42b983'
  loop: 'all'       # 音频循环播放, 可选值: 'all', 'one', 'none'
  order: 'random'   # 音频循环顺序, 可选值: 'list', 'random'
  preload: 'auto'   # 预加载，可选值: 'none', 'metadata', 'auto'
  volume: 0.7       # 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
  listFolded: true  # 列表默认折叠
 
server可选netease（网易云音乐），tencent（QQ音乐），kugou（酷狗音乐），xiami（虾米音乐），
 
 
baidu（百度音乐）。
 
 
type可选song（歌曲），playlist（歌单），album（专辑），search（搜索关键字），artist（歌手）
 
 
id获取方法示例: 浏览器打开网易云音乐，点击我喜欢的音乐歌单，浏览器地址栏后面会有一串数字，playlist的id
 
 
即为这串数字。
 
文章 Front-matter 介绍
 
Front-matter 选项详解
 
Front-matter 选项中的所有内容均为非必填的。但我仍然建议至少填写 title 和 date 的值。
 
配置选项
默认值
描述
title
Markdown 的文件标题
文章标题，强烈建议填写此选项
date
文件创建时的日期时间
发布时间，强烈建议填写此选项，且最好保证全局唯一
author
根 _config.yml 中的 author
文章作者
img
featureImages 中的某个值
文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: http://xxx.com/xxx.jpg
top
true
推荐文章（文章是否置顶），如果 top 值为 true，则会作为首页推荐文章
cover
false
v1.0.2版本新增，表示该文章是否需要加入到首页轮播封面中
coverImg
无
v1.0.2版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片
password
无
文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 password 的值，该值必须是用 SHA256 加密后的密码，防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword 选项
toc
true
是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项
mathjax
false
是否开启数学公式支持 ，本文章是否开启 mathjax，且需要在主题的 _config.yml 文件中也需要开启才行
summary
无
文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories
无
文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类
tags
无
文章标签，一篇文章可以多个标签
keywords
文章标题
文章关键字，SEO 时需要
reprintPolicy
cc_by
文章转载规则， 可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个
 
 
如果 img 属性不填写的话，文章特色图会根据文章标题的 hashcode 的值取余，然后选取主题中对应的特色图片，从而达到让所有文章的特色图各有特色。
date 的值尽量保证每篇文章是唯一的，因为本主题中 Gitalk 和 Gitment 识别 id 是通过 date 的值来作为唯一标识的。
如果要对文章设置阅读验证密码的功能，不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还需要在主题的 _config.yml 中激活了配置。有些在线的 SHA256 加密的地址，可供你使用：开源中国在线工具、chahuo、站长工具。
您可以在文章md文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则
 
以下为文章的 Front-matter 示例。
 
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
author: 赵奇
img: /source/images/xxx.jpg
top: true
cover: true
coverImg: /images/1.jpg
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
toc: false
mathjax: false
summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories: Markdown
tags:
  - Typora
  - Markdown
自定制修改
 
在本主题的 _config.yml 中可以修改部分自定义信息，有以下几个部分：
 
菜单
我的梦想
首页的音乐播放器和视频播放器配置
是否显示推荐文章名称和按钮配置
favicon 和 Logo
个人信息
TOC 目录
文章打赏信息
复制文章内容时追加版权信息
MathJax
文章字数统计、阅读时长
点击页面的’爱心’效果
我的项目
我的技能
我的相册
Gitalk、Gitment、Valine 和 disqus 评论配置
不蒜子统计和谷歌分析（Google Analytics）
默认特色图的集合。当文章没有设置特色图时，本主题会根据文章标题的 hashcode 值取余，来选择展示对应的特色图
 
我认为个人博客应该都有自己的风格和特色。如果本主题中的诸多功能和主题色彩你不满意，可以在主题中自定义修改，很多更自由的功能和细节点的修改难以在主题的 _config.yml 中完成，需要修改源代码才来完成。以下列出了可能对你有用的地方：
 
修改主题颜色
 
在主题文件的 /source/css/matery.css 文件中，搜索 .bg-color 来修改背景颜色：
 
/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */
.bg-color {
    background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
@-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 做同步修改。
                    选项中的所有内容均为非必填的。但我仍然建议至少填写title和date的值。配置选项默认值描述titleMarkdown的文件标题文章标题，强烈建议填写此选项date文件创建时的日期时间发布时间，强烈建议填写此选项，且最好保证全局唯一author根中的author文章作者img中的某个值文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如:toptrue推荐文章（文章是否置顶），如果top值为true，则会作为首页推荐文章coverfalsev1.0.2。...
随着编程时间的推移，接触到的技术越来多，记录的文档也越来越多，在巩固回忆的时候寻找起来也越来越繁琐，在此从零搭建一个免费的个人博客，来方便管理文档便于快速查询。
博客效果预览：GitHub个人博客
下载安装： Git
下载安装： nodc.js
hexo + gitee部署
1, 创建 gitee 仓库
2, 搭建 Hexo
创建文件夹 gitee_personal_
hexo-theme-matery 采用了响应式设计，能够将用户的博客很好地展现出来，支持多种设备，包括电脑、平板和手机等，通过这款软件展现的博客非常的简洁美观，支持自动切换banner 图片，包含多项清晰的分类，让用户对博客一目了然。
软件特色：
响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现
首页轮播文章及每天动态切换 Banner 图片
时间轴式的归档页
词云的标签页和雷达图的分类页
丰富的关于我页面（包括关于我、文章统计图、我的项目、我的技能、相册等）
支持文章置顶和文章打赏等
支持“标准”Markdown / CommonMark和Github风格的语法，也可变身为代码编辑器；
支持实时预览、图片（跨域）上传、预格式文本/代码/表格插入、代码折叠、搜索替换、只读模式、自定义样式主题和多语言语法高亮等功能；
支持ToC（Tabl...
				
本文转自 悟尘纪，获取更新内容可查看原文： https://www.lixl.cn/2019/092856736.html
对于有一定技术背景的同学，自己动手搭建博客网站是一个很不错的选择。选择喜欢的主题，按需进行个性化配置，随时在本地用自己喜欢的工具写文章，一键发布到多个博客托管平台，使用自己喜欢的图床/CDN来加速…
演示站点（天弈初心） 基于 Hexo 的 hexo-theme-matery 主题构建。
安装hexo
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown.
npm install
3、下载matery模板
下载后，解压，将文件hexo-theme-matery-master移动到Hexo的themes目录下（D:\Hexo\themes）
注意：为保持前后一致，请将该文件夹改名为matery
4、安装插件
npm install hexo-generator-search --save
npm i hexo-permalink-
				
hexo搭建博客教程(matery主题)
这篇教程是我搭建个人博客的路程经历和经验总结，matery主题挺多人用，网上也有各种详细教程，没时间我就不出详细教程了，这里给出其他大佬的教程链接，还有我自己总结的经验。本教程中搭建完博客之后的其他优化可以根据自己的需求选择配置即可，没有顺序。
个人博客：百念成诗
如果你有前端基础，在个性化定制博客时可能有些效果不满意，可以自己在控制台修改调试，然后在相应的文件中修改。仔细观察框架目录和文件内容，基本都能知道对应的css和js在哪，比如我自己的博客中就修改
				
cd hexo-blog
git clone https://github.com/blinkfox/hexo-theme-matery.git themes/matery
vim _config.yml
thems: matery
hexo s d
参考链接：http://blinkfox.com/2018/09/28/qian-duan/hexo-bo-ke-zhu-ti-zhi-hexo-theme-matery-de-jie-shao/
				
使用hexo materyhexo\ materyhexo matery主题下遇到的几个问题及解决方法。
1.matery主题的archive.ejs 和hexo-render-mathjax 冲突
会导致archive.ejs 不能用，从而不能显示归档。
sol:sol:sol:  删除hexo−render−mathjaxhexo-render-mathjaxhexo−render−mathjax插件即可。
2.代码高亮插件常常失灵，可能是与其他插件冲突。
sol:sol:sol
4. 使用 Hexo-admin
进入 Hexo-admin 界面后，可以看到左侧有一个菜单栏，包含了文章、页面、草稿、分类、标签、设置等选项。点击相应的选项，就可以进行相应的操作，比如新增、编辑、删除文章等。
总之，使用 Hexo-admin 可以更方便地管理 Hexo 博客，使得日常维护更加轻松。