Cnblogs部落格皮膚開發除錯最佳方案

Hello_Alson發表於2023-02-10
除錯

Cnblogs部落格園支援自定義js來美化站點（需要申請JS許可權），可以將主題託管到自己的雲資源或CDN加速節點節點上。

例如我的網站為 www.example.com（IP或其它host），我將編譯後的資料夾 dist 放到了網站的根目錄。

這樣我可以透過載入 https://www.example.com/dist/simpleMemory.js 來載入主題：

<script type="text/javascript">
    window.cnblogsConfig = {
      info: {
        name: 'userName', // 使用者名稱
        startDate: '2021-01-01', // 入園時間，年-月-日。入園時間檢視方法：滑鼠停留園齡時間上，會顯示入園時間
        avatar: 'http://xxxx.png', // 使用者頭像
      },
    }
</script>
<script src="https://www.example.com/dist/simpleMemory.js" defer></script>

當主題需要自定義一些功能，發現不方便除錯js指令碼，要反覆將生產包部署到伺服器，來回操作繁瑣複雜，現可以透過雲開發方式來做除錯。

開發環境 - 使用Codespaces除錯開發

fork倉庫後，如果沒有云資源又想要除錯程式碼，這時候可以嘗試github推出的codespaces雲IDE。

  • 在github上建立一個codespaces

建立codespaces

  1. control + shift + ~開啟終端，執行命令語句 npm run server

開啟終端，執行命令語句

  1. 切換到埠皮膚, 右鍵連結地址，更改埠可見性為public

右鍵連結地址，更改埠可見性為

  1. 開啟連結地址，就能看到dist為目錄的站點

dist站點

  1. 最後在csblogs部落格設定中，臨時將script指令碼地址替換

開啟終端，執行命令語句

在codespaces編譯後，在重新整理部落格園網站就能看到更改後的內容

github codespaces 每個月免費時長為120 core/h，2核數CPU可以使用60h。

打包後dist包部署到伺服器。

生產環境 - 雲伺服器Docker容器化

注意Cnblogs是https站點，所以引入第三方資源的站點也必須是https，詳見https混合內容

1. 申請SSL證照（已有證照跳過此步驟）

  • 以ZeroSSL申請證照為例， 皮膚中點選New Certificate，輸入IP地址-選擇90天免費證照
    建立ZeroSSL

  • 驗證域名所有權，下載驗證檔案，替換倉庫路徑./well-known/pki-validation下的.txt檔案
    建立ZeroSSL

  • 伺服器中拉取倉庫程式碼, 執行docker-compose up -d - ZeroSSL點選校驗

2. 安裝證照
  • ZeroSSl下載的證照包，需要將模組包ca-boundle.crt和併到certificate.crt中（手動扣過去就行）,並替換倉庫ssl下的證照檔案
  • 伺服器拉取最新程式碼，執行docker-compose up -d --force-recreate --build --remove-orphans

相關文章