feat: 文档增加aside功能

astro.config.ts

@@ -3,6 +3,8 @@ import mdx from '@astrojs/mdx'
 import sitemap from '@astrojs/sitemap'
 import UnoCSS from 'unocss/astro'
 import vue from '@astrojs/vue'
+import remarkDirective from 'remark-directive'
+import { remarkAsides } from './src/remark-plugins/remark-asides.js'
 
 export default defineConfig({
   site: 'https://jzllove9.github.io',
@@ -25,5 +27,6 @@ export default defineConfig({
       },
       wrap: true,
     },
+    remarkPlugins: [remarkDirective, remarkAsides({})],
   },
 })

package.json

@@ -32,7 +32,12 @@
     "@astrojs/vue": "^4.5.0",
     "@unocss/reset": "^0.61.0",
     "astro": "^4.11.3",
+    "dayjs": "^1.11.13",
+    "hastscript": "^9.0.0",
     "nprogress": "^0.2.0",
+    "remark-directive": "^3.0.0",
+    "unist-util-remove": "^4.0.0",
+    "unist-util-visit": "^5.0.0",
     "unocss": "^0.61.0",
     "vue": "^3.4.31"
   },

src/components/BlogAside.astro

@@ -0,0 +1,83 @@
+---
+import CommentAside from './CommentAside.astro'
+import { comment } from '../consts'
+import { getCollectionByName } from '../utils/getCollectionByName'
+import getUniqueTags from '../utils/getUniqueTags'
+import getCountByCategory from '../utils/getCountByCategory'
+import { sortPostsByDate } from '../utils/sortPostsByDate'
+import { site } from '../consts'
+import { t } from '../i18n/utils'
+const blogs = await getCollectionByName('blog')
+let tagArr = getUniqueTags(blogs)
+let categoryCount = getCountByCategory(blogs)
+let sortPosts = await sortPostsByDate(blogs)
+let resultPosts = sortPosts.splice(0, site.recentBlogSize)
+---
+
+<div>
+  {
+    Object.keys(categoryCount).length > 0 && (
+      <div class="aside-widget">
+        <i class="ri-folder-line menu-icon" />
+        {t('sidebar.categories')}
+      </div>
+    )
+  }
+  {
+    Object.keys(categoryCount).map((category) => (
+      <a
+        class="my-1 truncate block hover:text-skin-active"
+        title={category + ' (' + categoryCount[category] + ')'}
+        href={'/category/' + category}
+      >
+        {(category === 'uncategorized' ? t('sidebar.uncategorized') : category) + ' (' + categoryCount[category] + ')'}
+      </a>
+    ))
+  }
+</div>
+<div>
+  {
+    tagArr.length > 0 && (
+      <div class="aside-widget">
+        <i class="ri-price-tag-3-line menu-icon" />
+        {t('sidebar.tags')}
+      </div>
+    )
+  }
+  <div class="flex flex-wrap">
+    {
+      tagArr &&
+        tagArr.map((tag: any) => (
+          <a
+            class="inline-block truncate m-1 border p-1 text-sm rounded hover:text-skin-active"
+            title={tag}
+            href={'/tags/' + tag}
+          >
+            {tag}
+          </a>
+        ))
+    }
+  </div>
+</div>
+
+<div>
+  <div class="aside-widget">
+    <i class="ri-file-line menu-icon"></i>
+    {t('sidebar.recentArticle')}
+  </div>
+  <div class="flex flex-col">
+    {
+      resultPosts.map((post: any) => (
+        <a
+          href={'/blog/' + post.slug}
+          class="truncate cursor-pointr mt-1 hover:text-skin-active"
+          title={post.data.title}
+        >
+          {post.data.title}
+        </a>
+      ))
+    }
+  </div>
+</div>
+
+{comment.enable && comment.type === 'waline' && <CommentAside />}

src/components/CommentAside.astro

@@ -0,0 +1,44 @@
+---
+import { comment } from '../consts'
+import { t } from '../i18n/utils'
+---
+
+{
+  comment.enable && comment.type === 'waline' && (
+    <div>
+      <div class="aside-widget">
+        <i class="ri-chat-1-line menu-icon" />
+        {t('sidebar.recentComments')}
+      </div>
+      <div id="waline-comment" />
+    </div>
+  )
+}
+
+<script>
+  import { comment } from '../consts'
+  import { formatDate } from '../utils/formatDate'
+
+  const commentDiv = document.getElementById('waline-comment')
+  if (comment.enable && comment.type === 'waline' && commentDiv) {
+    const recentCommentUrl = `${comment.walineConfig.serverUrl}/api/comment?type=recent&count=${comment.walineConfig.count}`
+    fetch(recentCommentUrl)
+      .then((comment) => {
+        return comment.json()
+      })
+      .then((recentComments) => {
+        let comments = '<ul>'
+        recentComments.data.forEach((comment: any, index: number) => {
+          comments += `<li>${index + 1}、${formatDate(comment.time)}`
+          comments += `<div class="waline-comment-content"><a class="block" href="${window.location.origin + comment.url}">${comment.comment}</a></div>`
+          comments += `<div class="waline-comment-author ">--${comment.nick}</div></li>`
+        })
+        comments += '</ul>'
+        const commentDiv = document.getElementById('waline-comment')
+        if (!commentDiv) {
+          return
+        }
+        commentDiv.innerHTML = comments
+      })
+  }
+</script>