Hexo建站指南

新博客地址：https://gyrojeff.top，欢迎访问！ 本文为博客自动同步文章，为了更好的阅读体验，建议您移步至我的博客👇

本文标题:Hexo建站指南

文章作者:gyro永不抽风

发布时间:2020年03月08日 - 19:03

最后更新:2020年09月15日 - 07:09

原始链接:http://hexo.gyrojeff.moe/2020/03/08/Hexo%E5%BB%BA%E7%AB%99%E6%8C%87%E5%8D%97/

许可协议: 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 转载请保留原文链接及作者！

奶茶铺开张

创建GitHub项目

到自己的GitHub，新建一个repository，名为username.github.io，其中username是用户名。

安装Hexo

1
npm install -g hexo-cli

Once Hexo is installed, run the following commands to initialize Hexo in the target <folder>.

1
2
3
$ hexo init <folder>
$ cd <folder>
$ npm install

初始化完成之后，文件目录：

1
2
3
4
5
6
7
8
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

配置_config.yml

我的配置：

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
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: gyro永不抽风
subtitle: ああああああああああああああああおおおおおおおおおおおおおおおお
description: 更新？咕咕咕...
keywords: 蒟蒻
author: Haoyun Qin
language: zh-CN
timezone: Asia/Shanghai

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
url: 你自己的域名
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

# 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: :year:month/:title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: true
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

# 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
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# 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
## Use post's date for updated date unless set in front-matter
use_date_for_updated: false

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

symbols_count_time:
  symbols: true
  time: true
  total_symbols: true
  total_time: true

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: your repository link
  branch: master

安装Next

在blog的根目录下

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

添加访客量显示

在themes/next/layout/_partials/footer.swig末尾添加：

1
2
3
4
5
6
7
8
9
10
11
<div class="powered-by">
    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <i class="fa fa-user-md"></i>
    <span id="busuanzi_container_site_uv">
        本站访客数:<span id="busuanzi_value_site_uv"></span>
    </span>
    <span class="post-meta-divider">|</span>
    <span id="busuanzi_container_site_pv">
        本站访问量<span id="busuanzi_value_site_pv"></span>
    </span>
</div>

自定义样式

在next的_config.yml当中解出如下两行的注释

1
2
3
4
5
6
7
8
9
10
11
12
13
# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
    head: source/_data/head.swig
    #header: source/_data/header.swig
    #sidebar: source/_data/sidebar.swig
    #postMeta: source/_data/post-meta.swig
    #postBodyEnd: source/_data/post-body-end.swig
    #footer: source/_data/footer.swig
    #bodyEnd: source/_data/body-end.swig
    #variable: source/_data/variables.styl
    #mixin: source/_data/mixins.styl
    style: source/_data/styles.styl

并在source下新建文件夹_data，在_data当中新建文件head.swig, styles.styl。

更改页面下方年份和copyright之间的图标

1
2
3
4
5
6
7
8
9
# Icon between year and copyright info.
icon:
  # Icon name in Font Awesome. See: https://fontawesome.com/v4.7.0/icons/
  # `heart` is recommended with animation in red (#ff0000).
  name: heart
  # If you want to animate the icon, set it to true.
  animated: true
  # Change the color of icon, using Hex Code.
  color: "#FF3348"

在文章最后与侧边栏附上版权声明

1
2
3
4
5
6
7
8
9
10
# Creative Commons 4.0 International License.
# See: https://creativecommons.org/share-your-work/licensing-types-examples
# Available values of license: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | zero
# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true
  language: zh-cn

在文章最后加入自定义版权声明

在themes/next/layout/_macro/新建文件：my-copyright.swig

写入：

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
<style>
.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #a3d2a3;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}
</style>
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
  
  <!-- JS库 sweetalert 可修改路径 -->
  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
  <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:MM") }}</p>
  <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span>
  </p>
  <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-SA 4.0)">署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)</a> 转载请保留原文链接及作者！</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
	  $(".fa-clipboard").click(function(){
      clipboard.on('success', function(){
        swal({   
          title: "",   
          text: '复制成功',
          icon: "success", 
          showConfirmButton: true
          });
	    });
    });  
</script>

打开themes/next/layout/_macro/post.swig，在

1
2
3
{%- if theme.related_posts.enable and (theme.related_posts.display_in_home or not is_index) %}
  {{ partial('_partials/post/post-related.swig') }}
{%- endif %}

后添加：

1
2
3
4
{% if not is_index %}
  {% include 'my-copyright.swig' %}
{% endif %}

选择Gemini主题

1
2
3
4
5
# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini

适配系统的暗色模式

1
2
# Dark Mode
darkmode: true

设置页面的背景图片

打卡前面创建的styles.styl，添加：

1
2
3
4
5
6
7
8
9
10
// background

body {
    background-image:url(../images/2233.jpg);
    height:100%;
    width:100%;
    background-repeat:repeat-x;
    background-attachment:fixed;
    background-size:cover;
}

这里的2233.jpg是图片名称，图片存放在sources/images当中（文件夹没有需要新建）

对页面的透明度进行设置

注：opacity调整的是整个元素的透明度，设置opacity会将字也变得透明
background调整的则是元素的背景，可以通过rgba中的a来设置透明度

在styles.styl中加入：

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
// page-opacity

.content-wrap {
    background: rgba(255,255,255,0);
}

.content {
    background: rgba(255,255,255,0);
}

.posts-expand {
    background: rgba(255,255,255,0);
}

.post-block {
    background: rgba(255,255,255,0.6);
}

// ------ post end ------ 

.sidebar {
    opacity: 0.8;
}

.header-inner {
    background: rgba(255,255,255,0.6);
}

.popup {
    opacity: 0.8;
}

如果有不满意的话，可以自己用浏览器的检查元素来确定元素的class或者id，在这个文件里加入自己样式。

对默认的暗色模式进行调整

打开前面创建的styles.styl文件，将CSS样式添加在：

1
2
3
@media (prefers-color-scheme: dark) {
    // 需要添加的样式
}

这里添加的样式如果和前面添加的样式重复，则会在暗色模式中覆盖，无需担心。

以下是我的配置方案：

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
// background

body {
    background-image:url(../images/2233.jpg);
    height:100%;
    width:100%;
    background-repeat:repeat-x;
    background-attachment:fixed;
    background-size:cover;
}

// page-opacity

.content-wrap {
    background: rgba(255,255,255,0);
}

.content {
    background: rgba(255,255,255,0);
}

.posts-expand {
    background: rgba(255,255,255,0);
}

.post-block {
    background: rgba(255,255,255,0.8);
}

// ------ post end ------ 

.sidebar {
    opacity: 0.8;
}

.header-inner {
    background: rgba(255,255,255,0.8);
}

.popup {
    opacity: 0.8;
}

.site-brand-container {
    background: #E8704E;
}

.github-corner svg {
    fill: #E8704E;
}

.headband {
    background: #E8704E;
}

@media (prefers-color-scheme: dark) {
    $text-color = #cccccc;
    $link-color = #cccccc;

    body {
        background-image:url(../images/pixiv-1.jpg);
        height:100%;
        width:100%;
        background-repeat:repeat-x;
        background-attachment:fixed;
        background-size:cover;
    }
    
    blockquote {
        color: #cccccc;
    }


    .header-inner {
        background: rgba(0,0,0,0.8);
    }

    // page-opacity
    .content-wrap {
        background: rgba(255,255,255,0);
    }

    .content {
        background: rgba(255,255,255,0);
    }

    .posts-expand {
        background: rgba(255,255,255,0);
    }

    .post-block {
        background: rgba(0,0,0,0.8);
    }

    .sidebar {
        opacity: 0.9;
    }

    img {
        opacity: 1;
    }

}

为Menu添加tag栏和categories栏

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

并且需要新建文件，命令：

1
hexo new page tags
1
hexo new page categories

接下来分别打开这两个文件，分别在最上面两个分割线处添加：

1
type: "tags"

1
type: "categories"

为侧边栏添加自定义的栏目

和前面新建tags和categories的方法差不多，假设你想添加的栏目为done，运行如下命令：

1
hexo new page done

然后到_config.yml中添加为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
menu:
  home: / || home
  #about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat
  done: /done/ || calendar

其中/done/是站内网址的索引，calendar是选择的图标，done是栏目命名

为了显示出正确的中文，我们需要去翻译文件中添加done的中文

打开themes/next/languages/zh-CN.yml，找到menu添加done：

1
2
3
4
5
6
7
8
9
10
11
menu:
  home: 首页
  archives: 归档
  categories: 分类
  tags: 标签
  about: 关于
  search: 搜索
  schedule: 日程表
  sitemap: 站点地图
  commonweal: 公益 404
  done: 记录

开启侧边栏的数字提示

1
2
3
4
# Enable / Disable menu icons / item badges.
menu_settings:
  icons: true
  badges: true

侧边栏放置位置

我这里设置的右边

1
2
3
4
sidebar:
  # Sidebar Position.
  #position: left
  position: right

侧边栏头像设置

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/avatar.JPG
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: true

其中avatar.JPG是图片名，图片文件放置在source/images下

侧边栏添加社交网络账号

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
  GitHub: https://github.com/JeffersonQin || github
  E-Mail: mailto:1247006353@qq.com || envelope
  Weibo: https://weibo.com/5981714994 || weibo
  洛谷: https://www.luogu.com.cn/user/200035 || 
  bilibili: https://space.bilibili.com/114418778 || youtube-play
  网易云音乐: https://music.163.com/#/user/home?nickname=gyro%E6%B0%B8%E4%B8%8D%E6%8A%BD%E9%A3%8E || music
  QQ: tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=1247006353 || qq
  #Google: https://plus.google.com/yourname || google
  #Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

这当中的链接改成自己的链接，最后QQ中的1247006353改为自己的qq号即可。

添加友链

首先先加入：

1
2
3
4
5
6
# Blog rolls
links_settings:
  icon: coffee
  title: 奶茶铺的邻居(们)
  # Available values: block | inline
  layout: block

这里的title属性是你想要的标题，icon是标题旁边的图标

然后再加入友链，e.g.

1
2
3
links:
  #Title: http://yoursite.com
  枫亚: https://maplewithered.github.io/

格式：名称: 链接

目录全展开

1
2
3
4
5
6
7
8
9
10
11
12
# Table of Contents in the Sidebar
# Front-matter variable (unsupport wrap expand_all).
toc:
  enable: true
  # Automatically add list number to toc.
  number: true
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: true
  # Maximum heading depth of generated toc.
  max_depth: 6

首页文章简短显示

1
2
3
4
5
6
# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

# Read more button
# If true, the read more button will be displayed in excerpt section.
read_more_btn: true

在文章中添加：

1
<!-- more -->

来分割，之后的内容将不在首页显示

增加阅读时间显示

安装插件：

1
npm install hexo-symbols-count-time

到_config.yml当中修改：

1
2
3
4
5
6
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: true
  awl: 1
  wpm: 120

底部标签增加图标显示

1
2
# Use icon instead of the symbol # to indicate the tag at the bottom of the post
tag_icon: true

打赏功能

1
2
3
4
5
6
7
8
9
10
11
12
13
# Reward (Donate)
# Front-matter variable (unsupport animation).
reward_settings:
  # If true, reward will be displayed in every article by default.
  enable: true
  animation: false
  comment: 真的不买杯奶茶吗？T^T

reward:
  wechatpay: /images/wechatpay.JPG
  alipay: /images/alipay.JPG
  #paypal: /images/paypal.png
  #bitcoin: /images/bitcoin.png

其中两张图片的位置就是wechatpay和alipay的属性，一定要放在source（文件夹里面，这个是source文件夹的相对路径

相关文章

安装插件：

1
npm install hexo-related-popular-posts --save

更改设置

1
2
3
4
5
6
7
8
9
10
11
12
# Related popular posts
# Dependencies: https://github.com/tea3/hexo-related-popular-posts
related_posts:
  enable: true
  title: # Custom header, leave empty to use the default one
  display_in_home: false
  params:
    maxCount: 5
    #PPMixingRate: 0.0
    #isDate: false
    #isImage: false
    #isExcerpt: false

代码块风格设置

1
2
3
4
5
6
7
8
9
10
11
12
codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night eighties
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style: mac

返回顶部按钮

1
2
3
4
5
6
back2top:
  enable: true
  # Back to top in sidebar.
  sidebar: true
  # Scroll percent label in b2t button.
  scrollpercent: true

阅读进度条

1
2
3
4
5
6
7
# Reading progress bar
reading_progress:
  enable: true
  # Available values: top | bottom
  position: top
  color: "#E8704E"
  height: 3px

书签

1
2
3
4
5
6
7
8
# Bookmark Support
bookmark:
  enable: true
  # Customize the color of the bookmark.
  color: "#E8704E"
  # If auto, save the reading progress when closing the page or clicking the bookmark-icon.
  # If manual, only save it by clicking the bookmark-icon.
  save: manual

右上角Github图标

1
2
3
4
5
# `Follow me on GitHub` banner in the top-right corner.
github_banner:
  enable: true
  permalink: https://github.com/JeffersonQin
  title: Follow me on GitHub

Mathjax数学公式

安装：

1
2
$ npm un hexo-renderer-marked
$ npm i hexo-renderer-kramed # or hexo-renderer-pandoc

设置：

1
2
3
4
math:
  ...
  mathjax:
    enable: true

增加评论功能

注册LeanCloud账号

https://leancloud.cn/

注册完以后需要创建一个应用（页面上方），名字可以随便起，然后 进入应用->设置->应用key

获取你的appid 和 appkey

配置

拿到你的appid和appkey之后，打开主题配置文件 搜索 valine，填入appid 和 appkey

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
valine:
  enable: true
  appid: your appid # Your leancloud application appid
  appkey: your app key # Your leancloud application appkey
  notify: false # Mail notifier
  verify: false # Verification code
  placeholder: ヾﾉ≧∀≦)o 来呀！快活呀！~ # Comment box placeholder
  avatar: mm # Gravatar style
  guest_info: nick,mail,link # Custom comment header
  pageSize: 10 # Pagination size
  language: zh-cn # Language, available values: en, zh-cn
  visitor: true # Article reading statistic
  comment_count: true # If false, comment count will only be displayed in post page, not in home page
  recordIP: true # Whether to record the commenter IP
  serverURLs: # When the custom domain name is enabled, fill it in here (it will be detected automatically by default, no need to fill in)
  #post_meta_order: 0

增加评价功能

注册widgetpack账号

注册widgetpack账号： https://widgetpack.com

获取ID，很明显可以看见，一般在页面左上角

更改widgetpack设置

rating -> settings 改为根据IP地址投票

配置

1
2
3
4
5
6
# Star rating support to each article.
# To get your ID visit https://widgetpack.com
rating:
  enable: true
  id: your app id
  color: fc6423

支持PDF

Go to dir

1
2
3
$ cd themes/next
$ ls
_config.yml  crowdin.yml  docs  gulpfile.js  languages  layout  LICENSE.md  package.json  README.md  scripts  source

Install

1
$ git clone https://github.com/theme-next/theme-next-pdf source/lib/pdf

Configure

1
2
3
4
5
6
7
8
# PDF tag
# NexT will try to load pdf files natively, if failed, pdf.js will be used.
# So, you have to install the dependency of pdf.js if you want to use pdf tag and make it available to all browsers.
# See: https://github.com/theme-next/theme-next-pdf
pdf:
  enable: true
  # Default height
  height: 500px

Usage

1
{% pdf /path/to/your/file.pdf %}

Update

1
2
$ cd themes/next/source/lib/pdf
$ git pull

搜索功能

1
$ npm install hexo-generator-searchdb
1
2
3
4
5
6
7
8
9
10
11
12
13
# Local Search
# Dependencies: https://github.com/theme-next/hexo-generator-searchdb
local_search:
  enable: true
  # If auto, trigger search by changing input.
  # If manual, trigger search by pressing enter key or search button.
  trigger: auto
  # Show top n results per article, show all results by setting to -1
  top_n_per_article: 1
  # Unescape html strings to the readable one.
  unescape: false
  # Preload the search data when the page loads.
  preload: false

增加jQuery的支持

在next的config当中

1
2
3
vendors:
  ...
  jquery: https://code.jquery.com/jquery-2.1.3.min.js

给页面右下角适配一个按钮来消除透明度

因为老师要看我笔记，背景如果是2233怕不是要被锤爆，故写了一个小按钮。

在theme/next/layout/_macro/post.swig当中，在最后的</article>之前，添加如下代码：

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
{% if not is_index %}
    <div id="comple-dark-button-wrap" style="z-index: 100000; position: fixed; right: 20px; bottom: 20px;">
        <style>
            .control-mask-button {
                display: block;
                width: 42px;
                height: 42px;
                line-height: 42px;
                color: #ff8572;
                background: #ffd9d3;
                box-shadow: 0 2px 5px 0 rgba(0,0,0,.16), 0 2px 10px 0 rgba(0,0,0,.12);
                width: 2.5em;
                height: 2.5em;
                line-height: 2.5em;
                border-radius: 50%;
                -webkit-transform: translateZ(0);
                transform: translateZ(0);
                overflow: hidden;
                position: relative;
                cursor: pointer;
                display: inline-block;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                -webkit-tap-highlight-color: transparent;
            }
            .control-mask-button:hover {
                color: #FFBDFF;
                transition-duration: 0.5s;
            }
        </style>
        <a href="javascript:;" id="jeffMaskControl" class="control-mask-button"></a>
        <script>
            var click_time = 0;
            
            document.querySelector('a[id="jeffMaskControl"]').addEventListener('click', function(){
                click_time += 1;
                var content_wrap = document.getElementsByClassName('content-wrap')[0];
                if (click_time % 2 == 1) {
                    content_wrap.style.cssText += 'background: rgba(175,210,237,1);';
                } else {
                    content_wrap.style.cssText += 'background: rgba(175,210,237,0);';
                }
            })
        </script>
    </div>
{% endif %}

加密文章

1
npm install --save hexo-blog-encrypt

在hexo的config中

1
2
3
4
encrypt:
  enable: true
  abstract: 这是一篇加密文章，内容可能是个人情感宣泄或者收费技术。如果你确实想看，请与我联系。
  message: 输入密码，查看文章。

给需要加密的文章添加password属性即可

看板娘 live2d

1
npm install --save hexo-helper-live2d

模型可以用自己喜欢的样式，具体可以参照：https://blog.csdn.net/wang_123_zy/article/details/87181892

我使用的是hibiki，安装：

1
npm install live2d-widget-model-hibiki

在hexo的config中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  debug: false
  model:
    use: live2d-widget-model-hibiki
  display:
    position: left
    width: 150
    height: 325
  mobile:
    show: true

不同的模型只要更改hibiki部分即可。

Note图标

1
2
3
4
5
6
7
8
9
10
11
12
# Note tag (bs-callout)
note:
  # Note tag style values:
  #  - simple    bs-callout old alert style. Default.
  #  - modern    bs-callout new (v2-v3) alert style.
  #  - flat      flat callout style with background, like on Mozilla or StackOverflow.
  #  - disabled  disable all CSS styles import of note tag.
  style: simple
  icons: true
  # Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
  # Offset also applied to label tag variables. This option can work with disabled note tag.
  light_bg_offset: 0
posted @ 2020-09-15 09:13  gyro永不抽风  阅读(613)  评论(0)  编辑  收藏  举报