Merge pull request #537 from tangly1024/develop

Develop

components/Busuanzi.js

@@ -4,26 +4,23 @@ import { useGlobal } from '@/lib/global'
 // import { useRouter } from 'next/router'
 import React from 'react'
 
+let path = ''
+
 export default function Busuanzi () {
   const { theme } = useGlobal()
-  const router = useRouter()
-
-  // 切换文章时更新
-  React.useEffect(() => {
-    const busuanziRouteChange = url => {
+  const Router = useRouter()
+  Router.events.on('routeChangeComplete', (url, option) => {
+    if (url !== path) {
+      path = url
       busuanzi.fetch()
     }
-    router.events.on('routeChangeComplete', busuanziRouteChange)
-    return () => {
-      router.events.off('routeChangeComplete', busuanziRouteChange)
-    }
-  }, [router.events])
+  })
 
   // 更换主题时更新
   React.useEffect(() => {
     if (theme) {
       busuanzi.fetch()
     }
-  })
+  }, [theme])
   return null
 }

components/PrismMac.js

@@ -9,26 +9,15 @@ import 'prismjs/plugins/line-numbers/prism-line-numbers.css'
 
 // mermaid图
 import mermaid from 'mermaid'
-import { useGlobal } from '@/lib/global'
-import { useRouter } from 'next/router'
 
 /**
  * @author https://github.com/txs/
  * @returns
  */
 const PrismMac = () => {
-  const router = useRouter()
-  const { isDarkMode } = useGlobal()
-  const scrollTop = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop
-
   React.useEffect(() => {
     renderPrismMac()
-    window.scrollTo(0, scrollTop)
-    router.events.on('routeChangeComplete', renderPrismMac)
-    return () => {
-      router.events.off('routeChangeComplete', renderPrismMac)
-    }
-  }, [isDarkMode])
+  })
   return <></>
 }
 

components/WalineComponent.js

@@ -3,28 +3,34 @@ import { init } from '@waline/client'
 import BLOG from '@/blog.config'
 import { useRouter } from 'next/router'
 
+const path = ''
+let waline = null
 /**
  * @see https://waline.js.org/guide/get-started.html
  * @param {*} props
  * @returns
  */
 const WalineComponent = (props) => {
-  const walineInstanceRef = React.useRef(null)
   const containerRef = React.createRef()
   const router = useRouter()
 
   const updateWaline = url => {
-    walineInstanceRef.current?.update(props)
+    if (url !== path) {
+      waline.update(props)
+    }
   }
 
   React.useEffect(() => {
-    walineInstanceRef.current = init({
-      ...props,
-      el: containerRef.current,
-      serverURL: BLOG.COMMENT_WALINE_SERVER_URL
-    })
-    router.events.on('routeChangeComplete', updateWaline)
+    if (!waline) {
+      waline = init({
+        ...props,
+        el: containerRef.current,
+        serverURL: BLOG.COMMENT_WALINE_SERVER_URL
+      })
+    }
 
+    // 跳转评论
+    router.events.on('routeChangeComplete', updateWaline)
     const anchor = window.location.hash
     if (anchor) {
       // 选择需要观察变动的节点
@@ -54,7 +60,8 @@ const WalineComponent = (props) => {
     }
 
     return () => {
-      walineInstanceRef.current?.destroy()
+      waline.destroy()
+      waline = null
       router.events.off('routeChangeComplete', updateWaline)
     }
   }, [])

lib/busuanzi.js

@@ -55,7 +55,7 @@ bszCaller = {
 const fetch = () => {
   bszTag && bszTag.hides()
   bszCaller.fetch('//busuanzi.ibruce.info/busuanzi?jsonpCallback=BusuanziCallback', function (t) {
-    // console.log('不蒜子请求结果',t)
+    // console.log('不蒜子',t)
     bszTag.texts(t), bszTag.shows()
   })
 }

next.config.js

@@ -17,6 +17,14 @@ module.exports = withBundleAnalyzer({
       'images.unsplash.com'
     ]
   },
+  async rewrites() {
+    return [
+      {
+        source: '/:path*.html',
+        destination: '/:path*'
+      }
+    ]
+  },
   async headers() {
     return [
       {

pages/[...slug].js

@@ -24,6 +24,7 @@ const Slug = props => {
   const [lock, setLock] = React.useState(post?.password && post?.password !== '')
 
   React.useEffect(() => {
+    changeLoadingState(false)
     if (post?.password && post?.password !== '') {
       setLock(true)
     } else {
@@ -32,7 +33,6 @@ const Slug = props => {
   }, [post])
 
   if (!post) {
-    changeLoadingState(true)
     setTimeout(() => {
       if (isBrowser()) {
         const article = document.getElementById('container')
@@ -47,8 +47,6 @@ const Slug = props => {
     return <ThemeComponents.LayoutSlug {...props} showArticleInfo={true} meta={meta} />
   }
 
-  changeLoadingState(false)
-
   /**
    * 验证文章密码
    * @param {*} result

styles/notion.css

@@ -929,7 +929,7 @@ svg.notion-page-icon {
 
 .notion-toggle {
   padding: 3px 2px;
-  max-width: 100%;
+  width: 100%;
 }
 .notion-toggle > summary {
   cursor: pointer;
@@ -1945,4 +1945,8 @@ pre[class*='language-'] {
 
 .notion-asset-wrapper-pdf > div {
     display: block !important;
+}
+
+::selection {
+    @apply bg-blue-500 text-gray-50 !important; 
 }

styles/prism-mac-style.css

@@ -26,16 +26,6 @@
   margin-top: -0.1rem;
 }
 
-pre[class*='language-'].line-numbers {
-  position: relative;
-  padding: 3px; /*修改*/
-  padding-left: 3.8em;
-  counter-reset: linenumber;
-  max-height: 400px; /*修改*/
-  background: black;
-  border: none;
-}
-
 .notion-code > code[class*='language-'],
 pre[class*='language-'] {
   background: black;
@@ -72,8 +62,4 @@ pre[class*='language-'] {
 pre[class*="language-mermaid"] {
   background: transparent !important; 
   @apply dark:bg-gray-200 !important;
-}
-
-.line-numbers-rows > span {
-    height:auto !important;
 }

themes/medium/components/TopNavBar.js

@@ -4,6 +4,9 @@ import LogoBar from './LogoBar'
 import React from 'react'
 import Collapse from '@/components/Collapse'
 import GroupMenu from './GroupMenu'
+import { useGlobal } from '@/lib/global'
+import CONFIG_MEDIUM from '../config_medium'
+
 /**
  * 顶部导航栏 + 菜单
  * @param {} param0
@@ -14,11 +17,23 @@ export default function TopNavBar(props) {
   const router = useRouter()
   const [isOpen, changeShow] = React.useState(false)
 
+  const { locale } = useGlobal()
+
+  const defaultLinks = [
+    { icon: 'fas fa-th', name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MEDIUM.MENU_CATEGORY },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MEDIUM.MENU_TAG },
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MEDIUM.MENU_ARCHIVE },
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MEDIUM.MENU_SEARCH }
+  ]
+
+  const navs = defaultLinks.concat(customNav)
+
   const toggleMenuOpen = () => {
     changeShow(!isOpen)
   }
 
   return <div id='top-nav' className={'sticky top-0 lg:relative w-full z-40 ' + className}>
+        {/* 折叠菜单 */}
         <Collapse type='vertical' isOpen={isOpen} className='md:hidden'>
             <div className='bg-white dark:bg-hexo-black-gray pt-1 py-2 px-5 lg:hidden '>
                 <GroupMenu {...props} />
@@ -26,6 +41,8 @@ export default function TopNavBar(props) {
         </Collapse>
 
         <div className='flex w-full h-12 shadow bg-white dark:bg-hexo-black-gray px-5 items-between'>
+
+            {/* 图标Logo */}
             <LogoBar {...props} />
 
             {/* 右侧功能 */}
@@ -37,7 +54,7 @@ export default function TopNavBar(props) {
 
             {/* 顶部菜单 */}
             <div className='hidden md:flex'>
-                {customNav && customNav.map(link => {
+                {navs && navs.map(link => {
                   if (link.show) {
                     const selected = (router.pathname === link.to) || (router.asPath === link.to)
                     return <Link key={`${link.id}-${link.to}`} title={link.to} href={link.to} >