使用Hexo搭建个人博客(三)

本文介绍

2018年的第一篇博客，首先祝大家新年快乐，学习进步，工作顺利！

这是使用Hexo搭建个人博客系列的最后一篇文章，主要介绍Material主题的配置。

Material主题配置文档：Click Me

不了解Material主题的可以看这里：Github地址

前文：

使用Hexo搭建个人博客(一)

使用Hexo搭建个人博客(二)

主题配置

主题配置文件在：/你的博客目录/themes/material/_config.yml

clone下来的时候把名字改成_config.yml即可

基本配置 – Head info

head

favicon: “/img/favicon.png” 网站的图标

high_res_favicon: “/img/favicon.png” 高清版图标

apple_touch_icon: “/img/favicon.png” IOS主屏图标

keywords: Blue’s Blog, Android, Python 网站关键词

site_verification:

google: 谷歌 Search Console 验证

baidu: 百度站长平台验证

样式设定 – Style Settings

scheme – Material主题样式

一般使用Paradox

uiux – 设置主题UI

slogan:

首页的标语

theme_color: “主题主要颜色”

theme_sub_color: “主题次要颜色” #00838F

hyperlink_color: “超链颜色”

button_color: “按钮颜色”

android_chrome_color: “Chrome浏览器颜色”

nprogress_color: “顶部进度条颜色”

nprogress_buffer: “800” – 加载缓存时间

reading – 设置阅读体验

entry_excerpt: 首页文章输出摘要的字符长度。

thumbnail – 设置缩略图

purecolor: 填入颜色代码。如果文章内无设置缩略图，此项又不为空，则使用纯色缩略图。

random_amount: 随机图片数量，根据 主题所在文件夹/source/img/random 中的图片数量设置。Material 主题默认提供了 19 张 Material 风格的缩略图。

background – 设置背景图

purecolor: "#F4F4F4"    --纯色背景
# bgimg: "/img/bg.jpg"  --图片背景
bing:                         -- bing随机背景
enable: false
parameter:
color=: black, blue, brown, green, multi, orange, pink, purple, red, white, yellow.
type=: A (动物), C (人文), N (自然), S (太空), T (旅行).

img – 设置站点图片

logo: 显示于 blog_info 模块中。

avatar: 你的头像设置。

daily_pic: 显示于 daily_pic 模块中。

sidebar_header: 显示于 sidebar 顶部。

footerico: 设置 footer 中 SNS 图标的路径。

random_thumbnail: 随机缩略图的路径。

footer_image: 你可以在侧边栏底部放置任何你想要的图片。

自定义设定

copyright_since – 设置站点成立时间

copyright_since: 2017 就会显示2017-2018

footer_text – 设置底部文字

例如：footer_text: '<a href="http://www.miitbeian.gov.cn" rel="nofollow">某ICP备xxxxxxxx号-x</a>'

Code – 设置代码高亮

Material内置两个选项 perttify 和 hanabi，个人比较喜欢perttify，因为hanabi太花哨了，附上配置文件

prettify:
enable: true
theme: "atelier-estuary-light"  # atelier-estuary-light  tomorrow-night-eighties

这三个配色我都挺喜欢的，供参考：
atelier-estuary-light
atelier-estuary-light
tomorrow-night-eighties

Post License – 版权说明

老规矩，直接附上配置：

'本文作者：<a href="https://bluelzy.com" target="_blank">BlueLzy</a>
<br>
本文采用 <a href="https://creativecommons.org/licenses/by-nc-sa/3.0/deed.zh" target="_blank">CC BY-NC-SA 3.0 Unported License</a> 协议进行许可,
阅读<a href="https://bluelzy.com/creativecommons.html" target="_blank">相关说明</a>
'

菜单设定

sns – 设置sns信息

用于填写你的 SNS 信息，其中 email 会显示在侧边栏，其他信息会以按钮的形式显示在 footer。

email

twitter

facebook

googleplus

weibo

instagram

tumblr

github

linkedin

facebook

sns_share – 定义分享菜单中的项目

这部分会出现在文章分享按钮菜单上

twitter

googleplus

weibo

linkedin

qq

telegram

sidebar – 设置边栏菜单

这一块应该大家都能看懂，直接附上配置文件：

dropdown:
Email Me:
link: "mailto: bluehobert@gmail.com"
icon: email
Github:
link: "https://github.com/bluezzyy"
icon: layers
homepage:
use: true
icon: home
divider: false
archives:
use: true
icon: inbox
divider: false
categories:
use: true
icon: chrome_reader_mode
divider: true
pages:
标签云:
link: "/tags"
icon: label
divider: false
时间轴:
link: "/timeline"
icon: cloud
divider: false
关于我:
link: "/about.html"
icon: person
divider: true

article_num:
use: true
divider: false
footer:
divider: false
theme: false
support: false
feedback: false
material: false

第三方服务

其实Material内置的第三方服务已经基本足够使用了，RSS，评论系统，搜索系统，数据统计与分析等等

这部分可以按照自己实际情况，以及配合官方文档服用，效果更佳，在这里我只介绍自己博客用到的配置，包括：

评论系统：来比力

搜索系统：本地搜索

数据统计：谷歌统计

评论系统

首先注册来必力

来必力官网

然后登陆，安装city版本并获取uid：

安装地址



最后修改站点的配置文件

comment:
use: livere
shortname: # duoshuo or disqus shortname
changyan_appid:
changyan_conf:
changyan_thread_key_type: path
livere_data_uid:  # 来必力的uid

再刷新一下博客，就可以看到评论系统啦~

搜索系统

search:
use: local
swiftype_key:

即可通过关键字搜索本站

数据统计(Google Analytics)

我们只需要获取到跟踪ID即可

可以参考Google Analytics（分析）帮助

或者按照以下步骤操作，登陆google analytics 找到管理 -> 媒体资源 -> 跟踪信息 -> 跟踪代码



获取到跟踪ID后，修改配置文件

找到主题配置文件中的analytics字段：

在google_site_id 字段加上你的跟踪ID，保存即可

总结

Material基本的配置介绍这么多，关于进阶配置，大家可以去看官方文档，或者自己再慢慢摸索，接下来我还会写一些关于博客优化的文章。

参考

Material主题配置文档

Material主题 Github地址