hexo-theme-next @modified LRH

基于hexo-theme-next 6.0+的Pisces模板做的DIY扩展性设计(部分兼容next其他几种模板)。主要是一些custom style还有一些第三方的js。修改的地方太多也有点小乱就不提PR了。
modified 官方Demo => https://theme-next.org
记录一下折腾过程,以后备份恢复博客也好方便自己。本文之前的美化修改请见hexo分类
主题中若有遗漏第三方插件或应用的key及id值等请修改为自己对应的值

主要的几个自定义文件

主要修改路径及文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
_config.swig					#主题配置文件 相关账户信息自己注册替换
\layout\custom\head.swig #在头部自定义加入标签
\layout\custom\google_adsense.swig #谷歌广告模块,内有注释暂时弃用
\layout\_layout.swig #主布局
\layout\_macro\post.swig #文章布局
\layout\_macro\post-copyright.swig #文章版权
\layout\_macro\siderbar.swig #侧栏模板
\layout\_third-party\copy-code.swig #复制按钮
\layout\_partials\comments.swig #评论主模板
\layout\_partials\footer.swig #底部模板#该模块在layout.swig引入用于在body自定义标签
\layout\_third-party\custom.swig #该模块在layout.swig引入用于在body自定义标签
\source\css\_custom\customs.styl #主要用户自定义样式表
\source\fonts\ #引入了一些我的手写体及外部字体
\scripts\qcloudcdn.js #腾讯云cos桶刷新缓存的脚本,不需要可删掉[^1]
\layout\_partials\footer_custom.swig #footer自定义文件

^1

初步安装

安装整个改过的主题,然后下载相应的lib资源
1
2
cd hexo
git clone https://github.com/Lruihao/hexo-theme-next themes/next

更新内容

更多自定义详见源码

备案信息自定义

_config.yml
1
2
3
4
5
6
7
8
# -------------------------------------------------------------
# footer_custom Settings
# ---------------------------------------------------------------
beian:
enable: true
gov: 湘公网安备 43030402000254号
recordcode: 43030402000254
icp: 湘ICP备18020535号

文字抖动特效

(づ●’◡’●)づ ❥内容区
使用方法
1
<div class="shaky">(づ●'◡'●)づ ❥内容区</div>

左下角微信公众号

替换为自己的二维码
1
\source\css\_custom\customs.styl

相关文章收纳

加入H5标签,实现可收纳功能,点击查看详情。

Chat Services

共chatra,tidio,daovoice三个选项,三选一

_config.swig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Chatra Support
# See: https://chatra.io
# Dashboard: https://app.chatra.io/settings/general
chatra:
enable: false
async: true
id: # visit Dashboard to get your ChatraID
#embed: # unfinished experimental feature for developers, See: https://chatra.io/help/api/#injectto

# Tidio Support
# See: https://www.tidiochat.com
# Dashboard: https://www.tidiochat.com/panel/dashboard
tidio:
enable: false
key: # Public Key, get it from Dashboard, See: https://www.tidiochat.com/panel/settings/developer

#在线客服
daovoice: true
daovoice_app_id: xxxx # http://www.daovoice.io/

pdf和Mermaid解析模块

pdf传送门

config.swig
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
pdf:
enable: false
# Default height
height: 500px
pdfobject:
cdn: //cdn.jsdelivr.net/npm/pdfobject@2/pdfobject.min.js
#cdn: //cdnjs.cloudflare.com/ajax/libs/pdfobject/2.1.1/pdfobject.min.js

# Mermaid tag
mermaid:
enable: false
# Available themes: default | dark | forest | neutral
theme: forest
cdn: //cdn.jsdelivr.net/npm/mermaid@8/dist/mermaid.min.js
#cdn: //cdnjs.cloudflare.com/ajax/libs/mermaid/8.0.0/mermaid.min.js

模仿csdn转发样式

post.swig主要修改
1
2
3
4
5
6
7
8
9
10
11
12
13
...
<a class="post-title-link" href="{{ url_for(post.path) }}" itemprop="url">
+ {% if post.repost %}
+ <span class="repost">转</span>
+ {% endif %}
{{ post.title | default(__('post.untitled'))}}
</a>
{% else -%}
+ {% if post.repost %}
+ <span class="repost">转</span>
+ {% endif %}
{{- post.title -}}
...
css样式
1
2
3
4
5
6
7
8
.repost {
color: #5acc79;
border: 1px solid #e7f4df;
border-radius: 20px;
padding: 2px 5px;
font-size: 15px;
font-weight: 500;
}
post使用
1
2
3
4
---
title: xxxx
repost: true
---

预览

热度页面

打开hexo\themes\next\layout新建top.swig文件,写下如下内容保存:
其中第36行改成你自己的leancloud的appid和appkey,比如我的是在主题配置文件里面的valine配置下,所以我就写成theme.valine.appid。和我一样就不需要修改,其他自行配置。

top.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
76
77
78
79
80
81
82
{% extends '_layout.swig' %}
{% import '_macro/sidebar.swig' as sidebar_template %}

{% block title %}{#
#}{% set page_title_suffix = ' | ' + title %}{#

#}{% if page.type === "categories" and not page.title %}{#
#}{{ __('title.category') + page_title_suffix }}{#
#}{% elif page.type === "tags" and not page.title %}{#
#}{{ __('title.tag') + page_title_suffix }}{#

#}{% elif page.type === "photos" and not page.title %}{#
#}{{ __('title.photos') + page_title_suffix }}{#

#}{% else %}{#
#}{{ page.title + page_title_suffix }}{#
#}{% endif %}{#
#}{% endblock %}

{% block page_class %}page-post-detail{% endblock %}

{% block content %}

<div id="posts" class="posts-expand">
{##################}
{### PAGE BLOCK ###}
{##################}
<div class="post-block page">
{% include '_partials/page-header.swig' %}
{#################}
{### PAGE BODY ###}
{#################}

<div id="top"></div>
<script src="https://cdn1.lncld.net/static/js/av-core-mini-0.6.4.js"></script>
<script>AV.initialize("{{ theme.valine.appid }}", "{{ theme.valine.appkey }}");</script>
<script type="text/javascript">
setTimeout(function(){
var time=0
var title=""
var url=""
var query = new AV.Query('Counter');
query.notEqualTo('id',0);
query.descending('time');
query.limit({{ page.limit }}); //设置篇数
query.find().then(function (todo) {
for (var i=0;i<{{ page.limit }};i++){
var result=todo[i].attributes;
time=result.time;
title=result.title;
category=result.categories
url=result.url;
var content="<p>"+"【文章热度:"+time+"℃】"+"<a href='"+"{{ config.url }}"+""+url+"'>"+title+"</a>"+"</p>";
document.getElementById("top").innerHTML+=content
}
}, function (error) {
console.log("error");
});
},1000)
</script>

<div class="post-body{% if theme.han %} han-init-context{% endif %}{% if page.direction && page.direction.toLowerCase() === 'rtl' %} rtl{% endif %}"></div>

{#####################}
{### END PAGE BODY ###}
{#####################}
</div>
{% include '_partials/breadcrumb.swig' %}
{######################}
{### END PAGE BLOCK ###}
{######################}
</div>

{% endblock %}

{% block sidebar %}
{{ sidebar_template.render(false) }}
{% endblock %}

{% block script_extra %}
{% include '_scripts/pages/post-details.swig' %}
{% endblock %}

然后hexo n page top新建一个页面文章配置写下如下内容,limit表示显示篇数:

top.md
1
2
3
4
5
---
title: 热度
layout: top
limit: 20
---

复制按钮样式

本来只想简单美化一下变成night样式的,后来写完发现3dbtn也挺喜欢的。

config配置
1
2
3
4
5
6
7
8
9
10
11
codeblock:
# Manual define the border radius in codeblock
# Leave it empty for the default 1
border_radius: 5
# Add copy button on codeblock
copy_button:
enable: true
# Show text copy result
show_result: true
# Style: 'light,night,flat,3dbtn' is currently available, leave it empty or light is default theme
style: night
点击查看
欢迎关注公众号,感谢支持 !
0%