refactor: refactor index

- add introduction
- modify recent posts pieces
- modify background color

8 files changed, 126 insertions, 158 deletions

diff --git a/.hugo_build.lock b/.hugo_build.lock
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/.hugo_build.lock
diff --git a/content/_index.md b/content/_index.md
index 3789b88..3396422 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -2,4 +2,10 @@
 title: "映屿"
 ---
 
+---
+
+Hi, 我是 Verdant。我是一名学生、GNU/Linux 和编程爱好者。这里是我的博客。如果你喜欢我的文字，可以通过 [RSS](/rss) 来订阅。
+
+---
+
 {{< recent-posts >}}
diff --git a/content/about.md b/content/about.md
index 96eeab6..5f4ce06 100644
--- a/content/about.md
+++ b/content/about.md
@@ -4,6 +4,13 @@ date: '2026-01-25T21:24:30+08:00'
 comments: false 
 showMeta: false
 ---
+## TL;DR
+
+- Nickname: Verdant
+- Email: i@glowisle.me
+- [Fediverse](https://akk.glowisle.me/verdant)
+- [Github](https://github.com/yingyu5658)
+
 ## 关于我
 
 我出生于 2011 年，在天津长大。你可以用 **Verdant** 或 **五葉地錦**（五叶地锦）来称呼我。
@@ -18,6 +25,31 @@ showMeta: false
 
 ## 关于这里
 
+### 有关名字
+
+你可能会问，既然这是我的个人博客，为什么这个网站叫做「映屿」，而不是「Verdant 的博客」，这和我以前使用过的 ID 有关。
+
+在以前很长一段时间里，我的 ID 一直是 "yingyu5658"，没有什么特别的意思，只是因为小时候玩 Minecraft，ID 要用英文，就随便拼了个 "yingyu"（英语）。而 "5658" 则是因为有重复 ID，系统自动添加的后缀。 在之后，我的各种账号都沿用 "yingyu5658" 作为 ID。有一段时间，这个网站的域名也包括"yingyu5658"。
+
+之后我感觉这个昵称实在是太随便了，不仅丑，而且由于拼音，经常会被人叫成「英语五六五八」（虽然就是这个意思）。就想给这个无意义的名字加上一点意义，就起了「映屿」这个名称，作为网站的标题，也很符合一句话：
+
+> 互联网是一片海洋，
+>
+> 网站犹如一座座孤岛漂浮在其上，
+>
+> 唯有超链接将它们联系起来。
+>
+> —— [皓子的小站](https://howiehz.top/)
+
+在域名方面，我选择意译「映屿」，最终用了 "glowisle.me" 这个域名，作为我互联网身份的一部分，大部分要用到域名的地方，我都会使用这个域名。
+
+我的网名，当然曾经是 "yingyu5658"，现在有些地方也是，如 Github, Minecraft 等地方，所以如果你看到了这个 ID，那么大概就是我的黑历史。
+
+现在的中文昵称：「五葉地錦」，来源于我学校的围墙上的爬山虎，「五叶地锦」是那种植物的学名，我很喜欢那片爬山虎，夏天一片翠绿，一到秋天，叶子就会变红，整面墙像是被火引燃了，就用了这个略学术化但生僻到无感的名字。之所以用繁体字，也是因为一种生僻感和庄重感。
+
+而 "Verdant", 意为覆盖绿色植被的、青翠的、郁郁葱葱的、*缺乏经验的*，算是意译了中文昵称。这个词源于法语 "virdeant"，意为「变绿」，英语和法语都是很有意思的语言。
+
+
 ### 为什么要搭建这个网站
 
 我在几年前就有搭建自己网站的想法，觉得有自己的网站很酷（确实是这样！），就手动编写了一些静态 HTML 页面，放在 Github Page 上，后来开始搭建博客，但并不知道该写点什么。上网冲浪多了以后，我发现我不喜欢被算法、流量、审查裹挟。在那里写东西，总感觉是在给平台做嫁妆，而且讨论往往只有结论没有过程，甚至只有情绪。我会在这里写点想写的东西，算是作为社交属性不那么强烈的社交媒体，来释放自己的表达欲吧。如果你问我这个网站到底有什么，我也说不太清楚，写过书评，也写过散文随笔，还写过一些技术类文章。有矫情的，也有幼稚的，总之是大量的黑历史。
@@ -26,7 +58,7 @@ showMeta: false
 
 我使用 Emacs 在本地以 Markdown 格式写作，静态页面由 Hugo 构建，完成后推送到 Github Pages 仓库和[代码仓库](https://github.com/yingyu5658/glowisle)，图片资源存储在 Cloudflare R2 OSS。
 
-### 为什么关闭了评论区？
+### 为什么关闭了评论区
 
 本站从 2026 年 2 月 25 日 起关闭了评论区，不是因为垃圾评论，也不是因为恶意评论，只是因为我不擅长回应评论，虽然留下评论的人不多，但每次遇到评论，即使是一行简单的夸奖，我都会坐在屏幕前抓耳挠腮半小时来编辑回复。
 
diff --git a/content/uses.md b/content/uses.md
index cca1d52..b78e54d 100644
--- a/content/uses.md
+++ b/content/uses.md
@@ -6,28 +6,45 @@ showMeta: false
 ---
 详见 [uses](https://uses.tech/)，A list of /uses pages detailing developer setups, gear, software and configs. 
 
+![全家福](https://images.glowisle.me/IMG_20260322_015438.jpg)
+
 ## 硬件
 
-- NVIDIA GeForce RTX 2060
-- Intel i5-10600KF
-- 杂牌键盘和鼠标
+### 台式机
+
+- CPU: Intel(R) Core(TM) i5-10600KF (12) @ 4.80 GHz
+- GPU: NVIDIA GeForce RTX2060
+- Memeory: 16GB
+- Disk: 1TB + 120GB
+- OS: Debian GNU/Linux 12 & Windows 11
+
+我大部分时间都在使用 Debian ，在需要处理学校的任务时会切换到 Windows 11。稳定对我来说是最重要的，我不希望把大部分时间都花在维护系统配置、修复错误上，因此在这台设备上，我选择 Debian。
+
+这台电脑原本是我爸的，在我长期~~占~~借用后，已经完全属于我，我爸也因此有理由购买一台新的笔记本电脑（因为他想打游戏所以没有考虑 ThinkPad，好可惜！）。
+
+### ThinkPad X220
+
+- CPU: Intel i5 2450M
+- Memory: 8GB
+- Disk: 120GB
+- OS: Arch Linux
 
-对于不怎么玩大型游戏、编译大型程序的人来说这已经非常够用了。
+这是我最喜欢的 ThinkPad 型号，最后一代经典七行键盘，充满工业感的外观，低廉的价格，极高的性价比和可玩性。通过自己动手修改配置、改装硬件，把钱花在刀刃上，不跟随邪恶的厂商花大价钱购买最新硬件，经济且实用。ThinkPad 的设计理念非常天然适配「垃圾佬」精神。
+
+外出时需要用到电脑的话，我会携带这台 ThinkPad。由于这台设备非常老旧，需要更精简的系统配置来保证性能，因此我选择了最小化安装 Arch，只安装必要的软件包。如果不需要读写中文内容，或预览图片与 PDF，我一般不会启动图形界面。保持最小化、简单、可控。
+
+### 手机和平板
+
+我使用不到一千元的 iQOO Neo7 SE，在手机上，我需要做的事情几乎只有收发消息、接打电话、导航。所以购买这台设备应该是亏的，如果全中国能不再用微信，也许可以再降几百元，买一台七八年前的二手设备。
+
+大概在疫情的时候，需要上网课，我就顺理成章地拥有了一台华为 Matepad 11，目前我使用它娱乐，如看视频、听歌、聊天。
 
 ## 软件
 
-- 操作系统：Debian GNU/Linux 以及 Windows 11  —— 我有两块硬盘，装了双系统，用来处理一些学校的麻烦事
-- WM: [i3](https://i3wm.org/)
-- 启动器：[rofi](https://github.com/davatorium/rofi)
-- [GNU Emacs](https://www.gnu.org/software/emacs/)[^1] —— 写代码、写博客、邮件管理、数字笔记
-- 终端模拟器：[kitty](https://github.com/kovidgoyal/kitty)
-- SHELL: [ZSH](https://www.zsh.org/)
-- 浏览器：[Firefox](https://www.firefox.com/en-US/)
-- 输入法：[Fcitx5](https://github.com/fcitx/fcitx5) + 小鹤双拼[^2]
-- 截图工具：[Flameshot](https://flameshot.org/)
-- 音乐流媒体：Spotify
-- IM：微信，因为大家都在用这个邪恶的软件！
-
-
-[^1]: 之所以强调是GNU Emacs，是因为Emacs有很多变体，如Torvalds Linus使用的Uemacs，实际上是另一个Emacs变体MicroEmacs分支而来……GNU Emacs固然臃肿、不符合UNIX哲学，但没办法，手和大脑已经是它的形状了。
-[^2]: 值得一提的是，双拼似乎有点冷门，但它真的很高效。~~并且可以让别人拿到你的键盘根本不会打字~~
+- 文本编辑器 / 邮件客户端 / RSS 阅读器 / 计算器: Emacs[^1]
+- 浏览器: Firefox & Qutebrowser
+- 输入法:Fcitx5 + 小鹤双拼
+- 终端: Xterm
+- 音乐流媒体: Spotify
+
+[^1]: 我一般在终端中使用 Emacs，足够快速轻量，并且能避免一些有关显示协议的奇奇怪怪的问题。
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 21454e4..aad83c9 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -15,10 +15,6 @@
     ` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} {{ end -}}
     {{- partial "style.html" . -}}
 
-    <!-- {{- partial "style-min.html" . -}} -->
-
-
-
     <!-- A partial to be overwritten by the user.
   Simply place a custom_head.html into
   your local /layouts/partials-directory -->
diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html
index 96bf26b..c9ace2f 100644
--- a/layouts/partials/nav.html
+++ b/layouts/partials/nav.html
@@ -1,6 +1,7 @@
+<a href="{{ "" | relURL }}">首页</a>
 {{ range .Site.Menus.main }}
-<a href="{{ .URL }}">{{ .Name }}</a>
+<a href="{{ .URL }}">{{ .Name}}</a>
 {{ end }}
 {{ with .Site.GetPage "/blog" }}
-<a href="{{ "posts/" | relURL }}">Blog</a>
+<a href="{{ "blog/" | relURL }}">Blog</a>
 {{ end }}
diff --git a/layouts/partials/style.html b/layouts/partials/style.html
index ec4dae2..0c11755 100644
--- a/layouts/partials/style.html
+++ b/layouts/partials/style.html
@@ -4,10 +4,10 @@
     --font-secondary: monospace;
     --font-size-primary: 1rem;
     --font-size-secondary: .85rem;
-    --body-bg-color: #ffffff;
+    --body-bg-color: #fbfbf6;
     --bold-text-color: #222;
     --body-text-color: #444;
-    --link-color: #0066cc;
+    --link-color: #0355a6;
     --link-visited-color: #551a8b;
     --table-border-color: #f2f2f2;
     --table-th-bg-color: #f2f2f2;
@@ -68,7 +68,7 @@ h1, h2 {
     margin-top: 1.5em;
 }
 
-.post-meta-item a, .rss-icon a, .post-title a, header a, a.title h1, p {
+.post-meta-item a, .rss-icon a, .post-title a, a.title h1, p {
     color: var(--body-text-color)
 }
 
@@ -140,7 +140,6 @@ time {
 
 header {
     margin-top: 30px;
-margin-bottom: 2rem;
 }
 
 .title {
@@ -161,18 +160,10 @@ a.title h1 {
     font-weight: 400;
 }
 
-nav {
-    text-align: left;
-    margin-bottom: 20px;
-}
 
-nav a {
-    margin-right: 8px;
-    text-decoration: none !important;
-}
 
-nav a:hover {
-    text-decoration: underline 0.5px !important;
+nav a {
+  margin-right: 8px;
 }
 
 footer {
@@ -811,7 +802,6 @@ nav {
 
 header {
     margin-top: 30px;
-    margin-bottom: 2rem;
     display: block;
 }
 
diff --git a/layouts/shortcodes/recent-posts.html b/layouts/shortcodes/recent-posts.html
index a666a4c..55f7cd4 100644
--- a/layouts/shortcodes/recent-posts.html
+++ b/layouts/shortcodes/recent-posts.html
@@ -1,136 +1,62 @@
-{{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }} {{
-$recent := first 6 $pages.ByDate.Reverse }}
+{{ $pages := where site.RegularPages "Type" "in" site.Params.mainSections }}
+{{ $recent := first 12 $pages.ByDate.Reverse }}
 
 <style>
-  .item-link {
-      word-wrap: break-word;
-      white-space: normal;
-  }
   .recent-list {
-      margin: 0;
-  }
-  .post-meta {
-      margin-bottom: 5px;
+    list-style: none;
+    margin: 0;
+    padding: 0;
   }
-  .recent-item {
-      position: relative;
-      margin-bottom: 8px;
-      flex-shrink: 0;
+  .recent-list li {
+    margin-bottom: 0.5em;
+    line-height: 1.4;
   }
-  .split {
-      margin: 0;
-      padding: 0;
-      display: inline;
+  .recent-date {
+    font-family: monospace;
+    margin-right: 1.5em;
+    white-space: nowrap;
   }
-  .recent-posts-item {
-      margin-top: 0;
-      margin-bottom: 35px;
-
+  .recent-title {
+    word-wrap: break-word;
   }
-  .recent-post-title {
-      margin-top: 2px;
-      margin-bottom: -10px;
-
+  .recent-empty {
+    text-align: center;
+    font-style: italic;
   }
   @media (max-width: 720px) {
-      .post-date {
-	  min-width: auto;
-	  font-size: 1.05em;
-      }
-      .item-link {
-	  white-space: normal; /* 允许换行 */
-	  word-wrap: break-word; /* 强制长单词/链接换行 */
-	  overflow: visible; /* 取消隐藏 */
-	  text-overflow: clip; /* 取消省略号 */
-      }
+    .recent-list li {
+      display: flex;
+      flex-wrap: wrap;
+    }
+    .recent-date {
+      width: auto;
+      margin-right: 0.5em;
+    }
   }
-  .category-link {
-      font-size: 0.9em;
+
+  .recent-posts {
+      margin-top: .8rem;
   }
-  .recent-empty {
-      text-align: center;
-      font-style: italic;
+
+  .recent-posts h2 {
+      margin-top: 1rem;
+      margin-bottom: 1rem;
+
   }
 </style>
 
 <div class="recent-posts">
-
+  <h2>最近更新</h2>
   {{ if $recent }}
-  {{ range $index, $page := $recent }}
-  <div class="recent-posts-item">
-    <h3 class="recent-post-title">
-      <a href="{{ .RelPermalink }}" class="item-link">{{ .Title }}</a>
-    </h3>
-
-{{ if ne (.Params.showMeta | default true) false }}
-<div class="post-meta">
-
-    <div class="post-meta-item post-date">
-        <time class="dt-published" datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">
-            {{ .Date.Format "January 02, 2006" }}
-        </time>
-    </div>
-
-    <div class="post-meta-item post-category">
-
-        {{ range .Params.categories }}
-        {{ $url := printf "/categories/%s/" (. | urlize) }}
-•
-        <a href="{{ $url }}" class="category-link">{{ . }}</a>
-        {{ end }}
-    </div>
-</div>
-{{ end }}
-
-
-
-
-
-
-
-    <!-- <div class="post-meta"> -->
-    <!--   <span class="post-date"> -->
-    <!--     <time datetime='{{ .Date.Format "Jan 02, 2006" }}'>{{- .Date.Format (default "Jan 02, 2006" .Site.Params.dateFormat) -}}•</time> -->
-
-
-    <!--   </span> -->
-    <!--   {{ with .Params.categories }} -->
-    <!--   {{ range . }} -->
-    <!--   {{ $category := . }} -->
-    <!--   {{ with $.Site.GetPage (printf "categories/%s" $category) }} -->
-    <!--   <a href="{{ .Permalink }}" class="category-link">{{ .Title }}</a> -->
-    <!--   {{ else }} -->
-    <!--   <a href="{{ "categories/" | relLangURL}}{{ $category | urlize}}" class="category-link">{{ $category }}</a> -->
-    <!--   {{ end }} -->
-    <!--   {{ end }} -->
-    <!--   {{ end }} -->
-    <!-- </div> -->
-  </div>
-  {{ end }}
+  <ul class="recent-list">
+    {{ range $recent }}
+    <li>
+      <span class="recent-date">{{ .Date.Format "2006-01-02" }}</span>
+      <a href="{{ .RelPermalink }}" class="recent-title">{{ .Title }}</a>
+    </li>
+    {{ end }}
+  </ul>
   {{ else }}
   <div class="recent-empty">暂无文章</div>
-  
-
+  {{ end }}
 </div>
-
-{{ end }}
-
-<!-- <div class="recent-posts"> -->
-  <!-- {{ range $index, $page := $recent }} -->
-  <!-- {{ end }} -->
-  <!-- </div> -->
-
-<!-- <div class="recent-posts"> -->
-  <!--   {{ if $recent }} {{ range $index, $page := $recent }} -->
-  <!--   <div class="recent-posts-item"> -->
-    <!--     <h2 class="recent-post-title post-title"> -->
-      <!--       <a href="{{ .RelPermalink }}" class="item-link">{{ .Title }}</a> -->
-      <!--     </h2> -->
-    <!--     <div class="summary">{{ .Summary }}</div> -->
-
-    <!--     {{ partial "post_meta.html" . }} -->
-
-    <!--   {{ if not (eq (add $index 1) (len $recent)) }} {{ end }} {{ end }} {{ else }} -->
-    <!--   <div class="recent-empty">暂无文章</div> -->
-    <!--   {{ end }} -->
-    <!-- </div> -->