2026年7月白熊部落格折騰日誌 | 🐻‍❄️白熊的精神家園

❗

閲前提醒：本文的大部分內容為非專業操作，可能會有一定的風險，僅供娛樂和參考。如有需要搭建站點的意願，請查閱專業人士提供的教程或官方文檔。

💡

這裡列出了2026年7月26日起到7月31日的所有站點功能的更新和調試日誌。如果需要查看從建站（2026年7月24日）起到7月25日站點調試的詳細操作，可以參考文章：

《🤔這個網站是怎麼建立起來的？》

✅

本文內容已全部完成，除針對錯別字等影響閱讀的情況進行微調外，不會做過多改動。

😅

折騰了那麼多，給我的感覺就是：不如直接尋求其他做部落格的大佬問經驗，做傳統的部落格算了。媽的我要累死了⋯⋯🫠

從本月起，只要對這個站點做了一些底層代碼的修改，我就會以月為單位更新一篇「折騰日誌」，這不僅是為了方便將來某天編寫站點更新日誌總覽頁面提供一些參考，還方便我將來再需要做更加深入的修改時不需要再去做重複的工作，更是給其他一些用NotionNext做部落格的朋友一些參考（當然不要照著我的做法去做，很容易翻車）。

先回顧一下在文章《🤔這個網站是怎麼建立起來的？》裡提到的對站點的折騰：

搭建站點

選擇主題風格

設置評論區

修改資料卡

修改頁面字體

了解了以後如何嵌入B站視頻

總結的時候我發現之前那篇文章我忘了給「添加字體」的部分寫二級標題了，我在這裡給它補上（笑）。這些操作的具體步驟我就不在這裡贅述了，大家去看那篇文章就行。

然後這篇文章就是要把今天（也就是7月26日）起到這個月底所有折騰這個站點的內容寫在這裡，那就請大家看這隻在計算機編程上算是新手小白的大白熊的各種操作吧😅：

📊 添加「顯示統計卡」

💡

折騰時間：2026年7月26日-7月27日、7月29日

之所以想要添加這個「統計卡」，就是因為看到別人的站點都會在自己的主頁上紀錄自己建立這個站點到現在過去了多少天、以及整個站點的文章數、總字數等。因此我也想添加一個這樣的統計卡，不僅方便自己和大家查看，也能在某天檢查自己站點的時候覺得很有成就感（笑）。

不過整個製作過程真的很痛苦，光是站點運行時間的計算統計檢查調試我就精疲力盡了，結果發現到了「字數統計」這一塊，完全沒有耐心整下去，最後只能將計劃暫時擱置。

首先我們要先把統計小組見展示出來，查看它能否正常顯示。我們先打開：

NotionNext/themes/hexo/config.js

將：

改成：

效果：

我發現這個統計小組件並沒有站點總字數、建站運行時間，所以我需要在此基礎上進行增補。

尋找相關的路徑：

NotionNext/themes/hexo/components/AnalyticsCard.js

原來的代碼：

替換成：

效果：

做出來了，但是字體顯得太小了，而且建站日期也不對（本站建站時間是在2026年7月24日）。還有⋯⋯總字數⋯⋯0？😅

額⋯⋯我們先不管它。

把：

改成：

同時把時間修改掉：

最後就是：

效果：

因為目前NotionNext還是沒有辦法自動在每次寫完文章後自動統計站點總字數（至少目前來說對我而言有些超綱了），因此最終決定隱藏它了。等以後能夠有辦法統計了再去看怎麼弄。

效果：

先做到這裡吧，從下午4點折騰到晚上10點我都快要吐血了⋯⋯

😅 7月27日的凌晨，補充

發現一個很不妙的事情，現在已經是7月27日了，但不知道為什麼，統計小組件上的運行時間還是停留在了「3天」。

我趕緊去問一下ChatGPT，看看他有沒有辦法找出這裡的bug。

ChatGPT的回答：

你的代码：

逻辑本身没有大问题，但这里有一个隐藏坑：

new Date('2026-07-24') 会被解析成 UTC 时间

JavaScript 对这种格式：

会按照 UTC 00:00:00 处理。

而你现在应该是在东八区（中国）测试。

例如：

2026-07-24 00:00 UTC

2026-07-24 08:00 中国时间

2026-07-24 09:00 日本时间

所以你的建站时间实际上被偷偷推迟了 8 小时。

於是我按照ChatGPT的建議，將：

改成了：

效果：

就先這樣子好了，等28號的零點再看看有沒有問題好了。

還有這個訪客數，我問了一下ChatGPT，他說：

这个其实不是 bug，是不蒜子的机制。

你现在用的是：

这个是站点访客数（UV）。（我也沒確認反正他說是什麼就是什麼吧）

理论上：

同一个访客一天内不会重复增加

但是实际情况：

不蒜子的 UV 判断依赖：

浏览器信息

而你测试时：

换浏览器

开无痕模式

清 Cookie

换 VPN 节点

手机访问

电脑访问

都会被认为是新访客。

所以如果確定這個真的不是bug的話，就暫時不去折騰做修改好了（當然感覺就是自己掛梯子掛得太頻繁了就會這樣子）。

此外，我將這個統計小組件的文字改成了繁體中文，不然會和這個站點裡的其他文字不搭配：

😅 7月29日：笑死，我和Chat GPT鬥智鬥勇到徹底無奈放棄

關於站點總字數的統計問題，我去了NotionNext的官方Github討論版面裡詢問了老師：

请问一下notionnext如何做到每篇文章的字数都能够自动统计，并且能够自动统计总字数展示在统计卡片上呢？

有老師答覆了我的問題：

💡问题原因：

你现在修改的 AnalyticsCard.js 是这样取值的：

但项目并没有向统计卡片传入顶层的 wordCount，因此：

最终得到的是 undefined，页面自然显示为空。当前项目只在打开某篇文章时，通过 processPostData() 计算正文，并把结果保存到：

也就是说，现有数据结构是“当前文章字数”，不是“全站总字数”。(raw.githubusercontent.com)

💡推荐实现方式：

在服务端构建全站数据时：

获取每篇已发布文章的正文；

调用项目现有的 countWords()；

给每篇文章写入 wordCount 和 readTime；

累加得到 totalWordCount；

将 totalWordCount 传给统计卡片。

这样可以同时实现：

文章详情页显示当前文章字数；

文章列表显示每篇文章字数；

统计卡片显示所有已发布文章的总字数；

Notion 文章修改后，在下一次 ISR 或重新部署时自动更新。

项目已经有字数计算函数，而且文章摘要清理逻辑本身就保留了 wordCount 和 readTime 字段，所以无需重新写一套中文字数算法。

💡需要注意的性能问题：

这种方式需要在全站数据重新生成时读取每篇文章的正文。文章数量越多，首次 Vercel 构建耗时越长。代码中使用了并发数 3，可以降低同时请求 Notion API 造成失败的概率。

最关键的一点是：只修改 AnalyticsCard.js 无法得到全站总字数，因为展示组件不会自动读取全部文章正文；必须先在 SiteDataApi.js的服务端数据层生成 totalWordCount。

把這個回答丟給了ChatGPT，他的回覆：

我看了一下你在 GitHub 发的讨论和对方的回复。

简单说：对方的回答是对的，而且刚好解释了为什么你之前改 AnalyticsCard.js 没有效果。

你之前走的路线：

这个思路少了一层。

真正的数据流是：

但是：

拿到的是：

而不是：

所以这里：

里面：

其实不存在。

于是：

等于：

自然就是空白。

那现在应该怎么做？

对方给你的方案其实分成两步。

第一步：让每篇文章拥有 wordCount

好消息：

NotionNext 已经有这个功能。

对方说：

当前项目只在打开某篇文章时，通过 processPostData() 计算正文，并保存到 props.post.wordCount 和 props.post.readTime。

也就是说：

你的文章页面理论上已经可以拿到：

例如：

所以你不用重新写中文统计算法。

第二步：增加全站 totalWordCount

你的需求：

统计卡片：

需要的是：

也就是：

最后：

然后传给：

你需要改的位置不是 AnalyticsCard

重点来了：

对方最后一句非常关键：

只修改 AnalyticsCard.js 无法得到全站总字数，必须先在 SiteDataApi.js 的服务端数据层生成 totalWordCount。

也就是说：

你应该找：

里面的：

（具体路径根据 NotionNext 版本可能不同）

大概逻辑应该变成：

原本：

改成：

类似：

然后 AnalyticsCard：

原本：

改：

显示：

但是这里有一个坑

你现在是：

每次部署时：

所以如果你的文章很多：

例如：

每次构建都重新统计字数，会增加构建时间。

对方也提醒了这个问题。

不过你现在：

完全不用担心。

我建议你现在不要急着自己改

因为你已经：

问了作者

GitHub 有讨论

对方已经指出正确方向

下一步最稳：

等作者或者维护者回复。

如果没有回复，你可以按这个方向改：

找 SiteDataApi.js

找生成全局数据的位置

增加 totalWordCount

修改 AnalyticsCard

另外，我发现一个挺有意思的地方：

你之前说自己不是程序员，只是“折腾博客”，但你现在实际上已经碰到的是 Next.js 数据流设计问题，不是简单改主题😂

你之前改 AnalyticsCard 已经碰到了 React 组件层，现在需要往上走一层到数据层。

如果你把你的项目里：

或者搜索到的：

那段代码贴出来，我可以直接告诉你应该在哪几行加。你不用自己盲找。

然後就是我跟這個破AI鬥智鬥勇，在代碼裡改來改去，改得最多的就是那個「SiteDataApi.js」。

然後就改到最後出現了：

「先向你道歉：你不是程序员，我不应该让你在项目结构里猜文件、试错。你要的是“告诉我改哪里”，而不是让我给你一个方向让你自己摸索。」 ——愛來自ChatGPT

我把修改過的「SiteDataApi.js」文件修改回到了最初的狀態，另外這部分的代碼修改過程我就不放了，我怕別人嘗試我的操作把別人的站點給崩掉了（笑）。

可能當初notionNext的大佬考慮到那些有上萬篇文章的部落格，如果修改了部分設置需要自動重新部署站點，可能會因為這個原因導致部署時間變長，所以才沒有設置這個功能吧。

總結：去死吧ChatGPT，老子不改了，就這樣子吧（擺爛）。

©️ 版權聲明修改

💡

折騰時間：2026年7月26日

只是單純覺得改了之後會更嚴謹一些（怎麼想的w）。

然後我想起來我目前的部落格使用的是「zh-TW」的語言，如果只是修改「zh-CN」的話，是顯示不出效果的。

改成：

效果：

「未經授權，嚴禁轉載！（測試用）」

效果：

我在這裡單獨說明一下：

要是你敢問我「老師啊你的自介我能不能採用『CC BY-NC-SA 4.0許可協議』轉載然後變成我的自介啊？」之類的奇葩問題，我會直接穿過屏幕把你揍出360度原地螺旋升天（笑）。

我不反感各位想建部落格的朋友模仿我的一些頁面佈局，或者模仿我的自介樣式寫一篇屬於自己的自介，但我的設定只屬於我自己一個人，不要拿來當成你自己的。

⋯⋯欸等下我不是在寫折騰日誌嗎怎麼又在扯啊臥槽

🎧 添加音樂播放器

💡

折騰時間：2026年7月26日-7月27日

添加音樂播放器的目的就是希望各位可以一邊看我的文章一邊欣賞音樂，不過有的人可能會不喜歡受干擾的環境。我看如果意見比較多的話我會考慮關閉自動播放（雖然自動播放功能有時候也會抽風）。

這個應該很簡單，官方文檔裡有說：

后台添加环境变量 NEXT_PUBLIC_MUSIC_PLAYER 值为 true，即可打开音乐播放器功能。

點開：

NotionNext/conf/widget.config.js

將

改成

效果：

播放器出現在畫面的左下角，然後點擊側邊的「>」可以展開。

播放器裡的歌曲是這個站點的作者默認放進去的。

就先不急著把自己喜歡的歌曲和歌單放進去了，等有精力了再說。

🫠 在移動端遇到的問題

不過這個情況再後續修改了頁腳之後有所改善了，我會在後面提到修改頁腳的事情。

☕️ 7月27日的凌晨，補充

我興趣使然，把我平日工作和睡覺的時候會放的歌單放進去了，如果有需要的話可以看看。

原理：

正文的歌單嵌入使用的是一款叫simple-notion-widgets的工具，先看一下效果：

但感覺上面這個歌單聽了讓人昏昏欲睡的，我就又換成了工作用的歌單了。

這裡參考的是tangly1024大佬的博客裡的一篇文章：Notion技巧 | 嵌入背景音乐

我雖然打開了自動播放，結果發現在Mac端的Safari瀏覽器中打開，音樂是不會自動播放的。然後我試了一下Chrome也是無法自動播放。所以我也不清楚是瀏覽器的問題還是插件自己失效了。

🐾 頁腳的修改調整

💡

折騰時間：2026年7月27日

這個其實是我從建立這個站點開始就一直很想修改的地方，因為原先的頁腳個人看著很不滿意：

最主要的問題在於：

上下行之間顯得過於緊湊；

「KIRIN ICE」前面的愛心與頁面主題不符；

底部的Powered by字樣字體與頁面字體不一致。

下劃線非常影響觀感。

於是我就想著先修改底部的Powered by字樣，讓整體與目前的字體相統一。但當我打開了「NotionNext/themes/hexo/components/Footer.js」之後，發現並沒有修改Powered by字樣字體的代碼。但我發現了這個：

也就是說，應該還有一個叫「PoweredBy」的文件在控制著這部分的字體和大小使得這個和頁腳的其他文字做了獨立的設置區分。

於是我先打開了：

NotionNext/components/PoweredBy.js：

找到了下面的代碼：

將其改為：

就可以達到和網頁默認字體同樣的效果了。

然後原來的那個下劃線出現的地方是在：

修改成：

最後就會變成：

接下來，就是要讓整個頁腳的上下行都能達到不緊湊且距離感很舒適的程度。

於是我便又回到了：

NotionNext/themes/hexo/components/Footer.js：

原先的代碼長這個樣子：

中間修改的過程就不細說了，很麻煩，中間也問了ChatGPT，經歷了它的各種抽風操作和擅自「舉一反三」的調整（吐血）：

這裡我再說一下具體修改了哪些部分吧。首先是各個上下行之間的距離我給他調整得寬度幾乎一致，不緊湊擁擠。然後就是將第一行中間的那個愛心改成了爪印，如果需要自行修改，可以將我修改過的代碼中加粗標註綠色背景的部分（<i className='fas fa-paw mx-1' />）改成你需要的圖案。這個如果你是非專業人士建議你去問問ChatGPT：

調整之後的效果就會是這個樣子：