使用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地址