打造个性超赞博客 Hexo + NexT + GitHub Pages 的超深度优化

 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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

/* [2017.12.13 更新] */

/* 调试浏览器 */
Google Chrome Version 62.0.3202.94 (Official Build) (64-bit)

/* 版本信息 */
root@kali:~/blog# hexo version

(node:6675) [DEP0061] DeprecationWarning: fs.SyncWriteStream is deprecated.
hexo: 3.4.1
hexo-cli: 1.0.4
os: Linux 4.13.0-kali1-amd64 linux x64
http_parser: 2.7.0
node: 8.3.0
v8: 6.0.286.52
uv: 1.13.1
zlib: 1.2.11
ares: 1.10.1-DEV
modules: 57
openssl: 1.0.2l
icu: 59.1
unicode: 9.0
cldr: 31.0.1
tz: 2017b

/* 依赖包 */
root@kali:~/blog# cat package.json

{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.4.1"
  },
  "dependencies": {
    "gulp": "^3.9.1", /* 压缩代码 */
    "gulp-htmlclean": "^2.7.15", /* 压缩代码 */
    "gulp-htmlmin": "^3.0.0", /* 压缩代码 */
    "gulp-minify-css": "^1.2.4", /* 压缩代码 */
    "hexo": "^3.4.1", /* 默认安装 */
    "hexo-deployer-git": "^0.3.1", /* Git 部署工具 */
    "hexo-filter-github-emojis": "^1.4.3", /* emoji 支持 */
    "hexo-footnotes": "^1.0.1", /* 注脚 */
    "hexo-generator-archive": "^0.1.5", /* 默认安装 */
    "hexo-generator-category": "^0.1.3", /* 默认安装 */
    "hexo-generator-feed": "^1.2.2", /* RSS */
    "hexo-generator-index-pin-top": "^0.2.2", /* 替代默认安装的，支持文章置顶 */
    "hexo-generator-searchdb": "^1.0.8", /* 本地搜索 */
    "hexo-generator-sitemap": "^1.2.0", /* 生成 sitemap.xml，利于 SEO */
    "hexo-generator-tag": "^0.2.0", /* 默认安装 */
    "hexo-renderer-ejs": "^0.3.0", /* 默认安装 */
    "hexo-renderer-marked": "^0.3.0", /* 默认安装 */
    "hexo-renderer-stylus": "^0.3.1", /* 默认安装 */
    "hexo-server": "^0.2.0", /* 默认安装 */
    "hexo-tag-aplayer": "^2.0.5", /* 音乐播放插件，支持歌词 */
    "hexo-tag-dplayer": "^0.2.1", /* 视频播放插件，支持弹幕 */
    "hexo-wordcount": "^3.0.2" /* 字数统计 */
  }
}

/* 主题 NexT 版本 */
version: 5.1.3

/* 优化主题 NexT 的设计版式 */
scheme: Muse

1

~/blog $ hexo init

1

~/blog $ hexo g && hexo s

1

~/blog $ npm install hexo-deployer-git --save

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

# 文件位置：~/blog/_config.yml

# URL
url: https://reuixiy.github.io/
.
.
.省略……
.
.
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
-  type:
+  type: git
+  repository: https://github.com/reuixiy/reuixiy.github.io.git
+  branch: master

1

~/blog $ hexo clean && hexo g && hexo d

1

npm update -g

1

~/blog $ npm update

1

npm install npm -g

1
2
3

npm install n -g

n latest

1

~/blog/themes/next $ git pull

1

~/blog/themes/next $ git stash

1

~/blog/themes/next $ git pull

1

~/blog/themes/next $ git stash pop

1
2
3
4
5

root@kali:~/blog/themes/next# git pull

error: Pulling is not possible because you have unmerged files.
hint: Fix them up in the work tree, and then use 'git add/rm <file>'
hint: as appropriate to mark resolution and make a commit.
fatal: Exiting because of an unresolved conflict.

 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

root@kali:~/blog/themes/next# git status

On branch master
Your branch is up to date with 'origin/master'.


Changes to be committed:
  (use "git reset HEAD <file>..." to unstage)

	modified:   layout/_custom/header.swig
	modified:   layout/_custom/sidebar.swig
	modified:   layout/_layout.swig
	modified:   layout/category.swig
	modified:   layout/tag.swig
	modified:   source/css/_common/components/post/post-meta.styl
	modified:   source/css/_common/components/post/post-nav.styl
	modified:   source/css/_common/scaffolding/base.styl
	modified:   source/css/_custom/custom.styl
	deleted:    source/images/avatar.gif
	modified:   source/lib/Han/dist/han.min.css

Unmerged paths:
  (use "git reset HEAD <file>..." to unstage)
  (use "git add <file>..." to mark resolution)

	both modified:   _config.yml
	both modified:   languages/zh-Hans.yml
	both modified:   layout/_macro/post-copyright.swig
	both modified:   layout/_macro/post.swig
	both modified:   layout/_macro/sidebar.swig
	both modified:   layout/_partials/footer.swig
	both modified:   layout/page.swig
	both modified:   source/css/_variables/base.styl

Untracked files:
  (use "git add <file>..." to include in what will be committed)

	layout/_macro/passage-end-tag.swig
	source/js/src/love.js

1

root@kali:~/blog/themes/next# git add -A

1
2

root@kali:~/blog/themes/next# git pull

Already up to date.

1

~/blog/themes $ git clone https://github.com/theme-next/hexo-theme-next.git next

1
2
3
4

# 文件位置：~/blog/_config.yml


## Themes: https://hexo.io/themes/

theme: next

  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
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

# [2017.11.14 更新]

# 文件位置：~/blog/_config.yml


# Hexo Configuration

## Docs: https://hexo.io/docs/configuration.html

## Source: https://github.com/hexojs/hexo/


# Site

title: reuixiy
subtitle: Viva La Vida
description: 易 象 辞
author: reuixiy
language: zh-CN
timezone:

# URL

url: https://reuixiy.github.io/
root: /
# 博客文章的 URL 结构，请务必写文章之前就想好！

# 详细参数请查看：https://hexo.io/docs/permalinks.html

# 当然最好不要参考我的，我的太不利于 SEO 了，除非……

permalink: :category/:year/:month/:day/:title.html
permalink_defaults:

# Directory

source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# 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: false
relative_link: false
future: true
# 代码高亮设置

highlight:
  enable: true
  line_number: true
# 代码自动高亮

  auto_detect: true
  tab_replace:
# 关于代码高亮的更多知识，可以查看本文 6.5.2 节


# 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: -date

# Category & Tag

default_category: uncategorized
# URL 中的分类和标签「翻译」成英文

# 见：https://github.com/hexojs/hexo/issues/1162

category_map:
tag_map:

# Date / Time format

## Hexo uses Moment.js to parse and display date

## You can customize the date format as defined in

## http://momentjs.com/docs/#/displaying/format/

date_format: YYYY-MM-DD
time_format: HH:mm:ss

# Pagination

## Set per_page to 0 to disable pagination

# 这个我有点懵，上面不是有啊……

per_page: 10
pagination_dir: page

## 修改归档页面、某一分类页面、某一标签页面的显示篇数

## 参考：http://theme-next.iissnan.com/faqs.html#setting-page-size

archive_generator:
  per_page: 0
  yearly: false
  monthly: false
  daily: false

category_generator:
  per_page: 0

tag_generator:
  per_page: 0

# Extensions

## Plugins: https://hexo.io/plugins/

# RSS，要先进入站点文件夹根目录安装插件

# npm install hexo-generator-feed --save 即可

# 无需更多配置

# 参数说明查看 README：https://github.com/hexojs/hexo-generator-feed

feed:
  type: atom
  path: atom.xml
# 文章数，0 为全部

  limit: 0
  hub:
# 是否包含文章内容

  content: true

# emoji 支持，教程见本文 6.3 节

githubEmojis:
  enable: true
  idName: github-emoji
  unicode: false
  styles:
  localEmojis:

## Themes: https://hexo.io/themes/

# 主题配置

theme: next

# Deployment

## Docs: https://hexo.io/docs/deployment.html

deploy:
  type: git
  repository: https://github.com/reuixiy/reuixiy.github.io.git
  branch: master

1

~/blog $ npm install hexo-footnotes --save

1
2
3

/* 文件位置：~/blog/themes/next/source/css/_variables/base.styl */

$font-size-base           = 16px

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

/* 文件位置：~/blog/themes/next/source/css/_variables/base.styl */

$font-family-chinese      = -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "STHeiti", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", "Droid Sans Fallback", "Microsoft YaHei"

$font-family-base         = $font-family-chinese, sans-serif
$font-family-base         = get_font_family('global'), $font-family-chinese, sans-serif if get_font_family('global')

$font-family-logo         = $font-family-base
$font-family-logo         = get_font_family('logo'), $font-family-base if get_font_family('logo')

$font-family-headings     = $font-family-base
$font-family-headings     = get_font_family('headings'), $font-family-base if get_font_family('headings')

$font-family-posts        = $font-family-base
$font-family-posts        = get_font_family('posts'), $font-family-base if get_font_family('posts')

$font-family-monospace    = $font-family-chinese, monospace
$font-family-monospace    = Menlo, Monaco, Consolas, get_font_family('codes'), $font-family-chinese, monospace if get_font_family('codes')

 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
40

# 文件位置：~/blog/themes/next/_config.yml


font:
  enable: true

  # Uri of fonts host. E.g. //fonts.googleapis.com (Default)

  # 亲测这个可用，如果不可用，自己搜索 [Google 字体 国内镜像]，找个能用的就行

  host: https://fonts.loli.net

  # Global font settings used on <body> element.

  global:
    # external: true will load this font family from host.

    external: true
    family: Lato

  # Font settings for Headlines (h1, h2, h3, h4, h5, h6)

  # Fallback to `global` font settings.

  headings:
    external: true
    family: Roboto Slab

  # Font settings for posts

  # Fallback to `global` font settings.

  posts:
    external: true
    family:

  # Font settings for Logo

  # Fallback to `global` font settings.

  # The `size` option use `px` as unit

  logo:
    external: true
    family:
    size:

  # Font settings for <code> and code blocks.

  codes:
    external: true
    family: Roboto Mono
    size:

 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

<!-- 文件位置：~/blog/themes/next/layout/_macro/post.swig -->

{% if not is_index and (post.prev or post.next) %}
  <div class="post-nav">
    <div class="post-nav-next post-nav-item">
-      {% if post.next %}
+      {% if post.prev %}
-        <a href="{{ url_for(post.next.path) }}" rel="next" title="{{ post.next.title }}">
+        <a href="{{ url_for(post.prev.path) }}" rel="prev" title="{{ post.prev.title }}">
-          <i class="fa fa-chevron-left"></i> {{ post.next.title }}
+          <i class="fa fa-chevron-left"></i> {{ post.prev.title }}
        </a>
      {% endif %}
    </div>

    <span class="post-nav-divider"></span>

    <div class="post-nav-prev post-nav-item">
-      {% if post.prev %}
+      {% if post.next %}
-        <a href="{{ url_for(post.prev.path) }}" rel="prev" title="{{ post.prev.title }}">
+        <a href="{{ url_for(post.next.path) }}" rel="next" title="{{ post.next.title }}">
-          {{ post.prev.title }} <i class="fa fa-chevron-right"></i>
+          {{ post.next.title }} <i class="fa fa-chevron-right"></i>
        </a>
      {% endif %}
    </div>
  </div>
{% endif %}

1
2
3
4

# 文件位置：~/blog/themes/next/_config.yml


# Enable sidebar on narrow view

onmobile: true

 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

<!-- 文件位置：~/blog/themes/next/layout/category.swig -->
<!-- 无 + 号版：https://github.com/reuixiy/reuixiy.github.io/blob/master/category.swig -->

    {% for post in page.posts %}
+
+      {# Show year #}
+      {% set year %}
+      {% set post.year = date(post.date, 'YYYY') %}
+
+      {% if post.year !== year %}
+        {% set year = post.year %}
+        <div class="collection-title">
+          <h2 class="archive-year motion-element" id="archive-year-{{ year }}">{{ year }}</h2>
+        </div>
+      {% endif %}
+      {# endshow #}
+
      {{ post_template.render(post) }}
    {% endfor %}
.
.
.（省略好多行）
.
.
+{% block script_extra %}
+  {% if theme.use_motion %}
+    <script type="text/javascript" id="motion.page.archive">
+      $('.archive-year').velocity('transition.slideLeftIn');
+    </script>
+  {% endif %}
+{% endblock %}

1
2
3
4
5
6
7
8

# 文件位置：~/blog/themes/next/_config.yml


# Star rating support to each article.

# To get your ID visit https://widgetpack.com

rating:
  enable: true
  id:     
  color: f79533

1
2
3
4
5
6
7
8

<!-- 文件位置：~/blog/themes/next/layout/_macro/post.swig -->

        {% if theme.rating.enable %}
          <div class="wp_rating">
+           <div style="color: rgba(0, 0, 0, 0.75); font-size:13px; letter-spacing:3px">(&gt;看完记得五星好评哦亲&lt;)</div>
            <div id="wpac-rating"></div>
          </div>
        {% endif %}

 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

<!-- 文件位置：~/blog/themes/next/layout/_custom/sidebar.swig -->

<div id="days"></div>
<script>
function show_date_time(){
    window.setTimeout("show_date_time()", 1000);
    BirthDay=new Date("05/27/2017 15:13:14");
    today=new Date();
    timeold=(today.getTime()-BirthDay.getTime());
    sectimeold=timeold/1000
    secondsold=Math.floor(sectimeold);
    msPerDay=24*60*60*1000
    e_daysold=timeold/msPerDay
    daysold=Math.floor(e_daysold);
    e_hrsold=(e_daysold-daysold)*24;
    hrsold=setzero(Math.floor(e_hrsold));
    e_minsold=(e_hrsold-hrsold)*60;
    minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
    seconds=setzero(Math.floor((e_minsold-minsold)*60));
    document.getElementById('days').innerHTML="已运行 "+daysold+" 天 "+hrsold+" 小时 "+minsold+" 分 "+seconds+" 秒";
}
function setzero(i) {
    if (i<10) {
        i="0" + i
    };
    return i;
}
show_date_time();
</script>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!-- 文件位置：~/blog/themes/next/layout/_macro/sidebar.swig -->

        {# Blogroll #}
        {% if theme.links %}
          <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
            <div class="links-of-blogroll-title">
              <i class="fa  fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
              {{ theme.links_title }}&nbsp;
              <i class="fa  fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
            </div>
            <ul class="links-of-blogroll-list">
              {% for name, link in theme.links %}
                <li class="links-of-blogroll-item">
                  <a href="{{ link }}" title="{{ name }}" target="_blank">{{ name }}</a>
                </li>
              {% endfor %}
            </ul>
+        {% include '../_custom/sidebar.swig' %}
          </div>
         {% endif %}

-        {% include '../_custom/sidebar.swig' %}

1
2
3
4
5
6
7
8
9

/* 文件位置：~/blog/themes/next/source/css/_custom/custom.styl */

/* 自定义的侧栏时间样式 */
#days {
    display: block;
    color: rgb(7, 179, 155);
    font-size: 13px;
    margin-top: 15px;
}

1

~/blog $ hexo new page "top"

1
2
3
4

# 文件位置：~/blog/themes/next/_config.yml


menu:
  top: /top/ || signal

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

# 文件位置：~/blog/themes/next/languages/zh_CN.yml


menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  schedule: 日程表
  sitemap: 站点地图
  commonweal: 公益404
  top: TopX /* 可以不为 TopX，随便取 */

 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

<!-- 文件位置：~/blog/source/top/index.md -->

---
title: TopX /* 可以不为 TopX，随便取 */
comments: false
keywords: top,文章阅读量排行榜
description: 博客文章阅读量排行榜
---
<div id="top"></div>

<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script>AV.initialize("app_id", "app_key");</script>
<script type="text/javascript">
    var time=0
    var title=""
    var url=""
    var query = new AV.Query('Counter');
    query.notEqualTo('id',0);
    query.descending('time');
    query.limit(1000);
    query.find().then(function (todo) {
        for (var i=0;i<1000;i++){
            var result=todo[i].attributes;
            time=result.time;
            title=result.title;
            url=result.url;
            var content="<a href='"+"https://reuixiy.github.io"+url+"'>"+title+"</a>"+"<br />"+"<font color='#555'>"+"阅读次数："+time+"</font>"+"<br /><br />";
            document.getElementById("top").innerHTML+=content
        }
    }, function (error) {
        console.log("error");
    });
</script>

<style>.post-description { display: none; }</style>

1

npm install gulp@3.9.1 -g

1

~/blog $ npm install gulp@3.9.1 gulp-minify-css gulp-htmlmin gulp-htmlclean --save

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// 文件位置：~/blog/gulpfile.js

var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'))
});
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'))
});
gulp.task('default', ['minify-html', 'minify-css']);

1

~/blog $ hexo clean && hexo g && gulp && hexo d

1
2
3
4
5

# 文件位置：~/blog/themes/next/_config.yml

footer:
-  icon: user
+  icon: heart

1
2
3
4

<!-- 文件位置：~/blog/themes/next/layout/_partials/footer.swig -->

- <span class="with-love">
+ <span class="with-love" id="heart">

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

/* 文件位置：~/blog/themes/next/source/css/_custom/custom.styl */

/* 自定义页脚跳动的心样式 */
@keyframes heartAnimate {
    0%,100%{transform:scale(1);}
    10%,30%{transform:scale(0.9);}
    20%,40%,60%,80%{transform:scale(1.1);}
    50%,70%{transform:scale(1.1);}
}
#heart {
    animation: heartAnimate 1.33s ease-in-out infinite;
}
.with-love {
    color: rgb(255, 113, 168);
}

1
2
3
4
5
6
7
8
9

<!-- 文件位置：~/blog/themes/next/layout/_partials/footer.swig -->

<div class="weixin-box">
  <div class="weixin-menu">
    <div class="weixin-hover">
      <div class="weixin-description">微信扫一扫，订阅本博客</div>
    </div>
  </div>
</div>

 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
40
41
42
43
44
45
46
47
48
49
50
51
52
53

/* 文件位置：~/blog/themes/next/source/css/_custom/custom.styl */

/* 自定义的页脚微信订阅号样式 */
.weixin-box {
    position: absolute;
    bottom: 43px;
    left: 10px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
}
.weixin-menu {
    position: relative;
    height: 24px;
    width: 24px;
    cursor: pointer;
    background: url(https://微信的logo.svg);
    background-size: 24px 24px;
}
.weixin-hover {
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 0px;
    width: 0px;
    border-radius: 3px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    background: url(https://二维码.svg);
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 150px 150px;
    transition: all 0.35s ease-in-out;
    z-index: 1024;
    opacity: 0;
}
.weixin-menu:hover .weixin-hover {
    bottom: 24px;
    left: 24px;
    height: 170px;
    width: 150px;
    opacity: 1;
}
.weixin-description {
    opacity: 0;
    position: absolute;
    bottom: 3%;
    left: 5%;
    right: 5%;
    font-size: 12px;
    transition: all 0.35s cubic-bezier(1, 0, 0, 1);
}
.weixin-menu:hover .weixin-description {
    opacity: 1;
}

1
2
3
4
5
6
7

# 文件位置：~/blog/themes/next/_config.yml

# Sidebar Avatar
# in theme directory(source/images): /images/avatar.gif
# in site  directory(source/uploads): /uploads/avatar.gif
-#avatar: /images/avatar.gif
+avatar: /uploads/avatar.gif

1
2
3
4
5
6
7

<!-- 文件位置：~/blog/themes/next/layout/_macro/sidebar.swig -->

+       <a href="/">
          <img class="site-author-image" itemprop="image"
               src="{{ url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}"
               alt="{{ theme.author }}" />
+       </a>

1
2
3
4
5
6

# 文件位置：~/blog/themes/next/_config.yml


excerpt_description: false

auto_excerpt:
  enable: false

 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

<!-- 文件位置：~/blog/themes/next/layout/_macro/post.swig -->

      {% if is_index %}
        {% if post.description and theme.excerpt_description %}
          {{ post.description }}
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="{{ url_for(post.path) }}">
              {{ __('post.read_more') }} &raquo;
            </a>
          </div>
          <!--/noindex-->
        {% elif post.excerpt  %}
          {{ post.excerpt }}
+          
+        {% if post.image %}
+        <div class="out-img-topic">
+          <img src={{ post.image }} class="img-topic" />
+        </div>
+        {% endif %}
+          
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="{{ url_for(post.path) }}{% if theme.scroll_to_more %}#{{ __('post.more') }}{% endif %}" rel="contents">
              {{ __('post.read_more') }} &raquo;
            </a>
          </div>
          <!--/noindex-->

1
2
3
4
5
6

/* 文件位置：~/blog/themes/next/source/css/_custom/custom.styl */

/* 自定义的文章摘要图片样式 */
img.img-topic {
    width: 100%;
}

1

image: url

1

~/blog $ npm uninstall hexo-generator-index --save

1

~/blog $ npm install hexo-generator-index-pin-top --save

1

top: true

1
2
3
4
5
6
7

# Post a.md

title: a
top: 1

# Post b.md

title: b
top: 10

 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

// 文件位置：~/blog/node_modules/hexo-generator-index-pin-top/lib/generator.js

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.sticky && b.sticky) { // 两篇文章sticky都有定义
            if(a.sticky == b.sticky) return b.date - a.date; // 若sticky值一样则按照文章日期降序排
            else return b.sticky - a.sticky; // 否则按照sticky值降序排
        }
        else if(a.sticky && !b.sticky) { // 以下是只有一篇文章sticky有定义，那么将有sticky的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.sticky && b.sticky) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

/* 文件位置：~/blog/themes/next/source/css/_custom/custom.styl */

/* 自定义的文章置顶样式 */
.post-sticky-flag {
    font-size: inherit;
    float: left;
    color: rgb(0, 0, 0);
    cursor: help;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}
.post-sticky-flag:hover {
    color: #07b39b;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

/* 文件位置：~/blog/themes/next/source/css/_custom/custom.styl */

/* 背景图片 */
body::before {
    background-image: url(https://背景图.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    content: " ";
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -2;
}

1
2
3
4
5
6
7

<!-- 文件位置：~/blog/themes/next/layout/_layout.swig -->

+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.4/jquery.backstretch.min.js"></script>
+  <script>
+  $("body").backstretch("https://背景图.jpg");
+  </script>
</body>

 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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

# ！！！！！！！！！！

# 每一项的 : 后面均有一个空格

# 且 : 为英文符号

# ！！！！！！！！！！


title:
# 文章标题，可以为中文


date:
# 建立日期，如果自己手动添加，请按固定格式

# 就算不写，页面每篇文章顶部的发表于……也能显示

# 只要在主题配置文件中，配置了 created_at 就行

# 那为什么还要自己加上？

# 自定义文章发布的时间


updated:
# 更新日期，其它与上面的建立日期类似

# 不过在页面每篇文章顶部，是更新于……

# 在主题配置文件中，是 updated_at


permalink:
# 若站点配置文件下的 permalink 配置了 title

# 则可以替换文章 URL 里面的 title（文章标题）


categories:
# 分类，支持多级，比如：

# - technology

# - computer

# - computer-aided-art

# 则为 technology/computer/computer-aided-art

# （不适用于 layout: page）


tags:
# 标签

# 多个可以这样写 [标签1,标签2,标签3]

# （不适用于 layout: page）


description:
# 文章的描述，在每篇文章标题下方显示

# 并且作为网页的 description 元数据

# 如果不写，则自动取 <!-- more -->

# 之前的文字作为网页的 description 元数据


keywords:
# 关键字，并且作为网页的 keywords 元数据

# 如果不写，则自动取 tags 里的项

# 作为网页的 keywords 元数据


comments:
# 是否开启评论

# 默认值是 true

# 要关闭写 false


layout:
# 页面布局，默认值是 post，默认值可以在

# 站点配置文件中修改 default_layout

# 另：404 页面可能用到，将其值改为 false


type:
# categories，目录页面

# tags，标签页面

# picture，用来生成 group-pictures

# quote？

# https://io-oi.me/tech/hello-world/


photos:
# Gallery support，用来支持画廊╱相册，用法如下：

# - photo_url_1

# - photo_url_2

# - photo_url_3

# https://io-oi.me/tech/hello-world/


link:
# 文章的外部链接

# https://io-oi.me/tech/hello-world/


image:
# 自定义的文章摘要图片，只在页面展示，文章内消失

# 此项只有参考本文 5.14 节配置好，否则请勿添加！


sticky:
# 文章置顶

# 此项只有参考本文 5.15 节配置好，否则请勿添加！


password:
# 文章密码，此项只有参考教程：

# http://shenzekun.cn/hexo的next主题个性化配置教程.html

# 第 24 节，配置好，否则请勿添加！

# 发现还是有 bug 的，就是右键在新标签中打开

# 然后无论是否输入密码，都能看到内容

1

~/blog $ npm install hexo-filter-github-emojis --save

1
2
3
4
5
6
7
8
9

# 文件位置：~/blog/_config.yml

githubEmojis:
  enable: true
-  className: github-emoji
+  idName: github-emoji
  unicode: false
  styles:
  localEmojis:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

# 文件位置：~/blog/node_modules/hexo-filter-github-emojis/index.js

    var codepoints = emojis[emojiName].codepoints
    if (options.unicode && codepoints) {
      codepoints = codepoints.map(function (code) {
        return '&#x' + code + ';'
      }).join('')

      return '<span id="' + options.idName + '" ' +
        styles +
-        ' title="' + emojiName +
-        '" data-src="' + emojis[emojiName].src +
+        ' data-src="' + emojis[emojiName].src +
        '">' + codepoints + '</span>'
    } else {
      return '<img id="' + options.idName + '" ' +
        styles +
-        ' title="' + emojiName + '" alt="' + emojiName + '" src="' +
+        ' alt="' + emojiName + '" src="' +
        emojis[emojiName].src + '" height="20" width="20" />'
    }

 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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

/* 文件位置：~/blog/themes/next/source/css/_custom/custom.styl */
/* 里面的 color 值请改为你博客的！ */

/* 自定义emoji样式 */
img#github-emoji {
    margin: 0px;
    padding: 0px;
    display: inline !important;
    vertical-align: text-bottom;
    border: none;
    cursor: text;
    box-shadow: none;
}
/* 文章超链接样式（为emoji特设） */
.post-body a {
    color: rgb(80, 115, 184);
    border-bottom: none;
    text-decoration: underline;
}
.post-body a:hover {
    color: rgb(161, 102, 171);
    border-bottom: none;
    text-decoration: underline;
}
/* 标签云页面超链接样式（为emoji特设） */
.tag-cloud a {
    color: rgb(80, 115, 184);
    border-bottom: 1px solid rgb(80, 115, 184);
    text-decoration: none;
}
.tag-cloud a:hover {
    color: rgb(161, 102, 171);
    border-bottom: 1px solid rgb(161, 102, 171);
    text-decoration: none;
}
/* 文章元数据中categories的样式（为emoji特设） */
a.categories {
    color: rgb(80, 115, 184);
    border-bottom: none;
    text-decoration: underline;
}
a.categories:hover {
    color: rgb(161, 102, 171);
    border-bottom: none;
    text-decoration: underline;
}
/* tabs标签（为emoji特设） */
.post-body .tabs ul.nav-tabs li.tab a {
    text-decoration: none;
}
/* 图片下方标题设置（为emoji特设） */
a.fancybox{
    text-decoration: none !important;
}
/* 按钮样式（为emoji特设） */
.btn {
    color: #fff !important;
    text-decoration: none !important;
    border: 2px solid #222 !important;
}
.btn:hover {
    color: #222 !important;
}

1

<img id="github-emoji" src="https://表情包.gif" height="30" width="30" />

1

<audio src="https://什么什么什么.mp3" style="max-height :100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;" controls="controls" loop="loop" preload="meta">Your browser does not support the audio tag.</audio>

1

~/blog $ npm install hexo-tag-aplayer --save

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

{% aplayerlist %}
{
    "autoplay": false,
    "showlrc": 3,
    "mutex": true,
    "music": [
        {
            "title": "歌曲名",
            "author": "歌手名",
            "url": "https://什么什么什么.mp3",
            "pic": "https://封面图.jpg",
            "lrc": "https://歌词.lrc"
        },
        {
            "title": "歌曲名",
            "author": "歌手名",
            "url": "https://什么什么什么.mp3",
            "pic": "https://封面图.jpg",
            "lrc": "https://歌词.lrc"
        }
    ]
}
{% endaplayerlist %}

1

<video poster="https://封面图.jpg" src="https://什么什么什么.mp4" style="max-height :100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;" controls="controls" loop="loop" preload="meta">Your browser does not support the video tag.</video>

1

~/blog $ npm install hexo-tag-dplayer --save

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

// 代码来自这：https://highlightjs.org/static/demo/

/**
 * @author John Smith <john.smith@example.com>
*/
package l2f.gameserver.model;

public abstract class L2Char extends L2Object {
  public static final Short ERROR = 0x0001;

  public void moveTo(int x, int y, int z) {
    _ai = null;
    log("Should not be called");
    if (1 > 5) { // wtf!?
      return;
    }
  }
}

1
2
3
4
5
6
7
8

# 文件位置：~/blog/themes/next/_config.yml


# Code Highlight theme

# Available value:

#    normal | night | night eighties | night blue | night bright

# https://github.com/chriskempson/tomorrow-theme


highlight_theme: normal

1
2
3
4
5
6
7
8

# 文件位置：~/blog/_config.yml

highlight:
  enable: true
  line_number: true
# 代码自动高亮
-  auto_detect: false
+  auto_detect: true

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/* 文件位置：~/blog/themes/next/source/css/_custom/custom.styl */

/* 文章 ``` 代码块顶部样式 */
.highlight figcaption {
    margin: 0em;
    padding: 0.5em;
    background: #eee;
    border-bottom: 1px solid #e9e9e9;
}
.highlight figcaption a {
    color: rgb(80, 115, 184);
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/* 文件位置：~/blog/themes/next/source/css/_custom/custom.styl */

/* 自定义的引用样式 */
blockquote.question {
    color: #555;
    border-left: 4px solid rgb(16, 152, 173);
    background-color: rgb(227, 242, 253);
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    margin-bottom: 20px;
}

1

<blockquote class="question">内容</blockquote>