小蜗熊的蜂蜜罐
Meadow主题使用说明
发布于: 2020-01-12 更新于: 2020-11-03 分类于: 技术 > 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 ---
gitalk valine livere