Nobelium主题

.env.local

@@ -1,2 +1,27 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=3.6.8
+NEXT_PUBLIC_VERSION=3.6.8
+
+
+
+NEXT_PUBLIC_WALINE_SERVER_URL=https://waline.tangly1024.com/
+NEXT_PUBLIC_NOTION_PROPERTY_PASSWORD=密码
+NEXT_PUBLIC_NOTION_PROPERTY_TYPE=类型
+NEXT_PUBLIC_NOTION_PROPERTY_TITLE=标题
+NEXT_PUBLIC_NOTION_PROPERTY_STATUS=状态
+NEXT_PUBLIC_NOTION_PROPERTY_SUMMARY=摘要
+NEXT_PUBLIC_NOTION_PROPERTY_SLUG=链接
+NEXT_PUBLIC_NOTION_PROPERTY_CATEGORY=分类
+NEXT_PUBLIC_NOTION_PROPERTY_DATE=日期
+NEXT_PUBLIC_NOTION_PROPERTY_TAGS=标签
+NEXT_PUBLIC_NOTION_PROPERTY_ICON=图标
+NOTION_PAGE_ID=29d5a78b858e4a3bbc13e51b5400fb82
+#影院前线NOTION_PAGE_ID=c7c08fdeb087414584a7912b92081c75
+NEXT_PUBLIC_THEME_SWITCH=true
+NEXT_PUBLIC_WALINE_SERVER_URL=https://preview-waline.tangly1024.com
+NEXT_PUBLIC_WALINE_RECENT=true
+NEXT_PUBLIC_THEME=medium
+#VERCEL_ENV=production
+ENABLE_CACHE=true
+
+
+NEXT_PUBLIC_COMMENT_ENV_ID=https://twikoo.tangly1024.com

styles/globals.css

@@ -197,4 +197,12 @@ nav {
 	-webkit-box-orient: vertical;
 	word-wrap: break-word;
 	word-break: break-all;
-}
+}
+
+.nobelium{
+    @apply flex flex-col justify-between
+}
+
+.nobelium .notion-code{
+    @apply max-w-2xl;
+}

themes/index.js

@@ -5,7 +5,8 @@ import * as next from './next'
 import * as fukasawa from './fukasawa'
 import * as hexo from './hexo'
 import * as medium from './medium'
+import * as nobelium from './nobelium'
 import * as example from './example'
 
-export const ALL_THEME = ['hexo', 'next', 'medium', 'fukasawa', 'example']
-export { hexo, next, medium, fukasawa, example }
+export const ALL_THEME = ['hexo', 'next', 'medium', 'fukasawa', 'nobelium', 'example']
+export { hexo, next, medium, fukasawa, nobelium, example }

themes/nobelium/Layout404.js

@@ -0,0 +1,7 @@
+import LayoutBase from './LayoutBase'
+
+export const Layout404 = (props) => {
+  return <LayoutBase {...props}>
+        404 Not found.
+    </LayoutBase>
+}

themes/nobelium/LayoutArchive.js

@@ -0,0 +1,62 @@
+import BLOG from '@/blog.config'
+import Link from 'next/link'
+import LayoutBase from './LayoutBase'
+
+export const LayoutArchive = props => {
+  const { posts } = props
+  const postsSortByDate = Object.create(posts)
+
+  postsSortByDate.sort((a, b) => {
+    const dateA = new Date(a?.date?.start_date || a.createdTime)
+    const dateB = new Date(b?.date?.start_date || b.createdTime)
+    return dateB - dateA
+  })
+
+  const archivePosts = {}
+
+  postsSortByDate.forEach(post => {
+    const date = post.date?.start_date.slice(0, 7)
+    if (archivePosts[date]) {
+      archivePosts[date].push(post)
+    } else {
+      archivePosts[date] = [post]
+    }
+  })
+  return (
+    <LayoutBase {...props}>
+      <div className="mb-10 pb-20 md:py-12 p-3  min-h-screen w-full">
+        {Object.keys(archivePosts).map(archiveTitle => (
+          <div key={archiveTitle}>
+            <div id={archiveTitle} className="pt-16 pb-4 text-3xl dark:text-gray-300" >
+              {archiveTitle}
+            </div>
+
+            <ul>
+              {archivePosts[archiveTitle].map(post => (
+                <li
+                  key={post.id}
+                  className="border-l-2 p-1 text-xs md:text-base items-center  hover:scale-x-105 hover:border-gray-500 dark:hover:border-gray-300 dark:border-gray-400 transform duration-500"
+                >
+                  <div id={post?.date?.start_date}>
+                    <span className="text-gray-400">
+                      {post.date?.start_date}
+                    </span>{' '}
+                    &nbsp;
+                    <Link
+                      href={`${BLOG.SUB_PATH}/${post.slug}`}
+                      passHref
+                    >
+                      <a className="dark:text-gray-400  dark:hover:text-gray-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
+                        {post.title}
+                      </a>
+                    </Link>
+                  </div>
+                </li>
+              ))}
+            </ul>
+          </div>
+        ))}
+      </div>
+    </LayoutBase>
+  )
+}

themes/nobelium/LayoutBase.js

@@ -0,0 +1,41 @@
+import CommonHead from '@/components/CommonHead'
+import React from 'react'
+import Header from './components/Header'
+import { Footer } from './components/Footer'
+import JumpToTopButton from './components/JumpToTopButton'
+/**
+ * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
+
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const LayoutBase = props => {
+  const { children, meta, post } = props
+
+  const fullWidth = post?.fullWidth ?? false
+
+  return (
+        <div className='nobelium dark:text-gray-300  w-full overflow-hidden bg-white dark:bg-black min-h-screen'>
+            <CommonHead meta={meta} />
+
+            {/* 顶栏LOGO */}
+            <Header {...props} />
+
+            <main className={`m-auto flex-grow w-full transition-all ${
+                !fullWidth ? 'max-w-2xl px-4' : 'px-4 md:px-24'
+                }`}>
+
+                {children}
+
+            </main>
+
+            <Footer {...props} />
+
+            <div className='fixed right-4 bottom-4'>
+                <JumpToTopButton />
+            </div>
+        </div>
+  )
+}
+
+export default LayoutBase

themes/nobelium/LayoutCategory.js

@@ -0,0 +1,10 @@
+import BLOG from '@/blog.config'
+import { BlogListPage } from './components/BlogListPage'
+import { BlogListScroll } from './components/BlogListScroll'
+import LayoutBase from './LayoutBase'
+
+export const LayoutCategory = props => {
+  return <LayoutBase {...props}>
+       {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
+    </LayoutBase >
+}

themes/nobelium/LayoutCategoryIndex.js

@@ -0,0 +1,19 @@
+import Link from 'next/link'
+import LayoutBase from './LayoutBase'
+
+export const LayoutCategoryIndex = (props) => {
+  const { categories } = props
+
+  return <LayoutBase {...props}>
+      <div id='category-list' className='duration-200 flex flex-wrap'>
+        {categories && categories.map(category => {
+          return <Link key={category.name} href={`/category/${category.name}`} passHref>
+            <div
+              className={'hover:text-black dark:hover:text-white dark:text-gray-300 dark:hover:bg-gray-600 px-5 cursor-pointer py-2 hover:bg-gray-100'}>
+              <i className='mr-4 fas fa-folder' />{category.name}({category.count})
+            </div>
+          </Link>
+        })}
+      </div>
+  </LayoutBase>
+}

themes/nobelium/LayoutIndex.js

@@ -0,0 +1,13 @@
+
+import BLOG from '@/blog.config'
+import { BlogListPage } from './components/BlogListPage'
+import { BlogListScroll } from './components/BlogListScroll'
+import LayoutBase from './LayoutBase'
+
+export const LayoutIndex = props => {
+  return (
+    <LayoutBase {...props}>
+       {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
+    </LayoutBase>
+  )
+}

themes/nobelium/LayoutPage.js

@@ -0,0 +1,10 @@
+import { BlogListPage } from './components/BlogListPage'
+import LayoutBase from './LayoutBase'
+
+export const LayoutPage = props => {
+  return (
+    <LayoutBase {...props}>
+        <BlogListPage {...props} />
+    </LayoutBase>
+  )
+}

themes/nobelium/LayoutSearch.js

@@ -0,0 +1,54 @@
+import BLOG from '@/blog.config'
+import { BlogListPage } from './components/BlogListPage'
+import { BlogListScroll } from './components/BlogListScroll'
+import { useRouter } from 'next/router'
+import { useEffect } from 'react'
+import SearchInput from './components/SearchInput'
+import Mark from 'mark.js'
+import LayoutBase from './LayoutBase'
+import { isBrowser } from '@/lib/utils'
+
+export const LayoutSearch = props => {
+  const { keyword } = props
+  const router = useRouter()
+
+  useEffect(() => {
+    setTimeout(() => {
+      const container = isBrowser() && document.getElementById('container')
+      if (container && container.innerHTML) {
+        const re = new RegExp(keyword, 'gim')
+        const instance = new Mark(container)
+        instance.markRegExp(re, {
+          element: 'span',
+          className: 'text-red-500 border-b border-dashed'
+        })
+      }
+    }, 100)
+  }, [router.events])
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (keyword) {
+        const targets = document.getElementsByClassName('replace')
+        for (const container of targets) {
+          if (container && container.innerHTML) {
+            const re = new RegExp(`${keyword}`, 'gim')
+            container.innerHTML = container.innerHTML.replace(
+              re,
+              `<span class='text-red-500 border-b border-dashed'>${keyword}</span>`
+            )
+          }
+        }
+      }
+    }, 100)
+  }, [])
+
+  return <LayoutBase {...props}>
+        <div className='pb-12'>
+            <SearchInput {...props} />
+        </div>
+
+        {BLOG.POST_LIST_STYLE === 'page' ? <BlogListPage {...props} /> : <BlogListScroll {...props} />}
+
+    </LayoutBase>
+}

themes/nobelium/LayoutSlug.js

@@ -0,0 +1,31 @@
+import LayoutBase from './LayoutBase'
+import { ArticleLock } from './components/ArticleLock'
+import NotionPage from '@/components/NotionPage'
+import { ArticleInfo } from './components/ArticleInfo'
+import Comment from '@/components/Comment'
+import { ArticleFooter } from './components/ArticleFooter'
+
+export const LayoutSlug = props => {
+  const { post, lock, validPassword } = props
+
+  if (!post) {
+    return <LayoutBase {...props} />
+  }
+
+  return (
+        <LayoutBase {...props}>
+
+                {lock && <ArticleLock validPassword={validPassword} />}
+
+                {!lock && <div id="notion-article" className="px-2">
+                    {post && <>
+                        <ArticleInfo post={post} />
+                        <NotionPage post={post} />
+                        <Comment frontMatter={post}/>
+                        <ArticleFooter />
+                    </>}
+                </div>}
+
+        </LayoutBase>
+  )
+}