小蜗熊的蜂蜜罐
Meadow主题使用说明
发布于: 2020-01-12 更新于: 2020-06-29 分类于: 技术 > Web 阅读次数: 

Meadow主题的中文帮助文档已迁移至hexo-theme-meadow说明文档,本文将不再继续更新。

Hexo Node.JS
Meadow 是一款基于MDUI开发的,符合Material Designed的Hexo主题。
Demo
Github

开始使用

安装

1. 切换至Hexo根目录

1
$ cd hexo

2.从GitHub获取主题
下载最新的master分支

1
$ git clone https://github.com/kb1000fx/Meadow

或从Github Releases Page下载发行版本

3. 切换主题
编辑站点根目录下的_config.yml文件,并将主题设为meadow

1
theme: meadow

部署

部署至Github Page

安装 hexo-deployer-git

1
$ npm install hexo-deployer-git --save

在站点目录的_config.yml文件中加入以下配置内容:

1
2
3
4
deploy:
type: git
repo: https://github.com/<username>/<project>
branch: <branch>

使用 hexo g -d 命令进行部署

部署腾讯云COS

安装 hexo-deployer-cos

1
$ npm install hexo-deployer-cos --save

在站点目录的_config.yml文件中加入以下配置内容:

1
2
3
4
5
6
deploy:
type: cos
secretId: yourSecretId
secretKey: yourSecretKey
bucket: yourBucket
region: yourRegion

使用 hexo g -d 命令进行部署

主题设置

侧边栏目录

标签页

添加一个包含站点内所有标签的标签页

1. 创建标签页

1
$ hexo new page "tags"

2. 编辑标签页

将类型设为tag

1
2
3
title: All Tags
date: 2020-02-02 20:00:02
type: "tags"

3. 在主题的_config.yml文件中加入标签页

1
2
3
4
menu:
...
...
tags: /tags/ || bookmark

分类页

添加一个包含站点内所有分类的分类页

1. 创建分类页

1
$ hexo new page "categories"

2. 编辑分类页

将类型设为categories

1
2
3
title: All Categories
date: 2020-02-02 20:00:02
type: "categories"

3. 在主题的_config.yml文件中加入分类页

1
2
3
4
menu:
...
...
categories: /categories/ || folder

其他菜单项

如下所示在主题_config.yml文件中添加侧边栏菜单项 , 图标名称可参考MDUI Doc

1
2
3
4
menu:
...
menu_item: ~path/ || icon_name
...

社交链接

如下所示,在主题文件夹中的 _config.yml 文件中添加社交链接 , 图标名称可参考MDUI Doc

1
2
social:
social_item: links_url || icon_name

本文结束标签

编辑主题文件夹中的 _config.yml 文件

1
2
3
passage_end_tag:
enabled: true
text: --- 本文结束 <i class="fa fa-heartbeat"></i> The End ---

数学公式渲染

配置

编辑主题文件夹中的 _config.yml 文件

1
2
3
4
5
6
7
8
9
10
math:
enabled: true
engine: mathjax ##可选渲染引擎:mathjax、katex
mathjax:
cdn: https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
mhchem: true
katex:
cdn_css: https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css
cdn_js: https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.js
auto_render: https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/contrib/auto-render.min.js

Mathjax

将enabled设为true,并将engine设为mathjax

如果需要使用mhchem来书写化学方程式,请将其设为true

在你想要使用mathjax的文章的Front-matter中添加 mathjax: true

Katex

将enabled设为true,并将engine设为katex

在你想要使用katex的文章的Front-matter中添加 katex: true

我的博客中也有一些关于Mathjax和Katex的用法备忘

Mermaid

配置

编辑主题目录下的 _config.yml 文件

1
2
3
4
5
6
# mermaid 
mermaid:
enable: true
version: "8.4.0"
startOnload: true #default true
theme: 'default' #default, forest, dark, neutral.

用法

如下所示,将mermaid代码放在<div class="mermaid"></div>标签之中:

1
2
3
<div class="mermaid">
your mermaid code
</div>

更多mermaid代码的用法详见Github: mermaid

或者我博客中的备忘

第三方设置

评论服务

编辑主题目录下的 _config.yml 文件中的comment 部分
通过设置use的值来选择启用的评论服务

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
comment:
use: #OPTION:gitalk; disqus; livere; valine; changyan; false
## Gitalk
### https://github.com/gitalk/gitalk
gitalk_client_id:
gitalk_client_secret:
gitalk_repo:
gitalk_owner:
gitalk_sid_type: #Ensure uniqueness and length less than 50
gitalk_distractionFreeMode: #Facebook-like distraction free mode
## Disqus
disqus_shortname:
## Livere
livere_data_uid:
## Valine
valine_leancloud_app_id:
valine_leancloud_app_key:
valine_placeholder:
valine_page_size:
valine_avatar:
valine_lang:
valine_guest_info:
valine_notify:
valine_verify:
## 畅言
changyan_app_id:
changyan_app_key:
changyan_sid_type:

不蒜子计数

编辑主题目录下的 _config.yml 文件

1
2
3
4
busuanzi:
site: true
page: true
busuanzi_js: https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js

Google Adsense

编辑主题目录下的 _config.yml 文件来设置Google Adsense. 其中Pub Id 和 Slot Id 可以在Adsense设置中找到.

主题中默认包含了 sidebar(抽屉侧边栏), banner(标题下方), footer(文章结尾) 这三个广告单元. 如果你想在其他位置设置广告单元可使用以下步骤:

  • ~hexo/themes/meadow/layout/_adsense路径下新建文件.
  • 在文件中插入你的Google Adsense代码.
  • 编辑EJS文件,在你想要加入广告的位置加入 partial('_adsense/{YOUR_FILE_NAME}')
    1
    2
    3
    4
    5
    6
    7
    google_adsense:
    enabled: true
    auto_ad: true
    pub_id:
    footer_slot:
    sidebar_slot:
    banner_slot:

分析服务

编辑主题目录下的 _config.yml 文件来设置你的分析服务

与评论服务不同的是,可以同时开启多个分析服务

1
2
3
4
5
6
7
analytics:
google_analytics:
tracking_id:
localhost_ignored: true
baidu_site_id:
cnzz_site_id:
tencent_site_id:

插件

Github: hexo-abbrlink

安装:

1
npm install hexo-abbrlink --save

用法:

修改站点目录下_config.yml文件中的permalink部分:

1
permalink: :abbrlink/

站点地图

Github: hexo-generator-sitemap

安装:

1
$ npm install hexo-generator-sitemap --save

用法:

修改站点目录下_config.yml文件中的sitemap部分:

1
2
3
4
sitemap:
path: sitemap.xml
template: ./sitemap_template.xml
rel: false

本地搜索

Github: hexo-generator-searchdb

安装

1
$ npm install hexo-generator-searchdb --save

用法

修改站点目录下_config.yml文件中的search部分:

1
2
3
4
5
search:
path: search.xml
field: post
content: true
format: html

编辑主题目录下的 _config.yml 文件

1
2
3
4
search:
local: true
path: /search.xml
placeholder: 请输入关键字

如果你将 local 设为false, Meadow 将默认使用谷歌搜索作为站点搜索服务

--- 本文结束 The End ---