perf: blowfish theme custom

README.md

@@ -14,7 +14,7 @@
 
 <div align="center">
 
-[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Feallion%2Feallion.com.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Feallion%2Feallion.com?ref=badge_shield) ![GitHub repo size](https://img.shields.io/github/repo-size/eallion/eallion.com) ![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/eallion/eallion.com) ![GitHub commits since tagged version](https://img.shields.io/github/commits-since/eallion/eallion.com/v3.0.6/main) ![GitHub last commit](https://img.shields.io/github/last-commit/eallion/eallion.com) [![Better Uptime Badge](https://betteruptime.com/status-badges/v1/monitor/9pjg.svg)](https://betteruptime.com/?utm_source=status_badge)
+[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Feallion%2Feallion.com.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Feallion%2Feallion.com?ref=badge_shield) ![GitHub repo size](https://img.shields.io/github/repo-size/eallion/eallion.com) ![GitHub tag (latest by date)](https://img.shields.io/github/v/tag/eallion/eallion.com) ![GitHub commits since tagged version](https://img.shields.io/github/commits-since/eallion/eallion.com/v4.0.0/main) ![GitHub last commit](https://img.shields.io/github/last-commit/eallion/eallion.com) [![Better Uptime Badge](https://betteruptime.com/status-badges/v1/monitor/9pjg.svg)](https://betteruptime.com/?utm_source=status_badge)
 </div>
 <div align="center">
 
@@ -70,41 +70,34 @@ origin  https://git.eallion.com/git/eallion/eallion.com.git (push)
 
 - https://github.com/eallion/eallion.com/blob/main/.github/workflows/main.yml
 
-### 🎨 主题 [DoIt](https://github.com/HEIGE-PCloud/DoIt)
+### 🎨 主题 [Blowfish](https://github.com/nunocoracao/blowfish)
 
-> Update：2022.12.12
+> Update：2024.04.10
 
-本博客使用主题为：[DoIt](https://github.com/HEIGE-PCloud/DoIt)
+本博客使用主题为：[Blowfish](https://github.com/nunocoracao/blowfish)
 
 此次更新，主题使用 `git submodule` 的方式引入，不破坏原主题任何文件结构，所有自定义样式不再在 Theme 目录下修改。
 
 ```bash
-git submodule add https://github.com/eallion/hugo-theme-doit.git themes/DoIt
+git submodule add https://github.com/eallion/blowfish.git themes/DoIt
 ```
 
-克隆博客后同时克隆 [主题](https://github.com/eallion/hugo-theme-doit.git) 和 [mastodon-embed-timeline](https://github.com/eallion/mastodon-embed-timeline.git)：
+克隆博客后同时克隆 [主题](https://github.com/eallion/blowfish.git) 和 [mastodon-embed-timeline](https://github.com/eallion/mastodon-embed-timeline.git)：
 
 ```bash
 git submodule update --init --recursive
 
 # npm run recursive
 ```
 
-如果上游主题有更新，更新 [主题](https://github.com/eallion/hugo-theme-doit.git) 和 [mastodon-embed-timeline](https://github.com/eallion/mastodon-embed-timeline.git)：
+如果上游主题有更新，更新 [主题](https://github.com/eallion/blowfish.git) 和 [mastodon-embed-timeline](https://github.com/eallion/mastodon-embed-timeline.git)：
 
 ```diff
 - git submodule update --remote --merge
 + npm run update
 ```
 
-- 首页基于 Google Chrome Whats-new [[m122](https://www.google.com/intl/zh-CN/chrome/whats-new/m122/)] 构建
-
-```bash
-https://www.google.com/intl/zh-CN/chrome/whats-new/m122/
-
-```
-
-- 自定义 CSS 在 [`assets/css/_custom.scss`](<https://github.com/eallion/eallion.com/blob/main/assets/css/_custom.scss>)：
+- 自定义 CSS 在 [`assets/css/_custom.css`](<https://github.com/eallion/eallion.com/blob/main/assets/css/_custom.css>)：
 
 ```bash
 https://github.com/eallion/eallion.com/blob/main/assets/css/_custom.scss
@@ -122,41 +115,52 @@ https://github.com/eallion/eallion.com/blob/main/assets/js/custom.js
 https://github.com/eallion/eallion.com/tree/main/layouts/_default
 ```
 
-- 作者数据在 [`data/authors`](https://github.com/eallion/eallion.com/tree/main/data/authors)：
+- 页面数据在 [`data`](https://github.com/eallion/eallion.com/tree/main/data)：
 
-```bash
-https://github.com/eallion/eallion.com/tree/main/data/authors
-```
-
-- 观影数据在 [`data/neodb`](https://github.com/eallion/eallion.com/tree/main/data/neodb)：
+如书影音数据：
 
 ```bash
-https://github.com/eallion/eallion.com/tree/main/data/neodb
+https://github.com/eallion/eallion.com/tree/main/data/media
 ```
 
 ### 🔊 嘀咕页面
 
-嘀咕页面 [`https://www.eallion.com/toot`](https://www.eallion.com/toot/) 为 Mastodon 个人实例 [`e5n.cc`](https://e5n.cc/@eallion) 的数据展示。  
+嘀咕页面 [`https://www.eallion.com/mastodon`](https://www.eallion.com/mastodon/) 为 Mastodon 个人实例 [`e5n.cc`](https://e5n.cc/@eallion) 的数据展示。  
 利用 [mastodon-embed-timeline](https://gitlab.com/idotj/mastodon-embed-timeline) 这个项目集成到博客页面。  
 现已静态构建到页面上。
 
 通过 Git submodule 添加：
 
 ```bash
-git submodule add https://github.com/eallion/mastodon-embed-timeline.git static/assets/mastodon-embed-timeline
+git submodule add https://github.com/eallion/mastodon-embed-timeline.git assets/lib/mastodon-embed-timeline
 ```
 
 ### ✏️ 写新文章
 
 1. **生成新文章**
 
-通过 Hugo 命令 New 一篇新文章模板：
+通过 Hugo 命令 New 一篇新文章模板：  
+现改为 npm (pnpm) 命令：
 
 ```diff
 - hugo new posts/daily/new_title.md
 + npm run new
+
+# node scripts/post_title_prompt.js && bash scripts/format_filename.sh
 ```
 
+1. **缩略图**
+
+放在文章目录中，命名为 feature*.png，格式建议为 `.png` 和 `.jpg` 。
+
+1. **背景图**
+
+放在文章目录中，命名为 background*.png，格式建议为 `.png` 和 `.jpg` 。
+
+1. **图标 Icon**
+
+Icon 可以从网上下载，放到 `assets/icons` 目录下，格式为 `.svg`，必须添加 `fill="currentColor"` 属性。
+
 1. **编辑文章**
 
 通过 [Typora](https://typora.io/) 或 [VSCode](https://code.visualstudio.com/) 编辑第一步 New 出来的文章。  
@@ -220,12 +224,26 @@ git push
 
 # 查看博客实际效果 👇
 # npm run preview
-```
-
-脚本内容：
 
-```bash
-git submodule update --remote --merge && start http://192.168.0.5:1313 && hugo server -w -D -p 1313 --bind 0.0.0.0 --contentDir example --minify --forceSyncStatic --ignoreCache --noHTTPCache --disableFastRender -e production --enableGitInfo --disableKinds RSS --printUnusedTemplates --templateMetrics --templateMetricsHints
+# git submodule update --remote --merge && \
+# start http://192.168.0.5:1313 && \
+# hugo server \
+#   -w \
+#   -D \
+#   -p 1313 \
+#   --bind 0.0.0.0 \
+#   --contentDir example \
+#   --minify \
+#   --forceSyncStatic \
+#   --ignoreCache \
+#   --noHTTPCache \
+#   --disableFastRender \
+#   -e production \
+#   --enableGitInfo \
+#   --disableKinds RSS \
+#   --printUnusedTemplates \
+#   --templateMetrics \
+#   --templateMetricsHints
 ```
 
 > 运行脚本后会自动打开预览页面：<http://127.0.0.1:1313>
@@ -311,9 +329,7 @@ git submodule update --remote --merge && start http://192.168.0.5:1313 && hugo s
 
 ### 📷 相册
 
-~~相册页面可以用主题内置的 [`{{< figure >}}`](https://hugodoit.pages.dev/zh-cn/theme-documentation-built-in-shortcodes/#figure)、[`{{< image >}}`](<https://hugodoit.pages.dev/zh-cn/theme-documentation-extended-shortcodes/#image>) Shortcodes 生成。~~
-
-现在的相册页面采用 e5n.cc 的 `相册` 标签动态渲染，只是一个示例页面。
+现在的相册页面采用 e5n.cc 的 `#ealbum` 标签动态渲染，只是一个示例页面。
 
 如：
 

assets/css/album.css

@@ -1,3 +1,16 @@
+* {
+    /* Safari */
+    margin: 0;
+    box-sizing: border-box;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+#album {
+    width: 100%;
+}
+
 .album {
     column-count: 3;
     column-gap: 0.5rem;
@@ -7,25 +20,7 @@
     position: relative;
     box-sizing: border-box;
     margin-bottom: 1rem;
-    width: 1024px;
-}
-
-@media(min-width: 640px) {
-    .album {
-        width:640px
-    }
-}
-
-@media(min-width: 853px) {
-    .album {
-        width:853px
-    }
-}
-
-@media(min-width: 1024px) {
-    .album {
-        width:1024px
-    }
+    max-width: 1024px
 }
 
 .album_wrapper {

assets/css/custom.css

@@ -12,3 +12,9 @@
     margin-top: 0;
     margin-bottom: 0;
 }
+
+footer nav ul {
+    display: flex !important;
+    flex-direction: row !important;
+    gap: 0.5rem;
+}

assets/css/goods.css

@@ -15,7 +15,6 @@
     grid-gap: 2rem;
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     margin-bottom: 1rem;
-    width: 1024px;
 }
 
 .goods-container {
@@ -129,24 +128,6 @@
     cursor: not-allowed;
 }
 
-@media(min-width: 640px) {
-    #goods {
-        width:640px
-    }
-}
-
-@media(min-width: 853px) {
-    #goods {
-        width:853px
-    }
-}
-
-@media(min-width: 1024px) {
-    #goods {
-        width:1024px
-    }
-}
-
 @media (max-width: 700px) {
     .goods-title {
         font-size: 0.875rem;

assets/css/links.scss

@@ -24,7 +24,6 @@ $friend-link-hover-color-dark: #ffffff !default;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
-    width: 1024px;
 }
 
 .friend-link {
@@ -126,24 +125,6 @@ $friend-link-hover-color-dark: #ffffff !default;
     border-color: #bbb;
 }
 
-@media(min-width: 640px) {
-    .friends.links {
-        width:640px
-    }
-}
-
-@media(min-width: 853px) {
-    .friends.links {
-        width:853px
-    }
-}
-
-@media(min-width: 1024px) {
-    .friends.links {
-        width:1024px
-    }
-}
-
 @media (max-width: 480px) {
     .friend-link {
         width: 98%;

assets/css/mastodon-timeline-custom.scss

@@ -14,9 +14,17 @@
 //     align-items: center;
 // }
 
+.mt-post-avatar-standard {
+    width: 2.75rem;
+    height: 2.75rem;
+}
+
 .mt-post-avatar-image-big img {
-    margin-top: 0.75rem;
+    margin-top: 0.5rem;
     margin-bottom: 0;
+    width: 2.75rem;
+    height: 2.75rem;
+    border-radius: 50%;
 }
 
 .mt-post-media>img,
@@ -41,6 +49,22 @@
     margin-top: 0;
 }
 
+.dark .mt-post-header-user>a {
+    color: rgba(248, 250, 252, 1) !important;
+}
+
+.dark .mt-post-txt {
+    color: rgba(203, 213, 225, 1);
+}
+
+.dark .mt-post:hover > .mt-post-txt {
+    color: #000;
+}
+
+.dark .mt-post:hover .mt-post-header-user > a {
+    color: #000 !important;
+}
+
 .mt-post-avatar-image-small img {
     margin-top: 0;
     margin-bottom: 0;

assets/css/media.css

@@ -4,7 +4,6 @@
     grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
     margin-top: 1rem;
     min-height: 350px;
-    width: 1024px;
 }
 
 .card {
@@ -522,24 +521,6 @@
     display: none;
 }
 
-@media(min-width: 640px) {
-    .movie {
-        width:640px
-    }
-}
-
-@media(min-width: 853px) {
-    .movie {
-        width:853px
-    }
-}
-
-@media(min-width: 1024px) {
-    .movie {
-        width:1024px
-    }
-}
-
 /* // 页面宽度大于700小于900样式 */
 @media screen and (min-width:700px) and (max-width:900px) {
     .movie {

assets/css/steam.css

@@ -3,7 +3,6 @@
     padding: 0;
     width: 100%;
     background-color: #1b2838;
-    width: 1024px;
 }
 
 .profile {
@@ -626,24 +625,6 @@ footer a {
     color: #c4c4c4;
 }
 
-@media(min-width: 640px) {
-    .steam {
-        width:640px
-    }
-}
-
-@media(min-width: 853px) {
-    .steam {
-        width:853px
-    }
-}
-
-@media(min-width: 1024px) {
-    .steam {
-        width:1024px
-    }
-}
-
 @media screen and (max-width: 700px) {
 
     html.responsive .profile_header_badgeinfo {