分享功能加入所有主题

This commit is contained in:
tangly1024.com
2023-04-26 14:20:09 +08:00
parent 27f45c9066
commit c1bf6a4321
14 changed files with 42 additions and 19 deletions

View File

@@ -96,6 +96,8 @@ const BLOG = {
BACKGROUND_DARK: '#000000', // use hex value, don't forget '#'
SUB_PATH: '', // leave this empty unless you want to deploy in a folder
POST_SHARE_BAR_ENABLE: process.env.NEXT_PUBLIC_POST_SHARE_BAR || 'false', // 文章分享功能 ,将在底部显示一个分享条
POST_URL_PREFIX: process.env.NEXT_PUBLIC_POST_URL_PREFIX || 'article',
// POST类型文章的默认路径前缀例如默认POST类型的路径是 /article/[slug]
// 如果此项配置为 '' 空, 则文章将没有前缀路径,使用场景: 希望文章前缀路径为 /post 的情况 支持多级

View File

@@ -5,15 +5,16 @@ import { createPopper } from '@popperjs/core'
import copy from 'copy-to-clipboard'
import QRCode from 'qrcode.react'
import { useGlobal } from '@/lib/global'
import CONFIG_NEXT from '../config_next'
const ShareBar = ({ post }) => {
const router = useRouter()
const [qrCodeShow, setQrCodeShow] = React.useState(false)
const { locale } = useGlobal()
if (!CONFIG_NEXT.ARTICLE_SHARE) {
if (!JSON.parse(BLOG.POST_SHARE_BAR_ENABLE) || !post || post?.type !== 'Post') {
return <></>
}
const shareUrl = BLOG.LINK + router.asPath
// 二维码悬浮
@@ -35,26 +36,25 @@ const ShareBar = ({ post }) => {
alert(locale.COMMON.URL_COPIED)
}
return <>
<div
return <div id='share-bar'
className='py-2 text-gray-500 text-center space-x-2 flex my-1 dark:text-gray-200 overflow-visible'>
<div className='hidden md:block text-gray-800 dark:text-gray-300 mr-2 my-2 whitespace-nowrap'>{locale.COMMON.SHARE}:</div>
<div className='text-3xl cursor-pointer'>
<div className='text-3xl cursor-pointer w-6'>
<a className='text-blue-700' href={`https://www.facebook.com/sharer.php?u=${shareUrl}`} >
<i className='fab fa-facebook-square'/>
</a>
</div>
<div className='text-3xl cursor-pointer'>
<div className='text-3xl cursor-pointer w-6'>
<a className='text-blue-400' target='_blank' rel='noreferrer' href={`https://twitter.com/intent/tweet?title=${post.title}&url${shareUrl}`} >
<i className='fab fa-twitter-square'/>
</a>
</div>
<div className='text-3xl cursor-pointer'>
<div className='text-3xl cursor-pointer w-6'>
<a className='text-blue-500' href={`https://telegram.me/share/url?url=${shareUrl}&text=${post.title}`} >
<i className='fab fa-telegram'/>
</a>
</div>
<div className='cursor-pointer text-2xl'>
<div className='cursor-pointer text-2xl w-6'>
<a className='text-green-600' ref={btnRef} onMouseEnter={openPopover} onMouseLeave={closePopover}>
<i className='fab fa-weixin'/>
<div ref={popoverRef} className={(qrCodeShow ? 'opacity-100 ' : 'invisible opacity-0') + ' transition-all duration-200 text-center py-2'}>
@@ -67,22 +67,21 @@ const ShareBar = ({ post }) => {
</div>
</a>
</div>
<div className='cursor-pointer text-2xl'>
<div className='cursor-pointer text-2xl w-6'>
<a className='text-red-600' target='_blank' rel='noreferrer' href={`https://service.weibo.com/share/share.php?url=${shareUrl}&title=${post.title}`} >
<i className='fab fa-weibo'/>
</a>
</div>
<div className='cursor-pointer text-2xl'>
<div className='cursor-pointer text-2xl w-6'>
<a className='text-blue-400' target='_blank' rel='noreferrer' href={`http://connect.qq.com/widget/shareqq/index.html?url=${shareUrl}&sharesource=qzone&title=${post.title}&desc=${post.summary}`} >
<i className='fab fa-qq'/>
</a>
</div>
<div className='cursor-pointer text-2xl'>
<div className='cursor-pointer text-2xl w-6'>
<a className='text-yellow-600' onClick={copyUrl} >
<i className='fas fa-link'/>
</a>
</div>
</div>
</>
}
export default ShareBar

View File

@@ -65,7 +65,7 @@ export async function getNotionPageData({ pageId, from }) {
const cacheKey = 'page_block_' + pageId
const data = await getDataFromCache(cacheKey)
if (data && data.pageIds?.length > 0) {
console.log('[命中缓存]:', `from:${from}`, `root-page-id:${pageId}`)
console.log('[缓存]:', `from:${from}`, `root-page-id:${pageId}`)
return data
}
const pageRecordMap = await getDataBaseInfoByNotionAPI({ pageId, from })

View File

@@ -14,7 +14,7 @@ export async function getPostBlocks(id, from, slice) {
const cacheKey = 'page_block_' + id
let pageBlock = await getDataFromCache(cacheKey)
if (pageBlock) {
console.log('[命中缓存]:', `from:${from}`, cacheKey)
console.log('[缓存]:', `from:${from}`, cacheKey)
return filterPostBlocks(id, pageBlock, slice)
}

View File

@@ -3,6 +3,7 @@ import { ArticleLock } from './components/ArticleLock'
import NotionPage from '@/components/NotionPage'
import { ArticleInfo } from './components/ArticleInfo'
import Comment from '@/components/Comment'
import ShareBar from '@/components/ShareBar'
export const LayoutSlug = props => {
const { post, lock, validPassword } = props
@@ -17,10 +18,10 @@ export const LayoutSlug = props => {
{lock && <ArticleLock validPassword={validPassword} />}
{!lock && <div id="notion-article" className="px-2">
{post && <>
<ArticleInfo post={post} />
<NotionPage post={post} />
<ShareBar post={post} />
<Comment frontMatter={post}/>
</>}
</div>}

View File

@@ -1,5 +1,6 @@
import Comment from '@/components/Comment'
import NotionPage from '@/components/NotionPage'
import ShareBar from '@/components/ShareBar'
import formatDate from '@/lib/formatDate'
import { useGlobal } from '@/lib/global'
import Link from 'next/link'
@@ -84,6 +85,11 @@ export default function ArticleDetail(props) {
{post && <NotionPage post={post} />}
</section>
<section>
{/* 分享 */}
<ShareBar post={post} />
</section>
<section className="px-1 py-2 my-1 text-sm font-light overflow-auto text-gray-600 dark:text-gray-400">
{/* 文章内嵌广告 */}
<ins className="adsbygoogle"

View File

@@ -11,6 +11,7 @@ import ArticleAdjacent from './components/ArticleAdjacent'
import ArticleCopyright from './components/ArticleCopyright'
import ArticleRecommend from './components/ArticleRecommend'
import { isBrowser } from '@/lib/utils'
import ShareBar from '@/components/ShareBar'
export const LayoutSlug = props => {
const { post, lock, validPassword } = props
@@ -76,6 +77,9 @@ export const LayoutSlug = props => {
<hr className='border-dashed' />
{/* 分享 */}
<ShareBar post={post} />
{/* 评论互动 */}
<div className="duration-200 overflow-x-auto bg-white dark:bg-hexo-black-gray px-3">
<Comment frontMatter={post} />

View File

@@ -10,6 +10,7 @@ import { ArticleInfo } from './components/ArticleInfo'
import Catalog from './components/Catalog'
import JumpToCommentButton from './components/JumpToCommentButton'
import throttle from 'lodash.throttle'
import ShareBar from '@/components/ShareBar'
export const LayoutSlug = props => {
const { post, lock, validPassword } = props
@@ -87,7 +88,8 @@ export const LayoutSlug = props => {
</article>
<hr className='border-dashed' />
{/* 分享 */}
<ShareBar post={post} />
{/* 评论互动 */}
<div className="overflow-x-auto dark:bg-hexo-black-gray px-3">
<Comment frontMatter={post} />

View File

@@ -13,6 +13,7 @@ import ArticleAround from './components/ArticleAround'
import TocDrawer from './components/TocDrawer'
import CategoryItem from './components/CategoryItem'
import TagItemMini from './components/TagItemMini'
import ShareBar from '@/components/ShareBar'
export const LayoutSlug = props => {
const { post, prev, next, siteInfo, lock, validPassword } = props
@@ -92,6 +93,8 @@ export const LayoutSlug = props => {
</div>
</div>
{post.type === 'Post' && <ArticleAround prev={prev} next={next} />}
{/* 分享 */}
<ShareBar post={post} />
<Comment frontMatter={post} />
</section>

View File

@@ -2,7 +2,7 @@ import BLOG from '@/blog.config'
import BlogAround from './BlogAround'
import Comment from '@/components/Comment'
import RecommendPosts from './RecommendPosts'
import ShareBar from './ShareBar'
import ShareBar from '@/components/ShareBar'
import TagItem from './TagItem'
import formatDate from '@/lib/formatDate'
import { useGlobal } from '@/lib/global'
@@ -100,6 +100,9 @@ export default function ArticleDetail(props) {
{/* 推荐文章 */}
{post.type === 'Post' && <RecommendPosts currentPost={post} recommendPosts={recommendPosts} />}
{/* 分享 */}
<ShareBar post={post} />
<section className="flex justify-between">
{/* 分类 */}
{post.category && <>
@@ -124,7 +127,6 @@ export default function ArticleDetail(props) {
))}
</div>
)}
<ShareBar post={post} />
</>
)}
</section>

View File

@@ -30,7 +30,6 @@ const CONFIG_NEXT = {
WIDGET_DARK_MODE: false, // 显示日间/夜间模式切换
WIDGET_TOC: true, // 移动端显示悬浮目录
ARTICLE_SHARE: process.env.NEXT_PUBLIC_ARTICLE_SHARE || false, // 文章分享功能
ARTICLE_RELATE_POSTS: true, // 相关文章推荐
ARTICLE_COPYRIGHT: true // 文章版权声明

View File

@@ -4,6 +4,7 @@ import NotionPage from '@/components/NotionPage'
import { ArticleInfo } from './components/ArticleInfo'
import Comment from '@/components/Comment'
import { ArticleFooter } from './components/ArticleFooter'
import ShareBar from '@/components/ShareBar'
export const LayoutSlug = props => {
const { post, lock, validPassword } = props
@@ -21,6 +22,7 @@ export const LayoutSlug = props => {
{post && <>
<ArticleInfo post={post} />
<NotionPage post={post} />
<ShareBar post={post} />
<Comment frontMatter={post}/>
<ArticleFooter />
</>}

View File

@@ -4,6 +4,7 @@ import NotionPage from '@/components/NotionPage'
import { ArticleInfo } from './components/ArticleInfo'
import Comment from '@/components/Comment'
import ArticleAround from './components/ArticleAround'
import ShareBar from '@/components/ShareBar'
export const LayoutSlug = props => {
const { post, lock, validPassword, prev, next } = props
@@ -23,6 +24,8 @@ export const LayoutSlug = props => {
<ArticleInfo post={post} />
<NotionPage post={post} />
{post.type === 'Post' && <ArticleAround prev={prev} next={next} />}
{/* 分享 */}
<ShareBar post={post} />
<Comment frontMatter={post}/>
</>}
</div>}