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

本文说明

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

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

Material主题配置文档:Click Me

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

前文:
使用Hexo搭建个人博客(一)
使用Hexo搭建个人博客(二)

主题配置

主题配置文件在:/你的博客目录/themes/material/_config.yml
clone下来的时候把名字改成_config.yml即可

基本配置 – Head info

  • 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: 2017 就会显示2017-2018
例如:footer_text: '<a href="http://www.miitbeian.gov.cn" rel="nofollow">某ICP备xxxxxxxx号-x</a>'

Code – 设置代码高亮

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

1
2
3
4
5
6
7
8
prettify:
enable: true
theme: "atelier-estuary-light" # atelier-estuary-light tomorrow-night-eighties

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

Post License – 版权说明

老规矩,直接附上配置:

1
2
3
4
5
'本文作者:<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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
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:
安装地址

安装面板

最后修改站点的配置文件

1
2
3
4
5
6
7
comment:
use: livere
shortname: # duoshuo or disqus shortname
changyan_appid:
changyan_conf:
changyan_thread_key_type: path
livere_data_uid: # 来必力的uid

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

搜索系统

1
2
3
search:
use: local
swiftype_key:

即可通过关键字搜索本站

数据统计(Google Analytics)

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

可以参考Google Analytics(分析)帮助

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

获取跟踪ID

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

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

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

总结

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

参考

本文结束啦感谢您的阅读