fix(post): stop using frontmatter title

.vitepress/config.theme.ts

@@ -53,13 +53,13 @@ export default {
           tokenize
         },
         searchOptions: {
+          combineWith: "AND",
           fuzzy: 0.1,
           prefix: true,
           boost: {
             title: 4,
             text: 2,
           },
-          combineWith: "AND"
         }
       },
     },

.vitepress/theme/components/PostElements.vue

@@ -0,0 +1,63 @@
+<template>
+  <div :class="$style.elementList">
+    <span :class="$style.elementItem">
+      {{ moment(post.date).format("LL") }}
+    </span>
+    <Dot
+      v-if="post.location"
+      :class="$style.dot"
+    />
+    <span
+      v-if="post.location"
+      :class="$style.elementItem"
+    >
+      {{ post.location }}
+    </span>
+    <Dot
+      v-if="post.readingTime"
+      :class="$style.dot"
+    />
+    <span :class="$style.elementItem">
+      {{ post.readingTime }}
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import moment from "moment-timezone";
+import { useData, onContentUpdated } from "vitepress";
+import { ref } from "vue";
+import { data as allPosts } from "../posts.data";
+import { findPost } from "../utils";
+import Dot from "./Dot.vue";
+
+const { frontmatter, page } = useData();
+let post = ref(getPostData());
+
+function getPostData() {
+  return findPost(allPosts, page.value).frontmatter || frontmatter.value;
+}
+
+onContentUpdated(() => {
+  post.value = getPostData();
+});
+</script>
+
+<style module scoped>
+.elementList {
+  border-top: 1px dashed var(--vp-c-divider);
+  padding-top: 0.5rem;
+  margin-top: 3rem;
+  margin-bottom: -5rem;
+  font-size: 0.88rem;
+}
+
+.elementItem {
+  color: var(--vp-c-text-3);
+}
+
+.dot {
+  color: var(--vp-c-text-2);
+  margin: 0.5rem;
+}
+</style>

.vitepress/theme/components/PrevNext.vue

@@ -39,16 +39,14 @@
 import { useData, onContentUpdated } from "vitepress";
 import { ref } from "vue";
 import { data as allPosts } from "../posts.data";
+import { findPostIndex } from "../utils";
 import type { PageControl } from "../types/page-control";
 
-const { frontmatter, theme } = useData();
+const { page, theme } = useData();
 let control = ref<PageControl>({});
 
 onContentUpdated(() => {
-  const index = allPosts.findIndex(
-    p => p.frontmatter.title === frontmatter.value.title
-  ) || 0;
-
+  const index = findPostIndex(allPosts, page.value);
   const prevPost = allPosts[index - 1];
   const nextPost = allPosts[index + 1];
   const prev = prevPost && {

.vitepress/theme/pages/Layout.vue

@@ -1,7 +1,7 @@
 <template>
   <Layout>
     <template #doc-before>
-      <PostHeader />
+      <PostElements />
     </template>
     <template #doc-after>
       <!-- <Comments /> -->
@@ -12,7 +12,7 @@
 
 <script lang="ts" setup>
 import DefaultTheme from "vitepress/theme";
-import PostHeader from "../components/PostHeader.vue";
+import PostElements from "../components/PostElements.vue";
 import PrevNext from "../components/PrevNext.vue";
 
 const { Layout } = DefaultTheme;

.vitepress/theme/posts.data.ts

@@ -6,10 +6,18 @@ import extendedConfig from "../config.theme";
 declare const data: ContentData[];
 export { data };
 
+// Title Workaround
+function extractTile(text: string) {
+  const titlePattern = /---\n\n# (?<title>.*)\n/;
+  const match = text.match(titlePattern);
+  return match?.groups?.title || "NonTitled";
+}
+
 export default createContentLoader(extendedConfig.mdfilePatterns, {
   includeSrc: true,
   transform(rawData) {
     return rawData.map(p => {
+      p.frontmatter.title = extractTile(p.src || "");
       p.frontmatter.datetime = new Date(p.frontmatter.date);
       p.frontmatter.readingTime = readingTime(p.src || "").text;
       p.url = p.url.replace("/README", "");

.vitepress/theme/search.ts

@@ -9,6 +9,8 @@ export function tokenize(text: string): Array<string> {
   // @ts-ignore: seems like Intl.Segmenter is not supported by the lang server
   const segmenter = new Intl.Segmenter("cn", { granularity: "word" });
   // @ts-ignore
-  const words = Array.from(segmenter.segment(text)).map((item) => item.segment);
-  return words.filter(w => w !== " ");
+  const segs = Array.from(segmenter.segment(text)).map(item => item.segment);
+  const uniqueSegs = Array.from(new Set(segs));
+  const result = uniqueSegs.filter(w => !(/^\s+$/).test(w));
+  return result;
 }

.vitepress/theme/style.css

@@ -162,6 +162,11 @@ footer a {
 }
 
 /* CSS for a Post */
+/* PostElements Workaround */
+.main h1 {
+  margin-bottom: 5rem;
+}
+
 .main img {
   border-radius: 0.5rem;
   box-shadow: 0 0.5rem 0.8rem var(--ct-c-shadow);

.vitepress/theme/utils.ts

@@ -0,0 +1,9 @@
+import { ContentData, PageData } from "vitepress";
+
+export function findPostIndex(postList: ContentData[], page: PageData) {
+  return postList.findIndex(p => p.frontmatter.title === page.title) || 0;
+}
+
+export function findPost(postList: ContentData[], page: PageData) {
+  return postList[findPostIndex(postList, page)];
+}

posts/pilot/README.md

@@ -1,12 +1,13 @@
 ---
-title: Pilot
 date: 2019-06-02
 location: 深圳，西乡街道
 sort: Miscellaneous
 tags:
   - Small Talk
 ---
 
+# Pilot
+
 ![Pilot Whale](./pilot-whale.jpg)
 
 为了让这篇成为博客的第一篇文章，我写了个假日期。这个日期是我从珠海搬到深圳的日子，算是一个新的开始。
@@ -19,17 +20,17 @@ tags:
 
 ## 笔记
 
-一上大学就丢失了记笔记的习惯，之后我发现如果不记笔记，有些书很容易看了等于没看。
+一上大学就丢失了记笔记的习惯，纸质书里的勾勾划划随着大部分学习资料电子化而离去。
 
-大约在 2016 年我开始使用[为知笔记](https://www.wiz.cn/)。
+阅读知识密度高的书如果不记笔记很容易看了等于没看，所以大约在 2016 年（大三）我开始使用[为知笔记](https://www.wiz.cn/)。
 
 2019 年买了 MacBook Pro 13 (2018)，日常使用的操作系统变成 macOS，而那个时候的为知笔记 macOS 客户端很不好用，所以我把全部笔记迁移到了[有道云笔记](https://note.youdao.com/)。
 
 2021 年，由于我希望所有的编辑活动都在 VS Code 里进行，所以弃用了有道云笔记（连 PyCharm Community 也弃用了），并把所有见得光的笔记记录在 [Octobug/notes](https://github.com/Octobug/notes)。
 
 值得一提的是，在 VS Code 里写笔记的体验很好，和写代码差不多。并且由于使用了 Git，所以事后回溯非常方便。
 
-今年整理工作笔记时觉得有一些内容值得整理成篇，所以又萌发写博客的想法……
+直到今年，我在整理工作笔记时觉得有一些内容值得整理成篇，所以又萌发写博客的想法……
 
 ## VitePress
 
@@ -43,23 +44,23 @@ tags:
 
 我依然比较喜欢这个 ID，所以博客沿用了这个名字。
 
-以前不知道想要写什么，现在知道想要写什么，但是很多问题我并没有答案。已经知道答案的，我便把它们写在这里。
+以前不知道想要写什么，现在知道想要写什么，但是很多问题我并没有答案。已经知道答案的，我便把它们记录在这里。
 
 ::: details Pilot?
 
 - "Pilot" 经常被用作剧集第一集的名字 [[1],[2]]，中文可以译为“试播集”。
-- 题图中的鲸鱼是领航鲸 (Pilot Whale) [[3]]，图片来源 [[4]]。
+- 题图 [[3]] 中的鲸鱼是领航鲸 (Pilot Whale) [[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]
+3. [Days Like Today Are Why I Want to Live Forever! [SDM adventures]][3]
+4. [Pilot whale [Wikipedia]][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>
+[3]: <https://sdmdiving.com/wildlife-travel-blog/tag/pilot+whale+diving>
+[4]: <https://en.wikipedia.org/wiki/Pilot_whale>