Home页
文件路径：/themes/redefine/source/css/layout/home-content.styl
在+redefine-mobile()下添加内容padding-top 20px
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| .home-content-container
if (hexo-config('home.sidebar.enable') && hexo-config('home.sidebar.position') == 'right')
margin-left $spacing-unit
+redefine-tablet()
margin-left 0
+redefine-mobile()
margin-left 0
padding-top 20px
if (hexo-config('home.sidebar.enable') && hexo-config('home.sidebar.position') == 'left')
margin-right $spacing-unit
+redefine-tablet()
margin-right 0
+redefine-mobile()
margin-right 0
padding-top 20px
|
Categories页和tag页
文件路径：
/themes/redefine/layout/category-content.ejs
/themes/redefine/layout/tag-content.ejs
在第一行添加内容shadow-none hover:shadow-none sm:shadow-redefine sm:hover:shadow-redefine-hover
1
2
| <div class="category-container shadow-none hover:shadow-none sm:shadow-redefine sm:hover:shadow-redefine-hover">
<div class="tag-container shadow-none hover:shadow-none sm:shadow-redefine sm:hover:shadow-redefine-hover">
|
文件路径：/themes/redefine/layout/_partials/home-sidebar.ejs
修改主题配置
1
2
3
4
5
6
7
| home:
sidebar:
links:
Wechat:
icon: fa-brands fa-weixin
qr: /assets/weixin.webp
|
将原来显示链接的地方加入判断条件，若配置文件中含二维码即按悬浮二维码的形式显示
修改前
1
2
3
4
5
6
| <a class="links" href="<%= url_for(theme.home.sidebar.links[i].path) %>">
<% if (theme.home.sidebar.links[i].icon) { %>
<i class="<%- theme.home.sidebar.links[i].icon %> icon-space"></i>
<% } %>
<span class="link-name"><%= __(i) %></span>
</a>
|
修改后
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <% if (theme.home.sidebar.links[i].qr) { %>
<span class="social-contact-item links">
<i class="<%- theme.home.sidebar.links[i].icon %> icon-space"></i>
<span class="link-name"><%= __(i) %></span>
<div class="social-qr-container">
<img class="social-contacts-qr" src="<%- url_for(theme.home.sidebar.links[i].qr) %>"/>
</div>
</span>
<% } else {%>
<a class="links" href="<%= url_for(theme.home.sidebar.links[i].path) %>">
<% if (theme.home.sidebar.links[i].icon) { %>
<i class="<%- theme.home.sidebar.links[i].icon %> icon-space"></i>
<% } %>
<span class="link-name"><%= __(i) %></span>
</a>
<% } %>
|
修改stylus
文件路径：/themes/redefine/source/css/layout/home-sidebar.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| .sidebar-links
.social-contact-item
position: relative
.social-qr-container
position: absolute
left: 50%
bottom 0
transform: translate(-50%,100%)
display: none
width 100px
.social-contact-item:hover
color var(--primary-color)
.social-qr-container
display: block
|
hexo-douban 插件适配
hexo-douban 一个在 Hexo 页面中嵌入豆瓣个人主页的小插件
修改stylus样式文件
文件路径：/themes/redefine/source/css/layout/_partials/page-template.styl
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
| .page-template-container
.page-template-content
.idouban-tabs
.idouban-tab
color var(--second-text-color)
cursor pointer
font-family $default-font-family
margin 0px 10px 5px 10px
padding 8px
&:hover
color var(--primary-color)
background-color var(--second-background-color)
.idouban-tab-active
color var(--primary-color) !important
border-bottom: 2px solid
background-color transparent
.idouban-item
margin-top 20px
border-radius $redefine-border-radius-small
border-bottom 0px !important
box-shadow: var(--redefine-box-shadow-flat)
&:hover
box-shadow var(--redefine-box-shadow)
transform scale(1.01)
transition all 0.3s ease
.idouban-picture
position:absolute
left: 10px
top: -5px
.idouban-info
position: absolute
padding-top:10px
top:5px
.idouban-info a
text-decoration:none
display: -webkit-box
-webkit-box-orient: vertical
-webkit-line-clamp: 1
overflow: hidden
|
bug修复
如果打开single_page/swup ，在页内加载的时候页脚会留一块多余空间，刷新后消失，强迫症的我肯定 不能忍！！！
观察之后发现，每次加载都会给main-content-footer加一个style=height:634px的类，这是造成空白的原因。结合swup的特性应该是某个script没有加载或刷新，判断该页没有内容，一下午没找出问题在哪，于是只能曲线救国。
修改hexo系统配置
1
2
3
| douban:
swup: true
customize_layout: douban
|
新建模版文件
文件路径：/themes/redefine/layout/douban.ejs
将下述内容写入douban.ejs中，给main-content添加一个min-height: 95vh的样式，这样加载的时候main-content-footer就能识别到页面有内容，不会再添加height类
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
| <%- partial('_widgets/progress-bar') %>
<main class="page-container" id="swup">
<div class="main-content-container flex flex-col justify-between min-h-dvh">
<div class="main-content-header">
<%- partial('_partials/navbar') %>
</div>
<div class="main-content-body">
<div class="main-content" style="min-height: 95vh">
<%- partial('_partials/page-template') %>
</div>
</div>
<div class="main-content-footer">
<%- partial('_partials/footer') %>
</div>
</div>
<div class="right-side-tools-container">
<%- partial('_widgets/side-tools') %>
</div>
<%- partial('_widgets/image-viewer') %>
<% if (theme.navbar.search.enable) { %>
<%- partial('_widgets/local-search') %>
<% } %>
</main>
<% if (theme.global.single_page !== false) { %>
<%- partial('_plugins/swup') %>
<% } %>
|
我的设备模版
idea最初来自张洪Heo ，第一次看到他的页面觉得非常酷炫，于是打算移植过来
在他的博客中也有教程: Hexo的Butterfly魔改教程：我的装备，分享你在用的设备
但是当时没有找到这个教程，所以参考了Hexo-Theme-Acrylic-Next 的代码
修改page-template
文件路径：/themes/redefine/layout/_partials/page-template.ejs
修改该文件，正确引用equipment.ejs
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
| <div class="page-template-container">
<%
const friendsTitle = ['friends', 'friend', '友情链接', '友情鏈接', '友情鏈結', '友情鏈結', '朋友', '朋友們', '朋友们', 'links','link', 'Link', 'Links'];
const friendsTypes = ['links', 'link'];
const isLoadFriendsLink = (
theme.links
&& (friendsTypes.includes(page.type) || friendsTitle.includes(page.title))
);
const shuoshuoTitle = ['essays', 'essay', 'shuoshuo', '说说', '即刻短文', 'Shuoshuo'];
const shuoshuoTypes = ['essays', 'essay', 'shuoshuo'];
const isLoadShuoshuo = (
(theme.essays || theme.shuoshuo)
&& (shuoshuoTypes.includes(page.type) || shuoshuoTitle.includes(page.title))
);
const masonryTitles = ['masonry', 'gallery', 'Masonry', 'Gallery', '照片墙', '照片牆', '相册', '相冊', '瀑布流', '瀑布流', 'photos', 'Photos', 'photo', 'Photo'];
const masonryTypes = ['masonry', 'gallery', '瀑布流', '相册', 'photos', 'photo'];
const isLoadMasonry = (
(theme.masonry || theme.gallery || theme.photos)
&& (masonryTypes.includes(page.type) || masonryTitles.includes(page.title))
);
const equipmentTitles = ['equipment', 'Equipment', '我的装备','我的设备'];
const equipmentTypes = ['equipment'];
const isLoadequipment = (
(theme.equipment)
&& (equipmentTypes.includes(page.type) || equipmentTitles.includes(page.title))
);
const aboutTitles = ['about', 'about me', '关于','关于我'];
const aboutTypes = ['about'];
const isLoadabout = (
(theme.about)
&& (aboutTypes.includes(page.type) || aboutTitles.includes(page.title))
)
%>
<% if (isLoadFriendsLink) { %>
<%- partial('_widgets/friends-link') %>
<% } else if (isLoadShuoshuo) { %>
<%- partial('_widgets/essays') %>
<% } else if (isLoadMasonry) { %>
<%- partial('_widgets/masonry') %>
<% } else if (isLoadequipment) { %>
<%- partial('_widgets/equipment') %>
<% } else if (isLoadabout) { %>
<%- partial('_widgets/about') %>
<% } %>
<div class="page-template-content markdown-body">
<% if (isLoadFriendsLink || page.content || isLoadShuoshuo || isLoadMasonry || isLoadequipment || isLoadabout) { %>
<%- page.content %>
<% } else { %>
<h1><%- page.title %></h1>
<% } %>
</div>
<div class="page-template-comments">
<% if (page.hasOwnProperty('comment') && (page.comment === true || page.comments === true) ) { %>
<%- partial('_partials/comments/comment') %>
<% } %>
</div>
</div>
|
新建equipment
文件路径：/themes/redefine/layout/_widgets/equipment.ejs
新建equipment.ejs，写入下列内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <h1 class="page-title-header"><%= page.title %></h1>
<div class="equipment">
<% if (site.data.equipment) { %>
<% for (let i in site.data.equipment) { %>
<div class="equipment-item">
<div class="equipment-item-cover">
<img class="equipment-item-cover-image" src="<%= site.data.equipment[i].image %>" alt="<%= site.data.equipment[i].name %>">
</div>
<div class="equipment-item-description">
<h2 class="equipment-item-name"><%= i %></h2>
<div class="equipment-item-specification"><%= site.data.equipment[i].specification %></div>
<div class="equipment-item-info"><%= site.data.equipment[i].info %></div>
<% if (site.data.equipment[i].link) { %>
<a class="equipment-item-link" href="<%= site.data.equipment[i].link %>" target="_blank">详情</a>
<% } %>
</div>
</div>
<% } %>
<% } %>
</div>
|
调整 stylus 样式
文件路径：/themes/redefine/source/css/layout/_partials/page-template.styl
修改stylus文件，调整样式
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
83
84
85
86
87
88
89
90
| .page-template-container
.equipment
display: flex
flex-direction: row
flex-wrap: wrap
margin: 0 -16px
h2.equipment-item-title
line-height:1
.equipment-item
width: calc(33.33% - 24px)
border-radius: 12px
border: 4px
overflow: hidden
margin: 16px 12px
min-height: 350px
position: relative
box-shadow: var(--redefine-box-shadow-flat)
&:hover
box-shadow var(--redefine-box-shadow)
transform scale(1.02)
transition all 0.3s ease
+redefine-tablet()
width: calc(50% - 24px)
+redefine-mobile()
width: calc(100% - 24px)
.equipment-item-cover
width: 100%
height: 200px
display: flex
justify-content: center
background: var(--third-background-color)
img.equipment-item-image
object-fit: cover;
height: 100%;
.equipment-item-description
padding: 20px
.equipment-item-name
font-size: 18px
font-weight: bold
line-height: 1
margin-bottom: 8px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
width: fit-content
.equipment-item-specification
font-size: 12px
color: var(--third-text-color)
line-height: 1
margin-bottom: 12px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
.equipment-item-info
line-height: 20px
color: var(--third-text-color)
height: 60px
display: -webkit-box
overflow: hidden
-webkit-line-clamp: 3
-webkit-box-orient: vertical
font-size: 14px
a.equipment-item-link
font-size: 12px
padding: 4px 8px
border-radius: 8px
cursor: pointer
color: var(--third-text-color)
background: var(--third-background-color)
a.equipment-item-link:hover
color: white
background: var(--primary-color)
|
修改配置
创建我的设备页面
修改主题config文件，打开equipment功能，导航栏添加页面
1
2
3
4
5
6
7
| equipment: true
navbar:
links:
装备:
icon: fa-solid fa-robot
path: /equipment/
|
创建装备存放文件
在你的 Hexo 项目的 source 文件夹里增加 _data 文件夹（如果已有则跳过）
在 _data 文件夹下新增 equipment.yml 文件
在 masonry.yml 文件里面按照如下格式配置相册信息：
1
2
3
4
5
6
7
8
9
| MacBook air:
image: /assets/equipment/MacBook air.png
specification: M1芯片(2020) 8+256G
info: 使用4年仍然健步如飞，丝毫没有升级欲望
iPad mini6:
image: /assets/equipment/iPad mini6.png
specification: A15芯片 4+512G
info: 上班搭子，正好放到白大褂口袋里
|
修改标题（可选）
装备页默认根据 title: equipment 来匹配。
如果需要自定义页面的标题，需要在 Front Matter 里面添加 type: equipment，即可自定义页面标题。
瀑布流相册懒加载实现
iPhone状态栏沉浸式
使状态栏和浏览器底部的颜色和网站背景一致，从而实现沉浸式
文件路径：/themes/redefine/layout/_partials/head.ejs
1
| <meta name="theme-color" content="<%= theme.colors.primary %>">
|
修改为
1
| <meta name="theme-color" content="">
|
文件路径：/themes/source/js/tools/lightDarkSwitch.js
修改enableLightMode()函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| enableLightMode() {
document.body.classList.remove("dark-mode");
document.documentElement.classList.remove("dark");
document.body.classList.add("light-mode");
document.documentElement.classList.add("light");
this.iconDom.className = "fa-regular fa-moon";
main.styleStatus.isDark = false;
main.setStyleStatus();
this.mermaidInit(this.mermaidLightTheme);
this.setGiscusTheme();
const metaThemeColor = document.querySelector('meta[name="theme-color"]');
metaThemeColor.setAttribute("content", "#fff");
},
|
修改enableDarkMode()函数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| enableDarkMode() {
document.body.classList.remove("light-mode");
document.documentElement.classList.remove("light");
document.body.classList.add("dark-mode");
document.documentElement.classList.add("dark");
this.iconDom.className = "fa-regular fa-brightness";
main.styleStatus.isDark = true;
main.setStyleStatus();
this.mermaidInit(this.mermaidDarkTheme);
this.setGiscusTheme();
const metaThemeColor = document.querySelector('meta[name="theme-color"]');
metaThemeColor.setAttribute("content", "#202124");
},
|
