4.0 仿Youtube界面样式

2769339589 · Oct 11, 2021 · 05d79a3 · 05d79a3
1 parent 3d02b0f
commit 05d79a3
Show file tree

Hide file tree

Showing 22 changed files with 387 additions and 296 deletions.
diff --git a/components/DarkModeButton.js b/components/DarkModeButton.js
@@ -8,7 +8,7 @@ const DarkModeButton = () => {
     changeTheme(newTheme)
     localStorage.setItem('theme', newTheme)
   }
-  return <div className='z-10 p-1 border hover:shadow-xl duration-200 dark:border-gray-500 mr-2 h-12 my-2 bg-white dark:bg-gray-600 dark:bg-opacity-70 bg-opacity-70 dark:hover:bg-gray-100 text-xl cursor-pointer dark:text-gray-300 dark:hover:text-black'>
+  return <div className='z-10 p-1 duration-200 mr-2 h-12 bg-white dark:bg-gray-600 dark:bg-opacity-70 bg-opacity-70 text-xl cursor-pointer dark:text-gray-300 '>
     <i className={'fa p-2.5 hover:scale-125 transform duration-200 ' + (theme === 'dark' ? ' fa-sun-o' : ' fa-moon-o') } onClick={handleChangeDarkMode} />
   </div>
 }

diff --git a/components/Footer.js b/components/Footer.js
@@ -4,15 +4,13 @@ import React from 'react'
 const Footer = ({ fullWidth = true }) => {
   const d = new Date()
   const y = d.getFullYear()
-  const from = +BLOG.since
   return (
     <footer
-      className='flex-shrink-0 m-auto w-full text-gray-500 dark:text-gray-400 text-sm text-gray-400'
+      className='flex-shrink-0 m-auto w-full text-gray-500 dark:text-gray-400 text-xs text-gray-400 p-6'
     >
-        <hr className='py-2'/>
         <span className='fa fa-shield leading-6'> <a href='https://beian.miit.gov.cn/' className='ml-1'>闽ICP备20010331号</a></span>
         <br />
-        <span className='fa fa-copyright leading-6'> {from === y || !from ? y : `${from} - ${y}`} {BLOG.author} </span>
+        <span className='fa fa-copyright leading-6'> {` ${y}`} {BLOG.author} </span>
         <br />
         <span id='busuanzi_container_site_pv' className='hidden'>
         <a id='busuanzi_container_site_pv' href='https://www.cnzz.com/stat/website.php?web_id=1279970751' target='_blank'

diff --git a/components/Header.js b/components/Header.js
@@ -26,7 +26,7 @@ const NavBar = () => {
   )
 }
 
-const Header = ({ navBarTitle, fullWidth }) => {
+const Header = ({ navBarTitle, fullWidth = true }) => {
   const navRef = useRef(null)
   const sentinelRef = useRef([])
   // 当Header移出屏幕时改变的样式
@@ -49,7 +49,7 @@ const Header = ({ navBarTitle, fullWidth }) => {
   }, [sentinelRef])
   return (
     <>
-      { BLOG.autoCollapsedNavBar === true && (
+      {BLOG.autoCollapsedNavBar === true && (
         <script
           dangerouslySetInnerHTML={{
             __html: `
@@ -70,38 +70,41 @@ const Header = ({ navBarTitle, fullWidth }) => {
           }}
         />
       )}
-      <div className='observer-element h-0.5' ref={sentinelRef}/>
+       <div className='observer-element h-0.5 ' ref={sentinelRef} />
+
       <div
-        className={`sticky-nav m-auto w-full h-6 flex flex-row justify-between items-center mb-2 py-8 bg-opacity-60 ${
-          !fullWidth ? 'max-w-5xl px-4' : 'px-4 md:px-24'
-        }`}
+        className='z-30 px-4 sticky-nav m-auto w-full h-6 flex flex-row justify-between items-center py-6 bg-white bg-opacity-80 '
         id='sticky-nav'
         ref={navRef}
       >
         <div className='flex items-center'>
-          <Link href='/'>
-            <a>
-              <div className='h-6'>
-                <Image
-                  alt={BLOG.author}
-                  width={24}
-                  height={24}
-                  src='/favicon.svg'
-                  className='rounded-full'
-                />
-              </div>
-            </a>
-          </Link>
+
+          <div className='flex cursor-pointer'>
+            <div className='px-2 text-xl'>
+              <i className='fa fa-bars hover:scale-125 transform duration-200' />
+            </div>
+            <Image
+              alt={BLOG.author}
+              width={28}
+              height={28}
+              src='/avatar.svg'
+              className='rounded-full'
+            />
+            <div
+              className='mx-1 text-center cursor-pointer text-xl p-1
+              dark:bg-gray-900 dark:text-gray-300 font-semibold
+              dark:hover:bg-gray-600 text-black hover:scale-105
+              hover:shadow-2xl duration-200 transform'>{BLOG.title}</div>
+
+          </div>
           {navBarTitle
             ? (
-              <p className='ml-2 font-medium text-gray-500 dark:text-night header-name'>
+              <p className='ml-1 font-medium text-gray-500 dark:text-night header-name'>
                 {navBarTitle}
               </p>
               )
             : (
-              <p className='ml-2 font-medium text-500 dark:text-night header-name'>
-                {BLOG.title} {' '}
-                {BLOG.title},{' '}
+              <p className='ml-1 font-medium dark:text-night header-name'>
                 <span className='font-normal'>{BLOG.description}</span>
               </p>
               )}

diff --git a/components/TopJumper.js → components/JumpToTop.js b/components/TopJumper.js → components/JumpToTop.js
@@ -3,11 +3,12 @@ import throttle from 'lodash.throttle'
 import { useLocale } from '@/lib/locale'
 
 /**
- * 跳转到网页顶部；当屏幕下滑500像素后会出现该控件
+ * 跳转到网页顶部
+ * 当屏幕下滑500像素后会出现该控件
  * @returns {JSX.Element}
  * @constructor
  */
-const TopJumper = () => {
+const JumpToTop = () => {
   const locale = useLocale()
 
   const [show, switchShow] = useState(false)
@@ -36,4 +37,4 @@ const TopJumper = () => {
   )
 }
 
-export default TopJumper
+export default JumpToTop
diff --git a/components/LeftFloatButton.js b/components/LeftFloatButton.js
@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from 'react'
+import throttle from 'lodash.throttle'
+import DarkModeButton from '@/components/DarkModeButton'
+
+/**
+ * 左上角悬浮菜单栏
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const LeftFloatButton = () => {
+  // 监听resize事件
+  useEffect(() => {
+    window.addEventListener('resize', collapseSideBar)
+    collapseSideBar()
+    return () => {
+      window.removeEventListener('resize', collapseSideBar)
+    }
+  }, [])
+
+  const collapseSideBar = throttle(() => {
+    if (window.innerWidth > 1300) {
+      changeCollapse(false)
+    } else {
+      changeCollapse(true)
+    }
+  }, 500)
+  const [collapse, changeCollapse] = useState(true)
+  console.log(collapse)
+  return <div
+    className={(collapse ? 'left-0' : 'left-72') + ' z-30 fixed flex flex-nowrap md:flex-col  top-0 pl-4 py-1 duration-500 ease-in-out'}>
+    {/* 菜单折叠 */}
+    <div className='p-1 border hover:shadow-xl duration-200 dark:border-gray-500 h-12 bg-white dark:bg-gray-600 dark:bg-opacity-70 bg-opacity-70
+      dark:hover:bg-gray-100 text-xl cursor-pointer mr-2 my-2 dark:text-gray-300 dark:hover:text-black'>
+      <i className='fa fa-bars p-2.5 hover:scale-125 transform duration-200'
+         onClick={() => changeCollapse(!collapse)} />
+    </div>
+    {/* 夜间模式 */}
+    <DarkModeButton />
+  </div>
+}
+
+export default LeftFloatButton
diff --git a/components/Logo.js b/components/Logo.js
@@ -0,0 +1,11 @@
+import Link from 'next/link'
+import BLOG from '@/blog.config'
+import React from 'react'
+
+const Logo = () => {
+  return <Link href='/'>
+    <div
+      className='mx-auto text-center cursor-pointer text-3xl dark:bg-gray-900 dark:text-gray-300 font-semibold dark:hover:bg-gray-600 bg-gray-700 text-white p-2 hover:scale-105 hover:shadow-2xl duration-200 transform'>{BLOG.title}</div>
+  </Link>
+}
+export default Logo
diff --git a/components/Pagination.js b/components/Pagination.js
@@ -3,6 +3,13 @@ import { useLocale } from '@/lib/locale'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
+/**
+ * 翻页插件
+ * @param page 当前页码
+ * @param showNext 是否有下一页
+ * @returns {JSX.Element}
+ * @constructor
+ */
 const Pagination = ({ page, showNext }) => {
   const locale = useLocale()
   const router = useRouter()

diff --git a/components/Progress.js b/components/Progress.js
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react'
 import throttle from 'lodash.throttle'
 
 /**
- * 跳转到网页顶部；当屏幕下滑500像素后会出现该控件
+ * 顶部页面阅读进度条
  * @returns {JSX.Element}
  * @constructor
  */

diff --git a/components/RewardButton.js b/components/RewardButton.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { createPopper } from '@popperjs/core'
 
 /**
- * 赞赏模块
+ * 赞赏按钮
  * @returns {JSX.Element}
  * @constructor
  */

diff --git a/components/RightAside.js b/components/RightAside.js
@@ -2,8 +2,15 @@ import React, { useState } from 'react'
 import TocBar from '@/components/TocBar'
 import throttle from 'lodash.throttle'
 import ShareButton from '@/components/ShareButton'
-import TopJumper from '@/components/TopJumper'
+import JumpToTop from '@/components/JumpToTop'
 
+/**
+ * 右侧边栏
+ * @param toc
+ * @param post
+ * @returns {JSX.Element}
+ * @constructor
+ */
 const RightAside = ({ toc, post }) => {
   // 无目录就直接返回空
   if (toc.length < 1) return <></>
@@ -43,7 +50,7 @@ const RightAside = ({ toc, post }) => {
         {/* 分享按钮 */}
         <ShareButton post={post} />
         {/* 跳回顶部 */}
-        <TopJumper />
+        <JumpToTop />
       </div>
     </div>
 

diff --git a/components/RightWidget.js b/components/RightWidget.js
diff --git a/components/SideBar.js b/components/SideBar.js