fix: mobile end style anomaly

packages/demo/docs/.vitepress/config.ts

@@ -7,6 +7,12 @@ export default defineConfig({
   extends: defineThemeConfig(),
   lastUpdated: true,
   themeConfig: {
+    nav: [
+      {
+        text: 'Tags',
+        link: '/src/tags'
+      }
+    ],
     // logo: "logo.png",
     // 展示 2,3 级标题在目录中
     outline: {

packages/demo/docs/src/demo2.md

@@ -1,5 +1,7 @@
 ---
 category: 服务器
+tags:
+  - demo
 ---
 
 # demo

packages/demo/docs/src/demo3.md

@@ -1,5 +1,7 @@
 ---
 category: 服务器
+tags:
+  - demo
 ---
 # demo
 

packages/demo/docs/src/tags.md

@@ -0,0 +1,3 @@
+---
+layout: tags
+---

packages/theme/index.ts

@@ -5,6 +5,7 @@ import { MotionPlugin } from '@vueuse/motion';
 import DefaultTheme from 'vitepress/theme';
 import BlogPage from './src/components/BlogPage.vue';
 import Layout from './src/components/Layout.vue';
+import Tags from './src/components/Tags.vue';
 import NProgress from './src/utils/client/nprogress';
 import '@shikijs/vitepress-twoslash/style.css';
 import './src/styles/index.scss';
@@ -31,6 +32,7 @@ const MildTheme: Theme = {
     app.use(MotionPlugin);
     app.use(TwoslashFloatingVue);
     app.component('blog', BlogPage);
+    app.component('tags', Tags);
   }
 };
 

packages/theme/src/components/ArticlesList.vue

@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 import type { ArticlesData } from '../datas/articles.data.js';
 import { useUrlSearchParams } from '@vueuse/core';
-import { NPagination } from 'naive-ui';
+import { NEllipsis, NPagination } from 'naive-ui';
 import { useRouter } from 'vitepress';
 import { computed, ref, watch, watchEffect } from 'vue';
 import { useArticleData } from '../hooks/useArticleData.js';
+import { handleTagsData } from '../utils/client/tags.js';
 import IconCalendar from './icons/IconCalendar.vue';
 import IconClock from './icons/IconClock.vue';
 import IconWords from './icons/IconWords.vue';
@@ -14,7 +15,7 @@ const params = useUrlSearchParams();
 const currentPage = ref(Number(params.pageNum) || 1);
 const pageSize = ref(4);
 const { articleData } = useArticleData();
-
+handleTagsData(articleData.value);
 function paginate(data: ArticlesData[], pageSize: number, currentPage: number) {
   // 参数校验，如果数据不是数组或者没有数据，直接返回空数组
   if (!Array.isArray(data) || data?.length === 0) {
@@ -41,11 +42,6 @@ const posts = computed(() => {
   return paginate(articleData.value, pageSize.value, currentPage.value);
 });
 
-// function handleChangePage(i: number) {
-//   currentPage.value = i;
-//   params.pageNum = String(i);
-//   window.scrollTo({ top: 0, behavior: 'auto' });
-// }
 function handleClick(path: string) {
   router.go(path);
 }
@@ -63,7 +59,7 @@ watch(currentPage, () => {
 </script>
 
 <template>
-  <div class="post">
+  <div class="VSContent post">
     <div
       v-for="(article, index) in posts"
       :key="article.path + article.title"
@@ -86,16 +82,9 @@ watch(currentPage, () => {
           <a> {{ article?.title }}</a>
         </div>
       </div>
-      <div
-        class="describe"
-        :ellipsis="{
-          rows: 1,
-          showTooltip: false,
-        }"
-      >
+      <n-ellipsis class="describe" :tooltip="{ show: false }">
         {{ article.description }}
-        <!-- <p class="describe" v-html="article.description" /> -->
-      </div>
+      </n-ellipsis>
       <div class="post-info">
         <div class="text">
           <icon-calendar />
@@ -144,7 +133,8 @@ watch(currentPage, () => {
 .post {
   padding-bottom: 75px;
   position: relative;
-  min-height: 665px;
+  min-height: 700px;
+  max-width: 800px;
 
   .post-item {
     padding: 14px 14px;
@@ -192,18 +182,6 @@ watch(currentPage, () => {
   }
 }
 
-@media (min-width: 601px) and (max-width: 1024) {
-  .post {
-    width: 600px;
-  }
-}
-
-@media (min-width: 1025px) {
-  .post {
-    width: 800px;
-  }
-}
-
 .post-item a,
 .pagination a {
   color: var(--vp-c-text-1);
@@ -221,11 +199,8 @@ watch(currentPage, () => {
   font-weight: 500;
   margin: 0.1rem 0;
 }
-.describe {
+:deep(.n-ellipsis) {
   font-size: 0.9375rem;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  line-clamp: 3;
   overflow: hidden;
   color: var(--vp-c-text-2);
   margin: 10px 0;

packages/theme/src/components/BlogPage.vue

@@ -3,17 +3,13 @@ import ArticlesList from './ArticlesList.vue';
 </script>
 
 <template>
-  <div class="articles-list-wrapper">
+  <div class="VSPage">
     <articles-list />
   </div>
 </template>
 
 <style lang="scss" scoped>
 .articles-list-wrapper {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
   @media (max-width: 600px) {
     padding: 0 32px 15px;
   }

packages/theme/src/components/Layout.vue

@@ -1,5 +1,3 @@
-<!-- .vitepress/theme/Layout.vue -->
-
 <script setup lang="ts">
 import { useData } from 'vitepress';
 import DefaultTheme from 'vitepress/theme';

packages/theme/src/components/Tags.vue

@@ -0,0 +1,96 @@
+<script lang="ts" setup>
+import { useUrlSearchParams } from '@vueuse/core';
+import { computed, ref } from 'vue';
+import { useArticleData } from '../hooks/useArticleData';
+import { handleTagsData } from '../utils/client/tags';
+
+const { articleData } = useArticleData();
+const tagsData = computed(() => {
+  return handleTagsData(articleData.value);
+});
+const params = useUrlSearchParams();
+const selectTag = ref(params.tag);
+
+function toggleTag(tag: string) {
+  selectTag.value = tag;
+  params.tag = tag;
+}
+</script>
+
+<template>
+  <div class="VSPage">
+    <div class="VSContent">
+      <div class="tags-wrapper">
+        <span
+          v-for="(tag) in tagsData"
+          :key="tag.name"
+          class="tag"
+          @click="() => toggleTag(tag.name)"
+        >
+          {{ tag.name }} <strong>({{ tag.count }})</strong>
+        </span>
+      </div>
+      <div class="tag-header">
+        {{ selectTag }}
+      </div>
+    </div>
+  </div>
+  <!-- <a
+    v-for="(article, index) in selectTag ? data[selectTag] : []"
+    :key="index"
+    :href="withBase(article.path)"
+    class="posts"
+  >
+    <div class="post-container">
+      <div class="post-dot" />
+      {{ article.title }}
+    </div>
+    <div class="date">{{ article.date }}</div>
+  </a> -->
+</template>
+
+<style scoped lang="scss">
+.tags-wrapper {
+  margin-top: 14px;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.tag {
+  display: inline-block;
+  padding: 4px 16px;
+  margin: 6px 8px;
+  font-size: 0.875rem;
+  line-height: 25px;
+  background-color: var(--vp-c-bg-alt);
+  transition: 0.4s;
+  border-radius: 2px;
+  color: var(--vp-c-text-1);
+  cursor: pointer;
+  border: 1px #00000000 solid;
+}
+.tag:hover {
+  border: 1px var(--vp-c-text-3) solid;
+}
+
+.tag strong {
+  color: var(--vp-c-text-2);
+}
+
+.tag-header {
+  font-size: 1.5rem;
+  font-weight: 500;
+  margin: 1rem 0;
+  text-align: left;
+}
+
+@media screen and (max-width: 768px) {
+  .tag-header {
+    font-size: 1.5rem;
+  }
+
+  .date {
+    font-size: 0.75rem;
+  }
+}
+</style>

packages/theme/src/constants/index.ts

@@ -0,0 +1 @@
+export const NOT_ARTICLE_LAYOUTS = ['blog', 'tags', 'categorys', 'projects', 'home', 'page'];

packages/theme/src/datas/articles.data.ts

@@ -1,5 +1,6 @@
 import matter from 'gray-matter';
 import { readingTime } from 'reading-time-estimator';
+import { NOT_ARTICLE_LAYOUTS } from '../constants';
 import { createArticlesListLoader } from '../utils/node/articles';
 import { formatDate } from '../utils/node/date';
 
@@ -24,15 +25,15 @@ function getTextDescription(text: string, count = 100) {
     ?.trim()
     ?.slice(0, count);
 
-  return finalText;
+  return `${finalText}...`;
 }
 
 export default createArticlesListLoader({
   includeSrc: true,
   render: true,
   excerpt: true,
   transform(rawData) {
-    const data = rawData.filter(item => !['blog', 'home'].includes(item.frontmatter.layout)).map(item => {
+    const data = rawData.filter(item => !NOT_ARTICLE_LAYOUTS.includes(item.frontmatter.layout)).map(item => {
       const content = matter(item.src || '').content;
       const { words, minutes } = readingTime(content, 200);
       const match = content.match(/^(#+)\s+(.+)/m);

packages/theme/src/hooks/useArticleData.ts

@@ -2,7 +2,7 @@ import { onMounted, ref } from 'vue';
 import { data } from '../datas/articles.data';
 
 export function useArticleData() {
-  const articleData = ref(data);
+  const articleData = ref(data || []);
 
   onMounted(() => {
     articleData.value = data;

packages/theme/src/styles/index.scss

@@ -56,3 +56,28 @@
 .VPSwitchAppearance .check {
   transform: none !important;
 }
+
+.VSPage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  @media (max-width: 600px) {
+    padding: 0 32px 15px;
+  }
+
+  @media (min-width: 601px) and (max-width: 1024px) {
+    padding: 0 64px 15px;
+  }
+
+  .VSContent {
+    @media (max-width: 600px) {
+      width: 100%;
+    }
+    @media (min-width: 601px) and (max-width: 1024px) {
+      width: 100%;
+    }
+    @media (min-width: 1025px) {
+      width: 800px;
+    }
+  }
+}

packages/theme/src/utils/client/tags.ts

@@ -0,0 +1,23 @@
+import type { ArticlesData } from '../../datas/articles.data';
+
+export function handleTagsData(data: ArticlesData[]) {
+  const tagsMap = new Map<string, number>();
+  data.forEach(item => {
+    item?.tags?.forEach(tag => {
+      if (!tagsMap.has(tag)) {
+        tagsMap.set(tag, 1);
+      }
+      else {
+        tagsMap.set(tag, (tagsMap.get(tag) || 0) + 1);
+      }
+    });
+  });
+
+  const tagsData = Array.from(tagsMap, ([key, value]) => {
+    return {
+      name: key,
+      count: value
+    };
+  });
+  return tagsData;
+}