d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-08 07:26:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'tangly1024:main' into main

Browse Source
This commit is contained in:
Vixcity
2023-04-24 11:06:28 +08:00
committed by GitHub
parent d15c463e90 19b1b43c96
commit f9a08aceec
8 changed files with 102 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
README.md
View File

@@ -28,8 +28,14 @@
## 我要如何开始？ ## 我要如何开始？
只需几分钟即可搭建您的个人站点，查看教程 [教程说明](https://tangly1024.com/article/notion-next) 只需几分钟即可搭建您的个人站点：
- [快速部署教程 - 多种方案可供选择](https://tangly1024.com/article/notion-next)
- [个性配置手册 - 如何配置功能插件](https://tangly1024.com/article/notion-next-guide)
- [二次开发指引 - 如何进行本地开发](https://tangly1024.com/article/how-to-develop-with-notion-next)
## 致谢 ## 致谢
感谢Craig Hart发起的Nobelium项目 感谢Craig Hart发起的Nobelium项目

1
blog.config.js
View File

@@ -261,6 +261,7 @@ const BLOG = {
// <---- 评论插件 // <---- 评论插件
// ----> 站点统计 // ----> 站点统计
ANALYTICS_VERCEL: process.env.NEXT_PUBLIC_ANALYTICS_VERCEL || true, // vercel自带的统计 https://vercel.com/docs/concepts/analytics/quickstart https://github.com/tangly1024/NotionNext/issues/897
ANALYTICS_BUSUANZI_ENABLE: true, // 展示网站阅读量、访问数 see http://busuanzi.ibruce.info/ ANALYTICS_BUSUANZI_ENABLE: true, // 展示网站阅读量、访问数 see http://busuanzi.ibruce.info/
ANALYTICS_BAIDU_ID: process.env.NEXT_PUBLIC_ANALYTICS_BAIDU_ID || '', // e.g 只需要填写百度统计的id，[baidu_id] -> https://hm.baidu.com/hm.js?[baidu_id] ANALYTICS_BAIDU_ID: process.env.NEXT_PUBLIC_ANALYTICS_BAIDU_ID || '', // e.g 只需要填写百度统计的id，[baidu_id] -> https://hm.baidu.com/hm.js?[baidu_id]
ANALYTICS_CNZZ_ID: process.env.NEXT_PUBLIC_ANALYTICS_CNZZ_ID || '', // 只需要填写站长统计的id, [cnzz_id] -> https://s9.cnzz.com/z_stat.php?id=[cnzz_id]&web_id=[cnzz_id] ANALYTICS_CNZZ_ID: process.env.NEXT_PUBLIC_ANALYTICS_CNZZ_ID || '', // 只需要填写站长统计的id, [cnzz_id] -> https://s9.cnzz.com/z_stat.php?id=[cnzz_id]&web_id=[cnzz_id]

3
components/CommonScript.js
View File

@@ -1,4 +1,5 @@
import BLOG from '@/blog.config' import BLOG from '@/blog.config'
import { Analytics } from '@vercel/analytics/react'
/** /**
* 第三方代码 统计脚本 * 第三方代码 统计脚本
@@ -7,6 +8,8 @@ import BLOG from '@/blog.config'
*/ */
const CommonScript = () => { const CommonScript = () => {
return (<> return (<>
{BLOG.ANALYTICS_VERCEL && <Analytics />}
{BLOG.COMMENT_DAO_VOICE_ID && (<> {BLOG.COMMENT_DAO_VOICE_ID && (<>
{/* DaoVoice 反馈 */} {/* DaoVoice 反馈 */}
<script async dangerouslySetInnerHTML={{ <script async dangerouslySetInnerHTML={{

1
package.json
View File

@@ -23,6 +23,7 @@
"@giscus/react": "^2.2.6", "@giscus/react": "^2.2.6",
"@next/bundle-analyzer": "^12.1.1", "@next/bundle-analyzer": "^12.1.1",
"@popperjs/core": "^2.9.3", "@popperjs/core": "^2.9.3",
"@vercel/analytics": "^1.0.0",
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"animejs": "^3.2.1", "animejs": "^3.2.1",
"aos": "^3.0.0-beta.6", "aos": "^3.0.0-beta.6",

8
styles/globals.css
View File

@@ -302,4 +302,12 @@ a.avatar-wrapper {
-webkit-line-clamp: 4; -webkit-line-clamp: 4;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
}
.p-3-lines {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
text-overflow: ellipsis;
} }

63
themes/example/components/BlogListPage.js
View File

@@ -3,6 +3,7 @@ import BLOG from '@/blog.config'
import { useGlobal } from '@/lib/global' import { useGlobal } from '@/lib/global'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import Link from 'next/link' import Link from 'next/link'
import CONFIG_EXAMPLE from '../config_example'
export const BlogListPage = props => { export const BlogListPage = props => {
const { page = 1, posts, postCount } = props const { page = 1, posts, postCount } = props
@@ -15,38 +16,50 @@ export const BlogListPage = props => {
const showNext = page < totalPage const showNext = page < totalPage
const pagePrefix = router.asPath.replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '') const pagePrefix = router.asPath.replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '')
const showPageCover = CONFIG_EXAMPLE.POST_LIST_COVER
return ( return (
<div className="w-full md:pr-12 mb-12"> <div className={`w-full ${showPageCover ? 'md:pr-2' : 'md:pr-12'}} mb-12`}>
<div id="container"> <div id="container">
{posts?.map(p => ( {posts?.map(p => (
<article key={p.id} className="mb-12" > <article key={p.id} className={`mb-12 ${showPageCover ? 'flex md:flex-row flex-col-reverse' : ''}`}>
<h2 className="mb-4"> <div className={`${showPageCover ? 'md:w-7/12' : ''}`}>
<Link <h2 className="mb-4">
href={`/${p.slug}`} <Link
className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline"> href={`/${p.slug}`}
{p.title} className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">
</Link> {p.title}
</h2> </Link>
</h2>
<div className="mb-4 text-sm text-gray-700 dark:text-gray-300"> <div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
by <a href="#" className="text-gray-700 dark:text-gray-300">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime} by <a href="#" className="text-gray-700 dark:text-gray-300">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
<span className="font-bold mx-1"> | </span> <span className="font-bold mx-1"> | </span>
<a href={`/category${p.category}`} className="text-gray-700 dark:text-gray-300 hover:underline">{p.category}</a> <a href={`/category${p.category}`} className="text-gray-700 dark:text-gray-300 hover:underline">{p.category}</a>
{/* <span className="font-bold mx-1"> | </span> */} {/* <span className="font-bold mx-1"> | </span> */}
{/* <a href="#" className="text-gray-700">2 Comments</a> */} {/* <a href="#" className="text-gray-700">2 Comments</a> */}
</div> </div>
<p className="text-gray-700 dark:text-gray-400 leading-normal"> <p className="text-gray-700 dark:text-gray-400 leading-normal p-3-lines">
{p.summary} {p.summary}
</p>
{/* 搜索结果 */}
{p.results && (
<p className="p-4-lines mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{p.results.map(r => (
<span key={r}>{r}</span>
))}
</p> </p>
{/* 搜索结果 */}
{p.results && (
<p className="p-4-lines mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{p.results.map(r => (
<span key={r}>{r}</span>
))}
</p>
)}
</div>
{/* 图片封面 */}
{showPageCover && (
<div className="md:w-5/12 w-full overflow-hidden p-1">
<Link href={`${BLOG.SUB_PATH}/${p.slug}`} passHref legacyBehavior>
<div className='h-44 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${p?.page_cover}')` }} />
</Link>
</div>
)} )}
</article> </article>
))} ))}

59
themes/example/components/BlogListScroll.js
View File

@@ -3,6 +3,7 @@ import { useGlobal } from '@/lib/global'
import Link from 'next/link' import Link from 'next/link'
import React from 'react' import React from 'react'
import throttle from 'lodash.throttle' import throttle from 'lodash.throttle'
import CONFIG_EXAMPLE from '../config_example'
export const BlogListScroll = props => { export const BlogListScroll = props => {
const { posts } = props const { posts } = props
@@ -43,30 +44,50 @@ export const BlogListScroll = props => {
} }
}) })
const showPageCover = CONFIG_EXAMPLE.POST_LIST_COVER
return ( return (
<div id="container" className="w-full md:pr-12 mb-12" ref={targetRef}> <div id="container" className="w-full md:pr-12 mb-12" ref={targetRef}>
{postsToShow.map(p => ( {postsToShow.map(p => (
<article key={p.id} className="mb-12" > <article key={p.id} className={`mb-12 ${showPageCover ? 'flex md:flex-row flex-col-reverse' : ''}`}>
<h2 className="mb-4"> <div className={`${showPageCover ? 'md:w-7/12' : ''}`}>
<Link <h2 className="mb-4">
href={`/${p.slug}`} <Link
className="text-black text-xl md:text-2xl no-underline hover:underline"> href={`/${p.slug}`}
{p.title} className="text-black dark:text-gray-100 text-xl md:text-2xl no-underline hover:underline">
</Link> {p.title}
</h2> </Link>
</h2>
<div className="mb-4 text-sm text-gray-700"> <div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
by <a href="#" className="text-gray-700">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime} by <a href="#" className="text-gray-700 dark:text-gray-300">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
<span className="font-bold mx-1"> | </span> <span className="font-bold mx-1"> | </span>
<a href="#" className="text-gray-700">{p.category}</a> <a href={`/category${p.category}`} className="text-gray-700 dark:text-gray-300 hover:underline">{p.category}</a>
<span className="font-bold mx-1"> | </span> {/* <span className="font-bold mx-1"> | </span> */}
{/* <a href="#" className="text-gray-700">2 Comments</a> */} {/* <a href="#" className="text-gray-700">2 Comments</a> */}
</div> </div>
<p className="text-gray-700 leading-normal"> <p className="text-gray-700 dark:text-gray-400 leading-normal p-3-lines">
{p.summary} {p.summary}
</p> </p>
</article> {/* 搜索结果 */}
{p.results && (
<p className="p-4-lines mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{p.results.map(r => (
<span key={r}>{r}</span>
))}
</p>
)}
</div>
{/* 图片封面 */}
{showPageCover && (
<div className="md:w-5/12 w-full overflow-hidden p-1">
<Link href={`${BLOG.SUB_PATH}/${p.slug}`} passHref legacyBehavior>
<div className='h-44 bg-center bg-cover hover:scale-110 duration-200' style={{ backgroundImage: `url('${p?.page_cover}')` }} />
</Link>
</div>
)}
</article>
))} ))}
<div <div

5
themes/example/config_example.js
View File

@@ -3,6 +3,9 @@ const CONFIG_EXAMPLE = {
MENU_CATEGORY: true, // 显示分类 MENU_CATEGORY: true, // 显示分类
MENU_TAG: true, // 显示标签 MENU_TAG: true, // 显示标签
MENU_ARCHIVE: true, // 显示归档 MENU_ARCHIVE: true, // 显示归档
MENU_SEARCH: true // 显示搜索 MENU_SEARCH: true, // 显示搜索
POST_LIST_COVER: true // 列表显示文章封面
} }
export default CONFIG_EXAMPLE export default CONFIG_EXAMPLE