d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-13 23:16:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add facebook Open Graph Url and image. Fix PATH env conflict with Vercel environment

Browse Source
This commit is contained in:
txs
2022-04-04 08:13:18 +08:00
parent 305a476f6f
commit ebdaf4273f
33 changed files with 901 additions and 469 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
blog.config.js
View File

@@ -5,7 +5,8 @@ const BLOG = {
LINK: 'https://tangly1024.com', // 网站地址
AVATAR: '/avatar.png', // 个人头像 默认取public目录下的avatar.png
KEYWORDS: 'Notion, 博客', // 网站关键词 英文逗号隔开
NOTION_PAGE_ID: process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5', // Important page_id！！！Duplicate Template from https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5
NOTION_PAGE_ID:
process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5', // Important page_id！！！Duplicate Template from https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5
NOTION_ACCESS_TOKEN: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
DEBUG: process.env.NEXT_PUBLIC_DEBUG || false, // 是否显示调试按钮
@@ -17,10 +18,11 @@ const BLOG = {
BEI_AN: process.env.NEXT_PUBLIC_BEI_AN || '', // 备案号 闽ICP备XXXXXXX
APPEARANCE: 'light', // ['light', 'dark', 'auto'], // light 日间模式 ， dark夜间模式， auto根据时间和主题自动夜间模式
FONT: 'font-serif tracking-wider subpixel-antialiased', // 文章字体 ['font-sans', 'font-serif', 'font-mono'] @see https://www.tailwindcss.cn/docs/font-family
FONT_AWESOME_PATH: 'https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css', // 图标库CDN ，国内推荐BootCDN，国外推荐 CloudFlare https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css
FONT_AWESOME_PATH:
'https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css', // 图标库CDN ，国内推荐BootCDN，国外推荐 CloudFlare https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css
BACKGROUND_LIGHT: '#eeeeee', // use hex value, don't forget '#' e.g #fffefc
BACKGROUND_DARK: '#000000', // use hex value, don't forget '#'
PATH: '', // leave this empty unless you want to deploy in a folder
SUB_PATH: '', // leave this empty unless you want to deploy in a folder
POST_LIST_STYLE: 'page', // ['page','scroll] 文章列表样式:页码分页、单页滚动加载
POST_LIST_PREVIEW: process.env.NEXT_PUBLIC_POST_PREVIEW || 'false', // 是否在列表加载文章预览
@@ -41,7 +43,8 @@ const BLOG = {
// 悬浮挂件
WIDGET_PET: process.env.NEXT_PUBLIC_WIDGET_PET || true, // 是否显示宠物挂件
WIDGET_PET_LINK: 'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models
WIDGET_PET_LINK:
'https://cdn.jsdelivr.net/npm/live2d-widget-model-wanko@1.0.5/assets/wanko.model.json', // 挂件模型地址 @see https://github.com/xiazeyu/live2d-widget-models
WIDGET_PET_SWITCH_THEME: true, // 点击宠物挂件切换博客主题
// 评论互动 可同时开启多个支持 GISCUS CUSDIS UTTERRANCES GITALK
@@ -49,27 +52,40 @@ const BLOG = {
// giscus @see https://giscus.app/
COMMENT_GISCUS_REPO: process.env.NEXT_PUBLIC_COMMENT_GISCUS_REPO || '', // 你的Github仓库名 e.g 'tangly1024/NotionNext'
COMMENT_GISCUS_REPO_ID: process.env.NEXT_PUBLIC_COMMENT_GISCUS_REPO_ID || '', // 你的Github Repo ID e.g ( 設定完 giscus 即可看到 )
COMMENT_GISCUS_CATEGORY_ID: process.env.NEXT_PUBLIC_COMMENT_GISCUS_CATEGORY_ID || '', // 你的Github Discussions 內的 Category ID ( 設定完 giscus 即可看到 )
COMMENT_GISCUS_MAPPING: process.env.NEXT_PUBLIC_COMMENT_GISCUS_MAPPING || 'pathname', // 你的Github Discussions 使用哪種方式來標定文章, 預設 'pathname'
COMMENT_GISCUS_REACTIONS_ENABLED: process.env.NEXT_PUBLIC_COMMENT_GISCUS_REACTIONS_ENABLED || '1', // 你的 Giscus 是否開啟文章表情符號 '1' 開啟 "0" 關閉 預設開啟
COMMENT_GISCUS_EMIT_METADATA: process.env.NEXT_PUBLIC_COMMENT_GISCUS_EMIT_METADATA || '0', // 你的 Giscus 是否提取 Metadata '1' 開啟 '0' 關閉 預設關閉
COMMENT_GISCUS_INPUT_POSITION: process.env.NEXT_PUBLIC_COMMENT_GISCUS_INPUT_POSITION || 'bottom', // 你的 Giscus 發表留言位置 'bottom' 尾部 'top' 頂部, 預設 'bottom'
COMMENT_GISCUS_CATEGORY_ID:
process.env.NEXT_PUBLIC_COMMENT_GISCUS_CATEGORY_ID || '', // 你的Github Discussions 內的 Category ID ( 設定完 giscus 即可看到 )
COMMENT_GISCUS_MAPPING:
process.env.NEXT_PUBLIC_COMMENT_GISCUS_MAPPING || 'pathname', // 你的Github Discussions 使用哪種方式來標定文章, 預設 'pathname'
COMMENT_GISCUS_REACTIONS_ENABLED:
process.env.NEXT_PUBLIC_COMMENT_GISCUS_REACTIONS_ENABLED || '1', // 你的 Giscus 是否開啟文章表情符號 '1' 開啟 "0" 關閉 預設開啟
COMMENT_GISCUS_EMIT_METADATA:
process.env.NEXT_PUBLIC_COMMENT_GISCUS_EMIT_METADATA || '0', // 你的 Giscus 是否提取 Metadata '1' 開啟 '0' 關閉 預設關閉
COMMENT_GISCUS_INPUT_POSITION:
process.env.NEXT_PUBLIC_COMMENT_GISCUS_INPUT_POSITION || 'bottom', // 你的 Giscus 發表留言位置 'bottom' 尾部 'top' 頂部, 預設 'bottom'
COMMENT_GISCUS_LANG: process.env.NEXT_PUBLIC_COMMENT_GISCUS_LANG || 'zh-CN', // 你的 Giscus 語言 e.g 'en', 'zh-TW', 'zh-CN', 預設 'en'
COMMENT_GISCUS_LOADING: process.env.NEXT_PUBLIC_COMMENT_GISCUS_LOADING || 'lazy', // 你的 Giscus 載入是否漸進式載入, 預設 'lazy'
COMMENT_GISCUS_CROSSORIGIN: process.env.NEXT_PUBLIC_COMMENT_GISCUS_CROSSORIGIN || 'anonymous', // 你的 Giscus 可以跨網域, 預設 'anonymous'
COMMENT_GISCUS_LOADING:
process.env.NEXT_PUBLIC_COMMENT_GISCUS_LOADING || 'lazy', // 你的 Giscus 載入是否漸進式載入, 預設 'lazy'
COMMENT_GISCUS_CROSSORIGIN:
process.env.NEXT_PUBLIC_COMMENT_GISCUS_CROSSORIGIN || 'anonymous', // 你的 Giscus 可以跨網域, 預設 'anonymous'
COMMENT_CUSDIS_APP_ID: process.env.NEXT_PUBLIC_COMMENT_CUSDIS_APP_ID || '', // data-app-id 36位 see https://cusdis.com/
COMMENT_CUSDIS_HOST: process.env.NEXT_PUBLIC_COMMENT_CUSDIS_HOST || 'https://cusdis.com', // data-host, change this if you're using self-hosted version
COMMENT_CUSDIS_SCRIPT_SRC: process.env.NEXT_PUBLIC_COMMENT_CUSDIS_SCRIPT_SRC || 'https://cusdis.com/js/cusdis.es.js', // change this if you're using self-hosted version
COMMENT_CUSDIS_HOST:
process.env.NEXT_PUBLIC_COMMENT_CUSDIS_HOST || 'https://cusdis.com', // data-host, change this if you're using self-hosted version
COMMENT_CUSDIS_SCRIPT_SRC:
process.env.NEXT_PUBLIC_COMMENT_CUSDIS_SCRIPT_SRC ||
'https://cusdis.com/js/cusdis.es.js', // change this if you're using self-hosted version
COMMENT_UTTERRANCES_REPO: process.env.NEXT_PUBLIC_COMMENT_UTTERRANCES_REPO || '', // 你的代码仓库名， 例如我是 'tangly1024/NotionNext'； 更多文档参考 https://utteranc.es/
COMMENT_UTTERRANCES_REPO:
process.env.NEXT_PUBLIC_COMMENT_UTTERRANCES_REPO || '', // 你的代码仓库名， 例如我是 'tangly1024/NotionNext'； 更多文档参考 https://utteranc.es/
// gitalk评论插件 更多参考 https://gitalk.github.io/
COMMENT_GITALK_REPO: process.env.NEXT_PUBLIC_COMMENT_GITALK_REPO || '', // 你的Github仓库名，例如 'NotionNext'
COMMENT_GITALK_OWNER: process.env.NEXT_PUBLIC_COMMENT_GITALK_OWNER || '', // 你的用户名 e.g tangly1024
COMMENT_GITALK_ADMIN: process.env.NEXT_PUBLIC_COMMENT_GITALK_ADMIN || '', // 管理员用户名、一般是自己 e.g 'tangly1024'
COMMENT_GITALK_CLIENT_ID: process.env.NEXT_PUBLIC_COMMENT_GITALK_CLIENT_ID || '', // e.g 20位ID ， 在gitalk后台获取
COMMENT_GITALK_CLIENT_SECRET: process.env.NEXT_PUBLIC_COMMENT_GITALK_CLIENT_SECRET || '', // e.g 40位ID， 在gitalk后台获取
COMMENT_GITALK_CLIENT_ID:
process.env.NEXT_PUBLIC_COMMENT_GITALK_CLIENT_ID || '', // e.g 20位ID ， 在gitalk后台获取
COMMENT_GITALK_CLIENT_SECRET:
process.env.NEXT_PUBLIC_COMMENT_GITALK_CLIENT_SECRET || '', // e.g 40位ID， 在gitalk后台获取
COMMENT_GITALK_DISTRACTION_FREE_MODE: false, // 类似facebook的无干扰模式
COMMENT_GITTER_ROOM: process.env.NEXT_PUBLIC_COMMENT_GITTER_ROOM || '', // gitter聊天室 see https://gitter.im/ 不需要则留空
@@ -82,17 +98,22 @@ const BLOG = {
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_GOOGLE_ID: process.env.NEXT_PUBLIC_ANALYTICS_GOOGLE_ID || '', // 谷歌Analytics的id e.g: G-XXXXXXXXXX
ANALYTICS_ACKEE_TRACKER: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_TRACKER || '', // e.g 'https://ackee.tangly1024.net/tracker.js'
ANALYTICS_ACKEE_DATA_SERVER: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DATA_SERVER || '', // e.g https://ackee.tangly1024.net , don't end with a slash
ANALYTICS_ACKEE_DOMAIN_ID: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DOMAIN_ID || '', // e.g '0e2257a8-54d4-4847-91a1-0311ea48cc7b'
ANALYTICS_ACKEE_TRACKER:
process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_TRACKER || '', // e.g 'https://ackee.tangly1024.net/tracker.js'
ANALYTICS_ACKEE_DATA_SERVER:
process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DATA_SERVER || '', // e.g https://ackee.tangly1024.net , don't end with a slash
ANALYTICS_ACKEE_DOMAIN_ID:
process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DOMAIN_ID || '', // e.g '0e2257a8-54d4-4847-91a1-0311ea48cc7b'
SEO_GOOGLE_SITE_VERIFICATION: process.env.NEXT_PUBLIC_SEO_GOOGLE_SITE_VERIFICATION || '', // Remove the value or replace it with your own google site verification code
SEO_GOOGLE_SITE_VERIFICATION:
process.env.NEXT_PUBLIC_SEO_GOOGLE_SITE_VERIFICATION || '', // Remove the value or replace it with your own google site verification code
ADSENSE_GOOGLE_ID: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_ID || '', // 谷歌广告ID e.g ca-pub-xxxxxxxxxxxxxxxx
// 无关紧要的配置
TITLE: process.env.NEXT_PUBLIC_TITLE || 'NotionNext BLOG', // 站点标题 ，被notion中的页面标题覆盖
DESCRIPTION: process.env.NEXT_PUBLIC_DESCRIPTION || '这是一个由NotionNext生成的站点', // 站点描述，被notion中的页面描述覆盖
DESCRIPTION:
process.env.NEXT_PUBLIC_DESCRIPTION || '这是一个由NotionNext生成的站点', // 站点描述，被notion中的页面描述覆盖
isProd: process.env.VERCEL_ENV === 'production', // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables) isProd: process.env.VERCEL_ENV === 'production' // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)
VERSION: '2.9.1' // 版本号

74
components/CommonHead.js
View File

@@ -2,47 +2,59 @@ import BLOG from '@/blog.config'
import Head from 'next/head'
const CommonHead = ({ meta, children }) => {
let url = BLOG?.PATH?.length ? `${BLOG.LINK}/${BLOG.PATH}` : BLOG.LINK
let url = BLOG?.PATH?.length ? `${BLOG.LINK}/${BLOG.SUB_PATH}` : BLOG.LINK
let image
if (meta) {
url = `${url}/${meta.slug}`
image = meta.image || ''
}
const title = meta?.title || BLOG.TITLE
const description = meta?.description || BLOG.DESCRIPTION
const type = meta?.type || 'website'
const keywords = meta?.tags || BLOG.KEYWORDS
return <Head>
<title>{title}</title>
<meta name='theme-color' content={BLOG.BACKGROUND_DARK} />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<meta name='robots' content='follow, index' />
<meta charSet='UTF-8' />
{BLOG.SEO_GOOGLE_SITE_VERIFICATION && (
<meta name='google-site-verification' content={BLOG.SEO_GOOGLE_SITE_VERIFICATION} />
)}
<meta name='keywords' content={keywords} />
<meta name='description' content={description} />
<meta property='og:locale' content={BLOG.LANG} />
<meta property='og:title' content={title} />
<meta property='og:description' content={description} />
<meta property='og:url' content={url}
/>
<meta property='og:type' content={type} />
<meta name='twitter:card' content='summary_large_image' />
<meta name='twitter:description' content={description} />
<meta name='twitter:title' content={title} />
{JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <meta name="referrer" content="no-referrer-when-downgrade"/> }
{meta?.type === 'article' && (
<>
return (
<Head>
<title>{title}</title>
<meta name="theme-color" content={BLOG.BACKGROUND_DARK} />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no"
/>
<meta name="robots" content="follow, index" />
<meta charSet="UTF-8" />
{BLOG.SEO_GOOGLE_SITE_VERIFICATION && (
<meta
property='article:published_time'
content={meta.date || meta.createdTime}
name="google-site-verification"
content={BLOG.SEO_GOOGLE_SITE_VERIFICATION}
/>
<meta property='article:author' content={BLOG.AUTHOR} />
</>
)}
{children}
</Head>
)}
<meta name="keywords" content={keywords} />
<meta name="description" content={description} />
<meta property="og:locale" content={BLOG.LANG} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:url" content={url} />
<meta property="og:image" content={image} />
<meta property="og:type" content={type} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content={description} />
<meta name="twitter:title" content={title} />
{JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && (
<meta name="referrer" content="no-referrer-when-downgrade" />
)}
{meta?.type === 'article' && (
<>
<meta
property="article:published_time"
content={meta.date || meta.createdTime}
/>
<meta property="article:author" content={BLOG.AUTHOR} />
</>
)}
{children}
</Head>
)
}
export default CommonHead

37
lib/rss.js
View File

@@ -1,7 +1,13 @@
import { Feed } from 'feed'
import BLOG from '@/blog.config'
import ReactDOMServer from 'react-dom/server'
import { NotionRenderer, Equation, Code, Collection, CollectionRow } from 'react-notion-x'
import {
NotionRenderer,
Equation,
Code,
Collection,
CollectionRow
} from 'react-notion-x'
import { getPostBlocks } from './notion'
const mapPageUrl = id => 'https://www.notion.so/' + id.replace(/-/g, '')
@@ -13,28 +19,31 @@ const createFeedContent = async post => {
}
const blockMap = await getPostBlocks(post.id, 'rss-content')
if (blockMap) {
const content = ReactDOMServer.renderToString(<NotionRenderer
recordMap={blockMap}
components={{
equation: Equation,
code: Code,
collection: Collection,
collectionRow: CollectionRow
}}
mapPageUrl={mapPageUrl}
/>)
const regexExp = /<div class="notion-collection-row"><div class="notion-collection-row-body"><div class="notion-collection-row-property"><div class="notion-collection-column-title"><svg.*?class="notion-collection-column-title-icon">.*?<\/svg><div class="notion-collection-column-title-body">.*?<\/div><\/div><div class="notion-collection-row-value">.*?<\/div><\/div><\/div><\/div>/g
const content = ReactDOMServer.renderToString(
<NotionRenderer
recordMap={blockMap}
components={{
equation: Equation,
code: Code,
collection: Collection,
collectionRow: CollectionRow
}}
mapPageUrl={mapPageUrl}
/>
)
const regexExp =
/<div class="notion-collection-row"><div class="notion-collection-row-body"><div class="notion-collection-row-property"><div class="notion-collection-column-title"><svg.*?class="notion-collection-column-title-icon">.*?<\/svg><div class="notion-collection-column-title-body">.*?<\/div><\/div><div class="notion-collection-row-value">.*?<\/div><\/div><\/div><\/div>/g
return content.replace(regexExp, '')
}
return post.summary
}
export async function generateRss (posts) {
export async function generateRss(posts) {
const year = new Date().getFullYear()
const feed = new Feed({
title: BLOG.TITLE,
description: BLOG.DESCRIPTION,
link: `${BLOG.LINK}/${BLOG.PATH}`,
link: `${BLOG.LINK}/${BLOG.SUB_PATH}`,
language: BLOG.LANG,
favicon: `${BLOG.LINK}/favicon.png`,
copyright: `All rights reserved ${year}, ${BLOG.AUTHOR}`,

13
pages/[slug].js
View File

@@ -15,7 +15,7 @@ const Slug = props => {
const ThemeComponents = ThemeMap[theme]
const { post } = props
if (!post) {
return <ThemeComponents.Layout404 {...props}/>
return <ThemeComponents.Layout404 {...props} />
}
// 文章锁🔐
@@ -43,15 +43,17 @@ const Slug = props => {
title: `${post.title} | ${siteInfo.title}`,
description: post.summary,
type: 'article',
image: post.page_cover,
slug: post.slug,
tags: post.tags
}
props = { ...props, meta, lock, setLock, validPassword }
return <ThemeComponents.LayoutSlug {...props} showArticleInfo={false}/>
return <ThemeComponents.LayoutSlug {...props} showArticleInfo={false} />
}
export async function getStaticPaths () {
export async function getStaticPaths() {
if (!BLOG.isProd) {
return {
paths: [],
@@ -61,7 +63,8 @@ export async function getStaticPaths () {
const from = 'slug-paths'
const { allPosts } = await getGlobalNotionData({ from, pageType: ['Page'] })
const filterPosts = allPosts?.filter(e => e?.slug?.indexOf('http') !== 0) || []
const filterPosts =
allPosts?.filter(e => e?.slug?.indexOf('http') !== 0) || []
return {
paths: filterPosts.map(row => ({ params: { slug: row.slug } })),
@@ -69,7 +72,7 @@ export async function getStaticPaths () {
}
}
export async function getStaticProps ({ params: { slug } }) {
export async function getStaticProps({ params: { slug } }) {
const from = `slug-props-${slug}`
const props = await getGlobalNotionData({ from, pageType: ['Page'] })
const { allPosts } = props

5
pages/archive/index.js
View File

@@ -10,13 +10,14 @@ const ArchiveIndex = props => {
const meta = {
title: `${locale.NAV.ARCHIVE} | ${siteInfo.title}`,
description: siteInfo.description,
slug: 'archive',
type: 'website'
}
return <ThemeComponents.LayoutArchive {...props} meta={meta}/>
return <ThemeComponents.LayoutArchive {...props} meta={meta} />
}
export async function getStaticProps () {
export async function getStaticProps() {
const props = await getGlobalNotionData({ from: 'archive-index' })
props.posts = props.allPosts
return {

18
pages/article/[slug].js
View File

@@ -61,13 +61,17 @@ const Slug = props => {
title: `${props.post.title} | ${siteInfo.title}`,
description: props.post.summary,
type: 'article',
slug: 'article/' + props.post.slug,
image: props.post.page_cover,
tags: props.post.tags
}
return <ThemeComponents.LayoutSlug {...props} showArticleInfo={true} meta={meta}/>
return (
<ThemeComponents.LayoutSlug {...props} showArticleInfo={true} meta={meta} />
)
}
export async function getStaticPaths () {
export async function getStaticPaths() {
if (!BLOG.isProd) {
return {
paths: [],
@@ -83,7 +87,7 @@ export async function getStaticPaths () {
}
}
export async function getStaticProps ({ params: { slug } }) {
export async function getStaticProps({ params: { slug } }) {
const from = `slug-props-${slug}`
const props = await getGlobalNotionData({ from, pageType: ['Post'] })
const allPosts = props.allPosts
@@ -96,7 +100,11 @@ export async function getStaticProps ({ params: { slug } }) {
const index = allPosts.indexOf(props.post)
props.prev = allPosts.slice(index - 1, index)[0] ?? allPosts.slice(-1)[0]
props.next = allPosts.slice(index + 1, index + 2)[0] ?? allPosts[0]
props.recommendPosts = getRecommendPost(props.post, allPosts, BLOG.POST_RECOMMEND_COUNT)
props.recommendPosts = getRecommendPost(
props.post,
allPosts,
BLOG.POST_RECOMMEND_COUNT
)
return {
props,
revalidate: 1
@@ -110,7 +118,7 @@ export async function getStaticProps ({ params: { slug } }) {
* @param {*} count
* @returns
*/
function getRecommendPost (post, allPosts, count = 6) {
function getRecommendPost(post, allPosts, count = 6) {
let recommendPosts = []
const postIds = []
const currentTags = post.tags || []

17
pages/category/[category].js
View File

@@ -3,23 +3,26 @@ import React from 'react'
import { useGlobal } from '@/lib/global'
import * as ThemeMap from '@/themes'
export default function Category (props) {
export default function Category(props) {
const { theme } = useGlobal()
const ThemeComponents = ThemeMap[theme]
const { siteInfo, posts } = props
const { locale } = useGlobal()
if (!posts) {
return <ThemeComponents.Layout404 {...props}/>
return <ThemeComponents.Layout404 {...props} />
}
const meta = {
title: `${props.category} | ${locale.COMMON.CATEGORY} | ${siteInfo?.title || ''}`,
title: `${props.category} | ${locale.COMMON.CATEGORY} | ${
siteInfo?.title || ''
}`,
description: siteInfo?.description,
slug: 'category/' + props.category,
type: 'website'
}
return <ThemeComponents.LayoutCategory {...props} meta={meta} />
}
export async function getStaticProps ({ params: { category } }) {
export async function getStaticProps({ params: { category } }) {
const from = 'category-props'
let props = await getGlobalNotionData({ from })
const posts = props.allPosts.filter(
@@ -33,11 +36,13 @@ export async function getStaticProps ({ params: { category } }) {
}
}
export async function getStaticPaths () {
export async function getStaticPaths() {
const from = 'category-paths'
const { categories } = await getGlobalNotionData({ from })
return {
paths: Object.keys(categories).map(category => ({ params: { category: categories[category]?.name } })),
paths: Object.keys(categories).map(category => ({
params: { category: categories[category]?.name }
})),
fallback: true
}
}

12
pages/category/index.js
View File

@@ -3,7 +3,7 @@ import React from 'react'
import { useGlobal } from '@/lib/global'
import * as ThemeMap from '@/themes'
export default function Category (props) {
export default function Category(props) {
const { theme } = useGlobal()
const ThemeComponents = ThemeMap[theme]
const { locale } = useGlobal()
@@ -11,13 +11,17 @@ export default function Category (props) {
const meta = {
title: `${locale.COMMON.CATEGORY} | ${siteInfo.title}`,
description: siteInfo.description,
slug: 'category',
type: 'website'
}
return <ThemeComponents.LayoutCategoryIndex {...props} meta={meta}/>
return <ThemeComponents.LayoutCategoryIndex {...props} meta={meta} />
}
export async function getStaticProps () {
const props = await getGlobalNotionData({ from: 'category-index-props', categoryCount: 0 })
export async function getStaticProps() {
const props = await getGlobalNotionData({
from: 'category-index-props',
categoryCount: 0
})
return {
props,
revalidate: 1

17
pages/index.js
View File

@@ -3,19 +3,21 @@ import { getPostBlocks } from '@/lib/notion'
import { getGlobalNotionData } from '@/lib/notion/getNotionData'
import * as ThemeMap from '@/themes'
import { useGlobal } from '@/lib/global'
const Index = (props) => {
const Index = props => {
const { theme } = useGlobal()
const ThemeComponents = ThemeMap[theme]
return <ThemeComponents.LayoutIndex {...props}/>
return <ThemeComponents.LayoutIndex {...props} />
}
export async function getStaticProps () {
export async function getStaticProps() {
const from = 'index'
const props = await getGlobalNotionData({ from, pageType: ['Post'] })
const { allPosts, siteInfo } = props
const meta = {
title: `${siteInfo.title} | ${siteInfo.description}`,
description: siteInfo.description,
image: siteInfo.pageCover,
slug: '',
type: 'website'
}
@@ -35,7 +37,11 @@ export async function getStaticProps () {
if (post.password && post.password !== '') {
continue
}
const blockMap = await getPostBlocks(post.id, 'slug', BLOG.POST_PREVIEW_LINES)
const blockMap = await getPostBlocks(
post.id,
'slug',
BLOG.POST_PREVIEW_LINES
)
if (blockMap) {
post.blockMap = blockMap
}
@@ -46,7 +52,8 @@ export async function getStaticProps () {
return {
props: {
meta, ...props
meta,
...props
},
revalidate: 1
}

15
pages/page/[page].js
View File

@@ -14,23 +14,26 @@ const Page = props => {
const meta = {
title: `${props.page} | Page | ${siteInfo.title}`,
description: siteInfo.description,
slug: 'page/' + props.page,
type: 'website'
}
return <ThemeComponents.LayoutPage {...props} meta={meta} />
}
export async function getStaticPaths () {
export async function getStaticPaths() {
const from = 'page-paths'
const { postCount } = await getGlobalNotionData({ from })
const totalPages = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
return {
// remove first page, we 're not gonna handle that.
paths: Array.from({ length: totalPages - 1 }, (_, i) => ({ params: { page: '' + (i + 2) } })),
paths: Array.from({ length: totalPages - 1 }, (_, i) => ({
params: { page: '' + (i + 2) }
})),
fallback: true
}
}
export async function getStaticProps ({ params: { page } }) {
export async function getStaticProps({ params: { page } }) {
const from = `page-${page}`
const props = await getGlobalNotionData({ from })
props.page = page
@@ -45,7 +48,11 @@ export async function getStaticProps ({ params: { page } }) {
if (post.password && post.password !== '') {
continue
}
const blockMap = await getPostBlocks(post.id, 'slug', BLOG.POST_PREVIEW_LINES)
const blockMap = await getPostBlocks(
post.id,
'slug',
BLOG.POST_PREVIEW_LINES
)
if (blockMap) {
post.blockMap = blockMap
}

29
pages/search/[keyword].js
View File

@@ -7,13 +7,22 @@ const Index = props => {
const { keyword, siteInfo } = props
const { locale } = useGlobal()
const meta = {
title: `${keyword || ''} | ${locale.NAV.SEARCH} | ${siteInfo.title}`,
title: `${keyword || ''}${keyword ? ' | ' : ''}${locale.NAV.SEARCH} | ${
siteInfo.title
}`,
description: siteInfo.title,
slug: 'search/' + (keyword || ''),
type: 'website'
}
const { theme } = useGlobal()
const ThemeComponents = ThemeMap[theme]
return <ThemeComponents.LayoutSearch {...props} meta={meta} currentSearch={keyword} />
return (
<ThemeComponents.LayoutSearch
{...props}
meta={meta}
currentSearch={keyword}
/>
)
}
/**
@@ -21,8 +30,11 @@ const Index = props => {
* @param {*} param0
* @returns
*/
export async function getServerSideProps ({ params: { keyword } }) {
const props = await getGlobalNotionData({ from: 'search-props', pageType: ['Post'] })
export async function getServerSideProps({ params: { keyword } }) {
const props = await getGlobalNotionData({
from: 'search-props',
pageType: ['Post']
})
props.posts = await filterByMemCache(props.allPosts, keyword)
props.keyword = keyword
return {
@@ -37,7 +49,7 @@ export async function getServerSideProps ({ params: { keyword } }) {
* @param key
* @returns {*}
*/
function appendText (sourceTextArray, targetObj, key) {
function appendText(sourceTextArray, targetObj, key) {
if (!targetObj) {
return sourceTextArray
}
@@ -54,7 +66,7 @@ function appendText (sourceTextArray, targetObj, key) {
* @param {*} textArray
* @returns
*/
function getTextContent (textArray) {
function getTextContent(textArray) {
if (typeof textArray === 'object' && isIterable(textArray)) {
let result = ''
for (const textObj of textArray) {
@@ -71,7 +83,8 @@ function getTextContent (textArray) {
* @param {*} obj
* @returns
*/
const isIterable = obj => obj != null && typeof obj[Symbol.iterator] === 'function'
const isIterable = obj =>
obj != null && typeof obj[Symbol.iterator] === 'function'
/**
* 在内存缓存中进行全文索引
@@ -79,7 +92,7 @@ const isIterable = obj => obj != null && typeof obj[Symbol.iterator] === 'functi
* @param keyword 关键词
* @returns
*/
async function filterByMemCache (allPosts, keyword) {
async function filterByMemCache(allPosts, keyword) {
const filterPosts = []
for (const post of allPosts) {
const cacheKey = 'page_block_' + post.id

26
pages/search/index.js
View File

@@ -12,7 +12,8 @@ const Search = props => {
filteredPosts = posts.filter(post => {
const tagContent = post.tags ? post.tags.join(' ') : ''
const categoryContent = post.category ? post.category.join(' ') : ''
const searchContent = post.title + post.summary + tagContent + categoryContent
const searchContent =
post.title + post.summary + tagContent + categoryContent
return searchContent.toLowerCase().includes(searchKey.toLowerCase())
})
} else {
@@ -21,22 +22,35 @@ const Search = props => {
const { locale } = useGlobal()
const meta = {
title: `${searchKey || ''} | ${locale.NAV.SEARCH} | ${siteInfo.title}`,
title: `${searchKey || ''}${searchKey ? ' | ' : ''}${locale.NAV.SEARCH} | ${
siteInfo.title
}`,
description: siteInfo.description,
slug: 'search',
type: 'website'
}
const { theme } = useGlobal()
const ThemeComponents = ThemeMap[theme]
return <ThemeComponents.LayoutSearch {...props} posts={filteredPosts} currentSearch={searchKey} meta={meta} />
return (
<ThemeComponents.LayoutSearch
{...props}
posts={filteredPosts}
currentSearch={searchKey}
meta={meta}
/>
)
}
/**
* 浏览器前端搜索
*/
export async function getStaticProps () {
const props = await getGlobalNotionData({ from: 'search-props', pageType: ['Post'] })
export async function getStaticProps() {
const props = await getGlobalNotionData({
from: 'search-props',
pageType: ['Post']
})
props.posts = props.allPosts
return {
props,
@@ -44,7 +58,7 @@ export async function getStaticProps () {
}
}
function getSearchKey () {
function getSearchKey() {
const router = useRouter()
if (router.query && router.query.s) {
return router.query.s

25
pages/tag/[tag].js
View File

@@ -9,21 +9,28 @@ const Tag = props => {
const { tag, siteInfo, posts } = props
if (!posts) {
return <ThemeComponents.Layout404 {...props}/>
return <ThemeComponents.Layout404 {...props} />
}
const meta = {
title: `${tag} | ${locale.COMMON.TAGS} | ${siteInfo?.title}`,
description: siteInfo?.description,
slug: 'tag/' + tag,
type: 'website'
}
return <ThemeComponents.LayoutTag {...props} meta={meta}/>
return <ThemeComponents.LayoutTag {...props} meta={meta} />
}
export async function getStaticProps ({ params: { tag } }) {
const props = await getGlobalNotionData({ from: 'tag-props', includePage: false, tagsCount: 0 })
export async function getStaticProps({ params: { tag } }) {
const props = await getGlobalNotionData({
from: 'tag-props',
includePage: false,
tagsCount: 0
})
const { allPosts } = props
props.posts = allPosts.filter(post => post && post.tags && post.tags.includes(tag))
props.posts = allPosts.filter(
post => post && post.tags && post.tags.includes(tag)
)
props.tag = tag
return {
props,
@@ -36,7 +43,7 @@ export async function getStaticProps ({ params: { tag } }) {
* @returns
* @param tags
*/
function getTagNames (tags) {
function getTagNames(tags) {
const tagNames = []
tags.forEach(tag => {
tagNames.push(tag.name)
@@ -44,13 +51,15 @@ function getTagNames (tags) {
return tagNames
}
export async function getStaticPaths () {
export async function getStaticPaths() {
const from = 'tag-static-path'
const { tags } = await getGlobalNotionData({ from, tagsCount: 0 })
const tagNames = getTagNames(tags)
return {
paths: Object.keys(tagNames).map(index => ({ params: { tag: tagNames[index] } })),
paths: Object.keys(tagNames).map(index => ({
params: { tag: tagNames[index] }
})),
fallback: true
}
}

3
pages/tag/index.js
View File

@@ -11,12 +11,13 @@ const TagIndex = props => {
const meta = {
title: `${locale.COMMON.TAGS} | ${siteInfo.title}`,
description: siteInfo.description,
slug: 'tag',
type: 'website'
}
return <ThemeComponents.LayoutTagIndex {...props} meta={meta} />
}
export async function getStaticProps () {
export async function getStaticProps() {
const from = 'tag-index-props'
const props = await getGlobalNotionData({ from, tagsCount: 0 })
return {

5
themes/example/LayoutArchive.js
View File

@@ -44,7 +44,10 @@ export const LayoutArchive = props => {
{post.date.start_date}
</span>{' '}
&nbsp;
<Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
<Link
href={`${BLOG.SUB_PATH}/article/${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>

66
themes/example/LayoutIndex.js
View File

@@ -12,41 +12,63 @@ export const LayoutIndex = props => {
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 showNext =
page < totalPage &&
posts.length === BLOG.POSTS_PER_PAGE &&
posts.length < postCount
const currentPage = +page
return (
<LayoutBase {...props}>
{posts.map(p => (
<div key={p.id} className='border dark:border-hexo-black-gray p-4 my-12'>
<div
key={p.id}
className="border dark:border-hexo-black-gray p-4 my-12"
>
<Link href={`/article/${p.slug}`}>
<a className='underline cursor-pointer'>{p.title}</a>
<a className="underline cursor-pointer">{p.title}</a>
</Link>
<div>{p.summary}</div>
</div>
))}
<div className='my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2'>
<Link
href={ {
pathname: (currentPage === 2 ? `${BLOG.PATH || '/'}` : `/page/${currentPage - 1}`), query: router.query.s ? { s: router.query.s } : {}
} } passHref >
<a
rel='prev'
className={`${currentPage === 1 ? 'invisible' : 'visible'} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
<div className="my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2">
<Link
href={{
pathname:
currentPage === 2
? `${BLOG.SUB_PATH || '/'}`
: `/page/${currentPage - 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
passHref
>
← {locale.PAGINATION.PREV}
</a>
</Link>
<Link href={ { pathname: `/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} } } passHref>
<a
rel='next'
className={`${showNext ? 'visible' : 'invisible'} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
<a
rel="prev"
className={`${
currentPage === 1 ? 'invisible' : 'visible'
} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
>
← {locale.PAGINATION.PREV}
</a>
</Link>
<Link
href={{
pathname: `/page/${currentPage + 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
passHref
>
{locale.PAGINATION.NEXT} →
</a>
</Link>
</div>
<a
rel="next"
className={`${
showNext ? 'visible' : 'invisible'
} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
>
{locale.PAGINATION.NEXT} →
</a>
</Link>
</div>
</LayoutBase>
)
}

65
themes/example/LayoutPage.js
View File

@@ -4,7 +4,7 @@ import Link from 'next/link'
import { useRouter } from 'next/router'
import LayoutBase from './LayoutBase'
export const LayoutPage = (props) => {
export const LayoutPage = props => {
const { page } = props
const { posts, postCount } = props
@@ -12,41 +12,60 @@ export const LayoutPage = (props) => {
const router = useRouter()
const totalPage = Math.ceil(postCount / BLOG.POSTS_PER_PAGE)
const showNext = page < totalPage && posts.length === BLOG.POSTS_PER_PAGE && posts.length < postCount
const showNext =
page < totalPage &&
posts.length === BLOG.POSTS_PER_PAGE &&
posts.length < postCount
const currentPage = +page
return (
<LayoutBase {...props}>
{posts.map(p => (
<div key={p.id} className='border my-12'>
<div key={p.id} className="border my-12">
<Link href={`/article/${p.slug}`}>
<a className='underline cursor-pointer'>{p.title}</a>
<a className="underline cursor-pointer">{p.title}</a>
</Link>
<div>{p.summary}</div>
</div>
))}
<div className='my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2'>
<Link
href={ {
pathname: (currentPage === 2 ? `${BLOG.PATH || '/'}` : `/page/${currentPage - 1}`), query: router.query.s ? { s: router.query.s } : {}
} } passHref >
<a
rel='prev'
className={`${currentPage === 1 ? 'invisible' : 'visible'} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
<div className="my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2">
<Link
href={{
pathname:
currentPage === 2
? `${BLOG.SUB_PATH || '/'}`
: `/page/${currentPage - 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
passHref
>
← {locale.PAGINATION.PREV}
</a>
</Link>
<Link href={ { pathname: `/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} } } passHref>
<a
rel='next'
className={`${showNext ? 'visible' : 'invisible'} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
<a
rel="prev"
className={`${
currentPage === 1 ? 'invisible' : 'visible'
} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
>
← {locale.PAGINATION.PREV}
</a>
</Link>
<Link
href={{
pathname: `/page/${currentPage + 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
passHref
>
{locale.PAGINATION.NEXT} →
</a>
</Link>
</div>
<a
rel="next"
className={`${
showNext ? 'visible' : 'invisible'
} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
>
{locale.PAGINATION.NEXT} →
</a>
</Link>
</div>
</LayoutBase>
)
}

59
themes/fukasawa/components/BlogCard.js
View File

@@ -7,33 +7,44 @@ import Card from './Card'
const BlogCard = ({ post, showSummary }) => {
const showPreview = CONFIG_FUKA.POST_LIST_PREVIEW && post.blockMap
return (
<Card className='w-full lg:max-w-sm p-2'>
<div key={post.id} className='animate__animated animate__fadeIn flex flex-col-reverse justify-between duration-300'>
<Card className="w-full lg:max-w-sm p-2">
<div
key={post.id}
className="animate__animated animate__fadeIn flex flex-col-reverse justify-between duration-300"
>
<div className="p-2 flex flex-col w-full">
<Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
<a
className={`cursor-pointer font-bold hover:underline text-xl ${
showPreview ? 'justify-center' : 'justify-start'
} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}
>
{post.title}
</a>
</Link>
<div className='p-2 flex flex-col w-full'>
<Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
<a className={`cursor-pointer font-bold hover:underline text-xl ${showPreview ? 'justify-center' : 'justify-start'} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
{post.title}
</a>
</Link>
{(!showPreview || showSummary) && <p className='mt-4 mb-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7 overflow-hidden'>
{post.summary}
</p>}
</div>
{CONFIG_FUKA.POST_LIST_COVER && post?.page_cover && (
<Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
<div className='h-40 w-full relative duration-200 cursor-pointer transform overflow-hidden'>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={post?.page_cover} alt={post.title} className='hover:scale-125 transform duration-500'></img>
{/* <Image className='hover:scale-105 transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' /> */}
{(!showPreview || showSummary) && (
<p className="mt-4 mb-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7 overflow-hidden">
{post.summary}
</p>
)}
</div>
</Link>
)}
</div >
</Card>
{CONFIG_FUKA.POST_LIST_COVER && post?.page_cover && (
<Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
<div className="h-40 w-full relative duration-200 cursor-pointer transform overflow-hidden">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={post?.page_cover}
alt={post.title}
className="hover:scale-125 transform duration-500"
></img>
{/* <Image className='hover:scale-105 transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' /> */}
</div>
</Link>
)}
</div>
</Card>
)
}

42
themes/fukasawa/components/BlogPostArchive.js
View File

@@ -12,20 +12,34 @@ const BlogArchiveItem = ({ posts = [], archiveTitle }) => {
if (!posts || posts.length === 0) {
return <></>
} else {
return <div>
<div className='pt-16 pb-4 text-3xl dark:text-gray-300' id={archiveTitle}>{archiveTitle}</div>
<ul>
{posts.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.PATH}/article/${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>
return (
<div>
<div
className="pt-16 pb-4 text-3xl dark:text-gray-300"
id={archiveTitle}
>
{archiveTitle}
</div>
<ul>
{posts.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}/article/${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>
)
}
}

36
themes/fukasawa/components/PaginationSimple.js
View File

@@ -15,22 +15,38 @@ const PaginationSimple = ({ page, showNext }) => {
const router = useRouter()
const currentPage = +page
return (
<div className='my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2'>
<Link
href={ {
pathname: (currentPage === 2 ? `${BLOG.PATH || '/'}` : `/page/${currentPage - 1}`), query: router.query.s ? { s: router.query.s } : {}
} } passHref >
<div className="my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2">
<Link
href={{
pathname:
currentPage === 2
? `${BLOG.SUB_PATH || '/'}`
: `/page/${currentPage - 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
passHref
>
<a
rel='prev'
className={`${currentPage === 1 ? 'invisible' : 'visible'} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
rel="prev"
className={`${
currentPage === 1 ? 'invisible' : 'visible'
} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
>
← {locale.PAGINATION.PREV}
</a>
</Link>
<Link href={ { pathname: `/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} } } passHref>
<Link
href={{
pathname: `/page/${currentPage + 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
passHref
>
<a
rel='next'
className={`${showNext ? 'visible' : 'invisible'} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
rel="next"
className={`${
showNext ? 'visible' : 'invisible'
} text-center w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
>
{locale.PAGINATION.NEXT} →
</a>

42
themes/hexo/components/ArticleRecommend.js
View File

@@ -8,8 +8,12 @@ import { useGlobal } from '@/lib/global'
* @param {prev,next} param0
* @returns
*/
export default function ArticleRecommend ({ recommendPosts, siteInfo }) {
if (!CONFIG_HEXO.ARTICLE_RECOMMEND || !recommendPosts || recommendPosts.length === 0) {
export default function ArticleRecommend({ recommendPosts, siteInfo }) {
if (
!CONFIG_HEXO.ARTICLE_RECOMMEND ||
!recommendPosts ||
recommendPosts.length === 0
) {
return <></>
}
const { locale } = useGlobal()
@@ -28,21 +32,31 @@ export default function ArticleRecommend ({ recommendPosts, siteInfo }) {
: `url("${siteInfo?.pageCover}")`
return (
<Link key={post.id} title={post.title} href={`${BLOG.PATH}/article/${post.slug}`} passHref>
<a key={post.id} className="flex h-40 cursor-pointer overflow-hidden">
<div
className="h-full w-full bg-cover bg-center bg-no-repeat hover:scale-110 transform duration-200"
style={{ backgroundImage: headerImage }}
<Link
key={post.id}
title={post.title}
href={`${BLOG.SUB_PATH}/article/${post.slug}`}
passHref
>
<a
key={post.id}
className="flex h-40 cursor-pointer overflow-hidden"
>
<div className='flex items-center justify-center bg-black bg-opacity-60 hover:bg-opacity-10 w-full h-full duration-300 '>
<div className="font-sans text-sm text-white text-center shadow-text">
<div><i className='fas fa-calendar-alt mr-1'/>{post.date?.start_date}</div>
<div className='hover:underline'>{post.title}</div>
<div
className="h-full w-full bg-cover bg-center bg-no-repeat hover:scale-110 transform duration-200"
style={{ backgroundImage: headerImage }}
>
<div className="flex items-center justify-center bg-black bg-opacity-60 hover:bg-opacity-10 w-full h-full duration-300 ">
<div className="font-sans text-sm text-white text-center shadow-text">
<div>
<i className="fas fa-calendar-alt mr-1" />
{post.date?.start_date}
</div>
<div className="hover:underline">{post.title}</div>
</div>
</div>
</div>
</div>
</a>
</a>
</Link>
)
})}

42
themes/hexo/components/BlogPostArchive.js
View File

@@ -12,20 +12,34 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
if (!posts || posts.length === 0) {
return <></>
} else {
return <div>
<div className='pt-16 pb-4 text-3xl dark:text-gray-300' id={archiveTitle}>{archiveTitle}</div>
<ul>
{posts.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-indigo-500 dark:hover:border-indigo-300 dark:border-indigo-400 transform duration-500'>
<div id={post?.date?.start_date}><span className='text-gray-400'>{post.date.start_date}</span> &nbsp;
<Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
<a className='dark:text-gray-400 dark:hover:text-indigo-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600'>{post.title}</a>
</Link>
</div>
</li>
))}
</ul>
</div>
return (
<div>
<div
className="pt-16 pb-4 text-3xl dark:text-gray-300"
id={archiveTitle}
>
{archiveTitle}
</div>
<ul>
{posts.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-indigo-500 dark:hover:border-indigo-300 dark:border-indigo-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}/article/${post.slug}`} passHref>
<a className="dark:text-gray-400 dark:hover:text-indigo-300 overflow-x-hidden hover:underline cursor-pointer text-gray-600">
{post.title}
</a>
</Link>
</div>
</li>
))}
</ul>
</div>
)
}
}

137
themes/hexo/components/BlogPostCard.js
View File

@@ -1,73 +1,106 @@
import BLOG from '@/blog.config'
import Link from 'next/link'
import React from 'react'
import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x'
import {
Code,
Collection,
CollectionRow,
Equation,
NotionRenderer
} from 'react-notion-x'
import TagItemMini from './TagItemMini'
import CONFIG_HEXO from '../config_hexo'
const BlogPostCard = ({ post, showSummary }) => {
const showPreview = CONFIG_HEXO.POST_LIST_PREVIEW && post.blockMap
return (
<div className='w-full shadow-sm hover:shadow border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray duration-300'>
<div key={post.id} className='animate__animated animate__fadeIn flex flex-col-reverse lg:flex-row justify-between duration-300'>
<div className='lg:p-8 p-4 flex flex-col w-full'>
<Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
<a className={`replace cursor-pointer hover:underline text-2xl font-sans ${showPreview ? 'text-center' : ''} leading-tight text-gray-700 dark:text-gray-100 hover:text-indigo-700 dark:hover:text-indigo-400`}>
{post.title}
</a>
</Link>
<div className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'} flex-wrap dark:text-gray-500 text-gray-400 hover:text-indigo-700 dark:hover:text-indigo-400`}>
<Link href={`/archive#${post?.date?.start_date?.substr(0, 7)}`} passHref>
<a className='font-light hover:underline cursor-pointer text-sm leading-4 mr-3'><i className="far fa-calendar-alt mr-1"/>{post.date.start_date}</a>
<div className="w-full shadow-sm hover:shadow border dark:border-black rounded-xl bg-white dark:bg-hexo-black-gray duration-300">
<div
key={post.id}
className="animate__animated animate__fadeIn flex flex-col-reverse lg:flex-row justify-between duration-300"
>
<div className="lg:p-8 p-4 flex flex-col w-full">
<Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
<a
className={`replace cursor-pointer hover:underline text-2xl font-sans ${
showPreview ? 'text-center' : ''
} leading-tight text-gray-700 dark:text-gray-100 hover:text-indigo-700 dark:hover:text-indigo-400`}
>
{post.title}
</a>
</Link>
</div>
{(!showPreview || showSummary) && <p className='replace my-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7'>
{post.summary}
</p>}
{showPreview && <div className='overflow-ellipsis truncate'>
<NotionRenderer
bodyClassName='max-h-full'
recordMap={post.blockMap}
mapPageUrl={mapPageUrl}
components={{
equation: Equation,
code: Code,
collectionRow: CollectionRow,
collection: Collection
}}
/>
</div> }
<div className='text-gray-400 justify-between flex'>
<Link href={`/category/${post.category}`} passHref>
<a className='cursor-pointer font-light text-sm hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform'>
<i className='mr-1 far fa-folder' />{post.category}
<div
className={`flex mt-2 items-center ${
showPreview ? 'justify-center' : 'justify-start'
} flex-wrap dark:text-gray-500 text-gray-400 hover:text-indigo-700 dark:hover:text-indigo-400`}
>
<Link
href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
passHref
>
<a className="font-light hover:underline cursor-pointer text-sm leading-4 mr-3">
<i className="far fa-calendar-alt mr-1" />
{post.date.start_date}
</a>
</Link>
<div className='md:flex-nowrap flex-wrap md:justify-start inline-block'>
<div> {post.tagItems.map(tag => (<TagItemMini key={tag.name} tag={tag} />))}</div>
</div>
{(!showPreview || showSummary) && (
<p className="replace my-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{post.summary}
</p>
)}
{showPreview && (
<div className="overflow-ellipsis truncate">
<NotionRenderer
bodyClassName="max-h-full"
recordMap={post.blockMap}
mapPageUrl={mapPageUrl}
components={{
equation: Equation,
code: Code,
collectionRow: CollectionRow,
collection: Collection
}}
/>
</div>
)}
<div className="text-gray-400 justify-between flex">
<Link href={`/category/${post.category}`} passHref>
<a className="cursor-pointer font-light text-sm hover:underline hover:text-indigo-700 dark:hover:text-indigo-400 transform">
<i className="mr-1 far fa-folder" />
{post.category}
</a>
</Link>
<div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
<div>
{' '}
{post.tagItems.map(tag => (
<TagItemMini key={tag.name} tag={tag} />
))}
</div>
</div>
</div>
</div>
{CONFIG_HEXO.POST_LIST_COVER && !showPreview && post?.page_cover && (
<Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
<div className="flex w-full relative duration-200 rounded-t-xl lg:rounded-r-xl lg:rounded-t-none cursor-pointer transform overflow-hidden">
{/* eslint-disable-next-line @next/next/no-img-element */}
<img
src={post?.page_cover}
alt={post.title}
className="hover:scale-125 rounded-t-xl lg:rounded-r-xl lg:rounded-t-none transform object-cover duration-500"
/>
{/* <Image className='hover:scale-125 rounded-t-xl lg:rounded-r-xl lg:rounded-t-none transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' /> */}
</div>
</Link>
)}
</div>
{CONFIG_HEXO.POST_LIST_COVER && !showPreview && post?.page_cover && (
<Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
<div className='flex w-full relative duration-200 rounded-t-xl lg:rounded-r-xl lg:rounded-t-none cursor-pointer transform overflow-hidden'>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src={post?.page_cover} alt={post.title} className='hover:scale-125 rounded-t-xl lg:rounded-r-xl lg:rounded-t-none transform object-cover duration-500'/>
{/* <Image className='hover:scale-125 rounded-t-xl lg:rounded-r-xl lg:rounded-t-none transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' /> */}
</div>
</Link>
)}
</div>
</div>
)
}

4
themes/hexo/components/LatestPostsGroup.js
View File

@@ -26,7 +26,7 @@ const LatestPostsGroup = ({ posts, siteInfo }) => {
</div>
</div>
{posts.map(post => {
const selected = currentPath === `${BLOG.PATH}/article/${post.slug}`
const selected = currentPath === `${BLOG.SUB_PATH}/article/${post.slug}`
const headerImage = post?.page_cover
? `url("${post.page_cover}")`
: `url("${siteInfo?.pageCover}")`
@@ -35,7 +35,7 @@ const LatestPostsGroup = ({ posts, siteInfo }) => {
<Link
key={post.id}
title={post.title}
href={`${BLOG.PATH}/article/${post.slug}`}
href={`${BLOG.SUB_PATH}/article/${post.slug}`}
passHref
>
<a className={'my-1 flex font-sans'}>

59
themes/hexo/components/PaginationNumber.js
View File

@@ -16,46 +16,69 @@ const PaginationNumber = ({ page, totalPage }) => {
const pages = generatePages(page, currentPage, totalPage)
return (
<div className='mt-10 mb-5 font-sans flex justify-center items-end font-medium text-black duration-500 dark:text-gray-300 py-3 space-x-2'>
<div className="mt-10 mb-5 font-sans flex justify-center items-end font-medium text-black duration-500 dark:text-gray-300 py-3 space-x-2">
{/* 上一页 */}
<Link
href={ {
pathname: (currentPage - 1 === 1 ? `${BLOG.PATH || '/'}` : `/page/${currentPage - 1}`), query: router.query.s ? { s: router.query.s } : {}
} } passHref >
href={{
pathname:
currentPage - 1 === 1
? `${BLOG.SUB_PATH || '/'}`
: `/page/${currentPage - 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
passHref
>
<div
rel='prev'
className={`${currentPage === 1 ? 'invisible' : 'block'} pb-0.5 border-white dark:border-indigo-700 hover:border-indigo-400 dark:hover:border-indigo-400 w-6 text-center cursor-pointer duration-200 hover:font-bold`}
rel="prev"
className={`${
currentPage === 1 ? 'invisible' : 'block'
} pb-0.5 border-white dark:border-indigo-700 hover:border-indigo-400 dark:hover:border-indigo-400 w-6 text-center cursor-pointer duration-200 hover:font-bold`}
>
<i className='fas fa-angle-left'/>
<i className="fas fa-angle-left" />
</div>
</Link>
{pages}
{/* 下一页 */}
<Link href={ { pathname: `/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} } } passHref>
<Link
href={{
pathname: `/page/${currentPage + 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
passHref
>
<div
rel='next'
className={`${+showNext ? 'block' : 'invisible'} pb-0.5 border-b border-indigo-300 dark:border-indigo-700 hover:border-indigo-400 dark:hover:border-indigo-400 w-6 text-center cursor-pointer duration-500 hover:font-bold`}
rel="next"
className={`${
+showNext ? 'block' : 'invisible'
} pb-0.5 border-b border-indigo-300 dark:border-indigo-700 hover:border-indigo-400 dark:hover:border-indigo-400 w-6 text-center cursor-pointer duration-500 hover:font-bold`}
>
<i className='fas fa-angle-right'/>
<i className="fas fa-angle-right" />
</div>
</Link>
</div>
)
}
function getPageElement (page, currentPage) {
return <Link href={page === 1 ? '/' : `/page/${page}`} key={page} passHref>
<a className={(page + '' === currentPage + '' ? 'font-bold bg-indigo-400 dark:bg-indigo-500 text-white ' : 'border-b duration-500 border-indigo-300 hover:border-indigo-400 ') +
' border-white dark:border-indigo-700 dark:hover:border-indigo-400 cursor-pointer pb-0.5 w-6 text-center font-light hover:font-bold'}>
{page}
function getPageElement(page, currentPage) {
return (
<Link href={page === 1 ? '/' : `/page/${page}`} key={page} passHref>
<a
className={
(page + '' === currentPage + ''
? 'font-bold bg-indigo-400 dark:bg-indigo-500 text-white '
: 'border-b duration-500 border-indigo-300 hover:border-indigo-400 ') +
' border-white dark:border-indigo-700 dark:hover:border-indigo-400 cursor-pointer pb-0.5 w-6 text-center font-light hover:font-bold'
}
>
{page}
</a>
</Link>
)
}
function generatePages (page, currentPage, totalPage) {
function generatePages(page, currentPage, totalPage) {
const pages = []
const groupCount = 7 // 最多显示页签数
if (totalPage <= groupCount) {

5
themes/medium/LayoutArchive.js
View File

@@ -44,7 +44,10 @@ export const LayoutArchive = props => {
{post.date.start_date}
</span>{' '}
&nbsp;
<Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
<Link
href={`${BLOG.SUB_PATH}/article/${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>

80
themes/medium/components/BlogPostCard.js
View File

@@ -11,32 +11,48 @@ const BlogPostCard = ({ post, showSummary }) => {
const showPreview = CONFIG_MEDIUM.POST_LIST_PREVIEW && post.blockMap
const { locale } = useGlobal()
return (
<div key={post.id} className='animate__animated animate__fadeIn duration-300 mb-6 max-w-7xl border-b dark:border-gray-800 '>
<div
key={post.id}
className="animate__animated animate__fadeIn duration-300 mb-6 max-w-7xl border-b dark:border-gray-800 "
>
<div className="lg:p-8 p-4 flex flex-col w-full">
<Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
<a
className={
'cursor-pointer font-bold font-sans hover:underline text-3xl leading-tight text-gray-700 dark:text-gray-100 hover:text-green-500 dark:hover:text-green-400'
}
>
{post.title}
</a>
</Link>
<div className='lg:p-8 p-4 flex flex-col w-full'>
<Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
<a className={'cursor-pointer font-bold font-sans hover:underline text-3xl leading-tight text-gray-700 dark:text-gray-100 hover:text-green-500 dark:hover:text-green-400'}>
{post.title}
</a>
</Link>
<div
className={
'flex mt-2 items-center justify-start flex-wrap space-x-3 text-gray-400'
}
>
<div className="text-sm py-1">{post.date.start_date}</div>
{CONFIG_MEDIUM.POST_LIST_CATEGORY && (
<CategoryItem category={post.category} />
)}
{CONFIG_MEDIUM.POST_LIST_TAG &&
post?.tagItems?.map(tag => (
<TagItemMini key={tag.name} tag={tag} />
))}
</div>
<div className={'flex mt-2 items-center justify-start flex-wrap space-x-3 text-gray-400'}>
<div className='text-sm py-1'>{post.date.start_date}</div>
{ CONFIG_MEDIUM.POST_LIST_CATEGORY && <CategoryItem category={post.category}/>}
{ CONFIG_MEDIUM.POST_LIST_TAG && post?.tagItems?.map(tag => <TagItemMini key={tag.name} tag={tag} />)}
</div>
<div className="flex"></div>
<div className='flex'>
</div>
{(!showPreview || showSummary) && <p className='my-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7'>
{(!showPreview || showSummary) && (
<p className="my-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{post.summary}
</p>}
</p>
)}
{showPreview && <div className='overflow-ellipsis truncate'>
{showPreview && (
<div className="overflow-ellipsis truncate">
<NotionRenderer
bodyClassName='max-h-full'
bodyClassName="max-h-full"
recordMap={post.blockMap}
mapPageUrl={mapPageUrl}
components={{
@@ -45,20 +61,20 @@ const BlogPostCard = ({ post, showSummary }) => {
collection: Collection
}}
/>
<div className='pointer-events-none border-t pt-8 border-dashed'>
<div className='w-full justify-start flex'>
<Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
<a className='hover:bg-opacity-100 hover:scale-105 duration-200 pointer-events-auto transform font-bold text-green-500 cursor-pointer'>
{locale.COMMON.ARTICLE_DETAIL}
<i className='ml-1 fas fa-angle-right'/></a>
</Link>
</div>
<div className="pointer-events-none border-t pt-8 border-dashed">
<div className="w-full justify-start flex">
<Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
<a className="hover:bg-opacity-100 hover:scale-105 duration-200 pointer-events-auto transform font-bold text-green-500 cursor-pointer">
{locale.COMMON.ARTICLE_DETAIL}
<i className="ml-1 fas fa-angle-right" />
</a>
</Link>
</div>
</div> }
</div>
</div>
</div>
)}
</div>
</div>
)
}

36
themes/medium/components/PaginationSimple.js
View File

@@ -16,22 +16,38 @@ const PaginationSimple = ({ page, totalPage }) => {
const currentPage = +page
const showNext = currentPage < totalPage
return (
<div className='my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2'>
<Link
href={ {
pathname: (currentPage === 2 ? `${BLOG.PATH || '/'}` : `/page/${currentPage - 1}`), query: router.query.s ? { s: router.query.s } : {}
} } passHref >
<div className="my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2">
<Link
href={{
pathname:
currentPage === 2
? `${BLOG.SUB_PATH || '/'}`
: `/page/${currentPage - 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
passHref
>
<a
rel='prev'
className={`${currentPage === 1 ? 'invisible' : 'block'} text-center w-full duration-200 px-4 py-2 hover:border-green-500 border-b-2 hover:font-bold`}
rel="prev"
className={`${
currentPage === 1 ? 'invisible' : 'block'
} text-center w-full duration-200 px-4 py-2 hover:border-green-500 border-b-2 hover:font-bold`}
>
← {locale.PAGINATION.PREV}
</a>
</Link>
<Link href={ { pathname: `/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} } } passHref>
<Link
href={{
pathname: `/page/${currentPage + 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
passHref
>
<a
rel='next'
className={`${+showNext ? 'block' : 'invisible'} text-center w-full duration-200 px-4 py-2 hover:border-green-500 border-b-2 hover:font-bold`}
rel="next"
className={`${
+showNext ? 'block' : 'invisible'
} text-center w-full duration-200 px-4 py-2 hover:border-green-500 border-b-2 hover:font-bold`}
>
{locale.PAGINATION.NEXT} →
</a>

42
themes/next/components/BlogPostArchive.js
View File

@@ -12,20 +12,34 @@ const BlogPostArchive = ({ posts = [], archiveTitle }) => {
if (!posts || posts.length === 0) {
return <></>
} else {
return <div>
<div className='pt-16 pb-4 text-3xl dark:text-gray-300' id={archiveTitle}>{archiveTitle}</div>
<ul>
{posts.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.PATH}/article/${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>
return (
<div>
<div
className="pt-16 pb-4 text-3xl dark:text-gray-300"
id={archiveTitle}
>
{archiveTitle}
</div>
<ul>
{posts.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}/article/${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>
)
}
}

166
themes/next/components/BlogPostCard.js
View File

@@ -3,7 +3,13 @@ import { useGlobal } from '@/lib/global'
import Image from 'next/image'
import Link from 'next/link'
import React from 'react'
import { Code, Collection, CollectionRow, Equation, NotionRenderer } from 'react-notion-x'
import {
Code,
Collection,
CollectionRow,
Equation,
NotionRenderer
} from 'react-notion-x'
import Card from './Card'
import TagItemMini from './TagItemMini'
import CONFIG_NEXT from '../config_next'
@@ -12,77 +18,115 @@ const BlogPostCard = ({ post, showSummary }) => {
const { locale } = useGlobal()
const showPreview = CONFIG_NEXT.POST_LIST_PREVIEW && post.blockMap
return (
<Card className='w-full animate__animated animate__fadeIn'>
<div key={post.id} className='flex flex-col-reverse justify-between duration-300'>
<div className='lg:p-8 p-4 flex flex-col w-full'>
<Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
<a className={`cursor-pointer font-bold hover:underline text-3xl ${showPreview ? 'text-center' : ''} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}>
{post.title}
</a>
</Link>
<div className={`flex mt-2 items-center ${showPreview ? 'justify-center' : 'justify-start'} flex-wrap dark:text-gray-500 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 `}>
<div>
{ post.category && (<>
<Link href={`/category/${post.category}`} passHref>
<a className='cursor-pointer font-light text-sm hover:underline transform'>
<i className='mr-1 fas fa-folder' />{post.category}
<Card className="w-full animate__animated animate__fadeIn">
<div
key={post.id}
className="flex flex-col-reverse justify-between duration-300"
>
<div className="lg:p-8 p-4 flex flex-col w-full">
<Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
<a
className={`cursor-pointer font-bold hover:underline text-3xl ${
showPreview ? 'text-center' : ''
} leading-tight text-gray-700 dark:text-gray-100 hover:text-blue-500 dark:hover:text-blue-400`}
>
{post.title}
</a>
</Link>
<span className='mx-2'>|</span>
</>) }
<Link href={`/archive#${post?.date?.start_date?.substr(0, 7)}`} passHref>
<a className='font-light hover:underline cursor-pointer text-sm leading-4 mr-3'>{post.date.start_date}</a>
</Link>
<div
className={`flex mt-2 items-center ${
showPreview ? 'justify-center' : 'justify-start'
} flex-wrap dark:text-gray-500 text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 `}
>
<div>
{post.category && (
<>
<Link href={`/category/${post.category}`} passHref>
<a className="cursor-pointer font-light text-sm hover:underline transform">
<i className="mr-1 fas fa-folder" />
{post.category}
</a>
</Link>
<span className="mx-2">|</span>
</>
)}
<Link
href={`/archive#${post?.date?.start_date?.substr(0, 7)}`}
passHref
>
<a className="font-light hover:underline cursor-pointer text-sm leading-4 mr-3">
{post.date.start_date}
</a>
</Link>
</div>
<div className="md:flex-nowrap flex-wrap md:justify-start inline-block">
<div>
{' '}
{post.tagItems.map(tag => (
<TagItemMini key={tag.name} tag={tag} />
))}
</div>
</div>
</div>
<div className='md:flex-nowrap flex-wrap md:justify-start inline-block'>
<div> {post.tagItems.map(tag => (<TagItemMini key={tag.name} tag={tag} />))}</div>
</div>
</div>
{(!showPreview || showSummary) && !post.results && <p className='mt-4 mb-24 text-gray-700 dark:text-gray-300 text-sm font-light leading-7'>
{post.summary}
</p>}
{(!showPreview || showSummary) && !post.results && (
<p className="mt-4 mb-24 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{post.summary}
</p>
)}
{/* 搜索结果 */}
{post.results && <p className='mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7'>
{post.results.map(r => <span key={r}>{r}</span>)}
</p> }
{/* 搜索结果 */}
{post.results && (
<p className="mt-4 text-gray-700 dark:text-gray-300 text-sm font-light leading-7">
{post.results.map(r => (
<span key={r}>{r}</span>
))}
</p>
)}
{showPreview && post?.blockMap && <div className='overflow-ellipsis truncate'>
<NotionRenderer
bodyClassName='max-h-full'
recordMap={post.blockMap}
mapPageUrl={mapPageUrl}
components={{
equation: Equation,
code: Code,
collectionRow: CollectionRow,
collection: Collection
}}
/>
</div> }
{showPreview && post?.blockMap && (
<div className="overflow-ellipsis truncate">
<NotionRenderer
bodyClassName="max-h-full"
recordMap={post.blockMap}
mapPageUrl={mapPageUrl}
components={{
equation: Equation,
code: Code,
collectionRow: CollectionRow,
collection: Collection
}}
/>
</div>
)}
<div className='text-right border-t pt-8 border-dashed'>
<Link href={`${BLOG.PATH}/article/${post.slug}`}>
<a className='hover:bg-opacity-100 hover:underline transform duration-300 p-3 text-white bg-gray-800 dark:bg-black cursor-pointer'>
<div className="text-right border-t pt-8 border-dashed">
<Link href={`${BLOG.SUB_PATH}/article/${post.slug}`}>
<a className="hover:bg-opacity-100 hover:underline transform duration-300 p-3 text-white bg-gray-800 dark:bg-black cursor-pointer">
{locale.COMMON.ARTICLE_DETAIL}
<i className='ml-1 fas fa-angle-right' /></a>
<i className="ml-1 fas fa-angle-right" />
</a>
</Link>
</div>
</div>
{CONFIG_NEXT.POST_LIST_COVER && post?.page_cover && (
<Link href={`${BLOG.SUB_PATH}/article/${post.slug}`} passHref>
<div className="h-72 w-full relative duration-200 cursor-pointer transform overflow-hidden">
<Image
className="hover:scale-105 transform duration-500"
src={post?.page_cover}
alt={post.title}
layout="fill"
objectFit="cover"
loading="lazy"
/>
</div>
</Link>
</div>
)}
</div>
{CONFIG_NEXT.POST_LIST_COVER && post?.page_cover && (
<Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
<div className='h-72 w-full relative duration-200 cursor-pointer transform overflow-hidden'>
<Image className='hover:scale-105 transform duration-500' src={post?.page_cover} alt={post.title} layout='fill' objectFit='cover' loading='lazy' />
</div>
</Link>
)}
</div >
</Card>
)
}

37
themes/next/components/LatestPostsGroup.js
View File

@@ -17,24 +17,41 @@ const LatestPostsGroup = ({ posts }) => {
const currentPath = useRouter().asPath
const { locale } = useGlobal()
return <>
<div className='text-sm pb-1 px-2 flex flex-nowrap justify-between'>
<div className='font-light text-gray-600 dark:text-gray-200'><i className='mr-2 fas fa-archive' />{locale.COMMON.LATEST_POSTS}</div>
return (
<>
<div className="text-sm pb-1 px-2 flex flex-nowrap justify-between">
<div className="font-light text-gray-600 dark:text-gray-200">
<i className="mr-2 fas fa-archive" />
{locale.COMMON.LATEST_POSTS}
</div>
</div>
{posts.map(post => {
const selected = currentPath === `${BLOG.PATH}/article/${post.slug}`
const selected = currentPath === `${BLOG.SUB_PATH}/article/${post.slug}`
return (
<Link key={post.id} title={post.title} href={`${BLOG.PATH}/article/${post.slug}`} passHref>
<a className={ 'my-1 flex font-light'}>
<div className={ (selected ? 'text-white bg-gray-600 ' : 'text-gray-500 dark:text-gray-400 ') + ' text-xs py-1.5 flex overflow-x-hidden whitespace-nowrap hover:bg-gray-500 px-2 duration-200 w-full ' +
'hover:text-white dark:hover:text-white cursor-pointer' }>
<i className='mr-2 fas fa-file-alt'/>
<div className='truncate'>{post.title}</div>
<Link
key={post.id}
title={post.title}
href={`${BLOG.SUB_PATH}/article/${post.slug}`}
passHref
>
<a className={'my-1 flex font-light'}>
<div
className={
(selected
? 'text-white bg-gray-600 '
: 'text-gray-500 dark:text-gray-400 ') +
' text-xs py-1.5 flex overflow-x-hidden whitespace-nowrap hover:bg-gray-500 px-2 duration-200 w-full ' +
'hover:text-white dark:hover:text-white cursor-pointer'
}
>
<i className="mr-2 fas fa-file-alt" />
<div className="truncate">{post.title}</div>
</div>
</a>
</Link>
)
})}
</>
)
}
export default LatestPostsGroup

59
themes/next/components/PaginationNumber.js
View File

@@ -16,45 +16,68 @@ const PaginationNumber = ({ page, totalPage }) => {
const pages = generatePages(page, currentPage, totalPage)
return (
<div className='my-5 flex justify-center items-end font-medium text-black hover:shadow-xl duration-500 bg-white dark:bg-gray-700 dark:text-gray-300 py-3 shadow space-x-2'>
<div className="my-5 flex justify-center items-end font-medium text-black hover:shadow-xl duration-500 bg-white dark:bg-gray-700 dark:text-gray-300 py-3 shadow space-x-2">
{/* 上一页 */}
<Link
href={ {
pathname: (currentPage - 1 === 1 ? `${BLOG.PATH || '/'}` : `/page/${currentPage - 1}`), query: router.query.s ? { s: router.query.s } : {}
} } passHref >
href={{
pathname:
currentPage - 1 === 1
? `${BLOG.SUB_PATH || '/'}`
: `/page/${currentPage - 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
passHref
>
<div
rel='prev'
className={`${currentPage === 1 ? 'invisible' : 'block'} border-white dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-400 w-6 text-center cursor-pointer duration-200 hover:font-bold`}
rel="prev"
className={`${
currentPage === 1 ? 'invisible' : 'block'
} border-white dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-400 w-6 text-center cursor-pointer duration-200 hover:font-bold`}
>
<i className='fas fa-angle-left'/>
<i className="fas fa-angle-left" />
</div>
</Link>
{pages}
{/* 下一页 */}
<Link href={ { pathname: `/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} } } passHref>
<Link
href={{
pathname: `/page/${currentPage + 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
passHref
>
<div
rel='next'
className={`${+showNext ? 'block' : 'invisible'} border-t-2 border-white dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-400 w-6 text-center cursor-pointer duration-500 hover:font-bold`}
rel="next"
className={`${
+showNext ? 'block' : 'invisible'
} border-t-2 border-white dark:border-gray-700 hover:border-gray-400 dark:hover:border-gray-400 w-6 text-center cursor-pointer duration-500 hover:font-bold`}
>
<i className='fas fa-angle-right'/>
<i className="fas fa-angle-right" />
</div>
</Link>
</div>
)
}
function getPageElement (page, currentPage) {
return <Link href={page === 1 ? '/' : `/page/${page}`} key={page} passHref>
<a className={(page + '' === currentPage + '' ? 'font-bold bg-gray-500 dark:bg-gray-400 text-white ' : 'border-t-2 duration-500 border-white hover:border-gray-400 ') +
' border-white dark:border-gray-700 dark:hover:border-gray-400 cursor-pointer w-6 text-center font-light hover:font-bold'}>
{page}
function getPageElement(page, currentPage) {
return (
<Link href={page === 1 ? '/' : `/page/${page}`} key={page} passHref>
<a
className={
(page + '' === currentPage + ''
? 'font-bold bg-gray-500 dark:bg-gray-400 text-white '
: 'border-t-2 duration-500 border-white hover:border-gray-400 ') +
' border-white dark:border-gray-700 dark:hover:border-gray-400 cursor-pointer w-6 text-center font-light hover:font-bold'
}
>
{page}
</a>
</Link>
)
}
function generatePages (page, currentPage, totalPage) {
function generatePages(page, currentPage, totalPage) {
const pages = []
const groupCount = 7 // 最多显示页签数
if (totalPage <= groupCount) {

34
themes/next/components/PaginationSimple.js
View File

@@ -15,22 +15,38 @@ const PaginationSimple = ({ page, showNext }) => {
const router = useRouter()
const currentPage = +page
return (
<div className='my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2'>
<div className="my-10 flex justify-between font-medium text-black dark:text-gray-100 space-x-2">
<Link
href={ {
pathname: (currentPage - 1 === 1 ? `${BLOG.PATH || '/'}` : `/page/${currentPage - 1}`), query: router.query.s ? { s: router.query.s } : {}
} } passHref >
href={{
pathname:
currentPage - 1 === 1
? `${BLOG.SUB_PATH || '/'}`
: `/page/${currentPage - 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
passHref
>
<button
rel='prev'
className={`${currentPage === 1 ? 'invisible' : 'block'} w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
rel="prev"
className={`${
currentPage === 1 ? 'invisible' : 'block'
} w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
>
← {locale.PAGINATION.PREV}
</button>
</Link>
<Link href={ { pathname: `/page/${currentPage + 1}`, query: router.query.s ? { s: router.query.s } : {} } } passHref>
<Link
href={{
pathname: `/page/${currentPage + 1}`,
query: router.query.s ? { s: router.query.s } : {}
}}
passHref
>
<button
rel='next'
className={`${+showNext ? 'block' : 'invisible'} w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
rel="next"
className={`${
+showNext ? 'block' : 'invisible'
} w-full duration-200 px-4 py-2 hover:border-black border-b-2 hover:font-bold`}
>
{locale.PAGINATION.NEXT} →
</button>