feat: 增加一些类名，便于进行自定义 CSS

Mereithhh · May 5, 2023 · 20d7075 · 20d7075
1 parent d8ebe73
commit 20d7075
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 34 deletions.
diff --git a/packages/website/components/Footer/index.tsx b/packages/website/components/Footer/index.tsx
@@ -23,7 +23,7 @@ export default function ({
 }) {
   return (
     <>
-      <footer className="text-center text-sm space-y-1 mt-8 md:mt-12 dark:text-dark">
+      <footer className="text-center text-sm space-y-1 mt-8 md:mt-12 dark:text-dark footer-icp-number">
         {Boolean(ipcNumber) && (
           <p className="">
             ICP 编号:&nbsp;
@@ -37,7 +37,7 @@ export default function ({
           </p>
         )}
         {Boolean(gaBeianNumber) && (
-          <p className="flex justify-center items-center">
+          <p className="flex justify-center items-center footer-gongan-beian">
             公安备案:&nbsp;
             {Boolean(gaBeianLogoUrl) && (
               <ImageBox
@@ -57,7 +57,7 @@ export default function ({
           </p>
         )}
         <RunningTime since={since}></RunningTime>
-        <p className="">
+        <p className="footer-powered-by-vanblog">
           Powered By&nbsp;
           <a
             href="https://vanblog.mereith.com"
@@ -68,10 +68,10 @@ export default function ({
           </a>
         </p>
 
-        <p className="select-none">
+        <p className="select-none footer-copy-right">
           © {new Date(since).getFullYear()} - {new Date().getFullYear()}
         </p>
-        <p className="select-none">
+        <p className="select-none footer-viewer">
           <Viewer></Viewer>
         </p>
       </footer>

diff --git a/packages/website/components/LayoutBody/index.tsx b/packages/website/components/LayoutBody/index.tsx
@@ -5,11 +5,11 @@ export default function (props: {
   return (
     <>
       <div className="flex mx-auto justify-center">
-        <div className="flex-shrink flex-grow md:max-w-3xl xl:max-w-4xl w-full">
+        <div className="flex-shrink flex-grow md:max-w-3xl xl:max-w-4xl w-full vanblog-main">
           {props.children}
         </div>
         <div
-          className={`hidden lg:block flex-shrink-0 flex-grow-0 ${
+          className={`hidden lg:block flex-shrink-0 flex-grow-0 vanblog-sider ${
             Boolean(props.sideBar) ? "w-52" : ""
           }`}
         >

diff --git a/packages/website/components/Markdown/codeBlock.tsx b/packages/website/components/Markdown/codeBlock.tsx
@@ -8,7 +8,9 @@ const codeBlockPlugin = () => (tree) => {
   visit(tree, (node) => {
     if (node.type === "element" && node.tagName === "pre") {
       const oldChildren = JSON.parse(JSON.stringify(node.children));
-      const codeProperties = oldChildren.find((child: any) => child.tagName === "code").properties;
+      const codeProperties = oldChildren.find(
+        (child: any) => child.tagName === "code"
+      ).properties;
       let language = "";
       if (codeProperties.className) {
         for (const each of codeProperties.className) {
@@ -26,47 +28,50 @@ const codeBlockPlugin = () => (tree) => {
         properties: {
           class: "code-copy-btn",
         },
-        children: []
-      }
+        children: [],
+      };
       const languageTag = {
         type: "element",
         tagName: "span",
         properties: {
           class: "language-tag mr-1",
-          style: "line-height: 21px"
+          style: "line-height: 21px",
         },
         children: [
           {
             type: "text",
-            value: language
-          }
-        ]
-      }
+            value: language,
+          },
+        ],
+      };
       // 上方右侧 header
       const headerRight = {
         type: "element",
         tagName: "div",
         properties: {
           class: "header-right flex",
           style: "color: #6f7177",
-
         },
-        children: [
-          languageTag, codeCopyBtn
-        ]
-      }
+        children: [languageTag, codeCopyBtn],
+      };
       // 包裹的 div
       const wrapperDiv = {
         type: "element",
         tagName: "div",
         properties: {
-          class: "code-block-wrapper relative"
+          class: "code-block-wrapper relative",
         },
-        children: [
-          headerRight, ...oldChildren
-        ]
+        children: [headerRight, ...oldChildren],
+      };
+      node.children = [wrapperDiv];
+    }
+    if (node.type === "element" && node.tagName === "code") {
+      if (!node?.properties?.className?.includes("hljs")) {
+        node.properties.className = [
+          "code-inline",
+          ...(node?.properties?.className || []),
+        ];
       }
-      node.children = [wrapperDiv]
     }
   });
 };

diff --git a/packages/website/components/NavBar/index.tsx b/packages/website/components/NavBar/index.tsx
@@ -96,7 +96,13 @@ export default function (props: {
             </div>
             {props.headerLeftContent == "siteLogo" && (
               <div className="hidden md:block transform translate-x-2">
-                <img alt="site logo" src={picUrl} width={52} height={52} className="" />
+                <img
+                  alt="site logo"
+                  src={picUrl}
+                  width={52}
+                  height={52}
+                  className=""
+                />
               </div>
             )}
           </div>
@@ -108,7 +114,7 @@ export default function (props: {
             </Link>
           )}
           {/* 第二个flex */}
-          <div className="flex justify-between h-full flex-grow ">
+          <div className="flex justify-between h-full flex-grow nav-content">
             <div
               style={{ transform: "translateX(30px)" }}
               className="cursor-pointer md:hidden  flex-grow text-center  flex items-center justify-center select-none dark:text-dark"
@@ -122,7 +128,7 @@ export default function (props: {
                 return <Item key={m.id} item={m} />;
               })}
             </ul>
-            <div className="flex">
+            <div className="flex nav-action">
               <div
                 onClick={() => {
                   setShowSearch(true);

diff --git a/packages/website/components/PostCard/index.tsx b/packages/website/components/PostCard/index.tsx
@@ -83,11 +83,11 @@ export default function (props: {
   }, [props.type, props.content]);
 
   return (
-    <div>
+    <div className="post-card-wrapper">
       <div
         style={{ position: "relative" }}
         id="post-card"
-        className="overflow-hidden  bg-white card-shadow py-4 px-1 sm:px-3 md:py-6 md:px-5 dark:bg-dark  dark:nav-shadow-dark"
+        className="overflow-hidden post-card bg-white card-shadow py-4 px-1 sm:px-3 md:py-6 md:px-5 dark:bg-dark  dark:nav-shadow-dark"
       >
         {props.top != 0 && <TopPinIcon></TopPinIcon>}
         <Title
@@ -123,7 +123,7 @@ export default function (props: {
           ) : (
             <>
               {showToc && <TocMobile content={calContent} />}
-                <Markdown content={calContent}></Markdown>
+              <Markdown content={calContent}></Markdown>
             </>
           )}
         </div>
@@ -134,9 +134,7 @@ export default function (props: {
               href={`/post/${props.id}`}
               target={getTarget(props.openArticleLinksInNewWindow)}
             >
-              <div
-                className=" dark:bg-dark dark:hover:bg-dark-light dark:hover:text-dark-r dark:border-dark dark:text-dark hover:bg-gray-800 hover:text-gray-50 border-2 border-gray-800 text-sm md:text-base text-gray-700 px-2 py-1 transition-all rounded"
-              >
+              <div className=" dark:bg-dark dark:hover:bg-dark-light dark:hover:text-dark-r dark:border-dark dark:text-dark hover:bg-gray-800 hover:text-gray-50 border-2 border-gray-800 text-sm md:text-base text-gray-700 px-2 py-1 transition-all rounded">
                 阅读全文
               </div>
             </Link>