diff --git a/blog.config.js b/blog.config.js index 97169215..f0538983 100644 --- a/blog.config.js +++ b/blog.config.js @@ -34,6 +34,7 @@ const BLOG = { NOTION_HOST: process.env.NEXT_PUBLIC_NOTION_HOST || 'https://www.notion.so', // Notion域名，您可以选择用自己的域名进行反向代理，如果不懂得什么是反向代理，请勿修改此项 + BLOG_FAVICON: process.env.NEXT_PUBLIC_FAVICON || '/favicon.ico', // blog favicon 配置, 默认使用 /public/favicon.ico，支持在线图片，如 https://img.imesong.com/favicon.png // 网站字体 FONT_STYLE: process.env.NEXT_PUBLIC_FONT_STYLE || 'font-sans', // ['font-serif','font-sans'] 两种可选，分别是衬线和无衬线: 参考 https://www.jianshu.com/p/55e410bd2115 FONT_URL: [ diff --git a/pages/_document.js b/pages/_document.js index ec4f5335..9c7bd4c8 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -13,16 +13,21 @@ class MyDocument extends Document { return ( - - - {/* 预加载字体 */} - {BLOG.FONT_AWESOME && <> - - - } - {BLOG.FONT_URL?.map((fontUrl, index) => { - return - })} + + + {/* 预加载字体 */} + {BLOG.FONT_AWESOME && <> + + + } + + {BLOG.FONT_URL?.map((fontUrl, index) => { + if (fontUrl.endsWith('.css')) { + return + } else { + return + } + })} diff --git a/public/css/custom.css b/public/css/custom.css index 2c08e02e..d9b26a7a 100644 --- a/public/css/custom.css +++ b/public/css/custom.css @@ -2,4 +2,7 @@ #theme-fukasawa .sideLeft hr{ opacity: .04; -} \ No newline at end of file +} +.fa-info:before { + content: "\f05a"; +} diff --git a/themes/heo/components/DarkModeButton.js b/themes/heo/components/DarkModeButton.js new file mode 100644 index 00000000..9b56e6da --- /dev/null +++ b/themes/heo/components/DarkModeButton.js @@ -0,0 +1,38 @@ +import { useGlobal } from '@/lib/global' +import { saveDarkModeToCookies } from '@/themes/theme' +import { Moon, Sun } from '@/components/HeroIcons' +import { useImperativeHandle } from 'react' + +/** + * 深色模式按钮 + */ +const DarkModeButton = (props) => { + const { cRef, className } = props + const { isDarkMode, updateDarkMode } = useGlobal() + + /** + * 对外暴露方法 + */ + useImperativeHandle(cRef, () => { + return { + handleChangeDarkMode: () => { + handleChangeDarkMode() + } + } + }) + + // 用户手动设置主题 + const handleChangeDarkMode = () => { + const newStatus = !isDarkMode + saveDarkModeToCookies(newStatus) + updateDarkMode(newStatus) + const htmlElement = document.getElementsByTagName('html')[0] + htmlElement.classList?.remove(newStatus ? 'light' : 'dark') + htmlElement.classList?.add(newStatus ? 'dark' : 'light') + } + + return
+
{isDarkMode ? : }
+
+} +export default DarkModeButton diff --git a/themes/heo/components/NavBar.js b/themes/heo/components/NavBar.js index baa65e73..7bf3810f 100644 --- a/themes/heo/components/NavBar.js +++ b/themes/heo/components/NavBar.js @@ -3,6 +3,7 @@ import Logo from './Logo' import throttle from 'lodash.throttle' import RandomPostButton from './RandomPostButton' import SearchButton from './SearchButton' +import DarkModeButton from './DarkModeButton' import SlideOver from './SlideOver' import ReadingProgress from './ReadingProgress' import { MenuListTop } from './MenuListTop' @@ -145,6 +146,7 @@ const NavBar = props => {
+ {!JSON.parse(BLOG.THEME_SWITCH) && } {/* 移动端菜单按钮 */} diff --git a/themes/heo/components/SideRight.js b/themes/heo/components/SideRight.js index 376df833..ec1d4fb7 100644 --- a/themes/heo/components/SideRight.js +++ b/themes/heo/components/SideRight.js @@ -48,7 +48,7 @@ export default function SideRight(props) { {/* 最新文章列表 */} -