0%

hexo+next主题博客-next主题配置

原文链接:hexo+next主题博客-next主题配置
上文链接:hexo+next主题博客-hexo部署

导言

next主题是适配hexo的一个博客主题,由于hexo本身关注的是博客系统的效率稳定,
在界面美化方面我们选择专门的主题,不仅能够提供更好的视觉效果,还能提供更多的扩展

主要扩展以下方面:

  1. 界面优化
  2. 网站的外部链接扩展
  3. 站点导航与搜索以及数据统计信息
  4. 全局html内容同步,实现广告效果

界面优化

风格

next本身就提供了多个风格,设置主题风格

1
2
3
4
5
6
7
8
9
# Schemes
# scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

# Dark Mode
darkmode: true

打开侧边栏 sidebar: true

avatar图标

1
avatar:url: http://res.aidroid.top/avatar.jpg
  1. 关闭powered: false
  2. 打开备案
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
      beian:
    enable: true
    icp: 皖ICP备2021008017号
    # The digit in the num of gongan beian.
    gongan_id:
    # The full num of gongan beian.
    gongan_num:
    # The icon for gongan beian. See: http://www.beian.gov.cn/portal/download
    gongan_icon_url: http://res.aidroid.top/share/ico/ba.svg

    ````
    3. 使用多语言
    language:
    - zh-CN
    - en
    允许multililanguage

    #### 文章显示摘要

    在md文件中使用分割 <!-- more -->
    并设置
    excerpt_description: true

Read more button

If true, the read more button will be displayed in excerpt section.

read_more_btn: 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
32
33
34
同时要求分割符前要存在内容,否则不会生效



#### plugin插件
通过插件来增加功能

1. 代码块
{% codeblock %}
alert('Hello World!');
{% endcodeblock %}

2. pdf
打开加载pdf
pdf 需要插件,会导致出错
pdf:
enable: true

3. 链接图片等资源
由于我们配置了资源服务器,直接从资源服务器调取资源

4. latex公式

网上给的latex方案都是45年前的,插件都是89年前的,狗屎玩意.

直接next官网找到[插件模块](https://theme-next.js.org/plugins/) ,找到next最新的[插件代码](https://github.com/next-theme/hexo-filter-mathjax)
按照版本和介绍安装即可


### 网站的外部链接扩展
#### 永久链接设置
默认hexo博客的链接是使用日期作为路径,这对博客的外部链接会产生一定影响,如果对日期有修改的要求是无法保证链接的有效性的。

可以在hexo的config中修改

permalink: :title/

1
2
3
4
表示直接使用博客名


或者在每个博客前加mytag :标签,

permalink: :mytag/:title/

1
2
3
这样博客链接就变成了http://example.com/mytag/title/

#### Sidebar Social Links 增加外部链接

social:
GitHub: https://github.com/yasuo626 || fab fa-github
E-Mail: mailto:yasuo626.com@gmail.com || fa fa-envelope
home: https://aidroid.top

1
2
3
4
5
6
7
8
9
#### 捐赠设置
将支付图片存放至source/images
设置reward并启动


### 导航与搜索

#### 搜索
使用next自带搜索

npm install hexo-generator-searchdb

hexo:
search:
path: search.xml
field: post
content: true
format: html

next:

Local search

Dependencies: https://github.com/next-theme/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

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




#### 混淆路由
exturl: true

#### 导航sitemap
安装扩展
npm install hexo-generator-sitemap --save
hexo配置url
url: http://blog.aidroid.top
next配置
sitemap: /sitemap.xml || fa fa-sitemap

#### 统计
1. google 分析

2. 百度分析
next\layout_partials\head\head.swig添加js

config设置
baidu_analytics: fa58f2400331bc3e01639db39d4cbdbc

3. 人数统计

next配置

busuanzi_count:
enable: true
total_visitors: true
total_visitors_icon: fa fa-user
total_views: true
total_views_icon: fa fa-eye
post_views: false
post_views_icon: fa fa-eye

1
2
3

hexo配置
counter: true

next\layout_partials\footer.swig添加




### 全局html内容同步,实现广告效果

在next\layout_partials中即可实现添加自定义的服务

#### google ads


Powered By Valine
v1.5.2