theme-style

public/css/theme-fukasawa.css

@@ -1 +0,0 @@
-/* fukasawa的主题相关 */

public/css/theme-hexo.css

@@ -1,30 +0,0 @@
-/*  菜单下划线动画 */
-#theme-hexo .menu-link {
-    text-decoration: none;
-    background-image: linear-gradient(#928CEE, #928CEE);
-    background-repeat: no-repeat;
-    background-position: bottom center;
-    background-size: 0 2px;
-    transition: background-size 100ms ease-in-out;
-}
- 
-#theme-hexo .menu-link:hover {
-    background-size: 100% 2px;
-    color: #928CEE;
-}
-
-/* 设置了从上到下的渐变黑色 */
-#theme-hexo .header-cover::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background:  linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0.5) 100%);
-}
-
-/* Custem */
-.tk-footer{
-    opacity: 0;
-}

public/css/theme-matery.css

@@ -1,11 +0,0 @@
-
-/* 设置了从上到下的渐变黑色 */
-#theme-matery .header-cover::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background:  linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0.5) 100%);
-}

public/css/theme-simple.css

@@ -1,34 +0,0 @@
-#theme-simple #announcement-content {
-  /* background-color: #f6f6f6; */
-}
-
-#theme-simple .blog-item-title {
-  color: #276077;
-}
-
-.dark #theme-simple .blog-item-title {
-  color: #d1d5db;
-}
-
-.notion {
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
-}
-
-
-/*  菜单下划线动画 */
-#theme-simple .menu-link {
-    text-decoration: none;
-    background-image: linear-gradient(#dd3333, #dd3333);
-    background-repeat: no-repeat;
-    background-position: bottom center;
-    background-size: 0 2px;
-    transition: background-size 100ms ease-in-out;
-}
- 
-#theme-simple .menu-link:hover {
-    background-size: 100% 2px;
-    color: #dd3333;
-    cursor: pointer;
-}
-

themes/example/index.js

@@ -26,6 +26,7 @@ import CategoryItem from './components/CategoryItem'
 import TagItem from './components/TagItem'
 import { useRouter } from 'next/router'
 import { Transition } from '@headlessui/react'
+import { Style } from './style'
 
 /**
  * 基础布局框架
@@ -50,6 +51,7 @@ const LayoutBase = props => {
         <div id='theme-example' className='dark:text-gray-300  bg-white dark:bg-black'>
             {/* 网页SEO信息 */}
             <CommonHead meta={meta} />
+            <Style/>
 
             {/* 页头 */}
             <Header {...props} />

themes/example/style.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 此处样式只对当前主题生效
+ * 此处不支持tailwindCSS的 @apply 语法
+ * @returns
+ */
+const Style = () => {
+  return <style jsx global>{`
+    
+    .test {
+      text-color: red;
+    }
+
+  `}</style>
+}
+
+export { Style }

themes/fukasawa/index.js

@@ -5,7 +5,7 @@ import CommonHead from '@/components/CommonHead'
 import TopNav from './components/TopNav'
 import AsideLeft from './components/AsideLeft'
 import BLOG from '@/blog.config'
-import { isBrowser, loadExternalResource } from '@/lib/utils'
+import { isBrowser } from '@/lib/utils'
 import { useGlobal } from '@/lib/global'
 import BlogListPage from './components/BlogListPage'
 import BlogListScroll from './components/BlogListScroll'
@@ -19,6 +19,7 @@ import Link from 'next/link'
 import { Transition } from '@headlessui/react'
 import dynamic from 'next/dynamic'
 import { AdSlot } from '@/components/GoogleAdsense'
+import { Style } from './style'
 
 const Live2D = dynamic(() => import('@/components/Live2D'))
 const Mark = dynamic(() => import('mark.js'))
@@ -61,15 +62,12 @@ const LayoutBase = (props) => {
     }
   }, [isCollapsed])
 
-  if (isBrowser()) {
-    loadExternalResource('/css/theme-fukasawa.css', 'css')
-  }
-
   return (
         <ThemeGlobalFukasawa.Provider value={{ isCollapsed, setIsCollapse }}>
 
             <div id='theme-fukasawa'>
                 <CommonHead meta={meta} />
+                <Style/>
 
                 <TopNav {...props} />
 

themes/fukasawa/style.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 此处样式只对当前主题生效
+ * 此处不支持tailwindCSS的 @apply 语法
+ * @returns
+ */
+const Style = () => {
+  return <style jsx global>{`
+    
+    .test {
+      text-color: red;
+    }
+
+  `}</style>
+}
+
+export { Style }

themes/gitbook/index.js

@@ -30,6 +30,7 @@ import TocDrawer from './components/TocDrawer'
 import NotionPage from '@/components/NotionPage'
 import { ArticleLock } from './components/ArticleLock'
 import { Transition } from '@headlessui/react'
+import { Style } from './style'
 
 // 主题全局变量
 const ThemeGlobalGitbook = createContext()
@@ -58,6 +59,7 @@ const LayoutBase = (props) => {
   return (
         <ThemeGlobalGitbook.Provider value={{ tocVisible, changeTocVisible, filteredPostGroups, setFilteredPostGroups, allNavPages, pageNavVisible, changePageNavVisible }}>
             <CommonHead meta={meta} />
+            <Style/>
 
             <div id='theme-gitbook' className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'>
                 {/* 顶部导航栏 */}

themes/gitbook/style.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 此处样式只对当前主题生效
+ * 此处不支持tailwindCSS的 @apply 语法
+ * @returns
+ */
+const Style = () => {
+  return <style jsx global>{`
+    
+    .test {
+      text-color: red;
+    }
+
+  `}</style>
+}
+
+export { Style }

themes/heo/components/CategoryBar.js

@@ -5,5 +5,15 @@
  * @returns
  */
 export default function CategoryBar(props) {
-  return <div id='category-list' className="h-20 w-full bg-pink-100"></div>
+  const { categoryOptions } = props
+  console.log(categoryOptions)
+  return <div id='category-bar' className="h-14 mb-2 w-full bg-white border flex py-2 px-4 justify-center items-center rounded-xl">
+    {categoryOptions?.map(c => {
+      return (
+            <div key={c.id}>
+                {c.name}
+            </div>
+      )
+    })}
+  </div>
 }

themes/heo/index.js

@@ -31,6 +31,7 @@ import TagItemMini from './components/TagItemMini'
 import Link from 'next/link'
 import CategoryBar from './components/CategoryBar'
 import { Transition } from '@headlessui/react'
+import { Style } from './style'
 
 /**
  * 基础布局 采用上中下布局，移动端使用顶部侧边导航栏
@@ -51,6 +52,7 @@ const LayoutBase = props => {
         <div id='theme-heo' className='bg-[#f7f9fe]'>
             {/* 网页SEO */}
             <CommonHead meta={meta} siteInfo={siteInfo} />
+            <Style/>
 
             {/* 顶部导航 */}
             <Header {...props} />
@@ -71,7 +73,7 @@ const LayoutBase = props => {
             </Transition>
 
             {/* 主区块 */}
-            <main id="wrapper-outer" className={'w-full max-w-[88rem] mx-auto min-h-screen relative px-5'}>
+            <main id="wrapper-outer" className={'w-full max-w-[88rem] mx-auto min-h-screen relative p-5'}>
                 <div id="container-inner" className={(BLOG.LAYOUT_SIDEBAR_REVERSE ? 'flex-row-reverse' : '') + ' w-full mx-auto lg:flex lg:space-x-4 justify-center relative z-10'} >
                     <div className={`${className || ''} w-full  h-full`}>
 

themes/heo/style.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 此处样式只对当前主题生效
+ * 此处不支持tailwindCSS的 @apply 语法
+ * @returns
+ */
+const Style = () => {
+  return <style jsx global>{`
+    
+    .test {
+      text-color: red;
+    }
+
+  `}</style>
+}
+
+export { Style }

themes/hexo/index.js

@@ -7,7 +7,7 @@ import SideRight from './components/SideRight'
 import TopNav from './components/TopNav'
 import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
-import { isBrowser, loadExternalResource } from '@/lib/utils'
+import { isBrowser } from '@/lib/utils'
 import BlogPostListPage from './components/BlogPostListPage'
 import BlogPostListScroll from './components/BlogPostListScroll'
 import Hero from './components/Hero'
@@ -32,6 +32,7 @@ import TagItemMini from './components/TagItemMini'
 import Link from 'next/link'
 import SlotBar from './components/SlotBar'
 import { Transition } from '@headlessui/react'
+import { Style } from './style'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -43,16 +44,11 @@ const LayoutBase = props => {
   const { children, headerSlot, floatSlot, slotTop, meta, siteInfo, className } = props
   const { onLoading } = useGlobal()
 
-  // 加载主题样式
-  if (isBrowser()) {
-    loadExternalResource('/css/theme-hexo.css', 'css')
-  }
-
   return (
         <div id='theme-hexo'>
             {/* 网页SEO */}
             <CommonHead meta={meta} siteInfo={siteInfo} />
-
+            <Style/>
             {/* 顶部导航 */}
             <TopNav {...props} />
 

themes/hexo/style.js

@@ -0,0 +1,45 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 这里的css样式只对当前主题生效
+ * 主题客制化css
+ * @returns
+ */
+const Style = () => {
+  return (<style jsx>{`
+  
+    /*  菜单下划线动画 */
+    #theme-hexo .menu-link {
+        text-decoration: none;
+        background-image: linear-gradient(#928CEE, #928CEE);
+        background-repeat: no-repeat;
+        background-position: bottom center;
+        background-size: 0 2px;
+        transition: background-size 100ms ease-in-out;
+    }
+    
+    #theme-hexo .menu-link:hover {
+        background-size: 100% 2px;
+        color: #928CEE;
+    }
+
+    /* 设置了从上到下的渐变黑色 */
+    #theme-hexo .header-cover::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background:  linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0.5) 100%);
+    }
+
+    /* Custem */
+    .tk-footer{
+        opacity: 0;
+    }
+
+
+  `}</style>)
+}
+
+export { Style }

themes/landing/style.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 此处样式只对当前主题生效
+ * 此处不支持tailwindCSS的 @apply 语法
+ * @returns
+ */
+const Style = () => {
+  return <style jsx global>{`
+    
+    .test {
+      text-color: red;
+    }
+
+  `}</style>
+}
+
+export { Style }

themes/matery/index.js

@@ -4,7 +4,6 @@ import TopNav from './components/TopNav'
 import Live2D from '@/components/Live2D'
 import { useGlobal } from '@/lib/global'
 import BLOG from '@/blog.config'
-import { isBrowser, loadExternalResource } from '@/lib/utils'
 import Footer from './components/Footer'
 import { useEffect } from 'react'
 import RightFloatButtons from './components/RightFloatButtons'
@@ -31,6 +30,7 @@ import Card from './components/Card'
 import JumpToCommentButton from './components/JumpToCommentButton'
 import BlogListBar from './components/BlogListBar'
 import { Transition } from '@headlessui/react'
+import { Style } from './style'
 
 /**
  * 基础布局
@@ -43,14 +43,11 @@ const LayoutBase = props => {
   const { children, headerSlot, meta, siteInfo, containerSlot, post } = props
   const { onLoading } = useGlobal()
 
-  if (isBrowser()) {
-    loadExternalResource('/css/theme-matery.css', 'css')
-  }
-
   return (
         <div id='theme-matery' className="min-h-screen flex flex-col justify-between bg-hexo-background-gray dark:bg-black w-full">
             {/* SEO相关 */}
             <CommonHead meta={meta} siteInfo={siteInfo} />
+            <Style/>
 
             {/* 顶部导航栏 */}
             <TopNav {...props} />

themes/matery/style.js

@@ -0,0 +1,28 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 此处样式只对当前主题生效
+ * 此处不支持tailwindCSS的 @apply 语法
+ * @returns
+ */
+const Style = () => {
+  return <style jsx global>{`
+    
+    .test {
+      text-color: red;
+    }
+
+    /* 设置了从上到下的渐变黑色 */
+    #theme-matery .header-cover::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background:  linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0) 25%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0.5) 100%);
+    }
+    
+  `}</style>
+}
+
+export { Style }

themes/medium/index.js

@@ -34,6 +34,7 @@ import TagItemMini from './components/TagItemMini'
 import ShareBar from '@/components/ShareBar'
 import Link from 'next/link'
 import { Transition } from '@headlessui/react'
+import { Style } from './style'
 
 // 主题全局状态
 const ThemeGlobalMedium = createContext()
@@ -54,7 +55,10 @@ const LayoutBase = props => {
 
   return (
         <ThemeGlobalMedium.Provider value={{ tocVisible, changeTocVisible }}>
+            {/* SEO相关 */}
             <CommonHead meta={meta} />
+            {/* CSS样式 */}
+            <Style/>
 
             <div id='theme-medium' className='bg-white dark:bg-hexo-black-gray w-full h-full min-h-screen justify-center dark:text-gray-300'>
 

themes/medium/style.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 此处样式只对当前主题生效
+ * 此处不支持tailwindCSS的 @apply 语法
+ * @returns
+ */
+const Style = () => {
+  return <style jsx global>{`
+    
+    .test {
+      text-color: red;
+    }
+
+  `}</style>
+}
+
+export { Style }

themes/next/index.js

@@ -27,6 +27,7 @@ import ArticleDetail from './components/ArticleDetail'
 import Link from 'next/link'
 import BlogListBar from './components/BlogListBar'
 import { Transition } from '@headlessui/react'
+import { Style } from './style'
 
 /**
  * 基础布局 采用左中右三栏布局，移动端使用顶部导航栏
@@ -73,6 +74,8 @@ const LayoutBase = (props) => {
         <div id='theme-next'>
             {/* SEO相关 */}
             <CommonHead meta={meta} />
+            <Style/>
+
             {/* 移动端顶部导航栏 */}
             <TopNav {...props} />
 

themes/next/style.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 此处样式只对当前主题生效
+ * 此处不支持tailwindCSS的 @apply 语法
+ * @returns
+ */
+const Style = () => {
+  return <style jsx global>{`
+    
+    .test {
+      text-color: red;
+    }
+
+  `}</style>
+}
+
+export { Style }

themes/nobelium/index.js

@@ -27,6 +27,7 @@ import ShareBar from '@/components/ShareBar'
 import Link from 'next/link'
 import BlogListBar from './components/BlogListBar'
 import { Transition } from '@headlessui/react'
+import { Style } from './style'
 
 /**
  * 基础布局 采用左右两侧布局，移动端使用顶部导航栏
@@ -44,6 +45,7 @@ const LayoutBase = props => {
         <div id='theme-nobelium' className='nobelium relative dark:text-gray-300  w-full  bg-white dark:bg-black min-h-screen'>
             {/* SEO相关 */}
             <CommonHead meta={meta} />
+            <Style/>
 
             {/* 顶部导航栏 */}
             <Nav {...props} />

themes/nobelium/style.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 此处样式只对当前主题生效
+ * 此处不支持tailwindCSS的 @apply 语法
+ * @returns
+ */
+const Style = () => {
+  return <style jsx global>{`
+    
+    .test {
+      text-color: red;
+    }
+
+  `}</style>
+}
+
+export { Style }

themes/plog/index.js

@@ -25,6 +25,7 @@ import { Transition } from '@headlessui/react'
 import BottomNav from './components/BottomNav'
 import { saveDarkModeToCookies } from '@/themes/theme'
 import Modal from './components/Modal'
+import { Style } from './style'
 
 // 主题全局状态
 const ThemeGlobalPlog = createContext()
@@ -63,6 +64,7 @@ const LayoutBase = props => {
         <div id='theme-plog' className='plog relative dark:text-gray-300 w-full bg-black min-h-screen'>
             {/* SEO相关 */}
             <CommonHead meta={meta} />
+            <Style/>
 
             {/* 移动端顶部导航栏 */}
             <Header {...props} />

themes/plog/style.js

@@ -0,0 +1,17 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 此处样式只对当前主题生效
+ * 此处不支持tailwindCSS的 @apply 语法
+ * @returns
+ */
+const Style = () => {
+  return <style jsx global>{`
+    
+    .test {
+      text-color: red;
+    }
+
+  `}</style>
+}
+
+export { Style }

themes/simple/index.js

@@ -25,6 +25,7 @@ import { Footer } from './components/Footer'
 import { useGlobal } from '@/lib/global'
 import SearchInput from './components/SearchInput'
 import { Transition } from '@headlessui/react'
+import { Style } from './style'
 
 /**
  * 基础布局
@@ -42,6 +43,7 @@ const LayoutBase = props => {
   return (
         <div id='theme-simple' className='min-h-screen flex flex-col dark:text-gray-300  bg-white dark:bg-black'>
             <CommonHead meta={meta} />
+            <Style/>
 
             {CONFIG.TOP_BAR && <TopBar {...props} />}
 

themes/simple/style.js

@@ -0,0 +1,49 @@
+/* eslint-disable react/no-unknown-property */
+/**
+ * 此处样式只对当前主题生效
+ * 此处不支持tailwindCSS的 @apply 语法
+ * @returns
+ */
+const Style = () => {
+  return <style jsx global>{`
+    
+  #theme-simple #announcement-content {
+    /* background-color: #f6f6f6; */
+  }
+  
+  #theme-simple .blog-item-title {
+    color: #276077;
+  }
+  
+  .dark #theme-simple .blog-item-title {
+    color: #d1d5db;
+  }
+  
+  .notion {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+  
+  
+  /*  菜单下划线动画 */
+  #theme-simple .menu-link {
+      text-decoration: none;
+      background-image: linear-gradient(#dd3333, #dd3333);
+      background-repeat: no-repeat;
+      background-position: bottom center;
+      background-size: 0 2px;
+      transition: background-size 100ms ease-in-out;
+  }
+   
+  #theme-simple .menu-link:hover {
+      background-size: 100% 2px;
+      color: #dd3333;
+      cursor: pointer;
+  }
+  
+  
+
+  `}</style>
+}
+
+export { Style }