Welcome 👋

這邊記錄一下如何在 Hugo 中安裝 Disqus 評論系統，佈景主題為 PaperMod。 安裝步驟 在 Disqus 註冊帳號並創建一個新的網站。 在 Disqus 的網站設定中，找到 Shortname，這是用來識別你的網站的。 在你的 Hugo 網站的 config.toml 或 config.yaml 中添加以下配置： [params] disqusShortname = "your_disqus_shortname" comments = true 或者如果你使用的是 YAML 格式： params: disqusShortname: your_disqus_shortname comments: true 確保你的 Hugo 佈景主題支持 Disqus。PaperMod 佈景主題已經內建支持 Disqus，所以只需要確保上述配置正確即可。 複製 themes/PaperMod/layouts/partials/comments.html 到 layouts/partials/comments.html 確認 Disqus 的代碼已經包含在內。 如果沒有，你可以手動添加以下代碼到你的 layouts/partials/comments.html： {{- /* Comments area start */ -}} <div class="disqus markdown"> {{ partial "disqus.html" . }} </div> {{- /* Comments area end */ -}} 建立 layouts/partials/disqus.html 檔案，並添加以下內容： {{ if .Site.Params.disqusShortname }} <div id="disqus_thread"></div> <script> var disqus_config = function () { this.page.url = '{{ .Permalink }}'; // Replace PAGE_URL with your page's canonical URL variable this.page.identifier = '{{ .File.Path }}'; // Replace PAGE_IDENTIFIER with your page's unique identifier variable }; (function() { // DON'T EDIT BELOW THIS LINE var d = document, s = d.createElement('script'); s.src = 'https://{{ .Site.Params.disqusShortname }}.disqus.com/embed.js'; s.setAttribute('data-timestamp', +new Date()); (d.head || d.body).appendChild(s); })(); </script> <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript> {{ end }} 在 local 確認是否有完成

在 Filamentphp 開發過程中，使用 Spatie Setting 插件，一開始一直卡關，所以寫這篇文章記錄一下。 安裝 Spatie Setting 插件 插件 filament-spatie-settings 安裝 spatie-laravel-settings-plugin composer require filament/spatie-laravel-settings-plugin:"^3.2" -W 安裝相關 migration 和 class 用 spatie/laravel-settings 這個套件，所以需要根據 installation 來安裝相關 migration 和 class 安裝 migration php artisan vendor:publish --provider="Spatie\LaravelSettings\LaravelSettingsServiceProvider" --tag="migrations" php artisan migrate 你會取得 migration 如下，並且執行 migrate use Illuminate\Database\Migrations\Migration; use Illuminate\Database\Schema\Blueprint; use Illuminate\Support\Facades\Schema; return new class extends Migration { public function up() { Schema::create('settings', function (Blueprint $table): void { $table->id(); $table->string('group'); $table->string('name'); $table->boolean('locked')->default(false); $table->json('payload'); $table->timestamps(); $table->unique(['group', 'name']); }); } }; 安裝 class ...

Google 在 2025 年 5 月 21 日宣布推出其最新的 AI 編程助手 Jules，旨在與 OpenAI 的 Codex 競爭。Jules 是一個強大的 AI 編程助手，專為開發者設計，能夠理解自然語言指令並生成高質量的程式碼。 以下就來試試看，如何透過 Jules 來幫我的一個 Filament 專案，加上我想要的功能。 我已經安裝 spatie-laravel-settings-plugin Plugin，我想讓 EmployeeResource.php 這個檔案裡面的其中一個欄位，能夠透過設定檔來控制。 開啟 Jules 並且連結 Github 開啟 Google Jules 選擇 Repo 根據我的 prompt 生成我需要的程式碼 feat: assign config value $hr_base_salary to Employee resource's base_salary 過程中會出現一些 error，Jules 嘗試自動修復環境問題。 最後成功生成了我需要的程式碼，並且詢問要不要開新分支 在我的 Github Repo 中可以看到 Jules 自動生成的分支 總結 整體來說算是一個不錯的體驗，Jules 能夠快速理解我的需求並生成相應的程式碼。雖然在過程中遇到了一些錯誤，但它能夠自動修復並繼續進行。這對於開發者來說是一個很大的幫助，特別是在處理複雜的專案時。 我相信一個好的且明確的 prompt 可能會影響到 AI 執行的結果。這或許是我們需要多加學習如何當一個好的 prompt engineer。

透過新增 CSS snippets 進入 Obsidian Settings 在彈出的視窗中，前往「外觀」(Appearance)，然後向下捲動直到你看到「CSS 程式碼片段」(CSS snippets)。 你應該會在右側看到一個資料夾圖示，點擊它以開啟程式碼片段資料夾。 這時 Windows 資料夾應該會跳出，在空白處點右鍵，選擇「新增」->「文字文件」。 將這個文字文件重新命名為 Canvas-Snippets.css（系統可能會詢問你是否確定要重新命名，請確認）。 雙擊這個檔案，然後將以下提供的 CSS 程式碼貼上並儲存（關閉檔案並確認儲存變更）。 .canvas-node-content:not(.is-loaded):not(:has(.has-list-bullet)) { text-align: center; } 關閉資料夾視窗，別忘了啟用剛剛建立的 Canvas-Snippets（此時你的 Obsidian 設定應該還是開著的）。 Ref

如何將 Mermaid 轉換到 draw.io 先談談什麼是 Mermaid Mermaid 是 Mermaid.js，它是一個 JavaScript-based 用來畫流程圖、甘特圖、時序圖等的開源圖表語言。可以透過簡單的文字描述來產生圖表。 很常使用在 Markdown 文件中，例如 Github 中的 readme.md 文件。 為什麼要這樣做呢？ 因為我慣用的是 draw.io，有時候後透過 GPT 產生的流程圖，可以直接複製貼上到 draw.io。 插入 Mermaid 流程圖 Reference