theme-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 }