example主题调整

2026-05-18 07:26:48 +00:00 · 2022-04-27 13:10:38 +08:00
parent d0edae963b
commit d84774bc65
18 changed files with 472 additions and 314 deletions
--- a/themes/example/components/ArticleInfo.js
+++ b/themes/example/components/ArticleInfo.js
@@ -0,0 +1,46 @@
+import Link from 'next/link'
+import { useGlobal } from '@/lib/global'
+import formatDate from '@/lib/formatDate'
+
+export const ArticleInfo = (props) => {
+  const { post } = props
+
+  const { locale } = useGlobal()
+  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>
+
+      {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>
+
+  </section>
+}
--- a/themes/example/components/BlogList.js
+++ b/themes/example/components/BlogList.js
@@ -0,0 +1,55 @@
+
+import BLOG from '@/blog.config'
+import { useGlobal } from '@/lib/global'
+import { useRouter } from 'next/router'
+import Link from 'next/link'
+
+export const BlogList = (props) => {
+  const { posts, postCount } = props
+
+  const { locale } = useGlobal()
+  const router = useRouter()
+  const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
+
+  const page = 1
+  const showNext =
+        page < totalPage &&
+        posts.length === BLOG.POSTS_PER_PAGE &&
+        posts.length < postCount
+
+  const currentPage = +page
+
+  return <div className="w-full md:pr-12 mb-12">
+
+        {posts.map(p => (
+            <article key={p.id} className="mb-12" >
+                <h2 className="mb-4">
+                    <Link href={`/article/${p.slug}`}>
+                        <a className="text-black text-xl md:text-2xl no-underline hover:underline">  {p.title}</a>
+                    </Link>
+                </h2>
+
+                <div className="mb-4 text-sm text-gray-700">
+                    by <a href="#" className="text-gray-700">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
+                    <span className="font-bold mx-1"> | </span>
+                    <a href="#" className="text-gray-700">{p.category}</a>
+                    <span className="font-bold mx-1"> | </span>
+                    {/* <a href="#" className="text-gray-700">2 Comments</a> */}
+                </div>
+
+                <p className="text-gray-700 leading-normal">
+                    {p.summary}
+                </p>
+            </article>
+        ))}
+
+        <div className="flex justify-between text-xs">
+            <Link href="/">
+                <a className={`${currentPage > 1 ? 'bg-black ' : 'bg-gray '} text-white no-underline py-2 px-3 rounded`}>{locale.PAGINATION.PREV}</a>
+            </Link>
+            <Link href={{ pathname: `/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} }}>
+                <a className={`${showNext ? 'bg-black ' : 'bg-gray '} text-white no-underline py-2 px-3 rounded`}>{locale.PAGINATION.NEXT}</a>
+            </Link>
+        </div>
+    </div>
+}
--- a/themes/example/components/Footer.js
+++ b/themes/example/components/Footer.js
@@ -0,0 +1,49 @@
+import BLOG from '@/blog.config'
+
+export const Footer = (props) => {
+  const d = new Date()
+  const currentYear = d.getFullYear()
+  const startYear = BLOG.SINCE && BLOG.SINCE !== currentYear && BLOG.SINCE + '-'
+
+  //     {/* 页脚 */}
+  //     <footer className="font-sans dark:bg-gray-900 flex-shrink-0  justify-center text-center m-auto w-full leading-6 text-sm p-6">
+  //     <i className="fas fa-copyright" /> {`${startYear}${currentYear}`}{' '}
+
+  //     <br />
+  //     <span className="hidden busuanzi_container_site_pv">
+  //       <i className="fas fa-eye" />
+  //       <span className="px-1 busuanzi_value_site_pv"> </span>{' '}
+  //     </span>
+  //     <span className="pl-2 hidden busuanzi_container_site_uv">
+  //       <i className="fas fa-users" />{' '}
+  //       <span className="px-1 busuanzi_value_site_uv"> </span>{' '}
+  //     </span>
+  //     <br />
+  //     <h1>{meta?.title || siteInfo.title}</h1>
+  //     <span className='text-xs font-serif'>
+  //       Powered by{' '}
+  //       <a
+  //         href="https://github.com/tangly1024/NotionNext"
+  //         className="underline dark:text-gray-300"
+  //       >
+  //         NotionNext {BLOG.VERSION}
+  //       </a>
+  //       .
+  //     </span>
+  //   </footer>
+
+  return <footer className="w-full bg-white px-6 border-t">
+        <div className="container mx-auto max-w-4xl py-6 flex flex-wrap md:flex-no-wrap justify-between items-center text-sm">
+            &copy;{`${startYear}${currentYear}`} {BLOG.AUTHOR}. All rights reserved.
+            <div className="pt-4 md:p-0 text-center md:text-right text-xs">
+                {/* 右侧链接 */}
+                {/* <a href="#" className="text-black no-underline hover:underline">Privacy Policy</a> */}
+                {BLOG.BEI_AN && (<a href="https://beian.miit.gov.cn/" className="text-black no-underline hover:underline ml-4">{BLOG.BEI_AN} </a>)}
+                <span className='text-black no-underline ml-4'>
+                    Powered by
+                    <a href="https://github.com/tangly1024/NotionNext" className=' hover:underline'> NotionNext {BLOG.VERSION}  </a>
+                </span>
+            </div>
+        </div>
+    </footer>
+}
--- a/themes/example/components/Header.js
+++ b/themes/example/components/Header.js
@@ -0,0 +1,21 @@
+import Link from 'next/link'
+
+/**
+ * 网站顶部
+ * @returns
+ */
+export const Header = (props) => {
+  const { siteInfo } = props
+
+  return <header className="w-full px-6 bg-white">
+        <div className="container mx-auto max-w-4xl md:flex justify-between items-center">
+            <Link href='/'>
+                <a className="py-6 w-full text-center md:text-left md:w-auto text-gray-dark no-underline flex justify-center items-center">
+                    {siteInfo?.title}
+                </a></Link>
+            <div className="w-full md:w-auto text-center md:text-right">
+                {/* 右侧文字 */}
+            </div>
+        </div>
+    </header>
+}
--- a/themes/example/components/JumpToTopButton.js
+++ b/themes/example/components/JumpToTopButton.js
@@ -0,0 +1,19 @@
+import { useGlobal } from '@/lib/global'
+import React from 'react'
+
+/**
+ * 跳转到网页顶部
+ * 当屏幕下滑500像素后会出现该控件
+ * @param targetRef 关联高度的目标html标签
+ * @param showPercent 是否显示百分比
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const JumpToTopButton = () => {
+  const { locale } = useGlobal()
+  return <div title={locale.POST.TOP} className='cursor-pointer p-2 text-center' onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+    ><i className='fas fa-angle-up text-2xl' />
+    </div>
+}
+
+export default JumpToTopButton
--- a/themes/example/components/Nav.js
+++ b/themes/example/components/Nav.js
@@ -0,0 +1,34 @@
+import { useGlobal } from '@/lib/global'
+
+/**
+ * 菜单导航
+ * @param {*} props
+ * @returns
+ */
+export const Nav = (props) => {
+  const { customNav } = props
+  const { locale } = useGlobal()
+  let links = [
+    { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search' },
+    { icon: 'fas fa-archive', name: locale.NAV.ARCHIVE, to: '/archive' },
+    { icon: 'fas fa-folder', name: locale.COMMON.CATEGORY, to: '/category' },
+    { icon: 'fas fa-tag', name: locale.COMMON.TAGS, to: '/tag' }
+  ]
+
+  if (customNav) {
+    links = links.concat(customNav)
+  }
+
+  return <nav className="w-full bg-white md:pt-0 px-6 relative z-20 border-t border-b border-gray-light">
+        <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>
+                })}
+            </div>
+            <div className="w-full md:w-1/3 text-center md:text-right">
+                {/* <!-- extra links --> */}
+            </div>
+        </div>
+    </nav>
+}
--- a/themes/example/components/SideBar.js
+++ b/themes/example/components/SideBar.js
@@ -0,0 +1,44 @@
+import Live2D from '@/components/Live2D'
+import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
+
+export const SideBar = (props) => {
+  const { locale } = useGlobal()
+  const { latestPosts, categories } = props
+  return <div className="w-full md:w-64 sticky top-8">
+
+        <aside className="rounded shadow overflow-hidden mb-6">
+            <h3 className="text-sm bg-gray-100 text-gray-700 py-3 px-4 border-b">{locale.COMMON.CATEGORY}</h3>
+
+            <div className="p-4">
+                <ul className="list-reset leading-normal">
+                    {categories?.map(category => {
+                      return <Link key={category.name} href={`/category/${category.name}`} passHref>
+                            <li>  <a href="#" className="text-gray-darkest text-sm">{category.name}({category.count})</a></li>
+                        </Link>
+                    })}
+                </ul>
+            </div>
+
+        </aside>
+
+        <aside className="rounded shadow overflow-hidden mb-6">
+            <h3 className="text-sm bg-gray-100 text-gray-700 py-3 px-4 border-b">{locale.COMMON.LATEST_POSTS}</h3>
+
+            <div className="p-4">
+                <ul className="list-reset leading-normal">
+                    {latestPosts?.map(p => {
+                      return <Link key={p.id} href={`/article/${p.slug}`} passHref>
+                            <li>  <a href="#" className="text-gray-darkest text-sm">{p.title}</a></li>
+                        </Link>
+                    })}
+                </ul>
+            </div>
+        </aside>
+
+        <aside className="rounded  overflow-hidden mb-6">
+            <Live2D />
+        </aside>
+
+    </div>
+}
--- a/themes/example/components/Title.js
+++ b/themes/example/components/Title.js
@@ -0,0 +1,19 @@
+import BLOG from '@/blog.config'
+
+/**
+ * 标题栏
+ * @param {*} props
+ * @returns
+ */
+export const Title = (props) => {
+  const { siteInfo, post } = props
+  const title = post?.title || siteInfo?.description
+  const description = post?.description || BLOG.AUTHOR
+
+  return <div className="text-center px-6 py-12 mb-6 bg-gray-100 border-b">
+        <h1 className=" text-xl md:text-4xl pb-4">{title}</h1>
+        <p className="leading-loose text-gray-dark">
+            {description}
+        </p>
+    </div>
+}