feat: add blog contents

Author: lightislost

.dumi/theme/constants/index.ts

@@ -29,3 +29,4 @@ export const NavbarEnumsEn = {
   'Overview': '/docs/about/overview',
   'AboutDocs':'/aboutDocs/aboutdocs'
 }
+

.dumi/theme/layouts/DocLayout/index.less

@@ -10,7 +10,6 @@ body {
   background-color: @c-site-bg;
 
   @{dark-selector} & {
-    // background-color: @c-site-bg-dark;
     background: #f8f9fb;
   }
 }
@@ -175,10 +174,6 @@ body {
       color: #b5b5b5;
     }
 
-    // .dumi-default-toc>li>a.active {
-    //   color: #fff !important;
-    // }
-
     .dumi-default-toc>li>a {
       color: #b5b5b5;
     }
@@ -227,17 +222,6 @@ body {
       }
     }
 
-
-    // .ant-select-outlined:not(.ant-select-customize-input) .ant-select-selector {
-    //   background: #070b13;
-    // }
-
-    // .ant-menu-light .ant-menu-item {
-    //   color: #b5b5b5;
-    // }
-    .dumi-default-navbar .ant-menu-light {
-      
-    }
     .ant-menu-light:not(.ant-menu-horizontal) .ant-menu-submenu-title:active {
       background-color: #181d29;
 
@@ -247,18 +231,6 @@ body {
 
     }
 
-    // .ant-menu-light:not(.ant-menu-horizontal) .ant-menu-item:not(.ant-menu-item-selected):hover {
-    //   background-color: #181d29;
-    //   color: #fff;
-    // }
-
-    // .ant-select-single .ant-select-selector {
-    //   color: #fff;
-    // }
-
-    // .ant-select .ant-select-arrow {
-    //   color: #fff;
-    // }
     .ant-menu-light .ant-menu-submenu-title {
       color: #f0f4ff;
 

.dumi/theme/layouts/DocLayout/index.tsx

@@ -11,7 +11,6 @@ import {
 } from 'dumi';
 import Content from 'dumi/theme/slots/Content';
 import ContentFooter from 'dumi/theme/slots/ContentFooter';
-import Features from 'dumi/theme/slots/Features';
 import Footer from 'dumi/theme/slots/Footer';
 import Header from 'dumi/theme/slots/Header';
 import Hero from 'dumi/theme/slots/Hero';
@@ -22,6 +21,8 @@ import './index.less';
 import AboutDocs from 'dumi/theme/slots/AboutDocs';
 import Foot from 'dumi/theme/slots/Foot';
 import Publication from 'dumi/theme/slots/Publication';
+import Blogs from 'dumi/theme/slots/Blogs';
+import BlogDetails from 'dumi/theme/slots/BlogDetails';
 
 const DocLayout: FC = () => {
   const intl = useIntl();
@@ -35,7 +36,9 @@ const DocLayout: FC = () => {
   const doc = pathname.includes("/docs");
   const showSidebar = fm.sidebar !== false && sidebar?.length > 0;
   const publication = pathname.split("/").pop();
+  const blog = pathname.split("/").pop();
   const com = pathname.includes("/contribution");
+  const blogDet = pathname.includes("/blogDetails");
 
   // handle hash change or visit page hash after async chunk loaded
   useEffect(() => {
@@ -78,12 +81,19 @@ const DocLayout: FC = () => {
       </Helmet>
       <Header />
       <Hero />
+      {
+        blogDet && <BlogDetails />
+      }
       {
         about === 'aboutdocs' && <AboutDocs />
       }
+      {
+        blog === 'blogs' && <Blogs />
+      }
       {
         publication === 'publication' && <Publication />
       }
+
       {
         com ? <main>
           {/* 文档页两侧展示 */}
@@ -95,7 +105,6 @@ const DocLayout: FC = () => {
           </Content>
           {fm.toc === 'content' && (
             <div className="dumi-default-doc-layout-toc-wrapper">
-              {/* <h4>大纲</h4> */}
               <Toc />
             </div>
           )}

.dumi/theme/slots/AboutDocs/index.less

@@ -24,7 +24,6 @@
     height: 380px;
     width: 100%;
     box-sizing: border-box;
-    // background: linear-gradient(to top, #30cfd0 0%, #330867 100%);
     background-image: url('https://mdn.alipayobjects.com/huamei_bvbxju/afts/img/A*wCCKR7plqDMAAAAAAAAAAAAADlHYAQ/original');
     background-repeat: no-repeat;
     background-size: cover;
@@ -34,7 +33,6 @@
     justify-content: center;
     flex-direction: column;
 
-
     .bannerContent {
       padding: 0px 24px;
       margin-top: 30px;

.dumi/theme/slots/AutomatedTesting/index.less

@@ -2,12 +2,6 @@
   margin-top: 180px;
   display: flex;
   justify-content: center;
-  position: relative;
-  background-image: url('https://mdn.alipayobjects.com/huamei_bvbxju/afts/img/A*C8E9RZGf5eEAAAAAAAAAAAAADlHYAQ/original');
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
-
 
   .automatedTesting-center {
     display: flex;
@@ -54,6 +48,11 @@
         color: #ffffff;
         letter-spacing: 1px;
         opacity: 0.8;
+        
+        @{dark-selector} & {
+          font-size: 16px;
+          color: #171616;
+        }
       }
 
       .buttom {

.dumi/theme/slots/AutomatedTesting/index.tsx

@@ -1,16 +1,17 @@
-import { useRouteMeta,useLocale } from 'dumi';
+import { useRouteMeta, useLocale, usePrefersColor } from 'dumi';
 import './index.less';
 import React, { type FC } from 'react';
 import { SwapRightOutlined } from '@ant-design/icons';
 
 const AutomatedTesting: FC = () => {
   const { frontmatter } = useRouteMeta();
   const locale = useLocale();
-  
+  const [color] = usePrefersColor();
+
   if (!('AutomatedTesting' in frontmatter)) return null;
   return <div className="automatedTesting">
     <div className="automatedTesting-center">
-      <img src={frontmatter.AutomatedTesting.image} alt="" />
+      <img src={color === 'dark' ? frontmatter.AutomatedTesting.imageColor : frontmatter.AutomatedTesting.image} alt="" />
       <div className="automatedTestingContent">
         <div className="generationTitle">
           {frontmatter.AutomatedTesting.title}
@@ -20,7 +21,7 @@ const AutomatedTesting: FC = () => {
           {frontmatter.AutomatedTesting.description}
         </div>
         <div className="buttom" onClick={() => { window.open(frontmatter.AutomatedTesting.link) }}>
-          {locale.id==='zh-CN'?'了解更多':'Learn more'}
+          {locale.id === 'zh-CN' ? '了解更多' : 'Learn more'}
           <SwapRightOutlined />
         </div>
       </div>