From 205aa16d219edb4f91a273dfca17b63e7b858643 Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Thu, 25 May 2023 13:00:59 +0800 Subject: [PATCH 1/2] add social button --- blog.config.js | 1 + components/NotionIcon.js | 2 +- themes/fukasawa/components/AsideLeft.js | 7 ++- themes/fukasawa/components/SocialButton.js | 39 +++++++++++++ themes/hexo/components/SocialButton.js | 3 + themes/matery/LayoutBase.js | 2 + themes/matery/components/SocialButton.js | 64 +++++++++++++--------- themes/medium/components/SocialButton.js | 3 + themes/next/components/SocialButton.js | 3 + themes/simple/components/Header.js | 12 ++-- themes/simple/components/SocialButton.js | 5 +- 11 files changed, 106 insertions(+), 35 deletions(-) create mode 100644 themes/fukasawa/components/SocialButton.js diff --git a/blog.config.js b/blog.config.js index ecd81f07..ebee8c0d 100644 --- a/blog.config.js +++ b/blog.config.js @@ -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域名，您可以选择用自己的域名进行反向代理 diff --git a/components/NotionIcon.js b/components/NotionIcon.js index 79d1b270..cb6ae846 100644 --- a/components/NotionIcon.js +++ b/components/NotionIcon.js @@ -11,7 +11,7 @@ const NotionIcon = ({ icon }) => { if (icon.startsWith('http') || icon.startsWith('data:')) { // return // eslint-disable-next-line @next/next/no-img-element - return + return } return {icon} diff --git a/themes/fukasawa/components/AsideLeft.js b/themes/fukasawa/components/AsideLeft.js index 0f929bae..58d690ec 100644 --- a/themes/fukasawa/components/AsideLeft.js +++ b/themes/fukasawa/components/AsideLeft.js @@ -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
- +
{ siteInfo?.description }
@@ -29,12 +30,11 @@ function AsideLeft (props) { -
- + {router.asPath !== '/tag' &&
@@ -47,6 +47,7 @@ function AsideLeft (props) {
+
diff --git a/themes/fukasawa/components/SocialButton.js b/themes/fukasawa/components/SocialButton.js new file mode 100644 index 00000000..e7039201 --- /dev/null +++ b/themes/fukasawa/components/SocialButton.js @@ -0,0 +1,39 @@ +import BLOG from '@/blog.config' +import React from 'react' + +/** + * 社交联系方式按钮组 + * @returns {JSX.Element} + * @constructor + */ +const SocialButton = () => { + return
+
+ {BLOG.CONTACT_GITHUB && + + } + {BLOG.CONTACT_TWITTER && + + } + {BLOG.CONTACT_TELEGRAM && + + } + {BLOG.CONTACT_LINKEDIN && + + } + {BLOG.CONTACT_WEIBO && + + } + {BLOG.CONTACT_INSTAGRAM && + + } + {BLOG.CONTACT_EMAIL && + + } + {BLOG.ENABLE_RSS && + + } +
+
+} +export default SocialButton diff --git a/themes/hexo/components/SocialButton.js b/themes/hexo/components/SocialButton.js index 1b199e7b..ebc28542 100644 --- a/themes/hexo/components/SocialButton.js +++ b/themes/hexo/components/SocialButton.js @@ -24,6 +24,9 @@ const SocialButton = () => { {BLOG.CONTACT_WEIBO && } + {BLOG.CONTACT_INSTAGRAM && + + } {BLOG.CONTACT_EMAIL && } diff --git a/themes/matery/LayoutBase.js b/themes/matery/LayoutBase.js index 0fcba177..5e699117 100644 --- a/themes/matery/LayoutBase.js +++ b/themes/matery/LayoutBase.js @@ -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 => {
+ {/* 可扩展的右下角悬浮 */} {props.floatRightBottom}
diff --git a/themes/matery/components/SocialButton.js b/themes/matery/components/SocialButton.js index 1b199e7b..71a5d9d4 100644 --- a/themes/matery/components/SocialButton.js +++ b/themes/matery/components/SocialButton.js @@ -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
-
- {BLOG.CONTACT_GITHUB && - - } - {BLOG.CONTACT_TWITTER && - - } - {BLOG.CONTACT_TELEGRAM && - - } - {BLOG.CONTACT_LINKEDIN && - - } - {BLOG.CONTACT_WEIBO && - - } - {BLOG.CONTACT_EMAIL && - - } - {BLOG.ENABLE_RSS && - - } + const [show, setShow] = useState(false) + const toggleShow = () => { + setShow(!show) + } + + return
+ {!show && } + {show && <> + {BLOG.CONTACT_GITHUB && + + } + {BLOG.CONTACT_TWITTER && + + } + {BLOG.CONTACT_TELEGRAM && + + } + {BLOG.CONTACT_LINKEDIN && + + } + {BLOG.CONTACT_WEIBO && + + } + {BLOG.CONTACT_INSTAGRAM && + + } + {BLOG.CONTACT_EMAIL && + + } + {BLOG.ENABLE_RSS && + + } + + + + }
-
} export default SocialButton diff --git a/themes/medium/components/SocialButton.js b/themes/medium/components/SocialButton.js index 041c0f7a..5f51033d 100644 --- a/themes/medium/components/SocialButton.js +++ b/themes/medium/components/SocialButton.js @@ -23,6 +23,9 @@ const SocialButton = () => { {BLOG.CONTACT_WEIBO && } + {BLOG.CONTACT_INSTAGRAM && + + } {BLOG.CONTACT_EMAIL && } diff --git a/themes/next/components/SocialButton.js b/themes/next/components/SocialButton.js index c8e8c45d..139bb6d0 100644 --- a/themes/next/components/SocialButton.js +++ b/themes/next/components/SocialButton.js @@ -24,6 +24,9 @@ const SocialButton = () => { {BLOG.CONTACT_WEIBO && } + {BLOG.CONTACT_INSTAGRAM && + + } {BLOG.CONTACT_EMAIL && } diff --git a/themes/simple/components/Header.js b/themes/simple/components/Header.js index 89b9a602..80ecbc45 100644 --- a/themes/simple/components/Header.js +++ b/themes/simple/components/Header.js @@ -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) => { {BLOG.AUTHOR}
-
-
{BLOG.AUTHOR}
-
+
+
{BLOG.AUTHOR}
+
-
+
+
+ +
{siteInfo?.description}
diff --git a/themes/simple/components/SocialButton.js b/themes/simple/components/SocialButton.js index c8e8c45d..f62ae7c2 100644 --- a/themes/simple/components/SocialButton.js +++ b/themes/simple/components/SocialButton.js @@ -19,11 +19,14 @@ const SocialButton = () => { } {BLOG.CONTACT_LINKEDIN && - + } {BLOG.CONTACT_WEIBO && } + {BLOG.CONTACT_INSTAGRAM && + + } {BLOG.CONTACT_EMAIL && } From 4e41efbd46b7f2d4ffade2f51cfdcd80dff9a7f3 Mon Sep 17 00:00:00 2001 From: "tangly1024.com" Date: Thu, 25 May 2023 13:02:45 +0800 Subject: [PATCH 2/2] social-instagram-config --- blog.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blog.config.js b/blog.config.js index ebee8c0d..aefa667e 100644 --- a/blog.config.js +++ b/blog.config.js @@ -25,7 +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地址 + CONTACT_INSTAGRAM: process.env.NEXT_PUBLIC_CONTACT_INSTAGRAM || '', // 您的instagram地址 NOTION_HOST: process.env.NEXT_PUBLIC_NOTION_HOST || 'https://www.notion.so', // Notion域名，您可以选择用自己的域名进行反向代理