feat: 完善细节

.vscode/settings.json

@@ -1,3 +1,3 @@
 {
-  "cSpell.words": ["feedme", "ijust", "openmoji", "tdesign"]
+  "cSpell.words": ["feedme", "ijust", "nuxthq", "openmoji", "tdesign"]
 }

README.md

@@ -1,3 +1,9 @@
 # nuxt-ijust.cc
 
+日常记录
+
+技术栈：
+
+- nuxt + nuxt content + nuxt studio
+
 ijust.cc by nuxt

components/c-list.vue

@@ -1,5 +1,4 @@
 <template>
-  <!-- <client-only> -->
   <div class="w-full py-4">
     <var-cell>
       <template #icon>
@@ -41,16 +40,9 @@
       </var-cell>
     </div>
     <div class="m-8 flex justify-center">
-      <var-pagination
-        v-model:current="pager.current"
-        :total="pager.total"
-        :size="pager.size"
-        :show-size-changer="false"
-        @change="onPagerChange"
-      />
+      <c-pager :pager="pager" :base-path="`/${props.category}/page`" />
     </div>
   </div>
-  <!-- </client-only> -->
 </template>
 <script lang="ts" setup>
 import { ParsedContent } from "@nuxt/content/dist/runtime/types";
@@ -64,20 +56,21 @@ const props = defineProps<{
 
 const pager = reactive({
   current: 1,
-  size: 4,
+  size: 10,
   total: 1,
 });
 
+const commonWhere = {
+  _dir: {
+    $in: [props.category],
+  },
+  _partial: false,
+};
+
 // 优先判断页码
-pager.total = await queryContent("/")
-  .where({
-    _dir: {
-      $in: [props.category],
-    },
-  })
-  .count();
-
-const _routerPage = Number(route.query?.page?.[0]);
+pager.total = await queryContent("/").where(commonWhere).count();
+
+const _routerPage = Number(route.params?.page);
 const handlePageCase = () => {
   const maxCurrent = Math.ceil(pager.total / pager.size);
 
@@ -86,15 +79,11 @@ const handlePageCase = () => {
   // 判断当前的 current 是否大于实际页数，如果是默认为最大值
   if (pager.current > maxCurrent) {
     router.replace({
-      query: {
-        page: maxCurrent,
-      },
+      path: "`/${props.category}/page/${maxCurrent}``",
     });
   } else if (pager.current < 1 || Number.isNaN(_routerPage)) {
     router.replace({
-      query: {
-        page: 1,
-      },
+      path: "`/${props.category}/page/1`",
     });
   }
 };
@@ -105,15 +94,6 @@ const getPublishDate = (item: ParsedContent) => {
   const _date = item.date ?? item.pubDate;
   return formatDate(_date);
 };
-const onPagerChange = (current: number) => {
-  pager.current = current;
-  router.push({
-    query: {
-      page: current,
-    },
-  });
-  handleList();
-};
 
 const yearFilterDataArray = ref<
   Array<{
@@ -126,17 +106,20 @@ const handleList = async () => {
   const key = `list-${props.category}-${pager.current}`;
   const { data } = await useAsyncData(key, () =>
     queryContent("/")
-      .where({
-        _dir: {
-          $in: [props.category],
-        },
-      })
+      .where(commonWhere)
       .sort({ date: -1 })
       .limit(pager.size)
       .skip((pager.current - 1) * pager.size)
       .find(),
   );
 
+  const f = await queryContent("/")
+    .where(commonWhere)
+    .sort({ date: -1 })
+    .limit(pager.size)
+    .skip((pager.current - 1) * pager.size)
+    .find();
+
   /** 添加 year 字段，按照年份分组 */
   const yearFilterData = (data.value ?? [])
     ?.map((i) => {

components/c-pager.vue

@@ -0,0 +1,45 @@
+<template>
+  <!-- 上一页 -->
+  <nuxt-link v-if="pager.current > 1" :to="goPrev">
+    <var-button text type="primary">
+      <icon name="material-symbols:chevron-left" />
+      <span>Prev</span>
+    </var-button>
+  </nuxt-link>
+  <var-button text disabled>
+    {{ pager.current }} /
+    {{ maxPage }}
+  </var-button>
+  <!-- 下一页 -->
+  <nuxt-link v-if="pager.current < maxPage" :to="goNext">
+    <var-button text type="primary">
+      <span>Next</span>
+      <icon name="material-symbols:chevron-right" />
+    </var-button>
+  </nuxt-link>
+</template>
+<script lang="ts" setup>
+const props = defineProps<{
+  pager: {
+    current: number;
+    size: number;
+    total: number;
+  };
+  basePath: string;
+}>();
+
+const maxPage = computed(() => Math.ceil(props.pager.total / props.pager.size));
+
+const goPrev = computed(() => {
+  return {
+    path: `${props.basePath}/${props.pager.current - 1}`,
+  };
+});
+const goNext = computed(() => {
+  return {
+    path: `${props.basePath}/${props.pager.current + 1}`,
+  };
+});
+</script>
+
+<style></style>

components/c-side-bar.vue

@@ -23,7 +23,7 @@
             </var-cell>
           </nuxt-link>
 
-          <nuxt-link to="/blogs">
+          <nuxt-link to="/blogs/page/1">
             <var-cell ripple title="Blogs">
               <template #icon>
                 <icon
@@ -34,7 +34,7 @@
               </template>
             </var-cell>
           </nuxt-link>
-          <nuxt-link to="/podcasts">
+          <nuxt-link to="/podcasts/page/1">
             <var-cell ripple title="Podcasts">
               <template #icon>
                 <icon name="material-symbols:podcasts" class="mr-2" size="18" />

content/about/_intro.md

@@ -1,3 +1,7 @@
+---
+tags: ["nuxt"]
+---
+
 ## Hello World
 
 Hi，这是我的小站。233

content/blogs/nuxt.md

@@ -0,0 +1,9 @@
+---
+date: 2023-10-08 18:44:38
+title: 介绍 Nuxt
+keywords: nuxt
+description: 介绍下 nuxt 分享
+tags: ["nuxt"]
+---
+
+nuxt

content/podcasts/02.md

@@ -5,8 +5,7 @@ date: 2023-06-28 00:00:31
 keywords: syntax.fm, 速通, 域名, domain, google domain
 description: 最近 Google Domain 打算卖掉了，由此 Syntax.fm 两位主播，就聊起这个话题。
 order: 0
-tags:
-  - syntax.fm
+tags: ["SyntaxFM"]
 ---
 
 音频听不了？可通过下面方式收听：

content/podcasts/03.md

@@ -6,7 +6,7 @@ keywords: syntax.fm, 速通, orm, drizzle
 description: 本期带读 syntax.fm 《wtf is an orm》，介绍和数据库有关的 ORM。Object Relation Mapping ORM,对象关系映射
 order: 0
 tags:
-  - syntax.fm
+  - SyntaxFM
 ---
 
 音频听不了？可通过下面方式收听：

content/podcasts/06.md

@@ -8,7 +8,7 @@ description: >
   领域的 EsBuild。
 order: 0
 tags:
-  - syntax.fm
+  - SyntaxFM
 ---
 
 音频听不了？可通过下面方式收听：

content/podcasts/08.md

@@ -2,13 +2,13 @@
 slug: "08"
 title: 08-速通 Syntax.fm 646 采访 Nodemailer 作者
 date: 2023-08-01 00:00:00
-keywords: syntax, nodemail, 速通, syntax.fm
+keywords: syntax.fm, nodemail, 速通
 description:
   他们一起聊了很多 email 的技术话题。nodemailer 这个库已经持续维护了 13 年了，从早期 Node.js 0.9x
   时候就开始了。目前每周下载 280w
 order: 0
 tags:
-  - syntax
+  - SyntaxFM
 ---
 
 音频听不了？可通过下面方式收听：

content/podcasts/09.md

@@ -7,7 +7,7 @@ description: 速通 Syntax.fm 647，在比较JavaScript（JS）和Rust的生态
 order: 0
 tags:
   - rust
-  - syntax.fm
+  - SyntaxFM
 ---
 
 ## 09-速通 Syntax.fm 647 对比 Node/Rust 基础概念

content/podcasts/16.md

@@ -1,21 +1,9 @@
 ---
 title: 16-速通 PodRocket 原子设计死了吗
-permalink: /post/su-tong-podrocket-yuan-zi-she-ji-si-liao-ma-24fgna.html
 date: 2023-10-03 21:34:27
-meta:
-  - name: keywords
-    content: 速通 podrocket
-  - name: description
-    content: >-
-      速通podrocket原子设计死了吗‍‍isatomicdesigndead年月日‍https_podrocketlogrocketcomisatomicdesigndead‍
-tags:
-  - 速通
-  - podrocket
-categories:
-  - content
-author:
-  name: 辛宝Otto
-  link: https://github.com/Otto-J
+keywords: 速通 podrocket
+description: 速通podrocket原子设计死了吗‍‍
+tags: ["速通", "podrocket"]
 ---
 
 # 16-速通 PodRocket 原子设计死了吗

nuxt.config.ts

@@ -95,7 +95,7 @@ export default defineNuxtConfig({
           // rss
           rel: "alternate",
           type: "application/rss+xml",
-          title: "自定义RSS XML",
+          title: "Feed XML",
           href: "/feed.xml",
         },
         {
@@ -111,12 +111,13 @@ export default defineNuxtConfig({
     prerender: {
       routes: [
         "/sitemap.xml",
-        "/archive/1",
-        "/archive/2",
-        "/archive/3",
-        "/podcasts?page=1",
-        "/podcasts?page=2",
-        "/podcasts?page=3",
+        // "/tags/syntax.fm",
+        // "/archive/1",
+        // "/archive/2",
+        // "/archive/3",
+        // "/podcasts?page=1",
+        // "/podcasts?page=2",
+        // "/podcasts?page=3",
       ],
     },
   },

pages/archive/[page].vue

@@ -35,13 +35,7 @@
       </var-cell>
     </div>
     <div class="m-8 flex justify-center">
-      <var-pagination
-        v-model:current="pager.current"
-        :total="pager.total"
-        :size="pager.size"
-        :show-size-changer="false"
-        @change="onPagerChange"
-      />
+      <c-pager :pager="pager" base-path="/archive" />
     </div>
   </div>
 </template>
@@ -53,17 +47,9 @@ const router = useRouter();
 
 const pager = reactive({
   current: 1,
-  size: 5,
+  size: 10,
   total: 1,
 });
-// const total =
-const onPagerChange = (current: number) => {
-  pager.current = current;
-  // refresh();
-  router.push({
-    path: `/archive/${current}`,
-  });
-};
 
 const _routerPage = Number(route.params?.page);
 
@@ -96,16 +82,12 @@ watchEffect(() => {
 
 const key = "archive-" + pager.current;
 const { data } = await useAsyncData(key, () => {
-  const isErrPage = pager.current > maxCurrent.value || pager.current < 1;
-  if (isErrPage) {
-    return Promise.resolve([]);
-  }
-
   return queryContent("/")
     .where({
       _dir: {
         $in: ["blogs", "podcasts"],
       },
+      _partial: false,
     })
     .sort({ date: -1 })
     .limit(pager.size)

pages/archive/index.vue

@@ -1,6 +1,4 @@
-<template>
-  <NuxtPage />
-</template>
+<template></template>
 <script lang="ts" setup>
 const router = useRouter();
 

pages/blogs/index.vue

@@ -1,6 +1,10 @@
-<template>
-  <c-list category="blogs" />
-</template>
-<script lang="ts" setup></script>
+<template></template>
+<script lang="ts" setup>
+const router = useRouter();
+
+router.replace({
+  path: "/blogs/page/1",
+});
+</script>
 
 <style></style>