Merge pull request #1575 from emengweb/main

Fix Add NAV Theme card Add Default Image
tangly1024 · Jan 30, 2024 · 51d8c19 · 51d8c19
2 parents 0478320 + 707ff89
commit 51d8c19
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 37 deletions.
diff --git a/components/Utterances.js b/components/Utterances.js
@@ -15,8 +15,11 @@ const Utterances = ({ issueTerm, layout }) => {
   const [isLoading, setLoading] = useState(true);
 
   useEffect(() => {
-    const script = document.createElement('script');
     const anchor = document.getElementById('comments');
+    if (!anchor) {
+      return
+    }
+    const script = document.createElement('script');
     script.onload = () => setLoading(false);
     script.setAttribute('src', 'https://utteranc.es/client.js');
     script.setAttribute('crossorigin', 'anonymous');
@@ -25,7 +28,7 @@ const Utterances = ({ issueTerm, layout }) => {
     script.setAttribute('issue-term', 'title');
     // 初始主题
     script.setAttribute('theme', isDarkMode ? 'github-dark' : 'github-light');
-    anchor.appendChild(script);
+    anchor?.appendChild(script);
 
     return () => {
       // anchor.innerHTML = ''

diff --git a/themes/nav/components/BlogPostCard.js b/themes/nav/components/BlogPostCard.js
@@ -6,7 +6,8 @@ import { siteConfig } from '@/lib/config'
 const BlogPostCard = ({ post, className }) => {
   const router = useRouter()
   const currentSelected = router.asPath.split('?')[0] === '/' + post.slug
-  const pageIcon = post.pageIcon.indexOf('amazonaws.com') !== -1 ? post.pageIcon + '&width=88' : post.pageIcon
+  let pageIcon = post.pageIcon !== '' ? post.pageIcon : siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
+  pageIcon = post.pageIcon.indexOf('amazonaws.com') !== -1 ? post.pageIcon + '&width=88' : post.pageIcon
   return (
     <Link href={`${siteConfig('SUB_PATH', '')}/${removeHttp(post.slug)}`} target={(checkRemoveHttp(post.slug) ? '_blank' : '_self')} passHref>
         <div key={post.id} className={`${className} h-full rounded-2xl p-4 dark:bg-neutral-800 cursor-pointer bg-white hover:bg-white dark:hover:bg-gray-800 ${currentSelected ? 'bg-green-50 text-green-500' : ''}`}>

diff --git a/themes/nav/components/BlogPostItem.js b/themes/nav/components/BlogPostItem.js
@@ -10,10 +10,6 @@ import BlogPostCard from './BlogPostCard'
  */
 const BlogPostItem = (props) => {
   const { group } = props
-
-  console.log('####### group')
-  console.log(group)
-
   if (group?.category) {
     return <>
             <div id={group?.category} className='category  text-lg font-normal pt-9 pb-4 first:pt-4 select-none flex justify-between font-sans text-neutral-800 dark:text-neutral-400 p-2' key={group?.category}>

diff --git a/themes/nav/components/MenuItem.js b/themes/nav/components/MenuItem.js
@@ -20,6 +20,10 @@ export const MenuItem = ({ link }) => {
     return null
   }
 
+  // #号加标题  快速跳转到指定锚点
+  const url = link?.to && link?.to !=='#' ?  link.to : ('#' + link.name)
+  console.log(link,url , '#' + link.name)
+
   return <>
         {/* 菜单 */}
         <div
@@ -36,7 +40,7 @@ export const MenuItem = ({ link }) => {
                     </div>
                 </>)
               : (
-                    <Link href={link?.to} className='dark:text-neutral-400 dark:hover:text-white font-bold w-full display-block'>
+                    <Link href={url} className='dark:text-neutral-400 dark:hover:text-white font-bold w-full display-block'>
                         {link?.icon && <i className={`text-base ${link?.icon}`} />}{link?.title}
                     </Link>
                 )
@@ -48,13 +52,15 @@ export const MenuItem = ({ link }) => {
         {link?.subMenus && (
             <Collapse isOpen={isOpen} key='collapse'>
                 {
-                    link?.subMenus?.map((sLink, index) => (
-                        <div key={index} className='nav-submenu'>
-                            <Link href={sLink?.to}>
-                                <span className='dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white text-xs font-bold'><i className={`text-xs mr-1 ${sLink?.icon ? sLink?.icon : 'fas fa-hashtag'}`} />{sLink.title}</span>
-                            </Link>
-                        </div>
-                    ))
+                    link?.subMenus?.map((sLink, index) => {
+                        // #号加标题  快速跳转到指定锚点
+                        const sUrl =  sLink?.to && sLink?.to.length !=='#' ?  sLink.to : ('#' + sLink.name)
+                        return <div key={index} className='nav-submenu'>
+                        <Link href={sUrl}>
+                            <span className='dark:text-neutral-400 text-gray-500 hover:text-black dark:hover:text-white text-xs font-bold'><i className={`text-xs mr-1 ${sLink?.icon ? sLink?.icon : 'fas fa-hashtag'}`} />{sLink.title}</span>
+                        </Link>
+                    </div>
+                    })
                 }
 
             </Collapse>

diff --git a/themes/nav/components/SearchInput.js b/themes/nav/components/SearchInput.js
@@ -40,7 +40,7 @@ const SearchInput = ({ currentSearch, cRef, className }) => {
     // }
     for (let i = filterAllNavPages.length - 1; i >= 0; i--) {
       const post = filterAllNavPages[i]
-      const articleInfo = post.title + ''
+      const articleInfo = post.title + ' ' + post.summary
       const hit = articleInfo.toLowerCase().indexOf(keyword.toLowerCase()) > -1
       if (!hit) {
         // 删除

diff --git a/themes/nav/components/TopNavBar.js b/themes/nav/components/TopNavBar.js
@@ -52,7 +52,7 @@ export default function TopNavBar(props) {
   return (
         <div id='top-nav' className={'fixed top-0 w-full z-40 bg-white dark:bg-neutral-900 shadow bg-opacity-70 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg  md:shadow-none pb-2 md:pb-0 ' + className}>
             {/* 图标Logo */}
-            <div className='fixed top-0 left-5 md:left-4 z-40 pt-3 md:pt-4'>
+            <div className='fixed block md:hidden top-0 left-5 md:left-4 z-40 pt-3 md:pt-4'>
                 <LogoBar {...props} />
             </div>
 

diff --git a/themes/nav/index.js b/themes/nav/index.js
@@ -30,9 +30,10 @@ import BlogPostListAll from './components/BlogPostListAll'
 import BlogPostCard from './components/BlogPostCard'
 import Link from 'next/link'
 import dynamic from 'next/dynamic'
-
 import { MenuItem } from './components/MenuItem'
+import LogoBar from './components/LogoBar'
 import { siteConfig } from '@/lib/config'
+
 const WWAds = dynamic(() => import('@/components/WWAds'), { ssr: false })
 
 // 主题全局变量
@@ -75,7 +76,7 @@ const LayoutBase = (props) => {
             <Style/>
 
             {/* 主题样式根基 */}
-            <div id='theme-onenav' className=' dark:bg-hexo-black-gray w-full h-screen min-h-screen justify-center dark:text-gray-300'>
+            <div id='theme-onenav' className='dark:bg-hexo-black-gray w-full h-screen min-h-screen justify-center dark:text-gray-300'>
 
                 {/* 端顶部导航栏 */}
                 <TopNavBar {...props} />
@@ -86,7 +87,12 @@ const LayoutBase = (props) => {
                     {/* 左侧推拉抽屉 */}
                     <div className={'font-sans hidden md:block dark:border-transparent relative z-10 mx-4 w-52 max-h-full pb-44'}>
 
-                        <div className='mt-20 main-menu z-20 pl-9 pr-7 pb-5 sticky pt-1 top-20 overflow-y-scroll h-fit max-h-full scroll-hidden bg-white dark:bg-neutral-800 rounded-xl '>
+                        {/* 图标Logo */}
+                        <div className='hidden md:block w-full top-0 left-5 md:left-4 z-40 pt-3 md:pt-4'>
+                            <LogoBar {...props} />
+                        </div>
+                        <div className='main-menu z-20 pl-9 pr-7 pb-5 sticky pt-1 top-20 overflow-y-scroll h-fit max-h-full scroll-hidden bg-white dark:bg-neutral-800 rounded-xl '>
+
                            {/* 嵌入 */}
                             {slotLeft}
 
@@ -214,33 +220,33 @@ const LayoutSlug = (props) => {
             {/* 文章锁 */}
             {lock && <ArticleLock validPassword={validPassword} />}
 
-            {!lock && <div id='container'>
+              {!lock && <div id='container'>
 
-                {/* title */}
-                <h1 className="text-3xl pt-4 md:pt-12  dark:text-gray-300">{post?.title}</h1>
+                  {/* title */}
+                  <h1 className="text-3xl pt-4 md:pt-12  dark:text-gray-300">{post?.title}</h1>
 
-                {/* Notion文章主体 */}
-                {post && (<section id="article-wrapper" className="px-1">
-                    <NotionPage post={post} />
+                  {/* Notion文章主体 */}
+                  {post && (<section id="article-wrapper" className="px-1">
+                      <NotionPage post={post} />
 
                     {/* 分享 */}
                     {/* <ShareBar post={post} /> */}
                     {/* 文章分类和标签信息 */}
                     <div className='flex justify-between'>
-                        {siteConfig('POST_DETAIL_CATEGORY', null, CONFIG) && post?.category && <CategoryItem category={post.category} />}
+                        {CONFIG.POST_DETAIL_CATEGORY && post?.category && <CategoryItem category={post.category} />}
                         <div>
-                            {siteConfig('POST_DETAIL_TAG', null, CONFIG) && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
+                            {CONFIG.POST_DETAIL_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
                         </div>
                     </div>
 
-                    {/* 上一篇、下一篇文章 */}
-                    {/* {post?.type === 'Post' && <ArticleAround prev={prev} next={next} />} */}
+                      {/* 上一篇、下一篇文章 */}
+                      {/* {post?.type === 'Post' && <ArticleAround prev={prev} next={next} />} */}
 
-                    <AdSlot />
-                    <WWAds className='w-full' orientation='horizontal'/>
+                      <AdSlot />
+                      <WWAds className='w-full' orientation='horizontal'/>
 
-                    <Comment frontMatter={post} />
-                </section>)}
+                      <Comment frontMatter={post} />
+                  </section>)}
 
                 <TocDrawer {...props} />
             </div>}
@@ -265,7 +271,8 @@ const LayoutSearch = (props) => {
  * @returns
  */
 const LayoutArchive = (props) => {
-  const { archivePosts } = props
+  return <div {...props}></div>
+  // const { archivePosts } = props
 
   return <>
         <div className="mb-10 pb-20 md:py-12 py-3  min-h-full">
@@ -318,8 +325,9 @@ const LayoutCategoryIndex = (props) => {
  * 标签列表
  */
 const LayoutTagIndex = (props) => {
-  const { tagOptions } = props
-  const { locale } = useGlobal()
+  return <div {...props}></div>
+  // const { tagOptions } = props
+  // const { locale } = useGlobal()
 
   return <>
      <div className="bg-white dark:bg-gray-700 py-10">