From 69ebedc965e8cf07ecf2e2a4dced71bb26a38f0d Mon Sep 17 00:00:00 2001 From: terwer Date: Thu, 4 Aug 2022 21:41:35 +0800 Subject: [PATCH] =?UTF-8?q?feat:#14=20=E4=BB=A3=E7=A0=81=E9=AB=98=E4=BA=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/themes/default/css/post.module.css | 26 ++++ package.json | 1 + pages/index.tsx | 82 ++++++------ pages/post/[slug].tsx | 126 ++++++++++-------- yarn.lock | 5 + 5 files changed, 145 insertions(+), 95 deletions(-) create mode 100644 components/themes/default/css/post.module.css diff --git a/components/themes/default/css/post.module.css b/components/themes/default/css/post.module.css new file mode 100644 index 00000000..5bdf6a52 --- /dev/null +++ b/components/themes/default/css/post.module.css @@ -0,0 +1,26 @@ +.postBody { + +} + +.postBody p code { + border: solid 1px; + border-radius: 4px; + padding: 1px 2px; + margin: 0 2px; +} + +.postBody pre { +} + +.postBody pre code { + font-family: -apple-system, Menlo, Microsoft Yahei, Consolas, Courier New, monospace, Monaco; + font-size: 14px; + display: block; + overflow-x: auto; + padding: 0.5em; + line-height: 1.6; + color: black; + background-color: #f5f5f5 !important; + border: 1px solid #ccc !important; + border-radius: 3px !important; +} \ No newline at end of file diff --git a/package.json b/package.json index 9fd0ddc2..5efe408d 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@fortawesome/react-fontawesome": "^0.2.0", "bootstrap": "^5.2.0", "clsx": "^1.2.1", + "highlight.js": "^11.6.0", "metaweblog-api": "^1.2.0", "next": "12.2.3", "react": "18.2.0", diff --git a/pages/index.tsx b/pages/index.tsx index 63b07e04..ca65dbac 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -24,48 +24,16 @@ export default Home // https://github.com/siyuan-note/siyuan/blob/master/API_zh_CN.md#%E9%89%B4%E6%9D%83 // https://github.com/vercel/next.js/blob/canary/examples/cms-wordpress/pages/index.js -// export const getServerSideProps: GetServerSideProps = async (context) => { -// const query = context.query || {} -// if (query.t instanceof Array) { -// throw new Error("参数类型错误") -// } -// -// let cfg: SiteConfig = new SiteConfig() -// let result: Array = [] -// const type = query.t || API_TYPE_CONSTANTS.API_TYPE_SIYUAN -// const pageno = query.p -// -// const api = new API(type) -// -// // 配置 -// const cfgs = await api.getUsersBlogs() || [] -// if (cfgs.length > 0) { -// cfg.userBlog = cfgs[0] -// } -// // 文章 -// if (pageno) { -// let num = 1 -// if (typeof pageno === "string") { -// num = parseInt(pageno) || 1 -// } -// result = await api.getRecentPosts(10, num - 1) -// } else { -// result = await api.getRecentPosts(10) -// } -// -// return { -// props: { -// type: type, -// layoutCfg: JSON.parse(JSON.stringify(cfg)), -// posts: JSON.parse(JSON.stringify(result)) -// } -// } -// } +export const getServerSideProps: GetServerSideProps = async (context) => { + const query = context.query || {} + if (query.t instanceof Array) { + throw new Error("参数类型错误") + } -export const getStaticProps: GetStaticProps = async (context) => { let cfg: SiteConfig = new SiteConfig() let result: Array = [] - const type = API_TYPE_CONSTANTS.API_TYPE_SIYUAN + const type = query.t || API_TYPE_CONSTANTS.API_TYPE_SIYUAN + const pageno = query.p const api = new API(type) @@ -75,7 +43,15 @@ export const getStaticProps: GetStaticProps = async (context) => { cfg.userBlog = cfgs[0] } // 文章 - result = await api.getRecentPosts(10) + if (pageno) { + let num = 1 + if (typeof pageno === "string") { + num = parseInt(pageno) || 1 + } + result = await api.getRecentPosts(10, num - 1) + } else { + result = await api.getRecentPosts(10) + } return { props: { @@ -84,4 +60,28 @@ export const getStaticProps: GetStaticProps = async (context) => { posts: JSON.parse(JSON.stringify(result)) } } -} \ No newline at end of file +} + +// export const getStaticProps: GetStaticProps = async (context) => { +// let cfg: SiteConfig = new SiteConfig() +// let result: Array = [] +// const type = API_TYPE_CONSTANTS.API_TYPE_SIYUAN +// +// const api = new API(type) +// +// // 配置 +// const cfgs = await api.getUsersBlogs() || [] +// if (cfgs.length > 0) { +// cfg.userBlog = cfgs[0] +// } +// // 文章 +// result = await api.getRecentPosts(10) +// +// return { +// props: { +// type: type, +// layoutCfg: JSON.parse(JSON.stringify(cfg)), +// posts: JSON.parse(JSON.stringify(result)) +// } +// } +// } \ No newline at end of file diff --git a/pages/post/[slug].tsx b/pages/post/[slug].tsx index fb1dff5f..fffbcdd5 100644 --- a/pages/post/[slug].tsx +++ b/pages/post/[slug].tsx @@ -1,10 +1,14 @@ -import {GetStaticProps, NextPage} from "next"; +import {GetServerSideProps, GetStaticProps, NextPage} from "next"; import {Post} from "../../lib/common/post"; import {API} from "../../lib/api"; import {API_TYPE_CONSTANTS} from "../../lib/constants"; import styles from "../../components/themes/default/css/layout.module.css"; +import postStyles from "../../components/themes/default/css/post.module.css" import SiteConfig from "../../lib/common/siteconfig"; import DefaultLayout from "../../components/themes/default/defaultLayout"; +import {useEffect} from "react"; +import hljs from 'highlight.js' +import 'highlight.js/styles/vs.css' type Props = { type: string, @@ -14,6 +18,20 @@ type Props = { const PostDetail: NextPage = (props, context) => { + useEffect(() => { + // 配置 highlight.js + hljs.configure({ + // 忽略未经转义的 HTML 字符 + ignoreUnescapedHTML: true + }) + // 获取到内容中所有的code标签 + const codes = document.querySelectorAll('pre code') + codes.forEach((el) => { + // 让code进行高亮 + hljs.highlightElement(el as HTMLElement) + }) + }, []) + function createMarkup() { return {__html: props.post?.description}; } @@ -22,7 +40,7 @@ const PostDetail: NextPage = (props, context) => {

{props.post?.mt_keywords}

-
+
) @@ -30,46 +48,12 @@ const PostDetail: NextPage = (props, context) => { export default PostDetail -// export const getServerSideProps: GetServerSideProps = async (context) => { -// const query = context.query || {} -// if (query.t instanceof Array) { -// throw new Error("参数类型错误") -// } -// -// const slug = context?.params?.slug -// if (!slug || typeof slug !== "string") { -// throw new Error("文章路径错误") -// } -// let smartSlug = "" -// if (slug.indexOf(".html") > -1) { -// smartSlug = slug.replace(".html", "") -// } -// -// const type = query.t || API_TYPE_CONSTANTS.API_TYPE_SIYUAN -// -// const api = new API(type) -// -// let cfg: SiteConfig = new SiteConfig() -// // 配置 -// const cfgs = await api.getUsersBlogs() || [] -// if (cfgs.length > 0) { -// cfg.userBlog = cfgs[0] -// } -// -// // 文章 -// log.logInfo("smartSlug=>", smartSlug) -// const post = await api.getPost(smartSlug) -// -// return { -// props: { -// type: type, -// propCfg: JSON.parse(JSON.stringify(cfg)), -// post: JSON.parse(JSON.stringify(post)) -// } -// } -// } +export const getServerSideProps: GetServerSideProps = async (context) => { + const query = context.query || {} + if (query.t instanceof Array) { + throw new Error("参数类型错误") + } -export const getStaticProps: GetStaticProps = async (context) => { const slug = context?.params?.slug if (!slug || typeof slug !== "string") { throw new Error("文章路径错误") @@ -79,7 +63,8 @@ export const getStaticProps: GetStaticProps = async (context) => { smartSlug = slug.replace(".html", "") } - const type = API_TYPE_CONSTANTS.API_TYPE_SIYUAN + const type = query.t || API_TYPE_CONSTANTS.API_TYPE_SIYUAN + const api = new API(type) let cfg: SiteConfig = new SiteConfig() @@ -102,15 +87,48 @@ export const getStaticProps: GetStaticProps = async (context) => { } } -export async function getStaticPaths() { - const type = API_TYPE_CONSTANTS.API_TYPE_SIYUAN - const api = new API(type) - const result = await api.getRecentPosts(10) - - // 静态路径 - const fpath = result.map(({postid}) => `/post/${postid}.html`) || []; - return { - paths: fpath, - fallback: true, - } -} \ No newline at end of file +// export const getStaticProps: GetStaticProps = async (context) => { +// const slug = context?.params?.slug +// if (!slug || typeof slug !== "string") { +// throw new Error("文章路径错误") +// } +// let smartSlug = "" +// if (slug.indexOf(".html") > -1) { +// smartSlug = slug.replace(".html", "") +// } +// +// const type = API_TYPE_CONSTANTS.API_TYPE_SIYUAN +// const api = new API(type) +// +// let cfg: SiteConfig = new SiteConfig() +// // 配置 +// const cfgs = await api.getUsersBlogs() || [] +// if (cfgs.length > 0) { +// cfg.userBlog = cfgs[0] +// } +// +// // 文章 +// // log.logInfo("smartSlug=>", smartSlug) +// const post = await api.getPost(smartSlug) +// +// return { +// props: { +// type: type, +// propCfg: JSON.parse(JSON.stringify(cfg)), +// post: JSON.parse(JSON.stringify(post)) +// } +// } +// } +// +// export async function getStaticPaths() { +// const type = API_TYPE_CONSTANTS.API_TYPE_SIYUAN +// const api = new API(type) +// const result = await api.getRecentPosts(10) +// +// // 静态路径 +// const fpath = result.map(({postid}) => `/post/${postid}.html`) || []; +// return { +// paths: fpath, +// fallback: true, +// } +// } \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index d0214c1e..9142bc9b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1072,6 +1072,11 @@ has@^1.0.3: dependencies: function-bind "^1.1.1" +highlight.js@^11.6.0: + version "11.6.0" + resolved "https://registry.npmmirror.com/highlight.js/-/highlight.js-11.6.0.tgz#a50e9da05763f1bb0c1322c8f4f755242cff3f5a" + integrity sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw== + ignore@^5.2.0: version "5.2.0" resolved "https://registry.npmmirror.com/ignore/-/ignore-5.2.0.tgz#6d3bac8fa7fe0d45d9f9be7bac2fc279577e345a"