部分配置支持环境变量

blog.config.js

@@ -1,17 +1,17 @@
 // 注: 配置文件可以读取Vercel的环境变量，配置方式参考：https://docs.tangly1024.com/zh/features/personality
-const BLOG = Object.assign({
+const BLOG = {
   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.
+  NOTION_PAGE_ID: process.env.NOTION_PAGE_ID || '02ab3b8678004aa69e9e415905ef32a5', // Important page_id！！！Duplicate Template from  https://www.notion.so/tanghh/02ab3b8678004aa69e9e415905ef32a5
-  BEI_AN: '', // 备案号 闽ICP备XXXXXXX
+  NOTION_ACCESS_TOKEN: process.env.NOTION_ACCESS_TOKEN || '', // Useful if you prefer not to make your database public
-  SINCE: 2020, // if leave this empty, current year will be used.
 
+  LANG: 'zh-CN', // e.g 'zh-CN','en-US'  see /lib/lang.js for more.
+  SINCE: 2021, // e.g if leave this empty, current year will be used.
+  BEI_AN: '', // 备案号 闽ICP备XXXXXXX
   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
@@ -21,62 +21,48 @@ const BLOG = Object.assign({
   POST_LIST_STYLE: 'page', // ['page','scroll] 文章列表样式:页码分页、单页滚动加载
   POST_PREVIEW_LINES: 12, // 预览博客行数
   POSTS_PER_PAGE: 6, // post counts per page
-  POSTS_SORT_BY_DATE: false, // 是否强制按时间排序，否则默认由notion排序文章
+  POSTS_SORT_BY: 'notion', // 排序方式 'date'按时间,'notion'由notion控制
 
   // 社交链接，不需要可留空白，例如 CONTACT_WEIBO:''
-  CONTACT_EMAIL: 'tlyong1992@hotmail.com', // 联系邮箱
+  CONTACT_EMAIL: '', // 联系邮箱 e.g tlyong1992@hotmail.com
-  CONTACT_WEIBO: 'https://weibo.com/tangly1024',
+  CONTACT_WEIBO: '', // e.g https://weibo.com/tangly1024
-  CONTACT_TWITTER: 'https://twitter.com/troy1024_1',
+  CONTACT_TWITTER: '', // e.g https://twitter.com/troy1024_1
-  CONTACT_GITHUB: 'https://github.com/tangly1024',
+  CONTACT_GITHUB: '', // e.g https://github.com/tangly1024
-  CONTACT_TELEGRAM: 'https://t.me/tangly_1024',
+  CONTACT_TELEGRAM: '', // e.g https://t.me/tangly_1024
 
-  COMMENT_PROVIDER: '', // 支持 gitalk, utterances, cusdis
+  // 评论互动 可同时开启 CUSDIS UTTERRANCES GITALK
+  COMMENT_CUSDIS_APP_ID: process.env.NEXT_PUBLIC_COMMENT_CUSDIS_APP_ID || '', // data-app-id 36位 see https://cusdis.com/
+  COMMENT_CUSDIS_HOST: process.env.NEXT_PUBLIC_COMMENT_CUSDIS_HOST || 'https://cusdis.com', // data-host, change this if you're using self-hosted version
+  COMMENT_CUSDIS_SCRIPT_SRC: process.env.NEXT_PUBLIC_COMMENT_CUSDIS_SCRIPT_SRC || 'https://cusdis.com/js/cusdis.es.js', // change this if you're using self-hosted version
 
-  COMMENT_GITALK_REPO: '', // e.g NotionNext
+  COMMENT_UTTERRANCES_REPO: process.env.NEXT_PUBLIC_COMMENT_UTTERRANCES_REPO || '', // e.g 'tangly1024/NotionNext' see https://utteranc.es/
-  COMMENT_GITALK_OWNER: '', // e.g tangly1024
+
-  COMMENT_GITALK_ADMIN: '', // e.g 'tangly1024'
+  COMMENT_GITALK_REPO: process.env.NEXT_PUBLIC_COMMENT_GITALK_REPO || '', // e.g NotionNext
-  COMMENT_GITALK_CLIENT_ID: '',
+  COMMENT_GITALK_OWNER: process.env.NEXT_PUBLIC_COMMENT_GITALK_OWNER || '', // e.g tangly1024
-  COMMENT_GITALK_CLIENT_SECRET: '',
+  COMMENT_GITALK_ADMIN: process.env.NEXT_PUBLIC_COMMENT_GITALK_ADMIN || '', // e.g 'tangly1024'
+  COMMENT_GITALK_CLIENT_ID: process.env.NEXT_PUBLIC_COMMENT_GITALK_CLIENT_ID || '', // e.g 20位ID
+  COMMENT_GITALK_CLIENT_SECRET: process.env.NEXT_PUBLIC_COMMENT_GITALK_CLIENT_SECRET || '', // e.g 40位ID
   COMMENT_GITALK_DISTRACTION_FREE_MODE: false,
 
-  COMMENT_CUSDIS_APP_ID: '', // data-app-id
+  COMMENT_GITTER_ROOM: process.env.NEXT_PUBLIC_COMMENT_GITTER_ROOM || '', // gitter聊天室 see https://gitter.im/ 不需要则留空
-  COMMENT_CUSDIS_HOST: 'https://cusdis.com', // data-host, change this if you're using self-hosted version
+  COMMENT_DAO_VOICE_ID: process.env.NEXT_PUBLIC_COMMENT_DAO_VOICE_ID || '', // DaoVoice http://dashboard.daovoice.io/get-started
-  COMMENT_CUSDIS_SCRIPT_SRC: 'https://cusdis.com/js/cusdis.es.js', // change this if you're using self-hosted version
+  COMMENT_TIDIO_ID: process.env.NEXT_PUBLIC_COMMENT_TIDIO_ID || '', // [tidio_id] -> //code.tidio.co/[tidio_id].js
-
-  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_ID: process.env.NEXT_PUBLIC_ANALYTICS_BAIDU_ID || '', // e.g 只需要填写百度统计的id，[baidu_id] -> https://hm.baidu.com/hm.js?[baidu_id]
+  ANALYTICS_CNZZ_ID: process.env.NEXT_PUBLIC_ANALYTICS_CNZZ_ID || '', // 只需要填写站长统计的id, [cnzz_id] -> https://s9.cnzz.com/z_stat.php?id=[cnzz_id]&web_id=[cnzz_id]
+  ANALYTICS_GOOGLE_ID: process.env.NEXT_PUBLIC_ANALYTICS_GOOGLE_ID || '', // 谷歌Analytics的id e.g: G-XXXXXXXXXX
 
-  ANALYTICS_BAIDU_ENABLE: false,
+  ANALYTICS_ACKEE_TRACKER: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_TRACKER || '', // e.g 'https://ackee.tangly1024.net/tracker.js'
-  ANALYTICS_BAIDU_ID: '', // e.g 只需要填写百度统计的id，[baidu_id] -> https://hm.baidu.com/hm.js?[baidu_id]
+  ANALYTICS_ACKEE_DATA_SERVER: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DATA_SERVER || '', // e.g https://ackee.tangly1024.net , don't end with a slash
+  ANALYTICS_ACKEE_DOMAIN_ID: process.env.NEXT_PUBLIC_ANALYTICS_ACKEE_DOMAIN_ID || '', // e.g '0e2257a8-54d4-4847-91a1-0311ea48cc7b'
 
-  ANALYTICS_CNZZ_ENABLE: false,
+  SEO_GOOGLE_SITE_VERIFICATION: process.env.NEXT_PUBLIC_SEO_GOOGLE_SITE_VERIFICATION || '', // Remove the value or replace it with your own google site verification code
-  ANALYTICS_CNZZ_ID: '', // 只需要填写站长统计的id, [cnzz_id] -> https://s9.cnzz.com/z_stat.php?id=[cnzz_id]&web_id=[cnzz_id]
 
-  ANALYTICS_GOOGLE_ENABLE: false,
+  ADSENSE_GOOGLE_ID: process.env.NEXT_PUBLIC_ADSENSE_GOOGLE_ID || '', // 谷歌广告ID e.g ca-pub-xxxxxxxxxxxxxxxx
-  ANALYTICS_GOOGLE_ID: '', // 谷歌Analytics的id e.g: G-XXXXXXXXXX
 
-  ANALYTICS_ACKEE_ENABLE: false,
+  isProd: process.env.VERCEL_ENV === 'production' // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)  isProd: process.env.VERCEL_ENV === 'production' // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)
-  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: '', // 谷歌广告ID e.g ca-pub-xxxxxxxxxxxxxxxx
-  isProd: process.env.VERCEL_ENV === 'production' // distinguish between development and production environment (ref: https://vercel.com/docs/environment-variables#system-environment-variables)
-}, JSON.parse(JSON.stringify(process.env)))
 
 module.exports = BLOG

components/Ackee.js

@@ -3,14 +3,12 @@ import useAckee from 'use-ackee'
 import BLOG from '@/blog.config'
 
 const Ackee = () => {
-  const ackeeServerUrl = BLOG.ANALYTICS_ACKEE_DATA_SERVER
-  const ackeeDomainId = BLOG.ANALYTICS_ACKEE_DOMAIN_ID
   const router = useRouter()
   useAckee(
     router.asPath,
     {
-      server: ackeeServerUrl,
+      server: BLOG.ANALYTICS_ACKEE_DATA_SERVER,
-      domainId: ackeeDomainId
+      domainId: BLOG.ANALYTICS_ACKEE_DOMAIN_ID
     },
     {
       detailed: false,

components/Comment.js

@@ -27,11 +27,23 @@ const CusdisComponent = dynamic(
 const Comment = ({ frontMatter }) => {
   const router = useRouter()
   const { theme } = useGlobal()
-
   return (
-    <div className='comment mt-5 text-gray-800 dark:text-gray-300'>
+    <div className='comment mt-5 px-10 text-gray-800 dark:text-gray-300'>
       <Tabs>
-        {BLOG.COMMENT_GITALK_CLIENT_ID && (<div className='m-10' key='gitalk'>
+        {BLOG.COMMENT_CUSDIS_APP_ID && (<div key='Cusdis'>
+          <CusdisComponent
+            attrs={{
+              host: BLOG.COMMENT_CUSDIS_HOST,
+              appId: BLOG.COMMENT_CUSDIS_APP_ID,
+              pageId: frontMatter.id,
+              pageTitle: frontMatter.title,
+              pageUrl: BLOG.LINK + router.asPath,
+              theme: theme
+            }}
+            lang={BLOG.LANG.toLowerCase()}
+          />
+        </div>)}
+        {BLOG.COMMENT_GITALK_CLIENT_ID && (<div key='GitTalk'>
           <GitalkComponent
             options={{
               id: frontMatter.id,
@@ -41,30 +53,14 @@ const Comment = ({ frontMatter }) => {
               repo: BLOG.COMMENT_GITALK_REPO,
               owner: BLOG.COMMENT_GITALK_OWNER,
               admin: BLOG.COMMENT_GITALK_ADMIN.split(','),
-              distractionFreeMode: BLOG.COMMENT_GITALK_DISTRACTION_FREE_MODE
+              distractionFreeMode: JSON.parse(BLOG.COMMENT_GITALK_DISTRACTION_FREE_MODE)
             }}
           />
         </div>)}
-        {BLOG.COMMENT_UTTERRANCES_REPO && (<div className='m-10' key='utterance'>
+        {BLOG.COMMENT_UTTERRANCES_REPO && (<div key='Utterance'>
             <UtterancesComponent issueTerm={frontMatter.id} className='px-2' />
           </div>
         )}
-        {BLOG.COMMENT_CUSDIS_APP_ID && (<>
-          <script defer src='https://cusdis.com/js/widget/lang/zh-cn.js' />
-          <div className='m-10' key='cusdis'>
-            <CusdisComponent
-              attrs={{
-                host: BLOG.COMMENT_CUSDIS_HOST,
-                appId: BLOG.COMMENT_CUSDIS_APP_ID,
-                pageId: frontMatter.id,
-                pageTitle: frontMatter.title,
-                pageUrl: BLOG.LINK + router.asPath,
-                theme: theme
-              }}
-              lang={BLOG.LANG.toLowerCase()}
-            />
-          </div>
-        </>)}
       </Tabs>
     </div>
   )

components/CommonHead.js

@@ -18,10 +18,7 @@ const CommonHead = ({ meta }) => {
     <meta name='robots' content='follow, index' />
     <meta charSet='UTF-8' />
     {BLOG.SEO_GOOGLE_SITE_VERIFICATION && (
-      <meta
+      <meta name='google-site-verification' content={BLOG.SEO_GOOGLE_SITE_VERIFICATION} />
-        name='google-site-verification'
-        content={BLOG.SEO_GOOGLE_SITE_VERIFICATION}
-      />
     )}
     <meta name='keywords' content={keywords} />
     <meta name='description' content={description} />

components/CommonScript.js

@@ -7,7 +7,7 @@ import BLOG from '@/blog.config'
  */
 const CommonScript = () => {
   return (<>
-    {BLOG.COMMENT_DAO_VOICE_ENABLE && (<>
+    {BLOG.COMMENT_DAO_VOICE_ID && (<>
       {/* DaoVoice 反馈 */}
       <script async dangerouslySetInnerHTML={{
         __html: `
@@ -27,18 +27,15 @@ const CommonScript = () => {
     </>)}
 
     {/* GoogleAdsense */}
-    {BLOG.GOOGLE_ADSENSE_ENABLE && (<script data-ad-client={BLOG.googleAdsenseId} async
+    {BLOG.ADSENSE_GOOGLE_ID && (<script data-ad-client={BLOG.ADSENSE_GOOGLE_ID} async
               src='https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>)}
 
-    {BLOG.COMMENT_TIDIO_ENABLE && (<>
+    {BLOG.COMMENT_CUSDIS_APP_ID && <script defer src='https://cusdis.com/js/widget/lang/zh-cn.js' />}
-      {/* Tidio在线反馈 */}
+
-      <script async
+    {BLOG.COMMENT_TIDIO_ID && <script async src={`//code.tidio.co/${BLOG.COMMENT_TIDIO_ID}.js`} />}
-              src={`//code.tidio.co/${BLOG.COMMENT_TIDIO_ID}.js`}
-      />
-    </>)}
 
     {/* gitter聊天室 */}
-    {BLOG.COMMENT_GITTER_ENABLE && (<>
+    {BLOG.COMMENT_GITTER_ROOM && (<>
       <script src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer/>
       <script async dangerouslySetInnerHTML={{
         __html: `
@@ -51,7 +48,7 @@ const CommonScript = () => {
 
     {/* 代码统计 */}
     {/* ackee统计脚本 */}
-    {BLOG.ANALYTICS_ACKEE_ENABLE && (
+    {BLOG.ANALYTICS_ACKEE_TRACKER && (
       <script async src={BLOG.ANALYTICS_ACKEE_TRACKER}
               data-ackee-server={BLOG.ANALYTICS_ACKEE_DATA_SERVER}
               data-ackee-domain-id={BLOG.ANALYTICS_ACKEE_DOMAIN_ID}
@@ -59,7 +56,7 @@ const CommonScript = () => {
     )}
 
     {/* 百度统计 */}
-    {BLOG.ANALYTICS_BAIDU_ENABLE && (
+    {BLOG.ANALYTICS_BAIDU_ID && (
       <script async
               dangerouslySetInnerHTML={{
                 __html: `
@@ -76,7 +73,7 @@ const CommonScript = () => {
     )}
 
     {/* 站长统计 */}
-    {BLOG.ANALYTICS_CNZZ_ENABLE && (
+    {BLOG.ANALYTICS_CNZZ_ID && (
       <script async
               dangerouslySetInnerHTML={{
                 __html: `
@@ -87,7 +84,7 @@ const CommonScript = () => {
     )}
 
     {/* 谷歌统计 */}
-    {BLOG.ANALYTICS_GOOGLE_ENABLE && (<>
+    {BLOG.ANALYTICS_GOOGLE_ID && (<>
         <script async
                 src={`https://www.googletagmanager.com/gtag/js?id=${BLOG.ANALYTICS_GOOGLE_ID}`}
         />

components/Tabs.js

@@ -24,28 +24,30 @@ const Tabs = ({ children }) => {
   }
 
   const [currentTab, setCurrentTab] = useState(0)
+
   function tabClickHandle (i) {
     setCurrentTab(i)
   }
 
-  return (
+  return <div className='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'>
-      {<div className='hidden lg:block mb-5 bg-white dark:bg-gray-800 duration-200'>
+      {children.map((item, index) => {
-        <ul className='flex justify-center space-x-5 pb-4 dark:text-gray-400 text-gray-600'>
+        return <li key={index}
-          {children.map((item, 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 '}
-            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) }}>
+                   onClick={() => {
-              {item?.key}
+                     tabClickHandle(index)
-            </li>
+                   }}>
-          })}
+          {item?.key}
-        </ul>
+        </li>
-        {children.map((item, index) => {
+      })}
-          return <section key={index} className={`${currentTab === index ? 'block animate__animated animate__fadeIn animate__faster' : 'hidden'}`}>
+    </ul>
-              {item}
+    {children.map((item, index) => {
-            </section>
+      return <section key={index}
-        })}
+                      className={`${currentTab === index ? 'block animate__animated animate__fadeIn animate__faster' : 'hidden'}`}>
-      </div>}
+        {item}
-
+      </section>
-    </>)
+    })}
+  </div>
 }
 
 export default Tabs

lib/notion/getAllPosts.js

@@ -60,7 +60,7 @@ export async function getAllPosts ({ notionPageData, from, includePage = false }
   })
 
   // Sort by date
-  if (BLOG.POSTS_SORT_BY_DATE) {
+  if (BLOG.POSTS_SORT_BY === 'date') {
     posts.sort((a, b) => {
       const dateA = new Date(a?.date?.start_date || a.createdTime)
       const dateB = new Date(b?.date?.start_date || b.createdTime)

pages/_app.js

@@ -26,12 +26,10 @@ const GoogleAdsense = dynamic(() => import('@/components/GoogleAdsense'), { ssr:
 const MyApp = ({ Component, pageProps }) => {
   return (
     <GlobalContextProvider>
-        {BLOG.ANALYTICS_ACKEE_ENABLE && (
+        {BLOG.ANALYTICS_ACKEE_TRACKER && <Ackee />}
-          <Ackee />
+        {BLOG.ANALYTICS_GOOGLE_ID && <Gtag />}
-        )}
+        {JSON.parse(BLOG.ANALYTICS_BUSUANZI_ENABLE) && <Busuanzi/>}
-        {BLOG.ANALYTICS_GOOGLE_ENABLE && <Gtag />}
+        {BLOG.ADSENSE_GOOGLE_ID && <GoogleAdsense/>}
-        {BLOG.ANALYTICS_BUSUANZI_ENABLE && <Busuanzi/>}
-        {BLOG.GOOGLE_ADSENSE_ENABLE && <GoogleAdsense/>}
         <Component {...pageProps} />
     </GlobalContextProvider>
   )

themes/NEXT/components/Footer.js

@@ -15,9 +15,8 @@ const Footer = ({ title }) => {
       <br/>
 
       <span>Powered by <a href='https://notion.so' className='underline font-bold text-gray-500 dark:text-gray-300'>Notion</a> & <a href='https://github.com/tangly1024/NotionNext' className='underline font-bold text-gray-500 dark:text-gray-300'>NotionNext</a>.</span></span>
-      <br />
 
-      <FontAwesomeIcon icon={faShieldAlt} /> <a href='https://beian.miit.gov.cn/' className='mr-2 font-bold'>闽ICP备20010331号</a>
+      {BLOG.BEI_AN && <><br /><FontAwesomeIcon icon={faShieldAlt} /> <a href='https://beian.miit.gov.cn/' className='mr-2'>{BLOG.BEI_AN}</a><br/></>}
       <span className='hidden busuanzi_container_site_pv'>
             <FontAwesomeIcon icon={faEye}/><span className='px-1 busuanzi_value_site_pv'> </span>  </span>
       <span className='pl-2 hidden busuanzi_container_site_uv'>

themes/NEXT/components/SideAreaLeft.js

@@ -36,7 +36,7 @@ const SideAreaLeft = ({ currentTag, post, postCount, currentSearch }) => {
       </section>
     </section>
 
-    <Card className='sticky top-4'>
+    <Card className='sticky top-4 hidden lg:block'>
       <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'>