feat: timeline(时光轴)

Related ISSUE 时光轴页面 Type Of Change ✨ New feature (non-breaking change which adds functionality) Description 因个人喜欢时光轴功能所以特此增加时光轴功能给此项目。不知道作者是否会通过此PR 当然都没关系我也是用了该主题很久了然后我也是第一次学习vuepress theme 所以有可能写得不好或者有问题希望作者谅解。
Renovamen · yaoyaoio · Sep 12, 2022 · Sep 12, 2022 · Sep 13, 2022 · Sep 12, 2022
commit 2f642f12d014809d6ccb2b92b241a5f7028120b5
diff --git a/docs/.vuepress/config.ts b/docs/.vuepress/config.ts
@@ -126,6 +126,12 @@ export default defineUserConfig({
           path: "/img/pages/links.jpg",
           mask: "rgba(64, 118, 190, 0.5)"
         }
+      },
+      timelines: {
+        subtitle: "To the time to life, rather than to life in time.",
+        bgImage: {
+          path: "/img/pages/timelines.jpeg"
+        }
       }
     },
 

diff --git a/docs/.vuepress/configs/navbar/en.ts b/docs/.vuepress/configs/navbar/en.ts
@@ -17,6 +17,11 @@ export const en: NavbarConfig = [
     link: "/links/",
     icon: "fa-satellite-dish"
   },
+  {
+    text: "Timelines",
+    link: "/timelines/",
+    icon: "ri-timer-line"
+  },
   {
     text: "Docs",
     link: "/docs/basic/intro.md",

diff --git a/docs/.vuepress/configs/navbar/zh.ts b/docs/.vuepress/configs/navbar/zh.ts
@@ -17,6 +17,11 @@ export const zh: NavbarConfig = [
     link: "/links/",
     icon: "fa-satellite-dish"
   },
+  {
+    text: "时光轴",
+    link: "/timelines/",
+    icon: "ri-timer-line"
+  },
   {
     text: "文档",
     link: "/zh/docs/basic/intro.md",

diff --git a/docs/.vuepress/public/img/pages/timelines.jpeg b/docs/.vuepress/public/img/pages/timelines.jpeg
diff --git a/docs/timelines/README.md b/docs/timelines/README.md
@@ -0,0 +1,4 @@
+---
+layout: Timelines
+title: Timelines
+---
diff --git a/packages/theme/src/client/components/TimelinePostList.vue b/packages/theme/src/client/components/TimelinePostList.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="timeline-section">
+    <ul class="timeline-content">
+      <li class="timeline-title">时光轴</li>
+      <li v-for="(item, index) in data" :key="index">
+        <h2 class="year">{{ item.year }}</h2>
+        <ul class="year-wrapper">
+          <li
+            v-for="(subItem, subIndex) in item.data"
+            :key="subIndex"
+            class="item"
+          >
+            <span class="date"> {{ dateFormat(subItem.info.date) }} </span>
+            <RouterLink :to="subItem.path">
+              <span class="title"> {{ subItem.info.title }} </span>
+            </RouterLink>
+            <hr />
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from "vue";
+import type { GungnirThemePostData } from "../../shared";
+
+const dateFormat = (date) => {
+  const renderTime = (date) => {
+    const dateee = new Date(date).toJSON();
+    return new Date(+new Date(dateee) + 8 * 3600 * 1000)
+      .toISOString()
+      .replace(/T/g, " ")
+      .replace(/\.[\d]{3}Z/, "")
+      .replace(/-/g, "/");
+  };
+  date = renderTime(date);
+  const dateObj = new Date(date);
+  const mon = dateObj.getMonth() + 1;
+  const day = dateObj.getDate();
+  return `${mon}-${day}`;
+};
+
+defineProps({
+  data: {
+    type: Array as PropType<
+      Array<{ year: string; data: GungnirThemePostData[] }>
+    >,
+    default: () => []
+  }
+});
+</script>
diff --git a/packages/theme/src/client/layouts/Timelines.vue b/packages/theme/src/client/layouts/Timelines.vue
@@ -0,0 +1,39 @@
+<template>
+  <Common>
+    <template #page>
+      <PageHeader :page-info="pageInfo" />
+      <div class="timeline-wrapper">
+        <TimelinePostList :data="filteredPosts" />
+      </div>
+    </template>
+  </Common>
+</template>
+
+<script setup lang="ts">
+import Common from "@theme/Common.vue";
+import PageHeader from "@theme/PageHeader.vue";
+import TimelinePostList from "@theme/TimelinePostList.vue";
+import { computed } from "vue";
+import type { GungnirThemePageOptions } from "../../shared";
+import { useBlog, useThemeLocaleData } from "../composables";
+import { getPostsByYear } from "../utils";
+
+const themeLocale = useThemeLocaleData();
+
+const { posts } = useBlog();
+
+const filteredPosts = computed(() => {
+  return getPostsByYear(posts.value);
+});
+
+const pageInfo = computed(() => {
+  const info = (
+    themeLocale.value.pages && themeLocale.value.pages.timelines
+      ? themeLocale.value.pages.timelines
+      : {}
+  ) as GungnirThemePageOptions;
+  if (info.title === undefined)
+    info.title = themeLocale.value.pageText?.timelines;
+  return info;
+});
+</script>
diff --git a/packages/theme/src/client/styles/index.scss b/packages/theme/src/client/styles/index.scss
@@ -1,39 +1,40 @@
 // light/dark mode
-@use 'mode/light';
-@use 'mode/dark';
+@use "mode/light";
+@use "mode/dark";
 
 // utils
-@use 'utils/normalize';
-@use 'utils/transitions';
+@use "utils/normalize";
+@use "utils/transitions";
 
 // layouts
-@use 'layouts/base';
-@use 'layouts/home';
-@use 'layouts/links';
-@use 'layouts/page';
-@use 'layouts/post';
-@use 'layouts/tags';
+@use "layouts/base";
+@use "layouts/home";
+@use "layouts/links";
+@use "layouts/page";
+@use "layouts/post";
+@use "layouts/tags";
+@use "layouts/timelines";
 
 // components
-@use 'components/arrow';
-@use 'components/badge';
-@use 'components/catalog';
-@use 'components/code';
-@use 'components/code-group';
-@use 'components/custom-container';
-@use 'components/navbar-dropdown';
-@use 'components/header';
-@use 'components/menu';
-@use 'components/navbar';
-@use 'components/pager';
-@use 'components/postlist';
-@use 'components/sidebar';
-@use 'components/sr-only';
-@use 'components/toc';
-@use 'components/search';
+@use "components/arrow";
+@use "components/badge";
+@use "components/catalog";
+@use "components/code";
+@use "components/code-group";
+@use "components/custom-container";
+@use "components/navbar-dropdown";
+@use "components/header";
+@use "components/menu";
+@use "components/navbar";
+@use "components/pager";
+@use "components/postlist";
+@use "components/sidebar";
+@use "components/sr-only";
+@use "components/toc";
+@use "components/search";
 
 // plugins
-@use 'plugins/giscus';
-@use 'plugins/md-plus';
+@use "plugins/giscus";
+@use "plugins/md-plus";
 
-@use '@vuepress/plugin-palette/style';
+@use "@vuepress/plugin-palette/style";
diff --git a/packages/theme/src/client/styles/layouts/timelines.scss b/packages/theme/src/client/styles/layouts/timelines.scss
@@ -0,0 +1,111 @@
+@import "../_variables";
+
+.timeline-wrapper {
+  padding: 10px 0 50px;
+
+  .timeline-section {
+    width: 60%;
+    max-width: 745px;
+    margin: 0 auto;
+
+    .timeline-content {
+      box-sizing: border-box;
+      position: relative;
+      padding-left: 1.2em;
+      list-style: none;
+
+      &::after {
+        content: " ";
+        position: absolute;
+        top: 14px;
+        left: 0;
+        margin-left: -2px;
+        width: 4px;
+        height: 100%;
+        background: var(--c-text-accent);
+      }
+
+      .timeline-title,
+      .year {
+        position: relative;
+        font-size: 16px;
+        color: var(--c-text);
+
+        &::before {
+          content: " ";
+          position: absolute;
+          z-index: 2;
+          left: -20px;
+          top: 50%;
+          margin-left: -4px;
+          margin-top: -4px;
+          width: 8px;
+          height: 8px;
+          background: var(--c-text-accent);
+          border: 1px solid var(--c-text-accent);
+          border-radius: 50%;
+        }
+      }
+
+      .year {
+        margin: 80px 0 0;
+        color: var(--text-color);
+        font-weight: 700;
+        font-size: 26px;
+      }
+
+      .year-wrapper {
+        padding-left: 0 !important;
+
+        .item {
+          display: flex;
+          padding: 30px 0 10px;
+          list-style: none;
+          border-bottom: 1px dashed #ddd;
+          position: relative;
+
+          &:hover {
+            .date {
+              color: white;
+
+              &::before {
+                background: #3eaf7c;
+              }
+            }
+
+            .title {
+              color: white;
+            }
+          }
+
+          .date {
+            width: 50px;
+            line-height: 30px;
+            color: var(--c-text-sub);
+            font-size: 14px;
+
+            &::before {
+              content: " ";
+              position: absolute;
+              left: -18px;
+              top: 41px;
+              width: 6px;
+              height: 6px;
+              margin-left: -4px;
+              background: var(--c-text-accent);
+              border-radius: 50%;
+              z-index: 2;
+            }
+          }
+
+          .title {
+            line-height: 30px;
+            color: var(--text-color);
+            font-size: 18px;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/theme/src/node/i18n/en.ts b/packages/theme/src/node/i18n/en.ts
@@ -40,7 +40,8 @@ const en: GungnirThemeI18n = {
   // other pages
   pageText: {
     tags: "Tags",
-    links: "Links"
+    links: "Links",
+    timelines: "Timelines"
   },
 
   // "show all tags" button

diff --git a/packages/theme/src/node/i18n/zh.ts b/packages/theme/src/node/i18n/zh.ts
@@ -40,7 +40,8 @@ const zh: GungnirThemeI18n = {
   // other pages
   pageText: {
     tags: "标签",
-    links: "链接"
+    links: "链接",
+    timelines: "时光轴"
   },
 
   // "show all tags" button

diff --git a/packages/theme/src/shared/i18n.ts b/packages/theme/src/shared/i18n.ts
@@ -136,6 +136,7 @@ export interface GungnirThemeI18n {
   pageText?: {
     tags: string;
     links: string;
+    timelines: string;
   };
 
   /**

diff --git a/packages/theme/src/shared/options.ts b/packages/theme/src/shared/options.ts
@@ -18,6 +18,7 @@ export interface GungnirThemePageOptions {
 export interface GungnirThemePagesOptions {
   tags?: GungnirThemePageOptions;
   links?: GungnirThemePageOptions;
+  timelines?: GungnirThemePageOptions;
 }
 
 export type GungnirThemeLocaleOptions = GungnirThemeData;