theme-heo

components/Comment.js

@@ -54,7 +54,7 @@ const ValineComponent = dynamic(() => import('@/components/ValineComponent'), {
   ssr: false
 })
 
-const Comment = ({ frontMatter }) => {
+const Comment = ({ frontMatter, className }) => {
   const router = useRouter()
 
   if (isBrowser() && ('giscus' in router.query || router.query.target === 'comment')) {
@@ -70,7 +70,7 @@ const Comment = ({ frontMatter }) => {
   }
 
   return (
-    <div id='comment' className='comment mt-5 text-gray-800 dark:text-gray-300'>
+    <div id='comment' className={`comment mt-5 text-gray-800 dark:text-gray-300 ${className || ''}`}>
         <Tabs>
 
             {BLOG.COMMENT_TWIKOO_ENV_ID && (<div key='Twikoo'>

components/FlipCard.js

@@ -17,13 +17,13 @@ export default function FlipCard(props) {
             <div className={`flip-card-front ${props.className || ''}`} onMouseEnter={handleCardFlip}>
                 {props.frontContent}
             </div>
-            <div className={`flip-card-back ${props.className || ''}`} onMouseOut={handleCardFlip}>
+            <div className={`flip-card-back ${props.className || ''}`} onMouseLeave={handleCardFlip}>
                 {props.backContent}
             </div>
             <style jsx>{`
           .flip-card {
-            width: auto;
-            height: auto;
+            width: 100%;
+            height: 100%;
             display: inline-block;
             position: relative;
             transform-style: preserve-3d;
@@ -41,12 +41,10 @@ export default function FlipCard(props) {
           .flip-card-front {
             z-index: 2;
             transform: rotateY(0);
-            background-color: #f1f1f1;
           }
           
           .flip-card-back {
             transform: rotateY(180deg);
-            background-color: #888;
           }
           
           .flip-card.flipped {

components/ThemeSwitch.js

@@ -23,15 +23,15 @@ const ThemeSwitch = () => {
 
   return (<>
         <Draggable>
-            <div id="draggableBox" style={{ left: '10px', top: '85vh' }} className="fixed dark:text-white bg-gray-50 dark:bg-black z-50 border dark:border-gray-800 rounded-xl shadow-card">
-                <div className="py-2 flex items-center text-sm px-2">
-                    <DarkModeButton className='mr-1'/>
-                    <select value={theme} onChange={onSelectChange} name="cars" className=' outline-none dark:text-white bg-gray-50 dark:bg-black uppercase cursor-pointer'>
+            <div id="draggableBox" style={{ left: '10px', top: '85vh' }} className="fixed dark:text-white bg-gray-50 dark:bg-black z-50 border dark:border-gray-800 rounded-2xl shadow-card">
+                <div className="p-3 flex items-center text-sm">
+                    <DarkModeButton className='mr-2'/>
+                    <select value={theme} onChange={onSelectChange} name="cars" className='appearance-none outline-none dark:text-white bg-gray-50 dark:bg-black uppercase cursor-pointer'>
                         {THEMES?.map(t => {
                           return <option key={t} value={t}>{t}</option>
                         })}
                     </select>
-                    <i className='fas fa-palette pl-1' />
+                    <i class="fa-solid fa-paintbrush pl-2"></i>
                 </div>
             </div>
         </Draggable>

components/WordCount.js

@@ -0,0 +1,67 @@
+import { useGlobal } from '@/lib/global'
+import { useEffect } from 'react'
+
+/**
+ * 字数统计
+ * @returns
+ */
+export default function WordCount() {
+  const { locale } = useGlobal()
+  useEffect(() => {
+    countWords()
+  })
+
+  return <span id='wordCountWrapper' className='flex gap-3 font-light'>
+        <span className='flex whitespace-nowrap items-center'>
+            <i className='pl-1 pr-2 fas fa-file-word' />
+            <span id='wordCount'>0</span>
+        </span>
+        <span className='flex whitespace-nowrap items-center'>
+            <i className='mr-1 fas fa-clock' />
+            <span></span>
+            <span id='readTime'>0</span>&nbsp;{locale.COMMON.MINUTE}
+        </span>
+    </span>
+}
+
+/**
+ * 更新字数统计和阅读时间
+ */
+function countWords() {
+  const articleText = deleteHtmlTag(document.getElementById('notion-article')?.innerHTML)
+  const wordCount = fnGetCpmisWords(articleText)
+  // 阅读速度 300-500每分钟
+  document.getElementById('wordCount').innerHTML = wordCount
+  document.getElementById('readTime').innerHTML = Math.floor(wordCount / 400) + 1
+  const wordCountWrapper = document.getElementById('wordCountWrapper')
+  wordCountWrapper.classList.remove('hidden')
+}
+
+// 去除html标签
+function deleteHtmlTag(str) {
+  if (!str) {
+    return ''
+  }
+  str = str.replace(/<[^>]+>|&[^>]+;/g, '').trim()// 去掉所有的html标签和&nbsp;之类的特殊符合
+  return str
+}
+
+// 用word方式计算正文字数
+function fnGetCpmisWords(str) {
+  if (!str) {
+    return 0
+  }
+  let sLen = 0
+  try {
+    // eslint-disable-next-line no-irregular-whitespace
+    str = str.replace(/(\r\n+|\s+|　+)/g, '龘')
+    // eslint-disable-next-line no-control-regex
+    str = str.replace(/[\x00-\xff]/g, 'm')
+    str = str.replace(/m+/g, '*')
+    str = str.replace(/龘+/g, '')
+    sLen = str.length
+  } catch (e) {
+
+  }
+  return sLen
+}