Skip to content
card
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

hexo-theme-indigo-plus

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

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 地址
  • tagscategories页面按照字母顺序排序
  • 自定义文章置顶
  • 集成百度自动推送
  • 敬请期待

快速开始

1. 安装 Hexo

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

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

修改博客根目录下的_config.yml,设置languagezh-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中的配置部署博客。当有多个deployrepo时,示例配置如下:

# Deployment
## Docs: https://hexo.io/docs/deployment.html
...
...
deploy:
- type: git
  repo:
    github: git@github.com:abelsu7/blog.git,master
    coding: git@git.coding.net:abelsu7/blog.git,coding-pages
- type: baidu_url_submitter
...
...

注意:若同时安装了hexo-douban插件,则无法使用hexo d这种缩写形式,而必须指明hexo deployhexo 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.ejsmovie.ejsgame.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.jsmovies-generator.jsgames-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: git@github.com:abelsu7/blog.git,master
    coding: git@git.coding.net: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.mdpage.mdpost.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都有topdate属性,否则会导致排序失败。可在每次新建文章时使用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

Join the chat at https://gitter.im/hexo-theme-indigo/Lobby

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

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

Feature

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

Useage

文档 | Document

ChangeLog

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

ChangeLog

OtherVersion