Skip to content

Latest commit

 

History

History
382 lines (282 loc) · 14.3 KB

README_CN.md

File metadata and controls

382 lines (282 loc) · 14.3 KB

hexo-theme-matery

HitCount Gitter GitHub issues GitHub license Download Hexo Version GitHub forks GitHub stars

English Document | 演示示例 | QQ交流群:926552981

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

特性

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

下载

当你看到这里的时候，应该已经有一个自己的Hexo博客了，如果还没有的话，不妨使用 Hexo 和Markdown来写博客和文章。

点击 这里 下载master分支的最新稳定版的代码，解压缩后，将hexo-theme-matery的文件夹复制到你 Hexo 的themes文件夹中即可。当然你也可以在你的themes文件夹下使用Git clone命令来下载:

git clone https://github.com/blinkfox/hexo-theme-matery.git

配置

切换主题

修改 Hexo 根目录下的_config.yml的theme的值：theme: hexo-theme-matery

_config.yml文件的其它修改建议:

  • 请修改_config.yml的url的值为你的网站主URL（如：http://xxx.github.io）。
  • 建议修改两个per_page的分页条数值为6的倍数，如：12、18等，这样文章列表在各个屏幕下都能较好的显示。
  • 如果你是中文用户，则建议修改language的值为zh-CN。

新建分类 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"
---

新建标签 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"
---

新建关于我 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"
---

新建友情连接 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": "ttps://me.csdn.net/jlh912008548",
    "title": "前去学习"
}]

代码高亮

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

npm i -S hexo-prism-plugin

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

highlight:
  enable: false

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

搜索

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

npm install hexo-generator-search --save

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

search:
  path: search.xml
  field: post

中文链接转拼音（可选的）

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

安装命令如下：

npm i hexo-permalink-pinyin --save

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

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

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

文章字数统计插件（可选的）

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

安装命令如下：

npm i --save hexo-wordcount

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

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

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

修改页脚

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

修改社交链接

在主题文件的/layout/_partial/social-link.ejs文件中，你可以修改或添加你需要的社交链接地址，增加链接可参考如下代码：

<a href="https://github.com/blinkfox" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
    <i class="fa fa-github"></i>
</a>

其中，社交图标（如：fa-github）你可以在Font Awesome中搜索找到。以下是常用社交图标的标识，供你参考：

  • Facebook: fa-facebook
  • Twitter: fa-twitter
  • Google-plus: fa-google-plus
  • Linkedin: fa-linkedin
  • Tumblr: fa-tumblr
  • Medium: fa-medium
  • Slack: fa-slack
  • 新浪微博: fa-weibo
  • 微信: fa-wechat
  • QQ: fa-qq

注意: 本主题中使用的Font Awesome版本为4.5.0。

修改打赏的二维码图片

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

文章Front-matter示例

以下为文章Front-matter的示例和说明，所有内容均为非必填的。但我仍然建议至少填写title和date的值。

---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
author: 赵奇
 # 图片推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如:http://xxx.com/xxx.jpg
img: /source/images/xxx.jpg
# 如果top值为true，则会是首页推荐文章
top: true
# 如果要对文章设置阅读验证密码的话，就可以在设置password的值，该值必须是用SHA256加密后的密码，防止被他人识破
password: 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
# 本文章是否开启mathjax，且需要在主题的_config.yml文件中也需要开启才行
mathjax: false
summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
categories: Markdown
tags:
  - Typora
  - Markdown
---

注意:

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

效果截图

首页

首页推荐文章

首页文章列表

首页文章列表

首页文章列表

自定制修改

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

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

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

修改主题颜色

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

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

/* 和背景颜色相同的文字颜色，目前仅在首页一个地方使用到，你也可以将此样式应用到其他地方. */
.text-color {
    color: #0f9d58 !important;
}

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

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

修改banner图和文章特色图

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

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

在/source/medias/featureimages文件夹中默认有24张特色图片，你可以再增加或者减少，并需要在_config.yml做同步修改。