1. 主页魔改插件收藏
1.1 hexo-swiper 文章置顶
效果预览：
NPM 插件安装的部署方法：
1
2
3
| npm i hexo-swiper-bar --save
cnpm i hexo-swiper-bar --save
|
☕注意：一定要加 --save，不然本地预览的时候可能不会显示！！！
新增网站根目录_config 配置项：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
swiper:
enable: false
priority: 1
enable_page: /
timemode: date
layout:
type: id
name: recent-posts
index: 0
default_descr: 再怎么看我也不知道怎么描述它的啦！
swiper_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.css
swiper_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper.min.js
custom_css: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiperstyle.css
custom_js: https://npm.elemecdn.com/hexo-butterfly-swiper/lib/swiper_init.js
|
- 挂载方法
在 Front-matter 添加以下参数即可，index 数字越大越靠前展示。
1
2
3
| swiper_index: 8
swiper_desc: 简单好用的 hexo 博客文章置顶插件！
swiper_cover: /images/letter/p.png
|
- hexo 三连,即可发现已经成功部署
1.2 Hexo Magnet 分类
效果预览：
NPM 插件安装的部署方法：
1
2
3
| npm i hexo-magnet --save
cnpm i hexo-magnet --save
|
☕注意：一定要加 --save，不然本地预览的时候可能不会显示！！！
新增网站根目录_config 配置项：
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
| magnet:
enable: true
priority: 1
enable_page: /
type: categories
devide: 3
display:
- name: 教程
display_name: 软件の安装教程
icon: 📚
- name: 破解
display_name: 应用の破解
icon: 🐱🚀
- name: 灵感
display_name: 神灵の思考
icon: 🍁
- name: 笔记
display_name: 瀚海の笔记
icon: 👩💻
- name: 其他
display_name: 光怪&陆离
icon: 👻
- name: 收藏
display_name: 藏器&秘境
icon: 🕌
- name: 语言
display_name: 玉石&词话
icon: 🎃
color_setting:
text_color: black
text_hover_color: white
background_color: "#f2f2f2"
background_hover_color: "#69e8f2"
layout:
type: id
name: recent-posts
index: 1
temple_html: '<div class="recent-post-item" style="width:100%;height: auto"><div id="catalog_magnet">${temple_html_item}</div></div>'
plus_style: ""
|
点击前往更多主题配置.
略微改动，将下面的css置于自己的/css/custom.css：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| .magnet_link_context {
background: var(--trans-light);
color: #121212;
border: var(--border-style);
border-radius: 12px;
}
[data-theme="dark"] .magnet_link_context {
background: #1d1e22;
color: #faebd7;
}
[data-theme="dark"] .magnet_link_context {
border-radius: 12px;
border: var(--border-style);
}
.magnet_link_context:hover {
background: #00c3ff;
color: #fff;
}
[data-theme="dark"] .magnet_link_context:hover {
background: #42d3d8 !important;
color: #faebd7;
}
|
- hexo 三连,即可发现已经成功部署
1.3 hexo-githubcalendar
效果预览：
NPM 插件安装的部署方法：
1
2
3
| npm i hexo-githubcalendar --save
cnpm i hexo-githubcalendar --save
|
☕注意：一定要加 --save，不然本地预览的时候可能不会显示！！！
新增网站根目录_config 配置项 (不是主题的)：
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
|
gitcalendar:
enable:
priority: 5
enable_page: /
layout:
type: id
name: recent-posts
index: 0
user: sylvanus9
apiurl: 'https://gitcalendar.fomal.cc'
minheight:
pc: 320px
mibile: 0px
color: "['#ebedf0', '#fdcdec', '#fc9bd9', '#fa6ac5', '#f838b2', '#f5089f', '#c4067e', '#92055e', '#540336', '#48022f', '#30021f']"
container: .recent-post-item(style='width:100%;height:auto;padding:10px;')
gitcalendar_css: https://npm.elemecdn.com/hexo-filter-gitcalendar/lib/gitcalendar.css
gitcalendar_js: https://npm.elemecdn.com/hexo-filter-gitcalendar/lib/gitcalendar.js
|
点击前往更多主题配置.
略微改动，将下面的css置于自己的/css/custom.css：
1
2
3
4
5
6
7
8
9
10
| body,
.gitcalendar {
font-family: tzy !important;
color: #121212;
}
[data-theme="dark"] body, .gitcalendar {
background: #1d1e22;
color: #faebd7;
}
|
- hexo 三连,即可发现已经成功部署
2. 侧边栏项目
2.1 那年今日-历史上的今天
效果预览：
NPM 插件安装的部署方法：
1
2
3
| npm i hexo-history-calendar --save
cnpm i hexo-history-calendar --save
|
☕注意：一定要加 --save，不然本地预览的时候可能不会显示！！！
新增网站根目录_config 配置项 (不是主题的)：
1
2
3
4
5
6
7
8
9
10
11
12
13
| history_calendar:
priority: 4
enable: true
enable_page: all
layout:
type: class
name: sticky_layout
index: 0
# 包含挂载容器
temple_html: '<div class="card-widget card-history"><div class="card-content"><div class="item-headline"><i class="fas fa-clock fa-spin"></i><span>那年今日</span></div><div id="history-baidu" style="height: 100px;overflow: hidden"><div class="history_swiper-container" id="history-container" style="width: 100%;height: 100%"><div class="swiper-wrapper" id="history_container_wrapper" style="height:20px"></div></div></div></div>'
|
- 魔改SOL
在 node_modules里的hexo-history-calendar有一个index.js，下载其中大概65和69行的main.css到本地，修改路径如下图：
下面是我的Main.css:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| .history_slide {
text-align:left;
font-size: 14px;
background: transparent;
display: flex;
flex-direction:column;
align-items: flex-start;
}
#history-baidu > .blog-slider__pagination{
display:none
}
.history_slide_time{
color: #eb0a77;
Font-style: italic;
font-weight: lighter;
}
|
- hexo 三连,即可发现已经成功部署
