Skip to content

Commit f48d6bd

Browse files
XPoetXPoet
committed
feat: add tools page template
1 parent cc194a4 commit f48d6bd

File tree

13 files changed

+401
-16
lines changed

13 files changed

+401
-16
lines changed

‎languages/en.yml

+2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ links: Links
1515
link: Link
1616
photos: Photos
1717
photo: Photo
18+
tool: Tool
19+
tools: Tools
1820
search: Search...
1921
prev: Prev
2022
next: Next

‎languages/zh-CN.yml

+2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ links: 友链
1515
link: 友链
1616
photos: 相册
1717
photo: 照片
18+
tool: 工具
19+
tools: 工具
1820
search: 搜索...
1921
prev: 上一页
2022
next: 下一页

‎languages/zh-TW.yml

+2
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ links: 友鏈
1515
link: 友鏈
1616
photos: 相簿
1717
photo: 照片
18+
tool: 工具
19+
tools: 工具
1820
search: 搜尋...
1921
prev: 上一頁
2022
next: 下一頁

‎layout/_partial/scripts.ejs

+8-3
Original file line numberDiff line numberDiff line change
@@ -40,20 +40,25 @@
4040
<% } %>
4141
<% } %>
4242
43-
<!-- category-page -->
43+
<!-- categories page -->
4444
<% if (is_current('/categories') || is_current('/category')) { %>
4545
<%- __js('js/page/category-page.js') %>
4646
<% } %>
4747
48-
<!-- links-page -->
48+
<!-- links page -->
4949
<% if (is_current('/links') || is_current('/link')) { %>
5050
<%- __js('js/page/links-page.js') %>
5151
<% } %>
5252
53-
<!-- photos-page -->
53+
<!-- photos page -->
5454
<% if (is_current('/photos') || is_current('/photo')) { %>
5555
<%- __js('js/page/photos-page.js') %>
5656
<% } %>
57+
58+
<!-- tools page -->
59+
<% if (is_current('/tools') || is_current('/tool')) { %>
60+
<%- __js('js/page/tools-page.js') %>
61+
<% } %>
5762
</div>
5863
5964
<!-- mermaid -->

‎layout/_template/page-template.ejs

+5-3
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ const { links: links_data, photos: photos_data, tools: tools_data } = theme?.sou
55
66
let current_page_data = null
77
let current_page_template = null
8+
let is_tools_page = false
89
910
if (page_title === 'links' || page_title === 'link') {
1011
current_page_data = links_data
@@ -19,12 +20,12 @@ if (page_title === 'photos' || page_title === 'photo') {
1920
if (page_title === 'tools' || page_title === 'tool') {
2021
current_page_data = tools_data
2122
current_page_template = 'tools-nav'
23+
is_tools_page = true
2224
}
23-
24-
const max_content = page_title === 'tools' ? 'max-content' : ''
2525
%>
2626
<div class="fade-in-down-animation">
27-
<div class="page-template-container border-box">
27+
<div class="page-template-container border-box <%= is_tools_page ? 'max-content' : '' %>">
28+
<!-- page top -->
2829
<% if (page?.page_cover) { %>
2930
<div class="page-template-top border-box"
3031
style="height: <%= page?.page_cover_height ? page?.page_cover_height + 'px' : '200px' %>"
@@ -35,6 +36,7 @@ const max_content = page_title === 'tools' ? 'max-content' : ''
3536
</div>
3637
<% } %>
3738
39+
<!-- page bottom -->
3840
<div class="page-template-bottom border-box">
3941
<!-- use page template -->
4042
<% if (use_page_template && current_page_data && current_page_template) { %>

‎layout/_template/tools-nav.ejs

+48-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,50 @@
11
<div class="tools-nav-box border-box">
2-
Tools Nav
2+
<ul class="tools-nav-list">
3+
<% for (let i = 0; i < theme.source_data.tools.length; i++) { %>
4+
<% const tool = theme.source_data.tools[i] %>
5+
<% const anchor_id = tool.category + i %>
6+
<% if (tool?.category) { %>
7+
<li class="tool-nav-category text-ellipsis border-box <%= i === 0 ? 'active' : '' %>"
8+
data-anchor="<%= anchor_id %>"
9+
>
10+
<%= tool.category %>
11+
</li>
12+
<% } %>
13+
<% } %>
14+
</ul>
15+
<ul class="tool-item-list border-box">
16+
<% for (let i = 0; i < theme.source_data.tools.length; i++) { %>
17+
<% const tool = theme.source_data.tools[i] %>
18+
<% const anchor_id = tool.category + i %>
19+
<% if (tool?.category) { %>
20+
<li class="tool-category-name text-ellipsis border-box" id="<%= anchor_id %>">
21+
<span class="category-name text-ellipsis"><%= tool.category %></span>
22+
<i class="fa-solid fa-chevron-down fold"></i>
23+
</li>
24+
<% } else { %>
25+
<li class="tool-item border-box">
26+
<a class="a-wrap border-box" href="<%= tool?.link %>">
27+
<div class="top border-box">
28+
<div class="logo border-box flex-center">
29+
<i class="icon fas fa-tools text-color-4"></i>
30+
<img src="<%- url_for(tool?.image) %>"
31+
onerror="this.style.display = 'none'"
32+
>
33+
</div>
34+
<div class="name flex-start border-box text-ellipsis">
35+
<div class="border-box text-color-3 text-ellipsis">
36+
<%= tool?.name %>
37+
</div>
38+
</div>
39+
</div>
40+
<div class="bottom flex-start border-box text-ellipsis">
41+
<div class="border-box text-color-4 text-ellipsis">
42+
<%= tool?.description %>
43+
</div>
44+
</div>
45+
</a>
46+
</li>
47+
<% } %>
48+
<% } %>
49+
</ul>
350
</div>

‎source/css/common/basic.styl

+44
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,26 @@ img {
187187
}
188188

189189

190+
// ======================================================================
191+
// flex start
192+
// ======================================================================
193+
.flex-start {
194+
display flex
195+
align-items center
196+
justify-content flex-start
197+
}
198+
199+
200+
// ======================================================================
201+
// flex end
202+
// ======================================================================
203+
.flex-end {
204+
display flex
205+
align-items center
206+
justify-content flex-end
207+
}
208+
209+
190210
// ======================================================================
191211
// border box
192212
// ======================================================================
@@ -206,6 +226,30 @@ img {
206226
}
207227

208228

229+
// ======================================================================
230+
// text color 2
231+
// ======================================================================
232+
.text-color-2 {
233+
color var(--text-color-2)
234+
}
235+
236+
237+
// ======================================================================
238+
// text color 3
239+
// ======================================================================
240+
.text-color-3 {
241+
color var(--text-color-3)
242+
}
243+
244+
245+
// ======================================================================
246+
// text color 4
247+
// ======================================================================
248+
.text-color-4 {
249+
color var(--text-color-4)
250+
}
251+
252+
209253
// ======================================================================
210254
// clear float
211255
// ======================================================================

0 commit comments

Comments
 (0)