hexo nexT 主题安装配置

发表于 | 更新于 | 分类于

安装

更新hexo：

npm update hexo

下载next主题
git clone --depth 1 https://github.com/theme-next/hexo-theme-next /data/hexo_blog/themes/next

## 升级

cd /data/hexo_blog/themes/next
git pull


## 修改hexo 配置文件中的主题 /data/hexo_blog/_config.yml

    theme: next

创建菜单项对应文件目录,以分类、标签、关于为例

hexo new page categories

hexo new page tags

hexo new page about

选择 Scheme

更改 NexT 主题配置文件 文件 /data/hexo_blog/themes/next/_config.yml

选择的 Scheme 主题前去掉 # (没有注释掉的就是当前选择主题)

    # Schemes
    #scheme: Muse
    #scheme: Mist
    #scheme: Pisces
    scheme: Gemini

配置搜索

在你站点的根目录下

$ npm install hexo-generator-searchdb --save

打开Hexo 站点的_config.yml,添加配置

search:
    path: search.xml
    field: post
    format: html
    limit: 10000


打开themes/next下的_config.yml,搜索关键字local_search,设置为true

local_search:
    enable: true


说明：

path - file path. By default is search.xml . If the file extension is .json, the output format will be JSON. Otherwise XML format file will be exported.
field - the search scope you want to search, you can chose:
    post (Default) - will only covers all the posts of your blog.
    page - will only covers all the pages of your blog.
    all - will covers all the posts and pages of your blog.
format - the form of the page contents, works with xml mode, options are:
    html (Default) - original html string being minified.
    raw - markdown text of each posts or pages.
    excerpt - only collect excerpt.
    more - act as you think.
limit - define the maximum number of posts being indexed, always prefer the newest.

分页插件

在hexo根目录下的_config.yml配置文件末尾添加以下内容以设置分页参数

# Plugins
index_generator:
    path: ''
    per_page: 10 ##首页默认10篇文章标题，如果值为0不分页
    order_by: -date

archive_generator:
    per_page: 10 ##归档页面默认10篇文章标题，如果值为0不分页
    yearly: true ##生成年视图
    monthly: true ##生成月视图

tag_generator:
    per_page: 10 ##标签页面默认10篇文章，如果值为0不分页

category_generator: 
    per_page: 10 ##分类页面默认10篇文章，如果值为0不分页

如何在首页隐藏指定的文章

文章里添加hide元素变量
---
    title: { { title } }
    hide: true
---

修改next主题文件夹下的layout中的index.swig文件
themes/next/layout/index.swig

定位修改 post_template.render(post, true) 
{% if ! post.hide %} 或 {% if post.hide == true %}

1
2
3
4
5
6
7
8
9

{% block content %}
    <section id="posts" class="posts-expand">
        {% for post in page.posts %}
            {% if ! post.hide %}
            {{ post_template.render(post, true) }}
            {% endif %}
        {% endfor %}
    </section>

Front-matter 定制

位于scaffolds目录下的md文件。

Front-matter 是 md 文件最上方以 — 分隔的区域，用于指定个别文件的变量，包括 title ， date ，tag 等信息。

文件的开头是属性，采用统一的 yaml 格式，用三条短横线分隔。下面是文章正文。


title 和 date 可以设置成自动，english_title 最好自己写一个清晰的，这个是网址中的真实名称。

    ---
    title: { { title } }
    english_title: 
    urlname:
    top: 5        
    date:  { { date } }
    categories: [Blog,Hexo]
    tag: [Hexo,NexT]                  
    ---

RSS 设置

更改 主题配置文件 ，设定 rss 字段的值：

    false：禁用 RSS，不在页面上显示 RSS 连接。
    留空：使用 Hexo 生成的 Feed 链接。 你需要先安装 hexo-generator-feed 插件。
    具体的链接地址：适用于已经烧制过 Feed 的情形。

修改文章底部的那个带#号的标签

打开themes/next/layout/_macro/下的post.swig文件,搜索rel="tag">#,将 # 换成<i class="fa fa-tag"></i>

<div class="post-tags">
    {% for tag in post.tags %}
        
        {% endfor %}
</div>

隐藏网页底部Hexo 强力驱动

打开主题配置文件,搜索关键字copyright，如下:

copyright: false
powered:
    enable: false
    version: false

theme:
    enable: false
    version: false

添加顶部加载条

打开themes/next下的_config.yml，搜索关键字pace,设置为true,可以更换加载样式

开启版权声明

主题配置文件下,搜索关键字post_copyright,enable改为true

post_copyright:
    enable: true
    license: <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow" target="_blank">CC BY-NC-SA 4.0</a>

添加文章封面

文章封面的意思就是：在博客首页的时候会显示文章的封面图片，进入这篇文章的详细页面后，将不显示这张图片。

如果想添加文章封面的话，需要添加一个字段属性：summary_img，summary_img 的值是图片的路径。

1
2
3
4
5
6
7
8
9

---
title: CSS 各种Hack手段
date: 2017-06-25 03:25:24
categories: 前端
tags: [CSS]
comments: false
summary_img: /images/css-hack-1.png
---
修改 \themes\next\layout\_macro\post.swing 文件。

1
2
3
4
5
6
7
8
9
10
{% if is_index %}
  <!-- 自定义,用于添加文章摘要图片，文章中不显示 -->
  {% if post.summary_img  %}
  <div class="out-img-topic">
      <img src={{ post.summary_img }} class="img-topic">
  </div>
  {% endif %}
  <!-- 自定义结束 -->
  {% if post.description and theme.excerpt_description %}
    {{ post.description }}
开启了文章封面的文章，我建议将 <!-- more --> 放在文章内容的开头

内容自动截断

在index页面，，如果文章内容没有添加<!-- more -->, 就自动截断，不全部显示。

自动截断，显示格式不友好，最好还是手动添加<!-- more -->

auto_excerpt:
    enable: true
    length: 150

添加头像

打开themes/next下的_config.yml文件，搜索 Sidebar Avatar关键字，去掉avatar前面的#
# Sidebar Avatar
avatar:
    url: #/images/avatar.gif
    rounded: false
    opacity: 1
    rotated: false

设置头像边框为圆形框

打开位于themes/next/source/css/_common/components/sidebar/下的sidebar-author.syl文件,修改如下

    .site-author-image {
    display: block;
    margin: 0 auto;
    padding: $site-author-image-padding;
    max-width: $site-author-image-width;
    height: $site-author-image-height;
    border: $site-author-image-border-width solid $site-author-image-border-color;
    // 修改头像边框
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    }

网站logo设置

favicon:
    small: /images/favicon-16x16-next.png
    medium: /images/favicon-32x32-next.png
    apple_touch_icon: /images/apple-touch-icon-next.png
    safari_pinned_tab: /images/logo.svg
    #android_manifest: /images/manifest.json
    #ms_browserconfig: /images/browserconfig.xml

文章加密访问

**方法一：简单加密,效果不好**

打开themes->next->layout->_partials->head.swig文件,在meta下位置插入这样一段代码：

1
2
3
4
5
6
7
8
9
10
<script>
    (function(){
        if('{{ page.password }}'){
            if (prompt('请输入文章密码') !== '{{ page.password }}'){
                alert('密码错误！');
                history.back();
            }
        }
    })();
</script>
然后在文章上写成类似这样：
    ---
    title: {{ title }}
    date: {{ date }}
    categories:
    tags:
    password: password
    ---


**方法二：真正意义的加密**

# 插件地址: https://github.com/edolphin-ydf/hexo-encrypt

# 安装：

npm install hexo-encrypt --save

# 配置

# hexo 的根目录下，编辑package.json, 在 dependencies 下添加"hexo-encrypt": "^0.2.0",

    {
        "name": "hexo-site",
        "version": "0.0.0",
        "private": true,
        "hexo": {
            "version": "3.7.1"
        },
        "dependencies": {
            .....
            "hexo-encrypt": "^0.2.0",
            .....
        }
    }

# 功能

    用AES加密一篇文章内容

    使用qiniu私人空间作为你的img仓库（如果你想使用这个功能，你应该首先得到一个qiniu帐户，搜索谷歌寻求帮助）

    将本地img编码为base64类型，然后将其内联到html中

# 缺点

    章节不会显示
    首页显示不加密，所以需要配合隐藏功能


# 编辑hexo配置文件_config.yml，启用加密

# encrypt
encrypt:
    password: 123456               # 密码
    #pwdfile: encrypt_password        # 密码存放在一个文档里


# 编辑博客文件md,在front-format 添加
---
encrypt: true
enc_pwd: 123456         #不采用默认密码，指定特定密码
---

自动按照source 目录下的文件夹生成categories

# 安装

$ npm install hexo-auto-category --save

# 配置

# 在站点根目录下的_config.yml添加：

# Generate categories from directory-tree
# Dependencies: https://github.com/xu-song/hexo-auto-category
# depth: the depth of directory-tree you want to generate, should > 0
auto_category:
    enable: true
    depth:

# 编译 & 部署

$ hexo clean && hexo g && hexo d

# 高级配置

# 如果只想生成第一级目录分类，可以设置depth属性，比如：

auto_category:
    enable: true
    depth: 1


# 缺点：

    不支持加密文档
    只适合生成静态文件，动态服务，会不断重新创建

修改字体大小

打开\themes\next\source\css\ _variables\base.styl文件，将$font-size-base改成16px，如下所示：

$font-size-base =16px

如何更改内容区域的宽度？

NexT 对于内容的宽度的设定如下：

    700px，当屏幕宽度 < 1600px
    900px，当屏幕宽度 >= 1600px
    移动设备下，宽度自适应

如果你需要修改内容的宽度，同样需要编辑样式文件。 编辑主题的 source/css/_variables/custom.styl 文件，新增变量：

// 修改成你期望的宽度
$content-desktop = 700px

// 当视窗超过 1600px 后的宽度
$content-desktop-large = 900px

侧边栏推荐阅读

打开主题配置文件修改成这样就行了(links里面写你想要的链接):

# Blogrolls
links_title: 推荐阅读
#links_layout: block
links_layout: inline
links:
    优设: http://www.uisdc.com/
    张鑫旭: http://www.zhangxinxu.com/
    Web前端导航: http://www.alloyteam.com/nav/
    前端书籍资料: http://www.36zhen.com/t?id=3448
    百度前端技术学院: http://ife.baidu.com/
    google前端开发基础: http://wf.uisdc.com/cn/

文章压缩

在站点的根目录下执行以下命令：

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
29
30
31
32
33
34
35
36
37
38
39

$ npm install gulp -g
$ npm install gulp-minify-css gulp-uglify gulp-htmlmin gulp-htmlclean gulp --save

新建 gulpfile.js ，并填入以下内容：

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
// 压缩 public 目录 css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
});
// 压缩 public 目录 html
gulp.task('minify-html', function() {
return gulp.src('./public/**/*.html')
    .pipe(htmlclean())
    .pipe(htmlmin({
        removeComments: true,
        minifyJS: true,
        minifyCSS: true,
        minifyURLs: true,
    }))
    .pipe(gulp.dest('./public'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 执行 gulp 命令时执行的任务
gulp.task('default', [
    'minify-html','minify-css','minify-js'
]);
生成博文是执行 hexo g && gulp 就会根据 gulpfile.js 中的配置，对 public 目录中的静态资源文件进行压缩。

其它高亮代码显示插件

https://github.com/ele828/hexo-prism-plugin

Hexo-Prism-Plugin NPM

Since highlight.js didn't support JSX syntax properly, I wrote this plugin to replace Hexo's default code highlight plugin.
Install

npm i -S hexo-prism-plugin

Usage

Firstly, you should edit your _config.yml by adding following configuration.

prism_plugin:
mode: 'preprocess'    # realtime/preprocess
theme: 'default'
line_number: false    # default false
custom_css: 'path/to/your/custom.css'     # optional

After that, check highlight option in _config.yml. Make sure that default code highlight plugin is disabled.

highlight:
enable: false

Finally, clean and re-generate your project by running following commands:

hexo clean

hexo generate

pdf 插件

https://github.com/superalsrk/hexo-pdf


hexo-pdf

MIT VERSION

Hexo tag for embeded pdf
Install

$ npm install --save hexo-pdf

Usage
Normal PDF

{% pdf http://7xov2f.com1.z0.glb.clouddn.com/bash_freshman.pdf %}

or

{% pdf ./bash_freshman.pdf %}

Google drive

{% pdf https://drive.google.com/file/d/0B6qSwdwPxPRdTEliX0dhQ2JfUEU/preview %}

Slideshare

{% pdf http://www.slideshare.net/slideshow/embed_code/key/8Jl0hUt2OKUOOE %}

参考：

https://segmentfault.com/a/1190000009544924

https://www.jianshu.com/p/3ff20be8574c