优化排版

lib/lang/en-US.js

@@ -40,7 +40,10 @@ export default {
     DEBUG_CLOSE: 'Close',
     THEME_SWITCH: 'Theme Switch',
     ANNOUNCEMENT: 'Announcement',
-    START_READING: 'Start Reading'
+    START_READING: 'Start Reading',
+    MINUTE: 'min',
+    WORD_COUNT: 'W.C.'
+
   },
   PAGINATION: {
     PREV: 'Prev',

lib/lang/zh-CN.js

@@ -42,7 +42,9 @@ export default {
     DEBUG_CLOSE: '关闭调试',
     THEME_SWITCH: '切换主题',
     ANNOUNCEMENT: '公告',
-    START_READING: '开始阅读'
+    START_READING: '开始阅读',
+    MINUTE: '分钟',
+    WORD_COUNT: '字数'
   },
   PAGINATION: {
     PREV: '上一页',

themes/hexo/components/HeaderArticle.js

@@ -41,7 +41,7 @@ export default function HeaderArticle({ post, siteInfo }) {
                 </Link>
               </>}
             </div>
-        
+
           {/* 文章Title */}
           <div className="leading-snug font-bold xs:text-4xl sm:text-4xl md:text-5xl md:leading-snug text-4xl shadow-text-md flex justify-center text-center text-white">
             <NotionIcon icon={post.pageIcon} className='text-4xl mx-1' />{post.title}
@@ -66,13 +66,13 @@ export default function HeaderArticle({ post, siteInfo }) {
                 {locale.COMMON.LAST_EDITED_TIME}: {post.lastEditedTime}
               </div>
             </div>
-            
+
             {BLOG.ANALYTICS_BUSUANZI_ENABLE && <div className="busuanzi_container_page_pv font-light mr-2">
               <span className="mr-2 busuanzi_value_page_pv" />
               {locale.COMMON.VIEWS}
             </div>}
           </section>
-          
+
             <div className='mt-4 mb-1'>
                 {post.tagItems && (
                     <div className="flex justify-center flex-nowrap overflow-x-auto">

themes/matery/components/ArticleInfo.js

@@ -29,11 +29,11 @@ export const ArticleInfo = (props) => {
                         passHref
                         className="cursor-pointer whitespace-nowrap">
 
-                        <i className='far fa-calendar-minus fa-fw'/> 发布日期:{date}
+                        <i className='far fa-calendar-minus fa-fw'/> {locale.COMMON.POST_TIME}:{date}
 
                     </Link>
                     <span className='whitespace-nowrap'>
-                        <i className='far fa-calendar-check fa-fw' /> 更新日期: {post.lastEditedTime}
+                        <i className='far fa-calendar-check fa-fw' />{locale.COMMON.LAST_EDITED_TIME}:{post.lastEditedTime}
                     </span>
                     <span className="hidden busuanzi_container_page_pv font-light mr-2">
                         <i className='mr-1 fas fa-eye' /><span className="busuanzi_value_page_pv" />

themes/matery/components/HeaderArticle.js

@@ -16,12 +16,14 @@ export default function HeaderArticle({ post, siteInfo }) {
                 alt={title}
                 className="opacity-50 dark:opacity-40 h-full w-full object-cover"
             /> */}
-             <Image alt={title} src={headerImage} fill
-                    style={{ objectFit: 'cover' }}
-                    className='opacity-50'
-                    placeholder='blur'
-                    blurDataURL='/bg_image.jpg' />
-            <span className='absolute text-white p-6 text-3xl shadow-text'>{title}</span>
+            <Image alt={title} src={headerImage} fill
+                style={{ objectFit: 'cover' }}
+                className='opacity-50'
+                placeholder='blur'
+                blurDataURL='/bg_image.jpg' />
+            <div className="leading-snug font-bold xs:text-4xl sm:text-4xl md:text-5xl md:leading-snug text-4xl shadow-text-md flex justify-center text-center text-white">
+                {title}
+            </div>
         </div>
   )
 }

themes/matery/components/WordCount.js

@@ -1,3 +1,4 @@
+import { useGlobal } from '@/lib/global'
 import { useEffect } from 'react'
 
 /**
@@ -5,6 +6,7 @@ import { useEffect } from 'react'
  * @returns
  */
 export default function WordCount() {
+  const { locale } = useGlobal()
   useEffect(() => {
     countWords()
   })
@@ -12,13 +14,13 @@ export default function WordCount() {
   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>文章字数</span>&nbsp;
+            <span>{locale.COMMON.WORD_COUNT}</span>&nbsp;
             <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>分钟
+            <span></span>
+            <span id='readTime'>0</span>&nbsp;{locale.COMMON.MINUTE}
         </span>
     </span>
 }