Merge pull request #139 from tangly1024/preview

Preview

blog.config.js

@@ -19,7 +19,7 @@ const BLOG = {
   FONT: 'font-serif tracking-wider subpixel-antialiased', // 文章字体 ['font-sans', 'font-serif', 'font-mono'] @see https://www.tailwindcss.cn/docs/font-family
   FONT_AWESOME_PATH: 'https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css', // 图标库CDN ，国内推荐BootCDN，国外推荐 CloudFlare https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css
   BACKGROUND_LIGHT: '#eeeeee', // use hex value, don't forget '#' e.g #fffefc
-  BACKGROUND_DARK: '#111827', // use hex value, don't forget '#'
+  BACKGROUND_DARK: '#000000', // use hex value, don't forget '#'
   PATH: '', // leave this empty unless you want to deploy in a folder
 
   POST_LIST_STYLE: 'page', // ['page','scroll] 文章列表样式:页码分页、单页滚动加载

themes/example/LayoutBase.js

@@ -32,8 +32,8 @@ const LayoutBase = props => {
     <div className='dark:text-gray-300'>
       <CommonHead meta={meta} />
       {/* 导航菜单 */}
-      <div className="w-full flex justify-center my-2">
+      <div className="w-full flex justify-center my-2 text-xs md:text-base px-5">
-        <div className=" max-w-6xl justify-between w-full flex">
+        <div className="max-w-6xl justify-between w-full flex">
           <section>
             <Link title={siteInfo.title} href={'/'}>
               <a className={'cursor-pointer flex items-center hover:underline'}>
@@ -42,14 +42,14 @@ const LayoutBase = props => {
               </a>
             </Link>
           </section>
-          <nav className="space-x-3 flex">
+          <nav className="space-x-3 flex flex-nowrap overflow-x-auto">
             {links.map(link => {
               if (link) {
                 return (
                   <Link key={`${link.to}`} title={link.to} href={link.to}>
                     <a
                       className={
-                        'cursor-pointer flex items-center hover:underline'
+                        'cursor-pointer flex whitespace-nowrap items-center hover:underline'
                       }
                     >
                       <i className={`${link.icon} mr-1`} />

themes/example/LayoutIndex.js

@@ -18,7 +18,7 @@ export const LayoutIndex = props => {
   return (
     <LayoutBase {...props}>
       {posts.map(p => (
-        <div key={p.id} className='border p-4 my-12'>
+        <div key={p.id} className='border dark:border-hexo-black-gray p-4 my-12'>
           <Link href={`/article/${p.slug}`}>
             <a className='underline cursor-pointer'>{p.title}</a>
           </Link>

themes/fukasawa/components/TopNav.js

@@ -18,13 +18,13 @@ const TopNav = props => {
   return (<div id='top-nav' className='z-40 block lg:hidden'>
 
     {/* 导航栏 */}
-    <div id='sticky-nav' className={'lg:relative w-full top-0 z-20 transform duration-500'}>
+    <div id='sticky-nav' className={'lg:relative w-full top-0 z-20 transform duration-500 bg-white dark:bg-black'}>
       <Collapse isOpen={isOpen}>
-        <div className='bg-white py-1 px-5'>
+        <div className='py-1 px-5'>
           <GroupMenu {...props}/>
           </div>
       </Collapse>
-      <div className='w-full flex justify-between items-center p-4 bg-white'>
+      <div className='w-full flex justify-between items-center p-4 '>
         {/* 左侧LOGO 标题 */}
         <div className='flex flex-none flex-grow-0'>
           <Logo {...props}/>

themes/medium/LayoutBase.js

@@ -24,7 +24,7 @@ const LayoutBase = props => {
   const router = useRouter()
 
   return (
-    <div className='bg-white dark:bg-gray-800 w-full h-full min-h-screen justify-center dark:text-gray-300'>
+    <div className='bg-white dark:bg-black w-full h-full min-h-screen justify-center dark:text-gray-300'>
       <CommonHead meta={meta} />
       <main id='wrapper' className='flex justify-between w-full h-full mx-auto'>
         {/* 桌面端左侧菜单 */}
@@ -40,7 +40,7 @@ const LayoutBase = props => {
         </div>
 
         {/* 桌面端右侧 */}
-        <div className='hidden xl:block border-l dark:border-gray-500 w-96'>
+        <div className='hidden xl:block border-l dark:border-transparent w-96'>
          <div className='py-14 px-6 sticky top-0'>
           <Tabs>
             {slotRight}

themes/medium/LayoutSlug.js

@@ -38,7 +38,7 @@ export const LayoutSlug = props => {
   })
 
   const slotRight = post?.toc && post?.toc?.length > 3 && (
-    <div key={locale.COMMON.TABLE_OF_CONTENTS} className="mt-6">
+    <div key={locale.COMMON.TABLE_OF_CONTENTS} >
       <Catalog toc={post.toc} />
     </div>
   )

themes/medium/components/ArticleDetail.js

@@ -35,7 +35,7 @@ export const ArticleDetail = props => {
     post?.date?.start_date || post.createdTime,
     locale.LOCALE
   )
-  return <>
+  return <div id='container'>
     <h1 className="text-4xl pt-12 font-sans dark:text-gray-100">{post?.title}</h1>
     <section className="flex py-4 items-center font-sans px-1">
       <Link href="/about" passHref>
@@ -98,5 +98,5 @@ export const ArticleDetail = props => {
       <ArticleAround prev={prev} next={next} />
       <Comment frontMatter={post} />
     </section>
-    </>
+  </div>
 }

themes/medium/components/BlogPostCard.js

@@ -11,7 +11,7 @@ const BlogPostCard = ({ post, showSummary }) => {
   const showPreview = CONFIG_MEDIUM.POST_LIST_PREVIEW && post.blockMap
   const { locale } = useGlobal()
   return (
-      <div key={post.id} className='animate__animated animate__fadeIn duration-300 mb-6 max-w-7xl '>
+      <div key={post.id} className='animate__animated animate__fadeIn duration-300 mb-6 max-w-7xl border-b dark:border-gray-800 '>
 
         <div className='lg:p-8 p-4 flex flex-col w-full'>
           <Link href={`${BLOG.PATH}/article/${post.slug}`} passHref>
@@ -57,7 +57,6 @@ const BlogPostCard = ({ post, showSummary }) => {
               </div>
           </div> }
         </div>
-        <hr className='w-full'/>
       </div>
 
   )

themes/medium/components/BlogPostListPage.js

@@ -2,7 +2,6 @@ import BlogPostCard from './BlogPostCard'
 import BLOG from '@/blog.config'
 import BlogPostListEmpty from './BlogPostListEmpty'
 import PaginationSimple from './PaginationSimple'
-import { useRouter } from 'next/router'
 
 /**
  * 文章列表分页表格

themes/medium/components/Catalog.js

@@ -58,7 +58,7 @@ const Catalog = ({ toc }) => {
   }, throttleMs))
 
   return <div className='px-3'>
-    <div className='w-full py-1'>
+    <div className='w-full mt-2 mb-4'>
       <Progress/>
     </div>
     <div className='overflow-y-auto max-h-96 overscroll-none' ref={tRef}>

themes/medium/components/Footer.js

@@ -7,7 +7,7 @@ const Footer = ({ title }) => {
   const startYear = BLOG.SINCE && BLOG.SINCE !== currentYear && BLOG.SINCE + '-'
   return (
     <footer
-      className='dark:bg-gray-900 flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-gray-400 text-sm p-6'
+      className='dark:bg-hexo-black-gray flex-shrink-0 justify-center text-center m-auto w-full leading-6 text-gray-400 text-sm p-6'
     >
       <i className='fas fa-copyright' /> {`${startYear}${currentYear}`} <span><i className='mx-1 animate-pulse fas fa-heart'/> <a href={BLOG.LINK} className='underline font-bold text-gray-500 dark:text-gray-300 '>{BLOG.AUTHOR}</a>.<br/>
 

themes/medium/components/Progress.js

@@ -10,6 +10,7 @@ const Progress = ({ targetRef, showPercent = true }) => {
   const [percent, changePercent] = useState(0)
   const scrollListener = () => {
     const target = currentRef || document.getElementById('container')
+    console.log(target)
     if (target) {
       const clientHeight = target.clientHeight
       const scrollY = window.pageYOffset
@@ -27,7 +28,7 @@ const Progress = ({ targetRef, showPercent = true }) => {
   }, [percent])
 
   return (
-    <div className="h-4 w-full shadow-2xl bg-gray-400 font-sans">
+    <div className="h-4 w-full shadow-2xl bg-hexo-light-gray dark:bg-hexo-black-gray font-sans">
       <div
         className="h-4 bg-gray-600 duration-200"
         style={{ width: `${percent}%` }}

themes/medium/components/TopNavBar.js

@@ -12,7 +12,7 @@ export default function TopNavBar (props) {
   const router = useRouter()
 
   return <div id='top-nav' className={'sticky top-0 lg:relative w-full z-40 ' + className}>
-    <div className='flex w-full h-12 shadow bg-white dark:bg-gray-900 px-5 items-between'>
+    <div className='flex w-full h-12 shadow bg-white dark:bg-hexo-black-gray px-5 items-between'>
       <LogoBar {...props}/>
 
       {/* 顶部菜单 */}

themes/next/components/Card.js

@@ -1,7 +1,7 @@
 const Card = ({ children, headerSlot, className }) => {
   return <div className={className}>
     <>{headerSlot}</>
-    <section className="shadow px-2 py-4 bg-white dark:bg-gray-800 hover:shadow-xl duration-200">
+    <section className="shadow px-2 py-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200">
         {children}
     </section>
   </div>

themes/next/components/SideAreaLeft.js

@@ -26,7 +26,7 @@ const SideAreaLeft = props => {
 
     <section className='w-60'>
       {/* 菜单 */}
-      <section className='shadow hidden lg:block mb-5 pb-4 bg-white dark:bg-gray-800 hover:shadow-xl duration-200'>
+      <section className='shadow hidden lg:block mb-5 pb-4 bg-white dark:bg-hexo-black-gray hover:shadow-xl duration-200'>
         <Logo {...props}/>
         <div className='pt-2 px-2 font-sans'>
         <MenuButtonGroup allowCollapse={true} {...props} />
@@ -41,12 +41,12 @@ const SideAreaLeft = props => {
     <Card>
       <Tabs>
           {showToc && (
-            <div key={locale.COMMON.TABLE_OF_CONTENTS} className='dark:text-gray-400 text-gray-600 bg-white dark:bg-gray-800 duration-200'>
+            <div key={locale.COMMON.TABLE_OF_CONTENTS} className='dark:text-gray-400 text-gray-600 bg-white dark:bg-hexo-black-gray duration-200'>
               <Toc toc={post.toc}/>
             </div>
           )}
 
-          <div key={locale.NAV.ABOUT} className='mb-5 bg-white dark:bg-gray-800 duration-200 py-6'>
+          <div key={locale.NAV.ABOUT} className='mb-5 bg-white dark:bg-hexo-black-gray duration-200 py-6'>
             <InfoCard />
             <>
               <div className='mt-2 text-center dark:text-gray-300 font-light text-xs'>