feature: 配置文件整理

Author: tangly1024

blog.config.js

@@ -1,73 +1,108 @@
-const BLOG = {
-  title: '小唐笔记', // 站点标题
-  description: '分享编程技术与记录生活', // 站点描述
-  author: 'tangly1024', // 作者
-  bio: '一个普通的干饭人🍚', // 作者简介
-  email: '[email protected]', // 联系邮箱
-  link: 'https://tangly1024.com', // 网站地址
-  keywords: ['Notion', '写作', '博客'], // 网站关键词
-  lang: 'zh-CN', // ['zh-CN','en-US'] default lang => see /lib/lang.js for more.
-  beian: '闽ICP备20010331号', // 备案号
-  notionPageId: process.env.NOTION_PAGE_ID || 'bee1fccfa3bd47a1a7be83cc71372d83', // Important page_id！！！
-  notionAccessToken: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
-  appearance: 'auto', // ['light', 'dark', 'auto'],
-  font: 'font-serif tracking-wider subpixel-antialiased', // 文章字体 ['font-sans', 'font-serif', 'font-mono'] @see https://www.tailwindcss.cn/docs/font-family
-  lightBackground: '#eeeeee', // use hex value, don't forget '#' e.g #fffefc
-  darkBackground: '#111827', // use hex value, don't forget '#'
-  path: '', // leave this empty unless you want to deploy in a folder
-  since: 2020, // if leave this empty, current year will be used.
-  postListStyle: 'page', // ['page','scroll] 文章列表样式:页码分页、单页滚动加载
-  postsPerPage: 6, // post counts per page
-  previewLines: 12, // 预览博客行数
-  sortByDate: false,
-  socialLink: { // 社交链接，如不需要展示可以留空白，例如 weibo:''
-    weibo: 'https://weibo.com/tangly1024',
-    twitter: 'https://twitter.com/troy1024_1',
-    github: 'https://github.com/tangly1024',
-    telegram: 'https://t.me/tangly_1024'
-  },
-  comment: { // 评论插件，支持 gitalk, utterances, cusdis
-    provider: 'gitalk', // 不需要则留空白
-    gitalkConfig: {
-      repo: 'NotionNext', // The repository of store comments
-      owner: 'tangly1024',
-      admin: ['tangly1024'],
-      clientID: process.env.GITALK_ID || 'be7864a16b693e256f8f',
-      clientSecret: process.env.GITALK_SECRET || 'dbd0f6d9ceea8940f6ed20936b415274b8fe66a2',
-      distractionFreeMode: false
-    },
-    cusdisConfig: {
-      appId: '445ba48e-f751-487f-b22f-cdbe3310d28f', // data-app-id
-      host: 'https://cusdis.com', // data-host, change this if you're using self-hosted version
-      scriptSrc: 'https://cusdis.com/js/cusdis.es.js' // change this if you're using self-hosted version
-    },
-    utterancesConfig: {
-      repo: 'tangly1024/NotionNext'
-    },
-    gitter: '', // gitter聊天室
-    DaoVoiceId: '', // DaoVoice http://dashboard.daovoice.io/get-started
-    TidioId: '' // https://www.tidio.com/
-  },
-  // --- 高级设置
-  analytics: { // 文章访问量统计
-    busuanzi: true, // 展示网站阅读量、访问数 see http://busuanzi.ibruce.info/
-    provider: 'ga', // 支持 Google Analytics and Ackee, please fill with 'ga' or 'ackee', leave it empty to disable it.
-    baiduAnalytics: 'f683ef76f06bb187cbed5546f6f28f28', // e.g only need xxxxx -> https://hm.baidu.com/hm.js?[xxxxx]
-    cnzzAnalytics: '', // 站长统计id only need xxxxxxxx -> https://s9.cnzz.com/z_stat.php?id=[xxxxxxxx]&web_id=[xxxxxxx]
-    gaConfig: {
-      measurementId: 'G-68EK0W049N' // e.g: G-XXXXXXXXXX
-    },
-    ackeeConfig: {
-      tracker: '', // e.g 'https://ackee.tangly1024.net/tracker.js'
-      dataAckeeServer: '', // e.g https://ackee.tangly1024.net , don't end with a slash
-      domainId: '' // e.g '0e2257a8-54d4-4847-91a1-0311ea48cc7b'
-    }
-  },
-  seo: {
-    googleSiteVerification: '' // Remove the value or replace it with your own google site verification code
-  },
-  googleAdsenseId: 'ca-pub-2708419466378217', // 谷歌广告ID
+// 注: 配置文件可以读取Vercel的环境变量，配置方式参考：https://docs.tangly1024.com/zh/features/personality
+const BLOG = mergeDeep(process.env, {
+  TITLE: 'NotionNext BLOG', // 站点标题
+  DESCRIPTION: '这是一个由NotionNext生成的站点', // 站点描述
+  AUTHOR: 'tangly1024', // 作者
+  BIO: '一个普通的干饭人🍚', // 作者简介
+  LINK: 'https://tangly1024.com', // 网站地址
+  NOTION_PAGE_ID: '02ab3b8678004aa69e9e415905ef32a5', // Important page_id！！！Duplicate Template from  https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5
+  NOTION_ACCESS_TOKEN: '', // Useful if you prefer not to make your database public
+  KEYWORDS: 'Notion, 博客', // 网站关键词 英文逗号隔开
+  LANG: 'zh-CN', // e.g 'zh-CN','en-US'  see /lib/lang.js for more.
+  BEI_AN: '', // 备案号 闽ICP备XXXXXXX
+  SINCE: 2020, // if leave this empty, current year will be used.
+
+  APPEARANCE: 'auto', // ['light', 'dark', 'auto'],
+  FONT: 'font-serif tracking-wider subpixel-antialiased', // 文章字体 ['font-sans', 'font-serif', 'font-mono'] @see https://www.tailwindcss.cn/docs/font-family
+  BACKGROUND_LIGHT: '#eeeeee', // use hex value, don't forget '#' e.g #fffefc
+  BACKGROUND_DARK: '#111827', // use hex value, don't forget '#'
+  PATH: '', // leave this empty unless you want to deploy in a folder
+
+  POST_LIST_STYLE: 'page', // ['page','scroll] 文章列表样式:页码分页、单页滚动加载
+  POST_PREVIEW_LINES: 12, // 预览博客行数
+  POSTS_PER_PAGE: 6, // post counts per page
+  POSTS_SORT_BY_DATE: false, // 是否强制按时间排序，否则默认由notion排序文章
+
+  // 社交链接，不需要可留空白，例如 CONTACT_WEIBO:''
+  CONTACT_EMAIL: '[email protected]', // 联系邮箱
+  CONTACT_WEIBO: 'https://weibo.com/tangly1024',
+  CONTACT_TWITTER: 'https://twitter.com/troy1024_1',
+  CONTACT_GITHUB: 'https://github.com/tangly1024',
+  CONTACT_TELEGRAM: 'https://t.me/tangly_1024',
+
+  COMMENT_PROVIDER: '', // 支持 gitalk, utterances, cusdis
+
+  COMMENT_GITALK_REPO: '', // e.g NotionNext
+  COMMENT_GITALK_OWNER: '', // e.g tangly1024
+  COMMENT_GITALK_ADMIN: '', // e.g 'tangly1024'
+  COMMENT_GITALK_CLIENT_ID: '',
+  COMMENT_GITALK_CLIENT_SECRET: '',
+  COMMENT_GITALK_DISTRACTION_FREE_MODE: false,
+
+  COMMENT_CUSDIS_APP_ID: '', // data-app-id
+  COMMENT_CUSDIS_HOST: 'https://cusdis.com', // data-host, change this if you're using self-hosted version
+  COMMENT_CUSDIS_SCRIPT_SRC: 'https://cusdis.com/js/cusdis.es.js', // change this if you're using self-hosted version
+
+  COMMENT_UTTERRANCES_REPO: '', // e.g 'tangly1024/NotionNext'
+
+  COMMENT_GITTER_ENABLE: false, // gitter see https://gitter.im/
+  COMMENT_GITTER_ROOM: '', // gitter聊天室
+
+  COMMENT_DAO_VOICE_ENABLE: false, // DaoVoice see http://dashboard.daovoice.io/get-started
+  COMMENT_DAO_VOICE_ID: '', // DaoVoice http://dashboard.daovoice.io/get-started
+
+  COMMENT_TIDIO_ENABLE: false, // https://www.tidio.com/
+  COMMENT_TIDIO_ID: '', // [tidio_id] -> //code.tidio.co/[tidio_id].js
+
+  //  站点统计
+
+  ANALYTICS_BUSUANZI_ENABLE: true, // 展示网站阅读量、访问数 see http://busuanzi.ibruce.info/
+
+  ANALYTICS_BAIDU_ENABLE: false,
+  ANALYTICS_BAIDU_ID: '', // e.g 只需要填写百度统计的id，[baidu_id] -> https://hm.baidu.com/hm.js?[baidu_id]
+
+  ANALYTICS_CNZZ_ENABLE: false,
+  ANALYTICS_CNZZ_ID: '', // 只需要填写站长统计的id, [cnzz_id] -> https://s9.cnzz.com/z_stat.php?id=[cnzz_id]&web_id=[cnzz_id]
+
+  ANALYTICS_GOOGLE_ENABLE: false,
+  ANALYTICS_GOOGLE_ID: '', // 谷歌Analytics的id e.g: G-XXXXXXXXXX
+
+  ANALYTICS_ACKEE_ENABLE: false,
+  ANALYTICS_ACKEE_TRACKER: '', // e.g 'https://ackee.tangly1024.net/tracker.js'
+  ANALYTICS_ACKEE_DATA_SERVER: '', // e.g https://ackee.tangly1024.net , don't end with a slash
+  ANALYTICS_ACKEE_DOMAIN_ID: '', // e.g '0e2257a8-54d4-4847-91a1-0311ea48cc7b'
+
+  SEO_GOOGLE_SITE_VERIFICATION: '', // Remove the value or replace it with your own google site verification code
+
+  GOOGLE_ADSENSE_ENABLE: false,
+  GOOGLE_ADSENSE_ID: process.env.GOOGLE_AD_ID, // 谷歌广告ID
   isProd: process.env.VERCEL_ENV === 'production'// distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)
+})
+
+/**
+ * 深度合并两个对象
+ * @param target
+ * @param sources
+ */
+function mergeDeep (target, ...sources) {
+  if (!sources.length) return target
+  const source = sources.shift()
+
+  if (isObject(target) && isObject(source)) {
+    for (const key in source) {
+      if (isObject(source[key])) {
+        if (!target[key]) Object.assign(target, { [key]: {} })
+        mergeDeep(target[key], source[key])
+      } else {
+        Object.assign(target, { [key]: source[key] })
+      }
+    }
+  }
+  return mergeDeep(target, ...sources)
+}
+
+function isObject (item) {
+  return (item && typeof item === 'object' && !Array.isArray(item))
 }
-// export default BLOG
+
 module.exports = BLOG

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
 }

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>
   )
 }
 

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>