玩命加载中 . . .

Hexo+Github博客搭建之Matery主题安装配置篇

转自:🇺🇸English Document | 演示示例 | QQ 交流群1(已满): 926552981 | QQ 交流群2(推荐): 971887688

这是一个采用 Material Design 和响应式设计的 Hexo 博客主题。

主题特性

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

1. 主题下载与安装

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

当然你也可以在你的站点目录文件夹下使用 git clone 命令来下载:直接在站点根目录下执行下面的命令,即可进行主题的下载,主题有两个版本,稳定版本和最新版本(不定期更新优化),自主选择版本。

git clone https://github.com/blinkfox/hexo-theme-matery themes/matery     # 稳定版
git clone -b develop https://github.com/blinkfox/hexo-theme-matery themes/matery   #最新版(不定期进行优化更新)

2. 主题配置

2.1 切换主题

注意:首先需要明白什么是站点配置文件,什么是主题配置文件,站点配置文件就是根目录下的配置文件,比如我的博客文件在F:\blog下,那么站点配置文件就是F:\blog\_config.yml,主题配置文件就是F:\blog\themes\matery\_config.yml

另外注意,配置文件中的标点符号不要出现中文格式的标点符号,不然运行会出错。

主题下载完成后,将站点配置文件中的theme值修改为你下载主题的文件名,此处为matery,那么值就修改为theme: matery

一些站点配置文件的其他地方的修改:

  • 语言选择:如果为中文用户,则在language:后添加值zh-CN,如果不修改,默认为英语;
  • 网址修改:url:的值为你的网址名,如http://xxxx.github.io,如果有域名,则修改为你的域名即可,至于有关域名的修改解析,后面我会说到,这里先不说了。
  • 站点配置文件有个per_page属性,建议修改为6的倍数,这样网站在适应设备时,有较好的显示效果。

2.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"
---

2.3 新建分类 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.4 新建关于我 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"
---

2.5 新建留言板 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 文件中,第 1921 行的“菜单”配置,取消关于留言板的注释即可。

2.6 新建友情链接 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.7 菜单导航配置

2.7.1. 配置基本菜单导航的名称、路径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

2.7.2. 二级菜单配置方法

如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作

  1. 在需要添加二级菜单的一级菜单下添加children关键字(如:About菜单下添加children)
  2. children下创建二级菜单的 名称name,路径url和图标icon.
  3. 注意每个二级菜单模块前要加 -.
  4. 注意缩进格式
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: 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

2.8 添加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:

执行 hexo clean && hexo g 重新生成博客文件,然后就可以在文章中对应位置看到你用emoji语法写的表情了。

2.9 代码高亮

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

npm i -S hexo-prism-plugin

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

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

2.10 搜索

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

npm install hexo-generator-search --save

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

search:
  path: search.xml
  field: post

2.11 中文链接转拼音(可选的)

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

安装命令如下:

npm i hexo-permalink-pinyin --save

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

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

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

2.12 文章字数统计插件(可选的)

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

安装命令如下:

npm i --save hexo-wordcount

然后只需在本主题下的 _config.yml 文件中,激活以下配置项即可:

wordCount:
  enable: false # 将这个值设置为 true 即可.
  postWordCount: true
  min2read: true
  totalCount: true

2.13 添加 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 文件,说明你已经安装成功了。

2.14 添加 DaoVoice 在线聊天功能(可选的)

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

2.15 添加 Tidio 在线聊天功能(可选的)

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

2.16 修改页脚

页脚信息可能需要做定制化修改,而且它不便于做成配置信息,所以可能需要你自己去再修改和加工。修改的地方在主题文件的 /layout/_partial/footer.ejs 文件中,包括站点、使用的主题、访问量等。

2.17 修改社交链接

在主题的 _config.yml 文件中,默认支持 QQGitHub 和邮箱等的配置,你可以在主题文件的 /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>
<% } %>

其中,社交图标(如: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

2.18 修改打赏的二维码图片

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

2.19 配置音乐播放器(可选的)

新版主题支持接入第三方音乐,如QQ音乐,网易云音乐,酷狗音乐等等

要支持音乐播放,在主题的 _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获取示例: 浏览器打开网易云音乐,点击我喜欢的音乐歌单,地址栏有一串数字,playlistid即为这串数字。

3. 文章 Front-matter 介绍

Front-matter 选项详解

Front-matter 选项中的所有内容均为非必填的。但我仍然建议至少填写 titledate 的值。

配置选项默认值描述
titleMarkdown 的文件标题文章标题,强烈建议填写此选项
date文件创建时的日期时间发布时间,强烈建议填写此选项,且最好保证全局唯一
author_config.yml 中的 author文章作者
imgfeatureImages 中的某个值文章特征图,推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径。如: http://xxx.com/xxx.jpg
toptrue推荐文章(文章是否置顶),如果 top 值为 true,则会作为首页推荐文章
coverfalsev1.0.2版本新增,表示该文章是否需要加入到首页轮播封面中
coverImgv1.0.2版本新增,表示该文章在首页轮播封面需要显示的图片路径,如果没有,则默认使用文章的特色图片
password文章阅读密码,如果要对文章设置阅读验证密码的话,就可以设置 password 的值,该值必须是用 SHA256 加密后的密码,防止被他人识破。前提是在主题的 config.yml 中激活了 verifyPassword选项
toctrue是否开启 TOC,可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 config.yml 中激活了 toc 选项
mathjaxfalse是否开启数学公式支持 ,本文章是否开启 mathjax,且需要在主题的 _config.yml 文件中也需要开启才行
summary文章摘要,自定义的文章摘要内容,如果这个属性有值,文章卡片摘要就显示这段文字,否则程序会自动截取文章的部分内容作为摘要
categories文章分类,本主题的分类表示宏观上大的分类,只建议一篇文章一个分类
tags文章标签,一篇文章可以多个标签
reprintPolicycc_by文章转载规则, 可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个

注意:

  1. 如果 img 属性不填写的话,文章特色图会根据文章标题的 hashcode 的值取余,然后选取主题中对应的特色图片,从而达到让所有文章都的特色图各有特色
  2. date 的值尽量保证每篇文章是唯一的,因为本主题中 GitalkGitment 识别 id 是通过 date 的值来作为唯一标识的。
  3. 如果要对文章设置阅读验证密码的功能,不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值,还需要在主题的 _config.yml 中激活了配置。有些在线的 SHA256 加密的地址,可供你使用:开源中国在线工具chahuo站长工具
  4. 您可以在文章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
---

4. 效果截图

最新版本进行了优化更新,效果图与最初的效果图有差别,下面的图不是最新版本的。

首页

首页推荐文章

首页文章列表

关于我页面

文章详细页面

5. 自定制修改

在本主题的 _config.yml 中可以修改部分自定义信息,有以下几个部分:

  • 菜单
  • 我的梦想
  • 首页的音乐播放器和视频播放器配置
  • 是否显示推荐文章名称和按钮配置
  • faviconLogo
  • 个人信息
  • TOC 目录
  • 文章打赏信息
  • 复制文章内容时追加版权信息
  • MathJax
  • 文章字数统计、阅读时长
  • 点击页面的’爱心’效果
  • 我的项目
  • 我的技能
  • 我的相册
  • GitalkGitmentValinedisqus 评论配置
  • 不蒜子统计和谷歌分析(Google Analytics
  • 默认特色图的集合。当文章没有设置特色图时,本主题会根据文章标题的 hashcode 值取余,来选择展示对应的特色图

我认为个人博客应该都有自己的风格和特色。如果本主题中的诸多功能和主题色彩你不满意,可以在主题中自定义修改,很多更自由的功能和细节点的修改难以在主题的 _config.yml 中完成,需要修改源代码才来完成。

6. 版本记录

  • v1.2.2

    • 新增了自定义文章 keywords 的功能;
    • 新增静态彩带点击切换的功能和配置;
    • 将文章字数统计、彩带和站点运行时间等功能默认设置为 false
    • 修改了文章的 description 的 meta 属性优先读取文章的 summary 属性;
    • 修改了文章标题的 HTML 标签,从 div 改成了 h1 标题;
    • 修改了页脚年份显示不正确的问题;
    • 去掉了站点运行时间中多余的 setTimeout 代码;
  • v1.2.1

    • 新增了 TOC 的展开目录层级设置和滚动条功能,防止目录较多的时候目录溢出;
    • 修改了首页的展示方式为以前的模式;
    • 修复首页按钮没有边框的问题;
    • 修复了音乐及吸底模式、视频、推荐文章等不激活时仍然生成首页卡片的问题;
    • 修复 wordCount 插件未安装的问题,修改了部分配置;
    • 修复音乐的 JSON 配置中有单引号的情况页面不显示的音乐的问题
    • 修复标签云在Hexo4.0下链接失效的问题;
  • v1.2.0

    • 新增了 DaoVoiceTidio 的在线聊天功能;
    • 新增了两级菜单的功能;
    • 新增了打字效果的副标题;
    • 新增了网页内容预加载的功能;
    • 新增了首页 banner 是否每日切换的配置功能;
    • 新增了显示 ICP 备案信息的功能,默认未开启;
    • 新增了百度分析的配置;
    • 新增了代码块的语言显示、一键复制、显示行号等功能;
    • 新增了首页轮播图和推荐文章可自定义配置的功能;
    • 新增了文章页面显示更新日期;
    • 新增了转载规则的图标;
    • 修改了分享的布局和显示方式;
    • 升级更新了部分依赖库的版本;
    • 其他细节修改和优化;
  • v1.1.0

    • 新增了 emoji 的支持;
    • 新增了站点运行时间统计及配置;
    • 新增了留言板的功能,默认未开启;
    • 新增了 TwitterFacebook、知乎的社交链接;
    • 更新了 Valine 的版本为最新版;
    • 其他小细节的修改;
  • v1.0.4

    • 新增了能为每篇文章都自定义转载规则的功能;
    • 修复上一页、下一页的自定义 summary 不显示的问题;
    • 修复了友情链接显示错位的问题,改为了瀑布流的布局方式;
    • 其他小细节 bug 的修改;
  • v1.0.3

    • 新增了TOC展开、收缩的按钮和相关配置,默认显示此按钮;
  • v1.0.2

    • 升级了 Materialize 框架版本为1.0.0,重构和修改了升级过程中的部分文件或问题;
    • 新增了首页封面的全屏轮播特效,可以将更重要的文章设置到首页轮播中;
    • 修复首页第一个按钮是中文的问题
    • 修复了 iPhone 上点击搜索输入获取焦点的问题;
    • 修复了 iPhone 上输入框获取焦点后页面放大的问题;
    • 修复一些文章或 UI 显示问题;
  • v1.0.1

    • 调整 cssjs 的文件请求路径在主题的_config.yml中配置,便于你更快捷的配置自己的 CDN;
    • 新增代码是否折行为可配置,默认为折行;
    • 默认激活 TOC 功能,并新增为某篇文章关闭 TOCFront-matter 配置选项;
    • 修复文章滚动时,高亮的目录选项不准确的问题;
    • IOS下移除搜索框自动获得焦点属性,防止自动获得焦点后导致视图上移;
  • v1.0.0

    • 新增了所有基础功能;

--------本文结束感谢您的阅读!---------
文章作者: YangAir
版权声明: 本博客所有文章除特別声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 YangAir !
如果文章能够帮到您的话,不妨就支持一下小编呗!
评论
  目录