From 8c9067ba3b94740adab88d127988fb705a1d760e Mon Sep 17 00:00:00 2001 From: tremse <2579178154@qq.com> Date: Fri, 1 Aug 2025 15:32:54 +0800 Subject: [PATCH 1/2] Create toc for article; Create a new friends page for links --- layout/categories.ejs | 144 ++++++++++++++++++------------------- layout/comment.ejs | 132 +++++++++++++++++----------------- layout/friends.ejs | 20 ++++++ layout/layout.ejs | 13 +++- layout/post.ejs | 160 +++++++++++++++++++++-------------------- layout/tags.ejs | 144 ++++++++++++++++++------------------- layout/toc.ejs | 10 +++ source/css/friends.css | 47 ++++++++++++ source/css/toc.css | 57 +++++++++++++++ 9 files changed, 437 insertions(+), 290 deletions(-) create mode 100644 layout/friends.ejs create mode 100644 layout/toc.ejs create mode 100644 source/css/friends.css create mode 100644 source/css/toc.css diff --git a/layout/categories.ejs b/layout/categories.ejs index f8b635de..d82e2b43 100644 --- a/layout/categories.ejs +++ b/layout/categories.ejs @@ -1,72 +1,72 @@ -
- <% let posts = []; %> -
- <% let prev; %> - <% site.categories.forEach((category) => { %> - <% - const colors = is_category(category.name) - ? ["linear-gradient(120deg, #9abbf7 0%, #ffbbf4 100%)"] - : theme.colors.filter((color) => color !== prev); - let id = Math.floor(Math.random() * colors.length); - prev = colors[id]; - %> - - - - - - <%= category.name %> - - - <% if (is_category(category.name)) { %> - <% - posts = category.posts; - posts.data.sort((a, b) => b.date - a.date); - %> - <% } %> - <% }); %> -
- <% posts.forEach((post) => { %> -
-
-
-
<%= date(post.date, "YYYY/M/D") %>
- -

<%= post.title %>

- -
- <% if (post.categories && post.categories.data.length !== 0) { %> - - - - - - <%= post.categories.data[0].name %> - - - <% } %> - <% if (post.tags && post.tags.data.length !== 0) { %> - - - - - <% let prev; %> - <% post.tags.data.forEach((tag) => { %> - - <% - const colors = theme.colors.filter((color) => color !== prev); - let id = Math.floor(Math.random() * colors.length); - prev = colors[id]; - %> - - <%= tag.name %> - - - <% }); %> - - <% } %> -
-
-
- <% }); %> -
+
+ <% let posts = []; %> +
+ <% let prev; %> + <% site.categories.forEach((category) => { %> + <% + const colors = is_category(category.name) + ? ["linear-gradient(120deg, #9abbf7 0%, #ffbbf4 100%)"] + : theme.colors.filter((color) => color !== prev); + let id = Math.floor(Math.random() * colors.length); + prev = colors[id]; + %> + + + + + + <%= category.name %> + + + <% if (is_category(category.name)) { %> + <% + posts = category.posts; + posts.data.sort((a, b) => b.date - a.date); + %> + <% } %> + <% }); %> +
+ <% posts.forEach((post) => { %> +
+
+
+
<%= date(post.date, "YYYY/M/D") %>
+ +

<%= post.title %>

+ +
+ <% if (post.categories && post.categories.data.length !== 0) { %> + + + + + + <%= post.categories.data[0].name %> + + + <% } %> + <% if (post.tags && post.tags.data.length !== 0) { %> + + + + + <% let prev; %> + <% post.tags.data.forEach((tag) => { %> + + <% + const colors = theme.colors.filter((color) => color !== prev); + let id = Math.floor(Math.random() * colors.length); + prev = colors[id]; + %> + + <%= tag.name %> + + + <% }); %> + + <% } %> +
+
+
+ <% }); %> +
diff --git a/layout/comment.ejs b/layout/comment.ejs index e1a73ce3..693b9e56 100644 --- a/layout/comment.ejs +++ b/layout/comment.ejs @@ -1,66 +1,66 @@ -<% if (theme.giscus.enable) { %> - -<% } %> -<% if (theme.gitalk.enable) { %> - -<% } %> -<% if (theme.waline.enable) { %> - -<% } %> -<% if (theme.twikoo.enable) { %> - -<% } %> +<% if (theme.giscus.enable) { %> + +<% } %> +<% if (theme.gitalk.enable) { %> + +<% } %> +<% if (theme.waline.enable) { %> + +<% } %> +<% if (theme.twikoo.enable) { %> + +<% } %> diff --git a/layout/friends.ejs b/layout/friends.ejs new file mode 100644 index 00000000..20a00026 --- /dev/null +++ b/layout/friends.ejs @@ -0,0 +1,20 @@ + + +
+

My Friends

+ + +
\ No newline at end of file diff --git a/layout/layout.ejs b/layout/layout.ejs index d718bb8a..57fc2f55 100644 --- a/layout/layout.ejs +++ b/layout/layout.ejs @@ -1,7 +1,15 @@ <% let type = "post"; if (is_home()) type = "index"; - if (is_post() || is_page()) type = "post"; + if (is_post()) { + type = "post"; + } else if (is_page()) { + if (page.type === "friends") { + type = "friends"; + } else { + type = "post"; // 默认 page 还是走 post 模板 + } + } if (is_category() || page.type === "categories") type = "categories"; if (is_tag() || page.type === "tags") type = "tags"; if (is_archive()) type = "archives"; @@ -11,6 +19,7 @@ if (is_category()) title = "Categories: " + page.category + " | " + config.title; if (is_tag()) title = "Tags: " + page.tag + " | " + config.title; if (is_archive()) title = "Archives | " + config.title; + if (page.type === "friends") title = "Friends | " + config.title; %> @@ -56,4 +65,4 @@ <%- partial("comment") %> <% } %> - + \ No newline at end of file diff --git a/layout/post.ejs b/layout/post.ejs index 017aa5e8..7122e7f1 100644 --- a/layout/post.ejs +++ b/layout/post.ejs @@ -1,85 +1,89 @@ -
-
-

<%= page.title %>

-
-
- - - - - <%= date(page.date, "YYYY/M/D") %> - - <% if (page.categories && page.categories.data.length !== 0) { %> - - +
+
+
+

<%= page.title %>

+
+
+ - + - <%= page.categories.data[0].name %> - - - <% } %> - <% if (page.tags && page.tags.data.length !== 0) { %> - - - + <%= date(page.date, "YYYY/M/D") %> - <% let prev; %> - <% page.tags.data.forEach((tag) => { %> - - <% - const colors = theme.colors.filter((color) => color !== prev); - let id = Math.floor(Math.random() * colors.length); - prev = colors[id]; - %> - - <%= tag.name %> + <% if (page.categories && page.categories.data.length !== 0) { %> + + + + + + <%= page.categories.data[0].name %> - <% }); %> - + <% } %> + <% if (page.tags && page.tags.data.length !== 0) { %> + + + + + <% let prev; %> + <% page.tags.data.forEach((tag) => { %> + + <% + const colors = theme.colors.filter((color) => color !== prev); + let id = Math.floor(Math.random() * colors.length); + prev = colors[id]; + %> + + <%= tag.name %> + + + <% }); %> + + <% } %> +
+ <% if (theme.crypto.enable && typeof page.secret !== "undefined") { %> + <% const CryptoJS = getCryptoJS(); %> + + +
+ + <% } else { %> +
+ <%- page.content %> +
<% } %> + <% if (page.comments) { %> + <% if (theme.gitalk.enable) { %> +
+
+
+ <% } %> + <% if (theme.giscus.enable) { %> +
+
+
+ <% } %> + <% if (theme.waline.enable) { %> +
+
+
+ <% } %> + <% if (theme.twikoo.enable) { %> +
+
+
+ <% } %> + <% } %> +
- <% if (theme.crypto.enable && typeof page.secret !== "undefined") { %> - <% const CryptoJS = getCryptoJS(); %> - - -
- - <% } else { %> -
- <%- page.content %> -
- <% } %> - <% if (page.comments) { %> - <% if (theme.gitalk.enable) { %> -
-
-
- <% } %> - <% if (theme.giscus.enable) { %> -
-
-
- <% } %> - <% if (theme.waline.enable) { %> -
-
-
- <% } %> - <% if (theme.twikoo.enable) { %> -
-
-
- <% } %> - <% } %> -
+ <%- partial('toc') %> +
\ No newline at end of file diff --git a/layout/tags.ejs b/layout/tags.ejs index 91f369f9..76ea0216 100644 --- a/layout/tags.ejs +++ b/layout/tags.ejs @@ -1,72 +1,72 @@ -
- <% let posts = []; %> -
- <% let prev; %> - <% site.tags.forEach((tag) => { %> - <% - const colors = is_tag(tag.name) - ? ["linear-gradient(120deg, #9abbf7 0%, #ffbbf4 100%)"] - : theme.colors.filter((color) => color !== prev); - let id = Math.floor(Math.random() * colors.length); - prev = colors[id]; - %> - - - - - - <%= tag.name %> - - - <% if (is_tag(tag.name)) { %> - <% - posts = tag.posts; - posts.data.sort((a, b) => b.date - a.date); - %> - <% } %> - <% }); %> -
- <% posts.forEach((post) => { %> -
-
-
-
<%= date(post.date, "YYYY/M/D") %>
- -

<%= post.title %>

- -
- <% if (post.categories && post.categories.data.length !== 0) { %> - - - - - - <%= post.categories.data[0].name %> - - - <% } %> - <% if (post.tags && post.tags.data.length !== 0) { %> - - - - - <% let prev; %> - <% post.tags.data.forEach((tag) => { %> - - <% - const colors = theme.colors.filter((color) => color !== prev); - let id = Math.floor(Math.random() * colors.length); - prev = colors[id]; - %> - - <%= tag.name %> - - - <% }); %> - - <% } %> -
-
-
- <% }); %> -
+
+ <% let posts = []; %> +
+ <% let prev; %> + <% site.tags.forEach((tag) => { %> + <% + const colors = is_tag(tag.name) + ? ["linear-gradient(120deg, #9abbf7 0%, #ffbbf4 100%)"] + : theme.colors.filter((color) => color !== prev); + let id = Math.floor(Math.random() * colors.length); + prev = colors[id]; + %> + + + + + + <%= tag.name %> + + + <% if (is_tag(tag.name)) { %> + <% + posts = tag.posts; + posts.data.sort((a, b) => b.date - a.date); + %> + <% } %> + <% }); %> +
+ <% posts.forEach((post) => { %> +
+
+
+
<%= date(post.date, "YYYY/M/D") %>
+ +

<%= post.title %>

+ +
+ <% if (post.categories && post.categories.data.length !== 0) { %> + + + + + + <%= post.categories.data[0].name %> + + + <% } %> + <% if (post.tags && post.tags.data.length !== 0) { %> + + + + + <% let prev; %> + <% post.tags.data.forEach((tag) => { %> + + <% + const colors = theme.colors.filter((color) => color !== prev); + let id = Math.floor(Math.random() * colors.length); + prev = colors[id]; + %> + + <%= tag.name %> + + + <% }); %> + + <% } %> +
+
+
+ <% }); %> +
diff --git a/layout/toc.ejs b/layout/toc.ejs new file mode 100644 index 00000000..32dc345b --- /dev/null +++ b/layout/toc.ejs @@ -0,0 +1,10 @@ +<% if (page.toc == true) { %> +
+ + + + 目录 + <%- toc(page.content, {list_number : false}) %> + +
+<% } %> \ No newline at end of file diff --git a/source/css/friends.css b/source/css/friends.css new file mode 100644 index 00000000..55b63685 --- /dev/null +++ b/source/css/friends.css @@ -0,0 +1,47 @@ +.friends-container { + max-width: 800px; + margin: 0 auto; + padding: 5em; + background-color: #f9f9f9; + border-radius: 10px; +} +.friends-title { + text-align: center; + font-size: 2em; + margin-bottom: 1em; +} +.friends-list { + list-style: none; + padding: 0; +} +.friend-item { + width: 100%; + display: flex; + margin: 1em 0; + padding: 1em; + border: 1px solid #eee; + border-radius: 6px; + transition: 0.3s; +} +.friend-item:hover { + background-color: #f0f0f0; +} +.friend-name { + font-weight: bold; + font-size: 1.2em; +} +.friend-des { + color: #666; +} +.friend-url{ + padding-left: .5rem; + padding-top: .35rem; +} +.avatar{ + width: 60px; + height: 60px; + border-radius: 50%; + object-fit: cover; + flex-shrink: 0; + border: 2px solid #ddd; +} diff --git a/source/css/toc.css b/source/css/toc.css new file mode 100644 index 00000000..ac6e8aa2 --- /dev/null +++ b/source/css/toc.css @@ -0,0 +1,57 @@ +.toc_title{ + color: rgb(121, 121, 121); + font-weight: bolder; + font-size: 30px; + + position: relative; + left: 16px; +} +#ic{ + position: relative; + left: 20px; + font-size: 30px; +} +#toc{ + border-radius: 10px; + background-color: rgba(255, 255, 255, 0.871); + box-shadow: 1px 1px 5px rgb(234, 234, 234); + + position: sticky; + top: 100px; + right: 30px; + + overflow: auto; + + max-height: 600px; + width: 280px; + min-width: none; + + flex-shrink: 100; +} +.toc-link{ + font-size: 16px; + display: block; + min-width: 150px; + margin-top: 0px; + transition: 0.6s; +} +.toc-link:hover{ + color: aqua; + transition: 0.6s; +} +#toc li{ + list-style: none; + margin-top: 2px; + position: relative; + right: 10px; +} +#toc ol{ + list-style: none; + margin-top: 2px; + position: relative; + right: 10px; +} +#container__{ + display: flex; + justify-content: center; +} \ No newline at end of file From 0cca5c7a4372358ea6bb5d2c791fe07344bb3983 Mon Sep 17 00:00:00 2001 From: Tremse <109637578+Tremse@users.noreply.github.com> Date: Fri, 1 Aug 2025 15:48:21 +0800 Subject: [PATCH 2/2] add friends cfg --- _config.yml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/_config.yml b/_config.yml index 3355fe2f..31728101 100644 --- a/_config.yml +++ b/_config.yml @@ -44,6 +44,10 @@ menu: name: tags theme: solid link: /tags + Friends: + name: user-group + theme: solid + link: /friends # Side info card card: