自定义首页
默认首页是最近发布页面,可以通过自定义首页来改变默认行为.
第一步,修改根目录的_config.yaml
目的是将官方的近期发布迁移至一个虚拟的路径, 之前的近期文章列表就到了/lately
_config.yml1
2
3
4
| index_generator:
path: 'lately'
per_page: 10
order_by: -date
|
第二步,新建并自定义index.md文件
在blog/source目录下新建index.md文件,注意要将路径permalink设置为/ 以下是参考
blog/source/index.md1
2
3
4
5
6
7
8
9
10
11
12
| ---
menu_id: social
nav_tabs: true
breadcrumb: false
permalink: /
leftbar: related, linklist, recent
rightbar: welcome
comments: false
---
主页
在此自行布局
|
现在打开博客即可进入自定义首页,而不是近期发布栏.
通过增加Front-matter内容丰富首页的显示效果.
需要增加首页按钮的，在nav_tabs中添加首页,路径为/,并修改nav_tabs_blog.ejs.
修改后请备份，防止主题更新覆盖，方法如下:
1
2
3
4
5
6
|
site_tree:
index_blog:
nav_tabs:
'首页': /
|
替换nav_tabs_blog.ejs如下
/themes/stellar/layout/includes/nav_tabs_blog.ejs1
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
91
92
93
94
95
| <%
function layoutDiv() {
var el = '';
el += '<div class="navbar top">';
el += '<div class="navbar-blur">';
el += '<div class="navbar-container">';
el += '<nav class="post">';
const { nav_tabs } = theme.site_tree.index_blog;
// 0️⃣ 特殊处理：将 nav_tabs 中的“首页”提取到最前面
if (nav_tabs && nav_tabs['首页']) {
const homeUrl = nav_tabs['首页'];
// 修正判定逻辑：仅在当前路径与首页链接一致时高亮（不使用 is_home）
const currentUrl = full_url_for(page.path || '/');
const targetHome = full_url_for(homeUrl || '/');
const isHomeActive = currentUrl === targetHome;
if (isHomeActive) {
el += '<a class="active" href="' + url_for(homeUrl) + '">首页</a>';
} else {
el += '<a href="' + url_for(homeUrl) + '">首页</a>';
}
}
// 1️⃣ 最近发布：按路径匹配激活（不使用 is_home）
{
const recentUrl = pretty_url(config.index_generator.path);
const isRecentActive = full_url_for(page.path || '').startsWith(full_url_for(recentUrl));
if (isRecentActive) {
el += '<a class="active" href="' + recentUrl + '">' + __("btn.recent_publish") + '</a>';
} else {
el += '<a href="' + recentUrl + '">' + __("btn.recent_publish") + '</a>';
}
}
// 2️⃣ 分类 (原有逻辑)
if (site.categories && site.categories.length > 0) {
if (page.category) {
el += '<a class="active" href="' + pretty_url(config.category_dir) + '">' + __("btn.category") + __("symbol.colon") + page.category + '</a>';
} else if (page.layout == "categories") {
el += '<a class="active" href="' + pretty_url(config.category_dir) + '">' + __("btn.categories") + '</a>';
} else {
el += '<a href="' + pretty_url(config.category_dir) + '">' + __("btn.categories") + '</a>';
}
}
// 3️⃣ 标签 (原有逻辑)
if (site.tags && site.tags.length > 0) {
if (page.tag) {
el += '<a class="active" href="' + pretty_url(config.tag_dir) + '">' + __("btn.tag") + __("symbol.colon") + page.tag + '</a>';
} else if (page.layout == "tags") {
el += '<a class="active" href="' + pretty_url(config.tag_dir) + '">' + __("btn.tags") + '</a>';
} else {
el += '<a href="' + pretty_url(config.tag_dir) + '">' + __("btn.tags") + '</a>';
}
}
// 4️⃣ 专栏 (原有逻辑)
if (theme.topic?.publish_list?.length > 0) {
if (page.layout == 'index_topic') {
el += '<a class="active" href="' + pretty_url(theme.site_tree.index_topic.base_dir) + '">' + __("btn.topic") + '</a>';
} else {
el += '<a href="' + pretty_url(theme.site_tree.index_topic.base_dir) + '">' + __("btn.topic") + '</a>';
}
}
// 5️⃣ 其余自定义 nav_tabs（排除“首页”）
if (nav_tabs) {
for (let key of Object.keys(nav_tabs)) {
if (key === '首页') continue; // 跳过已经渲染过的首页
if (full_url_for(page.path).startsWith(full_url_for(nav_tabs[key]))){
el += '<a class="active" href="' + url_for(nav_tabs[key]) + '">' + key + '</a>';
} else {
el += '<a href="' + url_for(nav_tabs[key]) + '">' + key + '</a>';
}
}
}
// 6️⃣ 归档 (原有逻辑)
if (site.posts && site.posts.length > 0) {
if (is_archive()) {
el += '<a class="active" href="' + pretty_url(config.archive_dir) + '">' + __("btn.archives") + '</a>';
} else {
el += '<a href="' + pretty_url(config.archive_dir) + '">' + __("btn.archives") + '</a>';
}
}
el += '</nav></div></div></div>';
return el;
}
%>
<%- layoutDiv() %>
|
之后就能看到首页标签了.并且首页标签在导航栏的最前面.
