d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-14 15:09:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

add social button

Browse Source
This commit is contained in:
tangly1024.com
2023-05-25 13:00:59 +08:00
parent 3953c63188
commit 205aa16d21
11 changed files with 106 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
blog.config.js
View File

@@ -25,6 +25,7 @@ const BLOG = {
CONTACT_GITHUB: process.env.NEXT_PUBLIC_CONTACT_GITHUB || '', // 你的github个人主页 例如 https://github.com/tangly1024
CONTACT_TELEGRAM: process.env.NEXT_PUBLIC_CONTACT_TELEGRAM || '', // 你的telegram 地址 例如 https://t.me/tangly_1024
CONTACT_LINKEDIN: process.env.NEXT_PUBLIC_CONTACT_LINKEDIN || '', // 你的linkedIn 首页
CONTACT_INSTAGRAM: process.env.NEXT_PUBLIC_CONTACT_INSTAGRAM || 'http://sss', // 您的instagram地址
NOTION_HOST: process.env.NEXT_PUBLIC_NOTION_HOST || 'https://www.notion.so', // Notion域名，您可以选择用自己的域名进行反向代理

2
components/NotionIcon.js
View File

@@ -11,7 +11,7 @@ const NotionIcon = ({ icon }) => {
if (icon.startsWith('http') || icon.startsWith('data:')) {
// return <Image src={icon} width={30} height={30}/>
// eslint-disable-next-line @next/next/no-img-element
return <img src={icon} className='w-8 inline mr-1'/>
return <img src={icon} className='w-8 h-8 my-auto inline mr-1'/>
}
return <span className='mr-1'>{icon}</span>

7
themes/fukasawa/components/AsideLeft.js
View File

@@ -8,13 +8,14 @@ import Catalog from './Catalog'
import Announcement from './Announcement'
import { useRouter } from 'next/router'
import DarkModeButton from '@/components/DarkModeButton'
import SocialButton from './SocialButton'
function AsideLeft (props) {
const { tagOptions, currentTag, categoryOptions, currentCategory, post, slot, siteInfo, notice } = props
const router = useRouter()
return <div className='sideLeft relative w-80 bg-white dark:bg-hexo-black-gray min-h-screen px-10 py-14 hidden lg:block z-20'>
<Logo {...props}/>
<section className='siteInfo flex flex-col dark:text-gray-300 pt-8'>
{ siteInfo?.description }
</section>
@@ -29,12 +30,11 @@ function AsideLeft (props) {
<SearchInput {...props}/>
</section>
<section className='flex flex-col dark:text-gray-300'>
<div className='w-12 my-4' />
<Announcement post={notice}/>
</section>
{router.asPath !== '/tag' && <section className='flex flex-col'>
<div className='w-12 my-4' />
<GroupTag tags={tagOptions} currentTag={currentTag}/>
@@ -47,6 +47,7 @@ function AsideLeft (props) {
<section className='flex flex-col'>
<div className='w-12 my-4' />
<SocialButton/>
<SiteInfo/>
</section>

39
themes/fukasawa/components/SocialButton.js Normal file
View File

@@ -0,0 +1,39 @@
import BLOG from '@/blog.config'
import React from 'react'
/**
* 社交联系方式按钮组
* @returns {JSX.Element}
* @constructor
*/
const SocialButton = () => {
return <div className='w-52 flex-wrap flex'>
<div className='space-x-3 text-lg text-gray-400 dark:text-gray-400'>
{BLOG.CONTACT_GITHUB && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.CONTACT_GITHUB} >
<i className='fab fa-github transform hover:scale-125 duration-150'/>
</a>}
{BLOG.CONTACT_TWITTER && <a target='_blank' rel='noreferrer' title={'twitter'} href={BLOG.CONTACT_TWITTER} >
<i className='fab fa-twitter transform hover:scale-125 duration-150'/>
</a>}
{BLOG.CONTACT_TELEGRAM && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_TELEGRAM} title={'telegram'} >
<i className='fab fa-telegram transform hover:scale-125 duration-150'/>
</a>}
{BLOG.CONTACT_LINKEDIN && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_LINKEDIN} title={'linkedIn'} >
<i className='fab fa-linkedin transform hover:scale-125 duration-150'/>
</a>}
{BLOG.CONTACT_WEIBO && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.CONTACT_WEIBO} >
<i className='fab fa-weibo transform hover:scale-125 duration-150'/>
</a>}
{BLOG.CONTACT_INSTAGRAM && <a target='_blank' rel='noreferrer' title={'instagram'} href={BLOG.CONTACT_INSTAGRAM} >
<i className='fab fa-instagram transform hover:scale-125 duration-150'/>
</a>}
{BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
<i className='fas fa-envelope transform hover:scale-125 duration-150'/>
</a>}
{BLOG.ENABLE_RSS && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
<i className='fas fa-rss transform hover:scale-125 duration-150'/>
</a>}
</div>
</div>
}
export default SocialButton

3
themes/hexo/components/SocialButton.js
View File

@@ -24,6 +24,9 @@ const SocialButton = () => {
{BLOG.CONTACT_WEIBO && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.CONTACT_WEIBO} >
<i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-indigo-400 hover:text-indigo-600'/>
</a>}
{BLOG.CONTACT_INSTAGRAM && <a target='_blank' rel='noreferrer' title={'instagram'} href={BLOG.CONTACT_INSTAGRAM} >
<i className='transform hover:scale-125 duration-150 fab fa-instagram dark:hover:text-indigo-400 hover:text-indigo-600'/>
</a>}
{BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
<i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-indigo-400 hover:text-indigo-600'/>
</a>}

2
themes/matery/LayoutBase.js
View File

@@ -11,6 +11,7 @@ import BLOG from '@/blog.config'
import FloatDarkModeButton from './components/FloatDarkModeButton'
import throttle from 'lodash.throttle'
import { isBrowser, loadExternalResource } from '@/lib/utils'
import SocialButton from './components/SocialButton'
/**
* 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -71,6 +72,7 @@ const LayoutBase = props => {
<div className="bottom-40 right-2 fixed justify-end space-y-2 z-20">
<FloatDarkModeButton />
<JumpToTopButton />
<SocialButton/>
{/* 可扩展的右下角悬浮 */}
{props.floatRightBottom}
</div>

64
themes/matery/components/SocialButton.js
View File

@@ -1,36 +1,48 @@
import BLOG from '@/blog.config'
import React from 'react'
import React, { useState } from 'react'
/**
* 社交联系方式按钮组
* 社交联系方式按钮组 可折叠的组件
* @returns {JSX.Element}
* @constructor
*/
const SocialButton = () => {
return <div className='w-full justify-center flex-wrap flex'>
<div className='space-x-3 text-xl text-gray-600 dark:text-gray-300 '>
{BLOG.CONTACT_GITHUB && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.CONTACT_GITHUB} >
<i className='transform hover:scale-125 duration-150 fab fa-github dark:hover:text-indigo-400 hover:text-indigo-600'/>
</a>}
{BLOG.CONTACT_TWITTER && <a target='_blank' rel='noreferrer' title={'twitter'} href={BLOG.CONTACT_TWITTER} >
<i className='transform hover:scale-125 duration-150 fab fa-twitter dark:hover:text-indigo-400 hover:text-indigo-600'/>
</a>}
{BLOG.CONTACT_TELEGRAM && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_TELEGRAM} title={'telegram'} >
<i className='transform hover:scale-125 duration-150 fab fa-telegram dark:hover:text-indigo-400 hover:text-indigo-600'/>
</a>}
{BLOG.CONTACT_LINKEDIN && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_LINKEDIN} title={'linkIn'} >
<i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600'/>
</a>}
{BLOG.CONTACT_WEIBO && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.CONTACT_WEIBO} >
<i className='transform hover:scale-125 duration-150 fab fa-weibo dark:hover:text-indigo-400 hover:text-indigo-600'/>
</a>}
{BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
<i className='transform hover:scale-125 duration-150 fas fa-envelope dark:hover:text-indigo-400 hover:text-indigo-600'/>
</a>}
{BLOG.ENABLE_RSS && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
<i className='transform hover:scale-125 duration-150 fas fa-rss dark:hover:text-indigo-400 hover:text-indigo-600'/>
</a>}
const [show, setShow] = useState(false)
const toggleShow = () => {
setShow(!show)
}
return <div className='flex flex-col transform hover:scale-105 duration-200 text-white text-center bg-indigo-700 rounded-full dark:bg-black cursor-pointer py-2.5'>
{!show && <i onClick={toggleShow} className='transform hover:scale-125 duration-150 fas fa-user py-0.5' />}
{show && <>
{BLOG.CONTACT_GITHUB && <a target='_blank' rel='noreferrer' title={'github'} href={BLOG.CONTACT_GITHUB} >
<i className='transform hover:scale-125 duration-150 fab fa-github ' />
</a>}
{BLOG.CONTACT_TWITTER && <a target='_blank' rel='noreferrer' title={'twitter'} href={BLOG.CONTACT_TWITTER} >
<i className='transform hover:scale-125 duration-150 fab fa-twitter ' />
</a>}
{BLOG.CONTACT_TELEGRAM && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_TELEGRAM} title={'telegram'} >
<i className='transform hover:scale-125 duration-150 fab fa-telegram ' />
</a>}
{BLOG.CONTACT_LINKEDIN && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_LINKEDIN} title={'linkIn'} >
<i className='transform hover:scale-125 duration-150 fab fa-linkedin ' />
</a>}
{BLOG.CONTACT_WEIBO && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.CONTACT_WEIBO} >
<i className='transform hover:scale-125 duration-150 fab fa-weibo ' />
</a>}
{BLOG.CONTACT_INSTAGRAM && <a target='_blank' rel='noreferrer' title={'instagram'} href={BLOG.CONTACT_INSTAGRAM} >
<i className='transform hover:scale-125 duration-150 fab fa-instagram ' />
</a>}
{BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
<i className='transform hover:scale-125 duration-150 fas fa-envelope ' />
</a>}
{BLOG.ENABLE_RSS && <a target='_blank' rel='noreferrer' title={'RSS'} href={'/feed'} >
<i className='transform hover:scale-125 duration-150 fas fa-rss ' />
</a>}
<i onClick={toggleShow} className='transform hover:scale-125 duration-150 fas fa-close ' />
</>}
</div>
</div>
}
export default SocialButton

3
themes/medium/components/SocialButton.js
View File

@@ -23,6 +23,9 @@ const SocialButton = () => {
{BLOG.CONTACT_WEIBO && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.CONTACT_WEIBO} >
<i className='fab fa-weibo transform hover:scale-125 duration-150 hover:text-green-600'/>
</a>}
{BLOG.CONTACT_INSTAGRAM && <a target='_blank' rel='noreferrer' title={'instagram'} href={BLOG.CONTACT_INSTAGRAM} >
<i className='fab fa-instagram transform hover:scale-125 duration-150 hover:text-green-600'/>
</a>}
{BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
<i className='fas fa-envelope transform hover:scale-125 duration-150 hover:text-green-600'/>
</a>}

3
themes/next/components/SocialButton.js
View File

@@ -24,6 +24,9 @@ const SocialButton = () => {
{BLOG.CONTACT_WEIBO && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.CONTACT_WEIBO} >
<i className='fab fa-weibo transform hover:scale-125 duration-150'/>
</a>}
{BLOG.CONTACT_INSTAGRAM && <a target='_blank' rel='noreferrer' title={'instagram'} href={BLOG.CONTACT_INSTAGRAM} >
<i className='fab fa-instagram transform hover:scale-125 duration-150'/>
</a>}
{BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
<i className='fas fa-envelope transform hover:scale-125 duration-150'/>
</a>}

12
themes/simple/components/Header.js
View File

@@ -1,6 +1,7 @@
import BLOG from '@/blog.config'
import Link from 'next/link'
import CONFIG_SIMPLE from '../config_simple'
import SocialButton from './SocialButton'
// import CONFIG_SIMPLE from '../config_simple'
/**
@@ -24,13 +25,16 @@ export const Header = (props) => {
<img src={avatar} className='rounded-full' width={160} alt={BLOG.AUTHOR} />
</div>
<div>
<div className='text-3xl font-serif dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.AUTHOR}</div>
<div className='font-light dark:text-white py-2 hover:scale-105 transform duration-200 text-center' dangerouslySetInnerHTML={{ __html: CONFIG_SIMPLE.LOGO_DESCRIPTION }}/>
<div className='flex-col flex justify-center'>
<div className='text-2xl font-serif dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.AUTHOR}</div>
<div className='font-light dark:text-white py-2 hover:scale-105 transform duration-200 text-center' dangerouslySetInnerHTML={{ __html: CONFIG_SIMPLE.LOGO_DESCRIPTION }} />
</div>
</div>
</div>
</Link>
<div className='flex justify-center'>
<SocialButton />
</div>
<div className='text-xs mt-4 text-gray-500 dark:text-gray-300'>{siteInfo?.description}</div>
</div>
</header>

5
themes/simple/components/SocialButton.js
View File

@@ -19,11 +19,14 @@ const SocialButton = () => {
<i className='fab fa-telegram transform hover:scale-125 duration-150'/>
</a>}
{BLOG.CONTACT_LINKEDIN && <a target='_blank' rel='noreferrer' href={BLOG.CONTACT_LINKEDIN} title={'linkedIn'} >
<i className='transform hover:scale-125 duration-150 fab fa-linkedin dark:hover:text-indigo-400 hover:text-indigo-600'/>
<i className='fab fa-linkedin transform hover:scale-125 duration-150'/>
</a>}
{BLOG.CONTACT_WEIBO && <a target='_blank' rel='noreferrer' title={'weibo'} href={BLOG.CONTACT_WEIBO} >
<i className='fab fa-weibo transform hover:scale-125 duration-150'/>
</a>}
{BLOG.CONTACT_INSTAGRAM && <a target='_blank' rel='noreferrer' title={'instagram'} href={BLOG.CONTACT_INSTAGRAM} >
<i className='fab fa-instagram transform hover:scale-125 duration-150'/>
</a>}
{BLOG.CONTACT_EMAIL && <a target='_blank' rel='noreferrer' title={'email'} href={`mailto:${BLOG.CONTACT_EMAIL}`} >
<i className='fas fa-envelope transform hover:scale-125 duration-150'/>
</a>}