hexo-theme-indigo-plus

基于 hexo-theme-indigo 主题进行优化，效果展示参见我的博客

New Feature
快速开始

New Feature

添加直达评论悬浮按钮
归档、分类、标签页面添加文章计数
各个分类、标签添加单独的文章计数
修改打赏的切换按钮样式
优化 Valine 在 hexo-theme-indigo 中的显示效果
优化 hexo-douban 在 hexo-theme-indigo 中的显示效果
使用 prism.js 替换 highlight.js 实现代码高亮，并在_config.yml中添加代码主题配置项
可控制仅在单个 post 中引入MathJax.js
Change ul list-style and toc bottom padding
更新 busuanzi CDN 地址
tags及categories页面按照字母顺序排序
自定义文章置顶
集成百度自动推送
敬请期待

快速开始

1. 安装 Hexo

npm install hexo-cli -g
hexo init blog
cd blog
npm install
hexo server

2. 设置语言并禁用 highlight.js

修改博客根目录下的_config.yml，设置language为zh-CN，并将highlight设置为false：

# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: Keep Coding
subtitle: 苏易北
description: Abel Su的编程笔记
keywords: KVM,Go,Docker,Kubernetes,Linux,虚拟化,云计算
author: Abel Su
language: zh-CN
timezone:
...
...
highlight:
  enable: false
  # line_number: true
  # auto_detect: false
  # tab_replace: 
...
...

3. 主题安装

安装需确认你的 Hexo 版本在3.0以上，以及 Node 版本为6.x以上，在博客根目录，执行以下命令：

git clone https://github.com/abelsu7/hexo-theme-indigo-plus.git themes/indigo-plus

之后在博客根目录下的_config.yml中指定使用主题indigo-plus：

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: indigo-plus

4. 依赖安装

还是在博客根目录下，如果以下插件已安装过，则无需再次安装。

Less

主题默认使用less作为css预处理工具：

npm install hexo-renderer-less --save

Feed

用于生成rss：

npm install hexo-generator-feed --save

JSON-Content

用于生成静态站点数据，用作站内搜索的数据源：

npm install hexo-generator-json-content --save

QR-Code

可选，不安装时会请求jiathis API生成二维码

用于生成微信分享二维码：

npm install hexo-helper-qrcode --save

Deploy

可以使用hexo deploy命令部署博客：

npm install hexo-deployer-git --save

使用hexo g生成public目录后，使用hexo deploy即可根据博客根目录下_config.yml中的配置部署博客。当有多个deploy及repo时，示例配置如下：

# Deployment
## Docs: https://hexo.io/docs/deployment.html
...
...
deploy:
- type: git
  repo:
    github: [email protected]:abelsu7/blog.git,master
    coding: [email protected]:abelsu7/blog.git,coding-pages
- type: baidu_url_submitter
...
...

注意：若同时安装了hexo-douban插件，则无法使用hexo d这种缩写形式，而必须指明hexo deploy或hexo douban

Kramed

使用hexo-renderer-kramed替换默认的hexo-renderer-marked渲染引擎，否则使用prism.js高亮代码时会出现问题：

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

Asset（可选）

使用 hexo-asset-image 自动生成文章对应的同名图片 asset 目录。

首先在博客根目录下的_config.yml中，将post_asset_folder设置为true：

...
...
# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: true # 修改这里为 true
relative_link: false
future: true
highlight:
  enable: false
  # line_number: true
  # auto_detect: false
  # tab_replace:
...
...

之后在博客根目录下安装hexo-asset-image：

注意：若安装最新版的hexo-asset-image，使用相对路径引用图片时貌似会出现图片路径错误的问题，参见 hexo 引用本地图片无法显示 | Ericam_blog

npm install hexo-asset-image@0.0.3 --save

例如使用以下命令新建post文章：

hexo new post MacGesture2-Publish

就会在source/_posts/目录下生成同名的图片 asset 目录：

MacGesture2-Publish
├── apppicker.jpg
├── logo.jpg
└── rules.jpg
MacGesture2-Publish.md

只需要文章中使用![logo](logo.jpg)，即可引用图片。

Recommend（可选）

使用 hexo-recommended-posts 生成相关文章推荐列表。

首先在博客根目录下安装插件：

npm install hexo-recommended-posts --save

之后在博客根目录下的_config.yml中添加以下内容以覆盖默认配置：

# Hexo recommended posts
recommended_posts:
  server: https://api.truelaurel.com #后端推荐服务器地址
  timeoutInMillis: 15000 #服务时长，超过此时长，则使用离线推荐模式
  internalLinks: 3 #内部文章数量
  externalLinks: 2 #外部文章数量
  fixedNumber: false
  autoDisplay: true #自动在文章底部显示推荐文章
  excludePattern: []
  titleHtml: <strong>🚩推荐阅读</strong>（由<a href="https://github.com/huiwang/hexo-recommended-posts">hexo文章推荐插件</a>驱动） #自定义标题

具体参数设置参见 hexo-recommended-posts 文档

只需在hexo g命令前，在博客根目录使用以下命令获取推荐文章列表，存放于source\_data\recommended_posts.json中：

hexo recommend

Douban（可选）

使用 hexo-douban 生成豆瓣电影、读书、游戏展示页面。

首先在博客根目录下安装插件：

npm install hexo-douban --save

之后在博客根目录下的_config.yml中添加如下配置（以下为示例，请根据需要自行修改）：

# hexo-douban config
douban:
  user: abelsu7 # your Douban ID
  builtin: false
  book: 
    title: '读书'
    quote: <p>注：<b><font color="#3f51b5">IE、Edge及Safari</font></b>中无法正常加载图片<br/>请移步我的<a href="https://book.douban.com/people/abelsu7/" target="_blank"><font color="#ff4081">豆瓣读书</font></a>主页</p>
    subtitle: 'Books are the ladder of human progress.'
  movie:
    title: '影视'
    quote: <p>注：<b><font color="#3f51b5">IE、Edge及Safari</font></b>中无法正常加载图片<br/>请移步我的<a href="https://movie.douban.com/people/abelsu7/" target="_blank"><font color="#ff4081">豆瓣电影</font></a>主页</p>
    subtitle: '如果有多一张船票，你会不会跟我一起走？'
  game:
    title: '游戏'
    quote: <p>注：<b><font color="#3f51b5">IE、Edge及Safari</font></b>中无法正常加载图片<br/>请移步我的<a href="https://www.douban.com/people/abelsu7/games?action=collect" target="_blank"><font color="#ff4081">豆瓣游戏</font></a>主页</p>
    subtitle: '胜败乃兵家常事，大侠请重新来过'
  timeout: 40000

此时运行hexo-douban已经可以生成相应的页面。但为使其风格与本主题更加协调，还需手动修改hexo-douban插件的部分代码。

首先进入node_modules/hexo-douban/lib/templates目录，分别将book.ejs、movie.ejs、game.ejs替换为以下内容。

book.ejs内容如下：

<blockquote>
    <p>
        <%- quote; %>
    </p>
</blockquote>

<style>
    <% include index.css %>
</style>

<div class="container body-wrap card">
    <article class="page-article fade" itemprop="blogPage">

        <div class="hexo-douban-tabs">
            <a class="hexo-douban-tab" id="hexo-douban-tab1" href="javascript:;" rel="external">
                <%= __('bookReading') %>
                (
                <%= reading.length %>)</a>
            <a class="hexo-douban-tab" id="hexo-douban-tab2" href="javascript:;" rel="external">
                <%= __('bookWish') %>
                (
                <%= wish.length %>)</a>
            <a class="hexo-douban-tab" id="hexo-douban-tab3" href="javascript:;" rel="external">
                <%= __('bookRead') %>
                (
                <%= read.length %>)</a>
        </div>
        <div>
            <div id="hexo-douban-item1">
                <% reading.forEach(function(item){ %>
                <% include bookReading.ejs %>
                <% }); %>
                <% include pagination.ejs %>
            </div>
            <div id="hexo-douban-item2">
                <% wish.forEach(function(item){ %>
                <% include bookWish.ejs %>
                <% }); %>
                <% include pagination.ejs %>

            </div>
            <div id="hexo-douban-item3">
                <% read.forEach(function(item){ %>
                <% include bookRead.ejs %>
                <% }); %>
                <% include pagination.ejs %>
            </div>

        </div>

    </article>
</div>

<script>
    <% include index.js %>
    <% include pagination.js %>
</script>

movie.ejs内容如下：

<blockquote>
    <p>
        <%- quote; %>
    </p>
</blockquote>

<style>
    <% include index.css %>
</style>

<div class="container body-wrap card">
    <article class="page-article fade" itemprop="blogPage">

        <div class="hexo-douban-tabs">
            <a class="hexo-douban-tab" id="hexo-douban-tab1" href="javascript:;" rel="external">
                <%= __('movieWatching') %>
                (
                <%= watching.length %>)</a>
            <a class="hexo-douban-tab" id="hexo-douban-tab2" href="javascript:;" rel="external">
                <%= __('movieWish') %>
                (
                <%= wish.length %>)</a>
            <a class="hexo-douban-tab" id="hexo-douban-tab3" href="javascript:;" rel="external">
                <%= __('movieWatched') %>
                (
                <%= watched.length %>)</a>
        </div>
        <div>
            <div id="hexo-douban-item1">
                <% watching.forEach(function(item){ %>
                <% include movieWatching.ejs %>
                <% }); %>
                <% include pagination.ejs %>
            </div>
            <div id="hexo-douban-item2">
                <% wish.forEach(function(item){ %>
                <% include movieWish.ejs %>
                <% }); %>
                <% include pagination.ejs %>
            </div>
            <div id="hexo-douban-item3">
                <% watched.forEach(function(item){ %>
                <% include movieWatched.ejs %>
                <% }); %>
                <% include pagination.ejs %>
            </div>
        </div>

    </article>
</div>

<script>
    <% include index.js %>
    <% include pagination.js %>
</script>

game.ejs内容如下：

<blockquote>
    <p>
        <%- quote %>
    </p>
</blockquote>

<style>
    <% include index.css %>
</style>

<div class="container body-wrap card">
    <article class="page-article fade" itemprop="blogPage">

        <div class="hexo-douban-tabs">
            <a class="hexo-douban-tab" id="hexo-douban-tab1" href="javascript:;" rel="external">
                <%= __('gamePlaying') %>
                (
                <%= playing.length %>)</a>
            <a class="hexo-douban-tab" id="hexo-douban-tab2" href="javascript:;" rel="external">
                <%= __('gameWish') %>
                (
                <%= wish.length %>)</a>
            <a class="hexo-douban-tab" id="hexo-douban-tab3" href="javascript:;" rel="external">
                <%= __('gamePlayed') %>
                (
                <%= played.length %>)</a>

        </div>
        <div>
            <div id="hexo-douban-item1">
                <% playing.forEach(function(item){ %>
                <% include gamePlaying.ejs %>
                <% }); %>
                <% include pagination.ejs %>
            </div>
            <div id="hexo-douban-item2">
                <% wish.forEach(function(item){ %>
                <% include gameWish.ejs %>
                <% }); %>
                <% include pagination.ejs %>
            </div>
            <div id="hexo-douban-item3">
                <% played.forEach(function(item){ %>
                <% include gamePlayed.ejs %>
                <% }); %>
                <% include pagination.ejs %>
            </div>

        </div>

    </article>
</div>

<script>
    <% include index.js %>
    <% include pagination.js %>
</script>

之后打开该目录下的index.css，添加或修改以下样式：

.hexo-douban-tabs {
    margin-bottom: 15px;
    margin-top: 15px;
    text-align: center; /* 新增 */
}

.hexo-douban-tab {
    color: #303f9f; /* 新增 */
    padding: 5px;
}

/* 新增 .hexo-douban-tab:hover */
.hexo-douban-tab:hover {
    color: #ff4081;
}

/* 修改 .hexo-douban-active */
.hexo-douban-active {
    /* background: #657b83; */
    /* color: #fff; */
    color: #ff4081;
}
...
...
/* 修改 .hexo-douban-button:hover */
.hexo-douban-button:hover {
    /* background: #657b83; */
    /* color: #fff; */
    color: #ff4081;
}
...
...

最后在books-generator.js、movies-generator.js、games-generator.js最后的return语句中，添加对应的layout：

books-generator.js的最后：

...
...
    return {
        path: 'books/index.html',
        data: {
            title: config.douban.book.title,
            content: contents,
            slug: 'books'
        },
        layout: ['book', 'page', 'post'] // 添加 'book'
    };
};

movies-generator.js的最后：

...
...
    return {
        path: 'movies/index.html',
        data: {
            title: config.douban.movie.title,
            content: contents,
            slug: 'movies'
        },
        layout: ['movie', 'page', 'post'] // 添加 'movie'
    };
};

games-generator.js的最后：

...
...
    return {
        path: 'games/index.html',
        data: {
            title: config.douban.game.title,
            content: contents,
            slug: 'games'
        },
        layout: ['game', 'page', 'post'] // 添加 'game'
    };
};

Baidu URL Submit（可选）

使用 hexo-baidu-url-submit 将博客新链接主动推送至百度搜索引擎。

首先在博客根目录下安装插件：

npm install hexo-baidu-url-submit --save

之后在博客根目录下的_config.yml中进行配置：

...
...
# Baidu URL Submit
baidu_url_submit:
  count: 1000 ## 提交最新的一个链接
  host: alili.tech ## 在百度站长平台中注册的域名
  token: xxxxx ## 请注意这是您的秘钥， 所以请不要把博客源代码发布在公众仓库里!
  path: baidu_urls.txt ## 文本文档的地址， 新链接会保存在此文本文档里
...
...
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
- type: git
  repo:
    github: [email protected]:abelsu7/blog.git,master
    coding: [email protected]:abelsu7/blog.git,coding-pages
- type: baidu_url_submitter
...
...

Sitemap（可选）

自动生成sitemap.xml以及baidusitemap.xml。

首先在博客根目录安装插件：

npm install hexo-generator-sitemap --save
npm install hexo-generator-baidu-sitemap --save

之后在博客根目录下的_config.yml中添加配置：

# 自动生成sitemap
sitemap:
  path: sitemap.xml
baidusitemap:
  path: baidusitemap.xml

5. 修改 scaffolds

初始化 Hexo 博客后，默认会在scaffolds目录下创建draft.md、page.md、post.md三个模板文件，使用hexo new命令新建页面时就会基于上述模板文件生成对应的 Markdown 文件。为了方便使用，建议将scaffolds下的模板文件修改如下：

draft.md：

---
title: {{ title }}
category:
  - 
tags:
  - 
date: {{ date }}
top: 1
---

page.md：

---
layout: page
title: {{ title }}
date: {{ date }}
top: 1
---

post.md：

---
title: {{ title }}
category:
  - 
tags:
  - 
date: {{ date }}
top: 1
---

这里添加了top: 1属性，是为了实现文章置顶功能，参见 Hexo 实现自定义文章置顶 | 苏易北。

6. 文章置顶

修改博客根目录下_config.yml文件：

...
...
# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
  path: ''
  per_page: 10
  order_by: 
    top: -1
    date: -1
...
...

即可在首页先根据top值、再根据date，对所有文章进行排序。所有文章默认top: 1，如需置顶文章，只需将其top值修改为大于 1 的整数，同一top值可有多篇文章，top值相同时按照date排序。

注意：需要确保所有的post都有top和date属性，否则会导致排序失败。可在每次新建文章时使用hexo new post <post_title>创建，即可根据post.md模板生成对应的文章文件

7. 按需开启 MathJax

可以按需开启MathJax支持。首先确保themes/indigo-plus/_config.yml中，mathjax设置为true：

...
...
# 文章截断
excerpt_render: true
excerpt_length: 200
excerpt_link: 阅读全文...
mathjax: true
archive_yearly: true
...
...

如要在某篇文章中开启MathJax支持，只需在其YAML头部中加入mathjax: true，例如：

---
title: 在 Hexo 中使用 MathJax 渲染数学公式
category:
  - 前端
tags:
  - Hexo
  - MathJax
  - LaTex
  - 数学
date: 2018-10-29 19:58:35
top: 1
mathjax: true
---

注意：可能会遇到行内公式的渲染问题，参见在 Hexo 中使用 MathJax 渲染数学公式 | 苏易北

8. 开启标签页

hexo new page tags

并修改blog/source/tags/index.md的元数据：

...
...
layout: tags
comments: false
---

9. 开启分类页

hexo new page categories

并修改blog/source/categories/index.md的元数据：

...
...
layout: categories
comments: false
---

10. 开启关于页

hexo new page about

关于page页面的语法规则，具体参见 hexo-theme-indigo 文档。

11. 使用示例

hexo clean     # 清除 public 目录下的静态文件
hexo recommend # 获取推荐文章列表
hexo douban    # 生成豆瓣展示页面
hexo g         # 生成 public 目录下的静态文件
hexo s         # 本地启动 server
hexo deploy    # 部署博客至远程仓库

以下是 hexo-theme-indigo 的说明——

hexo-theme-material-indigo

Material Design 风格的Hexo主题，基于 Hexo 3.0+ 制作。 Preview

现有两个主题分支，我的博客中使用的是 card 分支卡片风格主题，master 分支是旧版平铺式风格主题。

Feature

仅支持 IE10+ 等现代浏览器。
去 jQuery，更轻。相信现代浏览器的原生兼容性。
使用 Less 作为 css 预处理器，需要安装 hexo-renderer-less。
添加了英文字体支持 Roboto。
添加了一些波纹效果。By Waves
无前端依赖的分享实现。
基于静态数据的站内搜索，无第三方侵入。
支持文章打赏。

Useage

文档 | Document

ChangeLog

升级前请仔细查看更改内容，如非必要可不升级。

ChangeLog

OtherVersion

vuepress-theme-indigo

supermantou42 / hexo-theme-indigo-plus Goto Github PK