自定义hexo的Next主题 s2

hexo

概览：

Next官网文档

在右上角或者左上角实现fork me on github

打开next主题配置文件
修改github_banner:的 enable为true

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

动态背景

目前NexT主题最新的是V7.2版本，这个版本中可以有4种动态背景：

  • Canvas-nest
  • three_waves
  • canvas_lines
  • canvas_sphere

打开Github,寻找相应的动画并按要求安装，然后直接设置里需要的动态背景为true。

添加RSS

1.然后安装 Hexo 插件：

1
cnpm install hexo-generator-feed --save

2、打开 站点配置文件 修改或添加以下内容

1
2
3
4
5
6
7
8
# feed
# Dependencies: https://github.com/hexojs/hexo-generator-feed
feed:
  type: rss
  path: rss.xml
  limit: 20
  hub:
  content:

3、打开 主题配置文件 找到rss，设置为

1
rss: /rss.xml

添加搜索功能

1、安装 hexo-generator-searchdb 插件:

1
cnpm install hexo-generator-searchdb --save

2、打开next主题配置文件修改search项

1
2
3
4
5
6
7
8
9
10
11
# 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

3、打开 主题配置文件 找到Local search，将enable设置为true

添加阅读全文按钮

因为在你的博客主页会有多篇文章，如果你想让你的文章只显示一部分，多余的可以点击阅读全文来查看，那么你需要在你的文章中添加

1
<!--more-->

在每篇文章末尾统一添加“本文结束”标记

接着打开\themes\next\layout_macro\post.swig文件，在End post body 之后， 添加以下代码：

1
2
3
4
5
6
7
8
{#####################}
    {### END POST BODY ###}
    {#####################}
    <div>
      {% if not is_index %}
          <div style="text-align:center;color: #ccc;font-size:14px;">------ 文章已经结束，谢谢你的阅读 ------<br>------ article has ended,thank you for reading ------</div>
      {% endif %}
    </div>

然后打开主题配置文件（_config.yml),在末尾添加：

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
enabled: true

Hexo发布博客引用自带图片的方法

1
cnpm install hexo-asset-image --save

编辑站点配置文件
字段post_asset_folder

1
post_asset_folder: true

hexo new “test blog”
使用完命令之后，在source/_post文件夹里面就会出现一个“test-blog.md”的文件和一个“test-blog”的文件夹。

侧边栏社交小图标设置

打开主题配置文件_config.yml，搜索social:, ||之后是在图标库中对应的图标。注意空格就行。

1
2
social:
  GitHub: https://github.com/yourname || github

设置网站图标

默认的网站图标是一个N，当然是需要制定一个图了，在网上找到图后，将其放在/themes/next/source/images里面，然后在主题配置文件中修改下图所示图片位置

1
2
3
4
5
6
7
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

在网站底部加上访问量

安装HEXO插件，切换到根目录：

1
cnpm install hexo-symbols-count-time --save

编辑 主题配置文件
修改symbols_count_tim:字段

1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/theme-next/hexo-symbols-count-time
symbols_count_time:
  separated_meta: true
  item_text_post: true
  item_text_total: true
  awl: 4
  wpm: 275

文章字数统计

安装HEXO插件，切换到根目录：

1
cnpm install hexo-wordcount --save

编辑 主题配置文件
修改post_wordcount:字段

1
2
3
4
5
6
7
8
9
post_wordcount:
  item_text: true
  #字数统计
  wordcount: true
  #预览时间
  min2read: true
  #总字数,显示在页面底部
  totalcount: true
  separated_meta: true

开启打赏功能

编辑 主题配置文件
修改reward_comment:等字段

1
2
3
reward_comment: 坚持原创技术分享，您的支持将鼓励我继续创作！
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg

添加网页顶部进度加载条

编辑 主题配置文件 ，command+F搜索pace，其将值对划线ture就可以了，选择一款你喜欢的样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Progress bar in the top during page loading.
pace: ture
# Themes list:
#pace-theme-big-counter
#pace-theme-bounce
#pace-theme-barber-shop
#pace-theme-center-atom
#pace-theme-center-circle
#pace-theme-center-radar
#pace-theme-center-simple
#pace-theme-corner-indicator
#pace-theme-fill-left
#pace-theme-flash
#pace-theme-loading-bar
#pace-theme-mac-osx
#pace-theme-minimal
# For example
# pace_theme: pace-theme-center-simple
pace_theme: pace-theme-flash

底部隐藏由HEXO强力驱动，主题–NexT…

  • 打开Blog/themes/next/_config.yml,把true改成false
1
2
3
4
5
6
7
8
# Hexo link (Powered by Hexo).
powered: false

theme:
  # Theme & scheme info link (Theme - NexT.scheme).
  enable: false
  # Version info of NexT after scheme info (vX.X.X).
  version: false

生成post时默认生成categories配置项

在scaffolds/post.md中，添加一行categories:。同理可应用在page.md

底部显示建站时间和图标修改

编辑 主题配置文件

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
footer:
  # Specify the date when the site was setup. If not defined, current year will be used.
  since: 2017

  # Icon between year and copyright info.
  icon:
    # Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons/
    # `heart` is recommended with animation in red (#ff0000).
    name: snowflake-o
    # If you want to animate the icon, set it to true.
    animated: false
    # Change the color of icon, using Hex Code.
    color: "#808080"

  # If not defined, `author` from Hexo main config will be used.
  copyright:

  powered:
    # Hexo link (Powered by Hexo).
    enable: false
    # Version info of Hexo after Hexo link (vX.X.X).
    version: false

  theme:
    # Theme & scheme info link (Theme - NexT.scheme).
    enable: false
    # Version info of NexT after scheme info (vX.X.X).
    version: false

  # Beian icp information for Chinese users. In China, every legal website should have a beian icp in website footer.
  # http://www.beian.miit.gov.cn
  beian:
    enable: false
    icp:

  # Any custom text can be defined here.
  custom_text: Power by 1101.Mardan M & <br>Copyright © 2017 - 2021 Mardan. All Rights Reserved.

设置字体

编辑 主题配置文件

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
font:
  enable: true

  # Uri of fonts host, e.g. //fonts.googleapis.com (Default).
  host: //fonts.lug.ustc.edu.cn

  # Font options:
  # `external: true` will load this font family from `host` above.
  # `family: Times New Roman`. Without any quotes.
  # `size: xx`. Use `px` as unit.

  # Global font settings used for all elements in <body>.
  global:
    external: true
    family: Comic Neue
    size: 18

  # Font settings for Headlines (H1, H2, H3, H4, H5, H6).
  # Fallback to `global` font settings.
  headings:
    external: true
    family:
    size:

  # Font settings for posts.
  # Fallback to `global` font settings.
  posts:
    external: true
    family: 

  # Font settings for Logo.
  # Fallback to `global` font settings.
  logo:
    external: true
    family: Lobster Two
    size:

  # Font settings for <code> and code blocks.
  codes:
    external: true
    family: monospace
    size:



添加sitemap.xml

1
npm install hexo-generator-sitemap --save

在站点_config.yml添加

1
2
3
# 自动生成sitemap
sitemap:
path: sitemap.xml

Mardan MDevOps Engineer

Hi there, I’m Mardan(ka1i).