Hexo+NexT博客个性化

不定期更新Orz


浏览数量:

将next的_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
#Show PV/UV of the website/page with busuanzi.

#Get more information on http://ibruce.info/2015/04/04/busuanzi/

busuanzi_count:

count values only if the other configs are false

enable: true

# custom uv span for the whole site

site_uv: true
site_uv_header: 本站访客数
site_uv_footer: 人次

# custom pv span for the whole site

site_pv: true
site_pv_header: 本站总访问量
site_pv_footer:

# custom pv span for one page only

page_pv: true
page_pv_header: 本页面共计被访问
page_pv_footer:

next主题已经内置了busuanzi可以统计访问量

需要注意的是

next6.0中的busuanzi的地址不对,需要在busuanzi-counter.swig修改相关的相应的新的网址,修改为:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{% if theme.busuanzi_count.enable %}
<div class="busuanzi-count">
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>


{% if theme.busuanzi_count.site_uv %}
<span class="site-uv">
{{ theme.busuanzi_count.site_uv_header }}
<span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
{{ theme.busuanzi_count.site_uv_footer }}
</span>
{% endif %}

{% if theme.busuanzi_count.site_pv %}
<span class="site-pv">
{{ theme.busuanzi_count.site_pv_header }}
<span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
{{ theme.busuanzi_count.site_pv_footer }}
</span>
{% endif %}
</div>
{% endif %}

完成后,效果如下:

评论系统

采用了Valine,也可以在最新的next主题内直接使用:

1
2
3
4
5
6
7
8
9
10
11
12
13
# Valine.
# You can get your appid and appkey from https://leancloud.cn
# more info please open https://valine.js.org
valine:
enable: true
appid: yourID
appkey: yourKEY
notify: true # mail notifier , https://github.com/xCss/Valine/wiki
verify: false # Verification code
placeholder: 不输入上述信息将触发匿名评论。Comment here. # comment box placeholder
avatar: retro # gravatar style
guest_info: nick,mail,link # custom comment header
pageSize: 10 # pagination size

具体方法可以参照:

Valine|介绍

值得注意的是,如果你在访问流量的收集时,用到了leancloud,请采用我上述的方式,防止评论系统不可使用,具体原因可以参照下面的网站:

https://reuixiy.github.io/technology/computer/computer-aided-art/2018/07/15/use-valine-in-theme-next.html

效果图如下:

现在还未实现发送评论后,立刻给我发送邮件的功能,可以参照下方地址

Valine-Admin/高级配置

解决图片无法加载的问题

在hexo中的_config.yml

1
`post_asset_folder: true`

重要的是使用相对路径引用的标签插件

例如:

1
2
3
{% asset_img example.jpg This is an example image %}
//或者
![](hexonextcomment/2.png)//注意这里没有日期,与保存路径不同

参考:

资源文件夹

这里给大家推荐一个网站背景网站:https://www.toptal.com/designers/subtlepatterns/

添加阅读全文

1
<!-- more -->

将上方代码添加到你想要的位置

搜索服务Local Search

先安装hexo-generator-searchdb

1
npm install hexo-generator-searchdb --save

然后在站点配置文件,注意不是主题配置,添加以下代码:

1
2
3
4
5
search:
path: search.xml
field: post
format: html
limit: 10000

然后主题配置文件找到local_search改为true,然后从上面提供的样式选一个填入pace_theme中就可以了:

1
2
3
# Local search
local_search:
enable: true

菜单栏出现搜索功能。

设置博客字数统计

首先cd到blog的目录,

执行

1
npm i --save hexo-wordcount

然后

将next的_config.yml文件设置如下:

1
2
3
4
5
6
7
8
# Post wordcount display settings
# Dependencies: https://github.com/willin/hexo-wordcount
post_wordcount:
item_text: true
wordcount: true
min2read: false
totalcount: true
separated_meta: true

效果图:

提交搜索引擎(Google 百度)

两个搜索引擎入口:
Google搜索引擎提交入口

百度搜索引擎入口
不管谷歌还是百度都要先添加域名,然后验证网站,这里统一都使用文件验证,就是下载对应的html文件,放到域名根目录下,也就收博客根目录下的source/下面 。
然后部署到服务器,输入地址:http://chaooo.github.io/google4cc3eef6ff5975bf.htmlhttp://chaooo.github.io/baidu_verify_wjJ25Q3cv2.html能访问到就可以点验证按钮(按照谷歌或百度的引导步骤就好)。
注意:若出现验证失败,则是因为hexo编译文件时,会给下载的HTML文件中添加其他的内容,导致验证失败。

这个时候要把相应的文件在hexo中删除,在Github里手动修改验证HTML文件,或者不编译。

修改字体

假设Next主题的目录名称为next,如果要自定义CSS样式,只要在themes/next/source/css/_custom/custom.styl文件中写入相应的CSS代码就行了。

注意

  • 文件后缀为styl,猜测可能是使用stylus语法的样式文件。但是我试过了,直接写CSS代码是可行的。
  • 涉及到文件引用的地方要注意路径。如果使用相对路径,默认当前目录为themes/next/source/css/
  • 注意要执行hexo clean命令,清除已经生成的文件。然后再执行hexo generate重新生成文件。否则样式可能不会生效。
  • 如果页面刷新后,新的样式没有生效,建议检查public/css/main.css中有没有加入新的CSS代码。

自定义字体

当前我只能确定支持ttf以及eot格式的字体文件。定义一个字体,首先要确定字体文件的路径。我把字体文件*.ttf放在source/fonts/路径下,hexo生成页面时会把fonts目录复制到public/中。我的网站是建在根目录下的,字体文件引入的路径为/fonts/*.ttf
themes/next/source/css/_custom/custom.styl文件中加入以下代码,其中font-family的值是你定义的字体的名称,也就是你后面使用字体时的名称。

1
2
3
4
@font-face{
font-family: *;
src: url('/fonts/*.ttf');
}

然后要在命令行中执行以下代码

1
2
hexo clean
hexo generate

这样,该样式就能在主题中生效了。如果页面刷新后没有改变,可能是缓存的问题。查看public/css/main.css文件,看看文件末尾有没有新加入的CSS代码。

代码块使用字体

既然字体(CSS样式)已经生效了,那就可以在主题中使用该字体了。
修改主题配置文件themes/next/_config.ymlcodes的配置内容即可。主题会优先使用该字体,当该字体不存在时,会使用其他预设的字体。另外建议把host这一项改为国内的反代理服务器,如//fonts.css.network,以提升访问速度。默认是谷歌的服务器,国内连不上。

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:

# 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 on <body> element.
global:
external: true
family: Lato
size:

# 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: Pacifico
size: 24

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

然后再执行hexo clean && hexo generate命令清除并重新生成文件,应该就可以了。

Title格式修改

修改位于/themes/next/source/css/_common/components/headersite-meta.styl文件

1
2
3
4
.brand {
color: #bfbdef !important;//更改字体颜色
border-bottom: none;//去掉黑条
}