关于matery主题的搭建 | 我到哪里都是猪

博客的搭建

发布日期: 2020-04-11

阅读次数:

本文为转载文章，由闪烁之狐整理
原文链接：https://blinkfox.github.io/2018/09/28/qian-duan/hexo-bo-ke-zhu-ti-zhi-hexo-theme-matery-de-jie-shao/

特性

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

文章Front-matter介绍

选项中的所有内容均为非必填

可以打开source/_posts/文件名.md去查看一下里面的内容，不出意外里面应该只有
一个文件

配置选项	默认值	描述
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	无	文章标签，一篇文章可以多个标签

最全示例

---
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 值取余，来选择展示对应的特色图

修改主题颜色

在主题文件的 /source/css/matery.css 文件中，搜索 .bg-color 来修改背景颜色：

/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */
.bg-color {
    background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}

@-webkit-keyframes rainbow {
   /* 动态切换背景颜色. */
}

@keyframes rainbow {
    /* 动态切换背景颜色. */
}

你可以直接在 /source/medias/banner 文件夹中更换你喜欢的 banner 图片，主题代码中是每天动态切换一张，
只需 7 张即可。如果你会 JavaScript 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，banner 切换的
代码位置在 /layout/_partial/bg-cover-content.ejs 文件的代码中：

$('.bg-cover').css('background-image', 'url(/medias/banner/' + new Date().getDay() + '.jpg)');

new Date() 的相关方法大家也可以去查看一下

也可以用随机数，通过刷新来切换banner 只要把new Date().getDay()换成这个Math.round(Math.random()*23
就可以了*23代表总共在23张图片里面切换，前提是你banner文件夹里面有这么多图片.