posts: fixup, import truncator to let the brief nicer.

pages/package.json

@@ -22,6 +22,7 @@
     "astro-rehype-relative-markdown-links": "^0.6.1",
     "fuse.js": "^7.0.0",
     "github-slugger": "^2.0.0",
+    "html-truncator": "^1.0.17",
     "marked": "^13.0.2",
     "remark-collapse": "^0.1.2",
     "remark-toc": "^9.0.0",

pages/src/components/Card.tsx

@@ -2,17 +2,31 @@ import { STATUS_LIST } from "@config";
 import { slugifyStr } from "@utils/slugify";
 import type { CollectionEntry } from "astro:content";
 import { marked } from 'marked';
+import truncate from "html-truncator";
 
 // 定义一个函数，解析body为markdown格式，然后去掉解析出来的所有h标签元素
-const parseBody = (body: string) =>  {
+const parseBody = (body: string, href: string) => {
   let marked_content = marked(body.substring(0, 1000)); // 避免过长的解析
   // check type of marked_content
   if (typeof marked_content !== 'string') {
-    return body.substring(0, 130) + '……&nbsp&nbsp';
+    return body.substring(0, 130) + "……&nbsp&nbsp<a href={" + href + "}>[阅读更多]</a>";
   }
   // remove h1
   marked_content = marked_content.replace(/<h..*?>.*?<\/h.>/g, '');
-  return marked_content.substring(0, 130) + '……&nbsp&nbsp';
+  // remove img
+  marked_content = marked_content.replace(/<img.*?>/g, '');
+  // limit shown content length, but keep the html tags which are not closed
+  marked_content = truncate(marked_content, 130);
+  // default end is '...', remove it
+  marked_content = marked_content.replace(/\.\.\.$/, "");
+  // get the last tag of the content
+  let lastTag = marked_content.lastIndexOf('<');
+  // record the last tag
+  let lastTagContent = marked_content.substring(lastTag);
+  // remove the last tag
+  marked_content = marked_content.substring(0, lastTag);
+  let end = "……&nbsp&nbsp<a href={" + href + "}>[阅读更多]</a>" + lastTagContent;
+  return marked_content + end;
 }
 
 export interface Props {
@@ -73,12 +87,13 @@ export default function Card({ id, href, frontmatter, secHeading = true, body, p
         {/* <Datetime pubDatetime={pubDatetime} modDatetime={modDatetime} /> */}
       </div>
       {publishCard &&
+      // 去掉段后间隔
         <div className="break-all prose">
-          {/* 解析body为markdown格式，然后去掉解析出来的所有h1标签元素，然后将所有段落解析成自然段<p> */}
-          <span className="mr-2" dangerouslySetInnerHTML={{
-            __html: parseBody(body || "") }} >
-              </span>
-          <a href={href}>[阅读更多]</a>
+          {/* 注意需要my-0否则继承 */}
+          <p className="my-0" dangerouslySetInnerHTML={{
+            __html: parseBody(body || "", href || "") }} >
+              </p>
+
         </div>
       }
     </li>