From a02ebd286b25784b90431dc4fc6551bd0de156b1 Mon Sep 17 00:00:00 2001 From: shandianchengzi <1252402849@qq.com> Date: Sun, 7 Jul 2024 01:52:23 +0800 Subject: [PATCH 1/2] =?UTF-8?q?posts:=20=E5=A2=9E=E5=8A=A0=E7=AE=80?= =?UTF-8?q?=E4=BB=8B=E8=A7=A3=E6=9E=90=E6=88=90Markdown=E7=9A=84=E5=8A=9F?= =?UTF-8?q?=E8=83=BD=E3=80=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/package-lock.json | 13 +++++++++++++ pages/package.json | 1 + pages/src/components/Card.tsx | 24 ++++++++++++++++++++---- 3 files changed, 34 insertions(+), 4 deletions(-) diff --git a/pages/package-lock.json b/pages/package-lock.json index c986ec9..5d3e8f9 100644 --- a/pages/package-lock.json +++ b/pages/package-lock.json @@ -16,6 +16,7 @@ "astro-rehype-relative-markdown-links": "^0.6.1", "fuse.js": "^7.0.0", "github-slugger": "^2.0.0", + "marked": "^13.0.2", "remark-collapse": "^0.1.2", "remark-toc": "^9.0.0", "satori": "^0.10.11", @@ -9459,6 +9460,18 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/marked": { + "version": "13.0.2", + "resolved": "https://mirrors.huaweicloud.com/repository/npm/marked/-/marked-13.0.2.tgz", + "integrity": "sha512-J6CPjP8pS5sgrRqxVRvkCIkZ6MFdRIjDkwUwgJ9nL2fbmM6qGQeB2C16hi8Cc9BOzj6xXzy0jyi0iPIfnMHYzA==", + "license": "MIT", + "bin": { + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 18" + } + }, "node_modules/mdast-util-definitions": { "version": "6.0.0", "resolved": "https://registry.npmjs.org/mdast-util-definitions/-/mdast-util-definitions-6.0.0.tgz", diff --git a/pages/package.json b/pages/package.json index 2d91614..d3015fb 100644 --- a/pages/package.json +++ b/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", + "marked": "^13.0.2", "remark-collapse": "^0.1.2", "remark-toc": "^9.0.0", "satori": "^0.10.11", diff --git a/pages/src/components/Card.tsx b/pages/src/components/Card.tsx index 93064cd..5203907 100644 --- a/pages/src/components/Card.tsx +++ b/pages/src/components/Card.tsx @@ -1,6 +1,19 @@ import { STATUS_LIST } from "@config"; import { slugifyStr } from "@utils/slugify"; import type { CollectionEntry } from "astro:content"; +import { marked } from 'marked'; + +// 定义一个函数，解析body为markdown格式，然后去掉解析出来的所有h标签元素 +const parseBody = (body: string) => { + let marked_content = marked(body.substring(0, 1000)); // 避免过长的解析 + // check type of marked_content + if (typeof marked_content !== 'string') { + return body.substring(0, 130) + '……  '; + } + // remove h1 + marked_content = marked_content.replace(/.*?<\/h.>/g, ''); + return marked_content.substring(0, 130) + '……  '; +} export interface Props { id?: string; @@ -60,10 +73,13 @@ export default function Card({ id, href, frontmatter, secHeading = true, body, p {/* */} {publishCard && -

- {body?.replace("#", "")?.substring(0, 130)} - [阅读更多] -

+
+ {/* 解析body为markdown格式，然后去掉解析出来的所有h1标签元素，然后将所有段落解析成自然段

*/} + + + [阅读更多] +

} ); From a9c6176f4a238a07aad547a446a27182bafe651e Mon Sep 17 00:00:00 2001 From: shandianchengzi <1252402849@qq.com> Date: Sun, 7 Jul 2024 02:44:06 +0800 Subject: [PATCH 2/2] posts: fixup, import truncator to let the brief nicer. --- pages/package-lock.json | 37 +++++++++++++++++++++++++++++------ pages/package.json | 1 + pages/src/components/Card.tsx | 31 +++++++++++++++++++++-------- 3 files changed, 55 insertions(+), 14 deletions(-) diff --git a/pages/package-lock.json b/pages/package-lock.json index 5d3e8f9..de1c7cd 100644 --- a/pages/package-lock.json +++ b/pages/package-lock.json @@ -16,6 +16,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", @@ -5863,7 +5864,6 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz", "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==", - "dev": true, "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", @@ -5877,7 +5877,6 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==", - "dev": true, "funding": [ { "type": "github", @@ -5889,7 +5888,6 @@ "version": "5.0.3", "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz", "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==", - "dev": true, "dependencies": { "domelementtype": "^2.3.0" }, @@ -5904,7 +5902,6 @@ "version": "3.1.0", "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", "integrity": "sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==", - "dev": true, "dependencies": { "dom-serializer": "^2.0.0", "domelementtype": "^2.3.0", @@ -7686,6 +7683,35 @@ "node": "^14.13.1 || >=16.0.0" } }, + "node_modules/html-truncator": { + "version": "1.0.17", + "resolved": "https://mirrors.huaweicloud.com/repository/npm/html-truncator/-/html-truncator-1.0.17.tgz", + "integrity": "sha512-qa4vQJUGH4oZqdbAxsT4RG+PbBiVJHyPrvXI1P7FQegsxvuxozdAgxq5msPXzYD56JjO+nRh37mob6svIxBcDw==", + "license": "MIT", + "dependencies": { + "htmlparser2": "^8.0.2", + "lodash": "^4.17.21" + } + }, + "node_modules/html-truncator/node_modules/htmlparser2": { + "version": "8.0.2", + "resolved": "https://mirrors.huaweicloud.com/repository/npm/htmlparser2/-/htmlparser2-8.0.2.tgz", + "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==", + "funding": [ + "https://github.com/fb55/htmlparser2?sponsor=1", + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ], + "license": "MIT", + "dependencies": { + "domelementtype": "^2.3.0", + "domhandler": "^5.0.3", + "domutils": "^3.0.1", + "entities": "^4.4.0" + } + }, "node_modules/html-void-elements": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz", @@ -9127,8 +9153,7 @@ "node_modules/lodash": { "version": "4.17.21", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", - "dev": true + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "node_modules/lodash-es": { "version": "4.17.21", diff --git a/pages/package.json b/pages/package.json index d3015fb..e07b16e 100644 --- a/pages/package.json +++ b/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", diff --git a/pages/src/components/Card.tsx b/pages/src/components/Card.tsx index 5203907..5c42792 100644 --- a/pages/src/components/Card.tsx +++ b/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) + '……  '; + return body.substring(0, 130) + "……  [阅读更多]"; } // remove h1 marked_content = marked_content.replace(/.*?<\/h.>/g, ''); - return marked_content.substring(0, 130) + '……  '; + // remove img + marked_content = marked_content.replace(//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 = "……  [阅读更多]" + lastTagContent; + return marked_content + end; } export interface Props { @@ -73,12 +87,13 @@ export default function Card({ id, href, frontmatter, secHeading = true, body, p {/* */} {publishCard && + // 去掉段后间隔
- {/* 解析body为markdown格式，然后去掉解析出来的所有h1标签元素，然后将所有段落解析成自然段

*/} - - - [阅读更多] + {/* 注意需要my-0否则继承 */} +

+

+
}