feature: 配置文件整理

2026-06-01 07:26:47 +00:00 · 2022-01-17 21:53:52 +08:00
parent 7c68d1aad0
commit 3f2de9e3d4
54 changed files with 284 additions and 247 deletions
--- a/components/Ackee.js
+++ b/components/Ackee.js
@@ -1,12 +1,21 @@
 import { useRouter } from 'next/router'
 import useAckee from 'use-ackee'
+import BLOG from '@/blog.config'

-const Ackee = ({ ackeeServerUrl, ackeeDomainId }) => {
+const Ackee = () => {
+  const ackeeServerUrl = BLOG.ANALYTICS_ACKEE_DATA_SERVER
+  const ackeeDomainId = BLOG.ANALYTICS_ACKEE_DOMAIN_ID
  const router = useRouter()
  useAckee(
    router.asPath,
-    { server: ackeeServerUrl, domainId: ackeeDomainId },
-    { detailed: false, ignoreLocalhost: true }
+    {
+      server: ackeeServerUrl,
+      domainId: ackeeDomainId
+    },
+    {
+      detailed: false,
+      ignoreLocalhost: true
+    }
  )
  return null
 }
--- a/components/Comment.js
+++ b/components/Comment.js
@@ -3,6 +3,7 @@ import dynamic from 'next/dynamic'
 import { useRouter } from 'next/router'
 import { useGlobal } from '@/lib/global'
 import 'gitalk/dist/gitalk.css'
+import Tabs from '@/components/Tabs'

 const GitalkComponent = dynamic(
  () => {
@@ -28,44 +29,44 @@ const Comment = ({ frontMatter }) => {
  const { theme } = useGlobal()

  return (
-    BLOG.comment.provider !== '' && (
-      <div className='comment mt-5 text-gray-800 dark:text-gray-300'>
-        {BLOG.comment.provider === 'gitalk' && (<div className='m-10'>
+    <div className='comment mt-5 text-gray-800 dark:text-gray-300'>
+      <Tabs>
+        {BLOG.COMMENT_GITALK_CLIENT_ID && (<div className='m-10' key='gitalk'>
          <GitalkComponent
            options={{
              id: frontMatter.id,
              title: frontMatter.title,
-              clientID: BLOG.comment.gitalkConfig.clientID,
-              clientSecret: BLOG.comment.gitalkConfig.clientSecret,
-              repo: BLOG.comment.gitalkConfig.repo,
-              owner: BLOG.comment.gitalkConfig.owner,
-              admin: BLOG.comment.gitalkConfig.admin,
-              distractionFreeMode: BLOG.comment.gitalkConfig.distractionFreeMode
+              clientID: BLOG.COMMENT_GITALK_CLIENT_ID,
+              clientSecret: BLOG.COMMENT_GITALK_CLIENT_SECRET,
+              repo: BLOG.COMMENT_GITALK_REPO,
+              owner: BLOG.COMMENT_GITALK_OWNER,
+              admin: BLOG.COMMENT_GITALK_ADMIN.split(','),
+              distractionFreeMode: BLOG.COMMENT_GITALK_DISTRACTION_FREE_MODE
            }}
          />
        </div>)}
-        {BLOG.comment.provider === 'utterances' && (<div className='m-10'>
-          <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
-        </div>
+        {BLOG.COMMENT_UTTERRANCES_REPO && (<div className='m-10' key='utterance'>
+            <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
+          </div>
        )}
-        {BLOG.comment.provider === 'cusdis' && (<>
+        {BLOG.COMMENT_CUSDIS_APP_ID && (<>
          <script defer src='https://cusdis.com/js/widget/lang/zh-cn.js' />
-          <div className='m-10'>
+          <div className='m-10' key='cusdis'>
            <CusdisComponent
              attrs={{
-                host: BLOG.comment.cusdisConfig.host,
-                appId: BLOG.comment.cusdisConfig.appId,
+                host: BLOG.COMMENT_CUSDIS_HOST,
+                appId: BLOG.COMMENT_CUSDIS_APP_ID,
                pageId: frontMatter.id,
                pageTitle: frontMatter.title,
-                pageUrl: BLOG.link + router.asPath,
+                pageUrl: BLOG.LINK + router.asPath,
                theme: theme
              }}
-              lang={BLOG.lang.toLowerCase()}
+              lang={BLOG.LANG.toLowerCase()}
            />
          </div>
        </>)}
-      </div>
-    )
+      </Tabs>
+    </div>
  )
 }

--- a/components/CommonHead.js
+++ b/components/CommonHead.js
@@ -2,32 +2,30 @@ import BLOG from '@/blog.config'
 import Head from 'next/head'

 const CommonHead = ({ meta }) => {
-  let url = BLOG.path.length ? `${BLOG.link}/${BLOG.path}` : BLOG.link
+  let url = BLOG.PATH.length ? `${BLOG.LINK}/${BLOG.PATH}` : BLOG.LINK
  if (meta) {
    url = `${url}/${meta.slug}`
  }
-  const title = meta?.title || BLOG.title
-  const description = meta?.description || BLOG.description
+  const title = meta?.title || BLOG.TITLE
+  const description = meta?.description || BLOG.DESCRIPTION
  const type = meta?.type || 'website'
-  const keywords = meta?.tags || BLOG.keywords
+  const keywords = meta?.tags || BLOG.KEYWORDS

  return <Head>
    <title>{title}</title>
-    <meta name='theme-color' content={BLOG.darkBackground} />
+    <meta name='theme-color' content={BLOG.BACKGROUND_DARK} />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <meta name='robots' content='follow, index' />
    <meta charSet='UTF-8' />
-    {BLOG.seo.googleSiteVerification && (
+    {BLOG.SEO_GOOGLE_SITE_VERIFICATION && (
      <meta
        name='google-site-verification'
-        content={BLOG.seo.googleSiteVerification}
+        content={BLOG.SEO_GOOGLE_SITE_VERIFICATION}
      />
    )}
-    {keywords && (
-      <meta name='keywords' content={keywords.join(', ')} />
-    )}
+    <meta name='keywords' content={keywords} />
    <meta name='description' content={description} />
-    <meta property='og:locale' content={BLOG.lang} />
+    <meta property='og:locale' content={BLOG.LANG} />
    <meta property='og:title' content={title} />
    <meta property='og:description' content={description} />
    <meta property='og:url' content={url}
@@ -42,7 +40,7 @@ const CommonHead = ({ meta }) => {
          property='article:published_time'
          content={meta.date || meta.createdTime}
        />
-        <meta property='article:author' content={BLOG.author} />
+        <meta property='article:author' content={BLOG.AUTHOR} />
      </>
    )}
  </Head>
--- a/components/CommonScript.js
+++ b/components/CommonScript.js
@@ -7,7 +7,7 @@ import BLOG from '@/blog.config'
 */
 const CommonScript = () => {
  return (<>
-    {BLOG.comment?.DaoVoiceId && (<>
+    {BLOG.COMMENT_DAO_VOICE_ENABLE && (<>
      {/* DaoVoice 反馈 */}
      <script async dangerouslySetInnerHTML={{
        __html: `
@@ -18,7 +18,7 @@ const CommonScript = () => {
      <script async dangerouslySetInnerHTML={{
        __html: `
                 daovoice('init', {
-                    app_id: "${BLOG.comment.DaoVoiceId}"
+                    app_id: "${BLOG.COMMENT_DAO_VOICE_ID}"
                  });
                  daovoice('update');
                  `
@@ -30,44 +30,45 @@ const CommonScript = () => {
    {BLOG.googleAdsenseId && (<script data-ad-client={BLOG.googleAdsenseId} async
              src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>)}

-    {BLOG.comment?.TidioId && (<>
+    {BLOG.COMMENT_TIDIO_ENABLE && (<>
      {/* Tidio在线反馈 */}
      <script async
-              src={`//code.tidio.co/${BLOG.comment.TidioId}.js`}
+              src={`//code.tidio.co/${BLOG.COMMENT_TIDIO_ID}.js`}
      />
    </>)}

    {/* */}
-    {BLOG.gitter && (<>
+    {BLOG.COMMENT_GITTER_ENABLE && (<>
      <script async dangerouslySetInnerHTML={{
        __html: `
                ((window.gitter = {}).chat = {}).options = {
-                  room: 'tangly1024/community'
+                  room: '${BLOG.COMMENT_GITTER_ROOM}'
                };
                `
      }}/>
-    <script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer></script>
+    <script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer/>
    </>)}

    {/* 代码统计 */}
    {BLOG.isProd && (<>

        {/* ackee统计脚本 */}
-        {BLOG.analytics.provider === 'ackee' && (
-          <script async src={BLOG.analytics.ackeeConfig.tracker}
-                  data-ackee-server={BLOG.analytics.ackeeConfig.dataAckeeServer}
-                  data-ackee-domain-id={BLOG.analytics.ackeeConfig.domainId}
+        {BLOG.ANALYTICS_ACKEE_ENABLE && (
+          <script async src={BLOG.ANALYTICS_ACKEE_TRACKER}
+                  data-ackee-server={BLOG.ANALYTICS_ACKEE_DATA_SERVER}
+                  data-ackee-domain-id={BLOG.ANALYTICS_ACKEE_DOMAIN_ID}
          />
        )}
+
        {/* 百度统计 */}
-        {BLOG.analytics.baiduAnalytics && (
+        {BLOG.ANALYTICS_BAIDU_ENABLE && (
          <script async
                  dangerouslySetInnerHTML={{
                    __html: `
                  var _hmt = _hmt || [];
                  (function() {
                    var hm = document.createElement("script");
-                    hm.src = "https://hm.baidu.com/hm.js?${BLOG.analytics.baiduAnalytics}";
+                    hm.src = "https://hm.baidu.com/hm.js?${BLOG.ANALYTICS_BAIDU_ID}";
                    var s = document.getElementsByTagName("script")[0]; 
                    s.parentNode.insertBefore(hm, s);
                  })();
@@ -77,20 +78,20 @@ const CommonScript = () => {
        )}

        {/* 站长统计 */}
-        {BLOG.analytics.cnzzAnalytics && (
+        {BLOG.ANALYTICS_CNZZ_ENABLE && (
          <script async
                  dangerouslySetInnerHTML={{
                    __html: `
-                  document.write(unescape("%3Cspan style='display:none' id='cnzz_stat_icon_${BLOG.analytics.cnzzAnalytics}'%3E%3C/span%3E%3Cscript src='https://s9.cnzz.com/z_stat.php%3Fid%3D${BLOG.analytics.cnzzAnalytics}' type='text/javascript'%3E%3C/script%3E"));
+                  document.write(unescape("%3Cspan style='display:none' id='cnzz_stat_icon_${BLOG.ANALYTICS_CNZZ_ID}'%3E%3C/span%3E%3Cscript src='https://s9.cnzz.com/z_stat.php%3Fid%3D${BLOG.ANALYTICS_CNZZ_ID}' type='text/javascript'%3E%3C/script%3E"));
                  `
                  }}
          />
        )}

        {/* 谷歌统计 */}
-        {BLOG.analytics.provider === 'ga' && (<>
+        {BLOG.ANALYTICS_GOOGLE_ENABLE && (<>
            <script async
-                    src={`https://www.googletagmanager.com/gtag/js?id=${BLOG.analytics.gaConfig.measurementId}`}
+                    src={`https://www.googletagmanager.com/gtag/js?id=${BLOG.ANALYTICS_GOOGLE_ID}`}
            />
            <script async
                    dangerouslySetInnerHTML={{
@@ -98,7 +99,7 @@ const CommonScript = () => {
                        window.dataLayer = window.dataLayer || [];
                        function gtag(){dataLayer.push(arguments);}
                        gtag('js', new Date());
-                        gtag('config', '${BLOG.analytics.gaConfig.measurementId}', {
+                        gtag('config', '${BLOG.ANALYTICS_GOOGLE_ID}', {
                          page_path: window.location.pathname,
                        });
                      `
--- a/components/Cusdis.js
+++ b/components/Cusdis.js
@@ -6,8 +6,7 @@ const Cusdis = ({ id, url, title }) => {
    const anchor = document.getElementById('comments')
    script.setAttribute(
      'src',
-      BLOG.comment.cusdisConfig.scriptSrc ||
-        'https://cusdis.com/js/cusdis.es.js'
+      BLOG.COMMENT_CUSDIS_SCRIPT_SRC
    )
    script.setAttribute('async', true)
    script.setAttribute('defer', true)
@@ -20,12 +19,12 @@ const Cusdis = ({ id, url, title }) => {
    <div id="comments">
      <div
        id="cusdis_thread"
-        data-host={BLOG.comment.cusdisConfig.host || 'https://cusdis.com'}
-        data-app-id={BLOG.comment.cusdisConfig.appId}
+        data-host={BLOG.COMMENT_CUSDIS_HOST}
+        data-app-id={BLOG.COMMENT_CUSDIS_APP_ID}
        data-page-id={id}
        data-page-url={url}
        data-page-title={title}
-      ></div>
+      />
    </div>
  )
 }
--- a/components/Tabs.js
+++ b/components/Tabs.js
@@ -0,0 +1,51 @@
+import React, { useState } from 'react'
+
+/**
+ * Tabs切换标签
+ * @param {*} param0
+ * @returns
+ */
+const Tabs = ({ children }) => {
+  if (!children) {
+    return <></>
+  }
+
+  let count = children.length
+  children.forEach(e => {
+    if (!e) {
+      count--
+    }
+  })
+
+  if (count === 1) {
+    return <section className='duration-200'>
+      {children}
+    </section>
+  }
+
+  const [currentTab, setCurrentTab] = useState(0)
+  function tabClickHandle (i) {
+    setCurrentTab(i)
+  }
+
+  return (
+    < >
+      {<div className='hidden lg:block mb-5 bg-white dark:bg-gray-800 duration-200'>
+        <ul className='flex justify-center space-x-5 pb-4 dark:text-gray-400 text-gray-600'>
+          {children.map((item, index) => {
+            return <li key={index} className={(currentTab === index ? 'font-black border-b-2 border-red-400 text-red-400 animate__animated animate__jello ' : 'font-extralight cursor-pointer') + ' text-sm font-sans '} onClick={() => { tabClickHandle(index) }}>
+              {item?.key}
+            </li>
+          })}
+        </ul>
+        {children.map((item, index) => {
+          return <section key={index} className={`${currentTab === index ? 'block animate__animated animate__fadeIn animate__faster' : 'hidden'}`}>
+              {item}
+            </section>
+        })}
+      </div>}
+
+    </>)
+}
+
+export default Tabs
--- a/components/Utterances.js
+++ b/components/Utterances.js
@@ -11,9 +11,9 @@ import { useEffect } from 'react'
 const Utterances = ({ issueTerm, layout }) => {
  useEffect(() => {
    const theme =
-      BLOG.appearance === 'auto'
+      BLOG.APPEARANCE === 'auto'
        ? 'preferred-color-scheme'
-        : BLOG.appearance === 'light'
+        : BLOG.APPEARANCE === 'light'
          ? 'github-light'
          : 'github-dark'
    const script = document.createElement('script')
@@ -21,7 +21,7 @@ const Utterances = ({ issueTerm, layout }) => {
    script.setAttribute('src', 'https://utteranc.es/client.js')
    script.setAttribute('crossorigin', 'anonymous')
    script.setAttribute('async', true)
-    script.setAttribute('repo', BLOG.comment.utterancesConfig.repo)
+    script.setAttribute('repo', BLOG.COMMENT_UTTERRANCES_REPO)
    script.setAttribute('issue-term', issueTerm)
    script.setAttribute('theme', theme)
    anchor.appendChild(script)
@@ -35,7 +35,7 @@ const Utterances = ({ issueTerm, layout }) => {
        id="comments"
        className={layout && layout === 'fullWidth' ? '' : 'md:-ml-16'}
      >
-        <div className="utterances-frame"></div>
+        <div className="utterances-frame"/>
      </div>
    </>
  )