代码 on MoeJue's Blog

阿珏的部落格的國際化之路

Sun, 02 Nov 2025 10:12:27 +0000

最近，我給個人部落格來了次「大動作」—— 從單語言版本升級到了 多語言站點（簡體中文、繁體中文、英語、日語），並且全流程實現了自動化。💪

主要包括：

自動同步主站文章
自動 AI 翻譯內容
自動建構與部署多語言站點

為何選擇 Hugo？

因為它那句自信的口號：

「The world’s fastest framework for building websites.」

—— 就這句話，我就決定是它了 😆。

不過我沒有採用「一套主題多語言切換」的傳統做法，而是讓 每種語言都有獨立主題。這樣每個語言版本都能保留自己的美學與排版風格，真正做到「文化層面的在地化」。

設計目標與約束 🎯

語言：支援簡中、繁中、英文、日文，未來還可擴展。
主題：每種語言使用最合適的 Hugo 主題，而非強行複用。
內容同步：所有語言共用一份內容儲存庫，按需翻譯。
部署策略：各語言獨立建構與發布，可部署到不同分支或網域。
客製化頁面：像「友鏈」、「書房」、「歸檔」等頁面要在多語言下保持一致體驗。

多語言配置策略 🧩

我為每個語言單獨準備了一個設定檔： config/<lang>.toml，它們主要負責：

指定主題（例如 theme = "PaperMod"）。
定義該語言特有的 title / description / keywords。
重寫選單設定 [[params.menu]]，以匹配不同主題的導航結構。
注入客製化樣式，確保整體視覺一致。

這種結構非常清晰，也方便未來擴展更多語言版本。

GitHub Actions 自動部署矩陣 ⚙️

CI/CD 部分完全交給 GitHub Actions 來處理。在 .github/workflows/hugo.yml 中，我使用了 矩陣建構，為每種語言獨立建構、發布：

matrix:
  include:
    - lang: en
      config: config/en.toml
      publish_branch: dist-en
    - lang: zh-cn
      config: config/zh.toml
      publish_branch: dist-zh
    - lang: ja
      config: config/ja.toml
      publish_branch: dist-ja
    - lang: zh-hant
      config: config/zh-hant.toml
      publish_branch: dist-zh-hant

建構階段 👇

第三代隨機二次元 API 來了！

Wed, 15 Oct 2025 01:31:22 +0000

還記得那個被你們玩壞的隨機圖接口嗎？今天它更新了！在過去的幾年裡，隨機圖 API 一直是許多前端開發者、二次元站長、甚至桌面插件愛好者的「小玩具」與「常用工具」。

🥇 第一代：簡單但笨重的起點

那時候的隨機圖 API，說實話—— 就是一個 PHP 小腳本 + 一台雲主機。那時的目標很簡單：提供一個能返回隨機圖片的接口。

特點如下：

所有請求都集中在一台伺服器上；
圖片儲存與 API 服務耦合在一起；
無快取，無智能分發，完全依賴單點性能；
高峰期 CPU 飆升、502 報錯、訪問慢、費流量佔儲存；

[客戶端] ---> [中心伺服器(唯一)] ---> [圖片文件]

🥈 第二代：雲化與快取的過渡時代

進入第二代後，隨機圖 API 邁入了「雲化」階段。服務遷上雲、引入快取、CDN、負載分發都安排上。

主要變化：

圖片統一託管在第三方圖床（如新浪圖床）；
接口運行在雲主機或輕量應用伺服器上；
增加了基礎快取邏輯（例如 Redis 或 Nginx 快取層）；
服務整體更穩定，訪問速度也顯著提升。

[客戶端]
   ↓
[雲伺服器接口層] --> [CDN 快取] --> [圖床(Sina)]

訪問仍需經過中心伺服器中轉，遇到高併發或地區網路分佈不均時，延遲依舊明顯。
所有請求還是得經過「中心伺服器」，
一旦伺服器抽風，全體陪葬 💀。

🚀 第三代隨機圖 API 來了！

✨ 核心亮點

第三代隨機圖 API 是一次 架構級重生。

依托於 騰訊雲 EdgeOne 超過 3200+ 邊緣節點 的強大能力，請求可在 全球範圍內自動調度 到離用戶最近的節點執行，實現了真正的 去中心化分佈式架構。

我不會AE,但是我會Code

Sat, 23 Aug 2025 12:29:01 +0000

✨ 緒山真尋的小窩 ✨

🌸 歡迎來到緒山真尋的小窩 🌸

哇！你發現了我的秘密基地！(*≧ω≦)

這裡是緒山真尋的個人網站，充滿了可愛的動畫和有趣的內容！我會在這裡分享我喜歡的動畫、漫畫、遊戲和一些日常生活中的小確幸～

💕 關於我 💕

我是緒山真尋，一個熱愛成人遊戲的家裡蹲廢柴尼特族。喜歡動畫、漫畫、輕小說和各種可愛的東西！最喜歡的顏色是粉色和淡藍色！

  ∩∩
（･ω･）  <- 這是我！
＿|　⊃／(＿＿
／ └-(＿＿＿／

🎀 網站內容 🎀

🌟 精美動畫展示
📚 我的私房照
🎵 好聽的音樂
📷 日常生活的小片段

🌈 關於 🌈

🎭 演示: https://mahiro.moejue.cn/
🏠 個人部落格: https://MoeJue.cn/
🐱 GitHub: https://github.com/iAJue/Mahiro
📧 官方網站: https://onimai.jp/

📝 版權聲明 📝

本網站由 @Moejue 設計和開發
網站中使用的所有動畫片段、漫畫圖片、角色形象及相關內容的版權均歸原作者(ねことうふ（Nekotofu）)及其發行公司(Studio Bind、Ichijinsha)所有
如有侵權，請透過以上聯絡方式告知，我會立即刪除相關內容
GNU GENERAL PUBLIC LICENSE Version 2
Copyright © 2025 MoeJue. All rights reserved.

💌 特別感謝 💌

感謝所有喜歡緒山真尋的朋友們！(●’◡’●)

多鏈支援，真沒你想的那麼簡單

Sat, 05 Jul 2025 08:20:55 +0000

多鏈錢包整合的實踐反思

總算是空閒下來可以整理一下程式碼了，Web3 專案接入多鏈錢包連接功能，主要涉及 Ethereum、Polygon、BSC 和 Solana。乍一聽好像只是「多做幾套相容邏輯」的事，但真正落地後才發現，很多東西其實沒想得那麼簡單。

this.networkConfigs = {
    ethereum: {
        chainId: '0x1', // 1
        chainName: 'Ethereum Mainnet',
        nativeCurrency: {
            name: 'Ethereum',
            symbol: 'ETH',
            decimals: 18
        },
        rpcUrls: ['https://eth-mainnet.public.blastapi.io'],
        blockExplorerUrls: ['https://etherscan.io']
    },
    polygon: {
        chainId: '0x89', // 137
        chainName: 'Polygon Mainnet',
        nativeCurrency: {
            name: 'MATIC',
            symbol: 'MATIC',
            decimals: 18
        },
        rpcUrls: ['https://polygon-rpc.com'],
        blockExplorerUrls: ['https://polygonscan.com']
    },
    bsc: {
        chainId: '0x38', // 56
        chainName: 'BNB Smart Chain',
        nativeCurrency: {
            name: 'BNB',
            symbol: 'BNB',
            decimals: 18
        },
        rpcUrls: ['https://bsc-dataseed.binance.org'],
        blockExplorerUrls: ['https://bscscan.com']
    }
}

多鏈並非簡單的「支援多個錢包」

最大的感受是：鏈不一樣，錢包互動方式也不一樣，連 SDK 的思維方式都不一樣。以太坊生態可以用統一的 Web3.js 處理很多邏輯，而到了 Solana，你會發現它完全是另一套系統：Provider 接入、連接流程、PublicKey 建構方式都不太一樣，甚至連網路延遲和穩定性都影響體驗。

打造 macOS 風格的 Web 應用

Sun, 11 May 2025 11:46:03 +0000

專案概述

在當今的 Web 開發領域，使用者體驗和介面設計變得越來越重要。

Mac Web Vue Template 是一個受 macOS 設計啟發的現代優雅的 Vue.js Web 模板，它是一個基於 Vue.js 的現代化 Web 應用模板，其設計靈感來源於 macOS 的優雅介面。這個專案不僅提供了美觀的 UI 設計，還包含了完整的專案結構和最佳實踐。

線上演示

你可以透過造訪 WebAi 來體驗這個模板的實際效果。邀請碼(MoeJue)

核心特色

macOS 風格的 UI 設計
- 採用 macOS 的設計語言
- 精緻的毛玻璃效果
- 優雅的動畫過渡
現代化的技術棧
- Vue.js 作為核心框架
- Vite 作為建構工具
- Pinia 進行狀態管理
- Vue Router 處理路由
- SCSS 預處理器
- ES6+ 現代特性
響應式設計
- 完美適配各種螢幕尺寸
- 流暢的行動裝置體驗

專案結構解析

專案採用了清晰且模組化的目錄結構：

src/
├── assets/          # 靜態資源
├── components/      # Vue 組件
│   ├── common/     # 通用組件
│   ├── system/     # 系統組件
│   └── apps/       # 應用組件
├── views/          # 頁面視圖
├── router/         # 路由配置
├── stores/         # 狀態管理
└── utils/          # 工具函數

這種結構設計使得專案具有良好的可維護性和可擴展性。

多平台文章同步瀏覽器外掛程式 - ArticleSync

Wed, 16 Oct 2024 11:02:49 +0000

ArticleSync - 多平台文章同步插件

ArticleSync 是一個瀏覽器擴充功能，幫助使用者輕鬆將文章同步發佈到多個社交平台。支援將文章從本地草稿發佈到各大平台，如知乎、Bilibili 等。它提供了一站式解決方案，讓你在不同的社交媒體平台上同步文章變得簡單高效。

基於瀏覽器外掛程式模式，自動偵測本地登入帳號，杜絕帳號洩露、環境異常等風險

基於 Chrome Manifest v3 瀏覽器擴充功能標準開發，請注意核心版本要求

背景

你也知道，我這又一下子多了好幾個部落格平台，和一大堆社交網站，如果我想讓它們之間都能保持活躍的更新怎麼辦。(證明我還活著) 還能一鍵盜文章

我最常更新的就是我自己的小破站了，但是其他平台，我可能就只是偶爾更新一下，但是又不想每次都去手動發佈，所以我就想，能不能寫一個外掛程式，自動偵測我本地登入的帳號，然後自動發佈呢。

正所謂，自己動手豐衣足食。鼓搗了好幾天，勉強算是能用的樣子，剩下的就有空再更新了。除非你給我錢

外掛程式還有很多不完善的地方，我也沒有多平台正式在生產環境中實測，如遇報錯，實屬正常，那就提交 issue 吧，或者自己改改，改好了再提交 PR 吧。嘻嘻~

為了不影響我說話，截圖放最後了

還有，開源不易，來個 star 吧，嘿嘿嘿~

本來想加一點私貨進去的，自動關注我的社群平台

功能特色

多平台支援：支援知乎、Bilibili 等各大主流平台，支援自建開源 CMS 系統。
狀態追蹤：在外掛程式介面中查看文章的同步狀態。
帳號管理：可查看與外掛程式綁定的各平台帳號資訊。
可擴展性強：支援開發者透過轉接器模式輕鬆擴展到更多平台。
安全可靠：外掛程式基於瀏覽器擴充功能模式，確保帳號安全，避免帳號洩露等風險。

待辦事項

[ ] 獨立文章編輯器
[ ] 圖片一鍵同步
[x] Markdown 與 HTML 互轉
[ ] 第三方圖床系統
[ ] 多帳號管理
[ ] 多系統客戶端版本
[ ] 一鍵 AI 總結
[ ] 影片同步
[ ] 標籤、分類的支援
[ ] 更友善的錯誤處理
[ ] 更多平台的接入

支援管道

媒體

打贏復活賽,我活過來了

Thu, 03 Oct 2024 02:48:02 +0000

近況

距離上次的閒言碎語已經兩個多月沒說話了，是時候整理整理我的思緒了。上回是發表了一堆感慨，之後就沒聲了，所以是有一點倉促了，後續的活就跟不上了。

又是一年國慶，果然我的國慶堪比雙十一。之前旗下的三個域名(52ecy.cn,moeins.cn,moeins.com)，雖然復活賽是打贏了，但是裝備沒有了。

所以只能新購域名了，同時又把部落格給恢復了，可能還是想自己折騰吧，掛靠在部落格園還是不大舒服的樣子。

之前一直在用的emlog，這會也來場大動作，直接給系統換到了WordPress，同時也換上了新主題。這款主題是由專收爆米花在21年前後的時候就發布了，那會我在loc看到的時候我就star了，一直在我GitHub裡躺了4年lolimeow，因為那會一直在用emlog，所以就不願意折騰。乘此契機，乾脆一戰到底，所以也是花了一點大功夫，包括數據的遷移，和主題的適配。

雖然作者一直以來都在積極推進主題的更新，也正因此我在使用中沒有遇到太大的麻煩，但也有缺少我之前系統的設定，所以我也一併把這個主題做了更新，並且pull到了原倉庫。上面放的GitHub的連結是我更新後的。最麻煩的數據遷移部分，我在網上兜兜轉轉了半天，只找到exe版本的，先不說exe版本給人一種莫名的不放心的感覺，況且我現在用的還是Mac的系統，根本就不能直接運行。所謂自己動手豐衣足食，所以我只能花點時間給自己寫一個遷移腳本了。GitHub的地址我放在了文章的底部了，可以完美遷移emlog的數據到WordPress系統中。不愧是我！

圖片我還是一樣，一份存七牛雲備份，一份存新浪圖床，轉過來發現市場上沒有好用適合我的七牛雲插件，我又自己撸了一個

新域名

雖然我也很不想，但是又只能換域名了，之前的域名就給人做嫁衣了。萌音系列: MoeKot.cn。萌音系列的包括(萌音筆記、萌音發卡、萌音社群、萌音商城等)以後都會放在這個域名下。主站系列: MoeJue.cn。這是我的主站，包括部落格和一些不帶系列的項目都會放到這個域名下面。

解釋

Moe: 日文裡的「萌え」的讀音，羅馬音的寫法，中文裡一般翻譯成「萌」。 Kot: 日語「聲音」的意思，羅馬音寫法。 Jue: 阿珏醬的簡版音譯。

部落格

我又是一個特別念舊和重感情的人，所以連之前的部落格我都一同保留下來了。Xlog cnblogs emlog Blog 相關的網站的域名我也做了遷移，就不一一列出來了，當然也可能會漏掉一些連結沒替換全。

所有的數據都是原汁原味的，不漏掉每一個人的數據。甚至是部落格的註冊用戶的數據我也一同搬遷過來了，可以直接在新系統上登入，密碼是一樣的。

快來star一下吧！

食用方法也一併寫到了README.md裡了，如果遇到什麼問題也可以直接提交issue。

emlog遷移WordPress腳本

我的部落格即將同步至騰訊雲開發者社群，邀請大家一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=15kxzzid10tgx

基於Web3.0的區塊鏈圖片上傳

Mon, 17 Jun 2024 12:57:43 +0000

在開始之前，我們先簡單了解一下基本的概念，我大致歸納為以下幾個點什麼是Web3.0，和區塊鏈又有什麼關係？（上回的文章不就派上用場了）

需求：開發一個基於Python的Web 3.0圖片上傳系統。這個系統將允許用戶上傳圖片，並將圖片儲存在去中心化的網路上，同時記錄交易資訊在區塊鏈上。本來只是寫著玩的，想過要寫成用戶認證、檔案操作集成全套管理的，讓他「終將成為圖片上傳服務的最終解決方案」。實際下來卻發現不是很實際，就作罷了，奈何我一直以來對圖片這麼執著。

步驟概述

環境設定：使用Python開發，安裝必要的Python函式庫。
IPFS整合：將圖片上傳到IPFS，取得圖片的CID（內容識別碼）。
區塊鏈整合：將IPFS CID記錄在區塊鏈上。
Web介面：使用Flask建立一個Web介面，允許用戶上傳圖片。

詳細步驟

1. 環境設定

安裝所需的Python函式庫：

pip install flask web3 ipfshttpclient

2. IPFS整合

IPFS（星際檔案系統）是一種點對點的檔案儲存協定。我們可以使用ipfshttpclient函式庫來與IPFS網路互動。

首先，請確保你已經安裝並運行了IPFS節點。如果還沒有安裝IPFS，可以在IPFS官網找到安裝指南。

以下是上傳圖片到IPFS的程式碼範例：

import ipfshttpclient

def upload_to_ipfs(file_path):
    client = ipfshttpclient.connect('/ip4/127.0.0.1/tcp/5001')
    res = client.add(file_path)
    return res['Hash']

3. 區塊鏈整合

使用web3.py函式庫將IPFS CID記錄到區塊鏈上。我們將以太坊（Ethereum）作為範例區塊鏈。

以下是一個簡單的智能合約範例，用於儲存IPFS CID：

pragma solidity ^0.8.0;

contract IPFSStorage {
    mapping(address => string[]) public userCIDs;

    function storeCID(string memory cid) public {
        userCIDs[msg.sender].push(cid);
    }

    function getCIDs() public view returns (string[] memory) {
        return userCIDs[msg.sender];
    }
}

編譯並部署該合約後，使用以下Python程式碼與智能合約互動：