feat(post): better posts dir structure with images

Octobug · Nov 17, 2023 · 0805ba9 · 0805ba9
1 parent a556af7
commit 0805ba9
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 17 deletions.
diff --git a/.vitepress/config.theme.ts b/.vitepress/config.theme.ts
@@ -22,22 +22,22 @@ export default {
     },
   },
   nav: [
-    {
-      text: "POSTS",
-      link: "/pages/posts",
-    },
+    // {
+    //   text: "POSTS",
+    //   link: "/pages/posts",
+    // },
     // {
     //   text: "VISIONS",
     //   link: "/pages/visions",
     // },
-    {
-      text: "TAGS",
-      link: "/pages/tags",
-    },
-    {
-      text: "SORTS",
-      link: "/pages/sorts",
-    },
+    // {
+    //   text: "TAGS",
+    //   link: "/pages/tags",
+    // },
+    // {
+    //   text: "SORTS",
+    //   link: "/pages/sorts",
+    // },
     {
       text: "REPO",
       link: "https://github.com/Octobug/blog",
@@ -80,5 +80,5 @@ export default {
   location: "Shenzhen, China",
   timezone: "Asia/Shanghai",
   pageSize: 13,
-  mdfilePatterns: ["posts/*.md"]
+  mdfilePatterns: ["posts/**/*.md"]
 } satisfies ThemeConfig;
diff --git a/.vitepress/config.ts b/.vitepress/config.ts
@@ -24,6 +24,9 @@ export default defineConfigWithTheme<ThemeConfig>({
       },
     ],
   ],
+  rewrites: {
+    ":postsdir/:title/README.md": ":postsdir/:title.md",
+  },
   srcExclude: [
     "./.github/",
     "./README.md",

diff --git a/.vitepress/theme/components/PostHeader.vue b/.vitepress/theme/components/PostHeader.vue
@@ -17,7 +17,10 @@
       >
         {{ post.location }}
       </span>
-      <Dot :class="$style.dot" />
+      <Dot
+        v-if="post.readingTime"
+        :class="$style.dot"
+      />
       <span :class="$style.elementItem">
         {{ post.readingTime }}
       </span>

diff --git a/.vitepress/theme/posts.data.ts b/.vitepress/theme/posts.data.ts
@@ -12,6 +12,7 @@ export default createContentLoader(extendedConfig.mdfilePatterns, {
     return rawData.map(p => {
       p.frontmatter.datetime = new Date(p.frontmatter.date);
       p.frontmatter.readingTime = readingTime(p.src || "").text;
+      p.url = p.url.replace("/README", "");
       return p;
     }).sort((a, b) => {
       return b.frontmatter.datetime - a.frontmatter.datetime;

diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css
@@ -137,8 +137,10 @@
  * Custom CSS
  * -------------------------------------------------------------------------- */
 
- :root {
+:root {
   /* Custom vars */
+  --ct-c-shadow: #d7d7d7;
+
   /* Profile */
   --ct-avatar-border: #ffffff;
   --ct-avatar-large: 10rem;
@@ -156,5 +158,17 @@ header a.title {
 }
 
 footer a {
-  color: var(--vp-c-neutral);
+  color: var(--vp-c-text-1);
+}
+
+/* CSS for a Post */
+.main img {
+  border-radius: 0.5rem;
+  box-shadow: 0 0.5rem 0.8rem var(--ct-c-shadow);
+  margin-bottom: 2rem;
+}
+
+.dark .main img {
+  border: 0.1rem solid var(--vp-c-neutral);
+  box-shadow: none;
 }
diff --git a/posts/pilot.md → posts/pilot/README.md b/posts/pilot.md → posts/pilot/README.md
@@ -7,6 +7,8 @@ tags:
   - Small Talk
 ---
 
+![Pilot Whale](./pilot-whale.jpg)
+
 为了让这篇成为博客的第一篇文章，我写了个假日期。这个日期是我从珠海搬到深圳的日子，算是一个新的开始。
 
 ## 旧博客
@@ -45,14 +47,19 @@ tags:
 
 ::: details Pilot?
 
-“Pilot”经常被用作剧集第一集的名字 [[1],[2]]，中文可以译为“试播集”。
+- "Pilot" 经常被用作剧集第一集的名字 [[1],[2]]，中文可以译为“试播集”。
+- 题图中的鲸鱼是领航鲸 (Pilot Whale) [[3]]，图片来源 [[4]]。
 
 :::
 
 ## References
 
 1. [Television pilot [Wikipedia]][1]
 2. [List of television episodes titled Pilot [Wikipedia]][2]
+3. [Pilot whale [Wikipedia]][3]
+4. [Days Like Today Are Why I Want to Live Forever! [SDM adventures]][4]
 
 [1]: <https://en.wikipedia.org/wiki/Television_pilot>
 [2]: <https://en.wikipedia.org/wiki/List_of_television_episodes_titled_Pilot>
+[3]: <https://en.wikipedia.org/wiki/Pilot_whale>
+[4]: <https://sdmdiving.com/wildlife-travel-blog/tag/pilot+whale+diving>
diff --git a/posts/pilot/pilot-whale.jpg b/posts/pilot/pilot-whale.jpg