自定义hexo的Next主题-v2

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

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

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

1
2
3
4
5
6
7
8
{#####################}
{### END POST BODY ###}
{#####################}

{% if not is_index %}
"text-align:center;color: #ccc;font-size:14px;"
>------ 文章已经结束,谢谢你的阅读 ------
------ article has ended,thank you for reading ------
{% endif %}

然后打开主题配置文件(_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
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 &
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
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 .
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 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
------ 文章已经结束,谢谢你的阅读 ------
------ article has ended,thank you for reading ------
Thanks support Me

---------------- The End ----------------