example 主题

blog.config.js

@@ -18,7 +18,7 @@ const BLOG = {
   FACEBOOK_PAGE_ID: process.env.NEXT_PUBLIC_FACEBOOK_PAGE_ID || '', // Facebook Page ID 來啟用 messenger 聊天功能
   FACEBOOK_APP_ID: process.env.NEXT_PUBLIC_FACEBOOK_APP_ID || '', // Facebook App ID 來啟用 messenger 聊天功能 获取: https://developers.facebook.com/
 
-  THEME: process.env.NEXT_PUBLIC_THEME || 'next', // 主题， 支持 ['next','hexo',"fukasawa','medium']
+  THEME: process.env.NEXT_PUBLIC_THEME || 'next', // 主题， 支持 ['next','hexo',"fukasawa','medium','example'] @see https://preview.tangly1024.com
   THEME_SWITCH: process.env.NEXT_PUBLIC_THEME_SWITCH || false, // 是否显示切换主题按钮
   LANG: 'zh-CN', // e.g 'zh-CN','en-US'  see /lib/lang.js for more.
   HOME_BANNER_IMAGE: './bg_image.jpg', // 首页背景大图，默认文件：/public/bg_image.jpg 。会被Notion中的封面图覆盖。

themes/example/components/ArticleInfo.js

@@ -9,38 +9,40 @@ export const ArticleInfo = (props) => {
   const date = formatDate(post?.date?.start_date || post?.createdTime, locale.LOCALE)
 
   return <section className="flex-wrap flex mt-2 text-gray-400 dark:text-gray-400 font-light leading-8">
-    <div>
-      <Link href={`/category/${post.category}`} passHref>
-        <a className="cursor-pointer text-md mr-2 hover:text-black dark:hover:text-white border-b dark:border-gray-500 border-dashed">
-          <i className="mr-1 fas fa-folder-open" />
-          {post.category}
-        </a>
-      </Link>
-      <span className='mr-2'>|</span>
+        <div>
+            {post?.type[0] !== 'Page' && <>
+                <Link href={`/category/${post.category}`} passHref>
+                    <a className="cursor-pointer text-md mr-2 hover:text-black dark:hover:text-white border-b dark:border-gray-500 border-dashed">
+                        <i className="mr-1 fas fa-folder-open" />
+                        {post.category}
+                    </a>
+                </Link>
+                <span className='mr-2'>|</span>
+            </>}
 
-      {post?.type[0] !== 'Page' && (<>
-        <Link
-          href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
-          passHref
-        >
-          <a className="pl-1 mr-2 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 border-b dark:border-gray-500 border-dashed">
-            {date}
-          </a>
-        </Link>
-        <span className='mr-2'>|</span>
-        <span className='mx-2 text-gray-400 dark:text-gray-500'>
-          {locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedTime}
-        </span>
-        <span className='mr-2'>|</span>
+            {post?.type[0] !== 'Page' && (<>
+                <Link
+                    href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
+                    passHref
+                >
+                    <a className="pl-1 mr-2 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 border-b dark:border-gray-500 border-dashed">
+                        {date}
+                    </a>
+                </Link>
+                <span className='mr-2'>|</span>
+                <span className='mx-2 text-gray-400 dark:text-gray-500'>
+                    {locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedTime}
+                </span>
+                <span className='mr-2'>|</span>
 
-      </>)}
+            </>)}
 
-      <span className="hidden busuanzi_container_page_pv font-light mr-2">
-        <i className='mr-1 fas fa-eye' />
-        &nbsp;
-        <span className="mr-2 busuanzi_value_page_pv" />
-      </span>
-    </div>
+            <span className="hidden busuanzi_container_page_pv font-light mr-2">
+                <i className='mr-1 fas fa-eye' />
+                &nbsp;
+                <span className="mr-2 busuanzi_value_page_pv" />
+            </span>
+        </div>
 
-  </section>
+    </section>
 }

themes/example/components/Nav.js

@@ -1,4 +1,5 @@
 import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
 
 /**
  * 菜单导航
@@ -23,7 +24,11 @@ export const Nav = (props) => {
         <div className="container mx-auto max-w-4xl md:flex justify-between items-center text-sm md:text-md md:justify-start">
             <div className="w-full md:w-2/3 text-center md:text-left py-4 flex flex-wrap justify-center items-stretch md:justify-start md:items-start">
                 {links.map(link => {
-                  return link && <a href={link.to} className="px-2 md:pl-0 md:mr-3 md:pr-3 text-gray-700 no-underline md:border-r border-gray-light">{link.name}</a>
+                  return link && <Link href={link.to}>
+                        <a className="px-2 md:pl-0 md:mr-3 md:pr-3 text-gray-700 no-underline md:border-r border-gray-light">
+                            {link.name}
+                        </a>
+                    </Link>
                 })}
             </div>
             <div className="w-full md:w-1/3 text-center md:text-right">