Hexo-matery主题切换

命运是被覆上朦胧的面纱,看得见,却永远也看不清。 ——我爱千泷

简记更换主题

切换主题

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

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

配置tags页

tags页是用来展示所有标签的页面,如果在你的博客source目录下还没有tags/index.md文件,那么你就需要新建一个,命令如下:

hexo new page "tags"

编辑你刚刚新建的页面文件/source/tags/index.md,至少需要以下内容:

title: tags
date: 2018-09-10 18:23:38
type: "tags"
layout: "tags"

代码高亮

由于 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插件也可以生成非中文的链接。

修改社交链接

在主题文件的/layout/_partial/footer.ejs/layout/_partial/mobile-nav.ejs文件中,你可以找到social-link的内容,可以在其中添加你需要的链接地址,增加内容如:

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

文章Front-matter示例

以下为文章Front-matter的示例,所有内容均为非必填的。但是,仍然建议至少填写title的值,当然最好都填写上这些文章信息。

---
title: typora-vue-theme主题介绍
date: 2018-09-07 09:25:00
author: 赵奇
img: /source/images/xxx.jpg # 或者:http://xxx.com/xxx.jpg
tags:
  - Typora
  - Markdown
---

添加萌宠精灵

参考链接

切换到博客目录然后输入:

#安装live2d
npm install --save hexo-helper-live2d
#安装萌宠module
npm install live2d-widget-model-koharu 

添加在config文件内:

live2d:
  enable: true
  scriptFrom: local
  model:
    use: live2d-widget-model-koharu
  display:
    position: right
    width: 140
    height: 260
  mobile:
    show: true

测试代码高亮:

public static void main(){
    System.out.println("hell lulu");
}

文章作者: HoldDie
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 HoldDie !
评论
 上一篇
ElasticSearch-ELK(十二) ElasticSearch-ELK(十二)
这世上每个人都背负着枷锁,有的人是别人给的,有的是自己给的。 ——子龙 FileBeat启动# 启动 sudo ./filebeat # 指定配置文件 sudo ./filebeat -e -c filebeat.yml 查看索引#
2018-10-09
下一篇 
ElasticSearch-ELK(十二) ElasticSearch-ELK(十二)
利剑虽强却斩不断流水,微风虽弱却能平息海浪。 ——子房 ELK 组合ELK 主要用途是:大型分布式系统的日志集中分析 1、在生产环境中出现问题,你应该如何定位问题? 2、大型的分布式系统中如出出现问题,如何定位问题? 一个完整的集中式日志系
2018-10-05
  目录