1. 前言
大家好，我是沙漠盡頭的狼。
Dotnet工具箱是一個純前端的、開源且免費的工具網站，週末我參考了開源專案 it-tools，對網站介面文字進行了中文化，並重新部署了網站。該網站共有10大工具分類，提供了73個即時線上小工具。採用 Vue3 開發的 Dotnet 工具箱具有獨特的特色，本文詳細介紹了其中一些特色工具，並簡單分享如何部署自己的工具網站。如果你對工具網站感興趣，不妨來了解一下 Dotnet 工具箱吧！
Dotnet 工具箱已有工具如下：
關於 Dotnet 工具箱和 it-tools 專案
Dotnet 工具箱倉庫（基於 it-tools）：https://github.com/dotnet9/Dotnet9/tree/develop/src/Dotnetools
it-tools 倉庫：https://github.com/CorentinTh/it-tools
it-tools 開源協議：GPL-3.0 license
it-tools 線上工具：https://it-tools.tech/
截至本文撰寫時，Dotnet 工具箱只是對 it-tools 專案進行了介面文字中文化，後續打算如果自己有需求會根據該專案規範進行擴展開發，大家有興趣可以：
參與 it-tools 開發：https://github.com/CorentinTh/it-tools
參與 Dotnet 工具箱開發：https://github.com/dotnet9/Dotnet9/tree/develop/src/Dotnetools
糾正 Dotnet 工具箱中文翻譯、提 Issue、提 PR 都請訪問：https://github.com/dotnet9/Dotnet9
2. 工具介紹
選擇 10 大工具分類部分介紹，每個大類介紹部分。
2.1. 加解密
加解密共有 11 個小工具。
2.1.1. Token、隨機密碼產生器
線上工具訪問位址：https://dotnetools.com/token-generator
產生自訂長度，包含大寫或小寫字母、數字或符號的隨機字串。
2.1.2. 雜湊文字產生器
線上工具訪問位址：https://dotnetools.com/hash-text
使用所需的函數對文字字串進行雜湊：MD5, SHA1, SHA256, SHA224, SHA512, SHA384, SHA3 或 RIPEMD160
2.1.3. 文字加密、解密
線上工具訪問位址：https://dotnetools.com/encryption
使用 AES、TripleDES、Rabbit 或 RC4 等加密演算法對文字明文進行加密和解密。
2.1.4. RSA 金鑰對產生器
線上工具訪問位址：https://dotnetools.com/rsa-key-pair-generator
產生新的隨機 RSA 私鑰和公鑰 pem 憑證。
2.1.5. 密碼強度分析器
線上工具訪問位址：https://dotnetools.com/password-strength-analyser
使用此僅客戶端的密碼強度分析器和破解時間估計工具來發現您的密碼強度。
2.2. 換算器
換算器共有 15 個小工具。
2.2.1. 日期時間轉換器
線上工具訪問位址：https://dotnetools.com/date-converter
將日期和時間轉換為各種不同的格式
2.2.2. 線上進制換算
線上工具訪問位址：https://dotnetools.com/base-converter
線上進制換算，在常用的二進位、六進位、十進位等進制單位之間轉換，還能自訂轉換其他進制單位，比如 50 進位、100 進位...。
2.2.3. Base64 字串編碼/解碼
線上工具訪問位址：https://dotnetools.com/base64-string-converter
簡單將字串編碼和解碼為 base64 表示。
2.2.4. Base64 檔案轉換器
線上工具訪問位址：https://dotnetools.com/base64-file-converter
將字串、檔案或圖片轉換為它的 base64 表示形式。
- 貼上對應的檔案 base64 字串轉換為檔案下載
- 上傳檔案轉換為 base64 字串進行複製
2.2.5. 顏色轉換器
線上工具訪問位址：https://dotnetools.com/color-converter
在不同格式之間轉換顏色 (hex, rgb, hsl and css name)，常用於前端開發（比如 Web、桌面軟體、行動端）
2.2.6. JSON 轉 YAML
線上工具訪問位址：https://dotnetools.com/json-to-yaml-converter
線上將 JSON 轉換為 YAML 的轉換器，類似的還有 YAML轉JSON、YAML 轉 TOML、JSON 轉 TOML、列表資料轉換器、TOML 轉 JSON、TOML 轉 YAML。
2.3. 網站
網站分類有 15 個小工具。
2.3.1. URL 字串編解碼
線上工具訪問位址：https://dotnetools.com/url-encoder
編碼為 url 編碼格式（也稱為「百分比編碼」）或從中解碼。
2.3.2. HTML 元素轉義
線上工具訪問位址：https://dotnetools.com/html-entities
HTML 元素轉義或取消轉義（取代 <,>, &, " and ' 為對應的 HTML 版本），這可能主要用於後端給前端的網頁內容時使用，特殊符號需要轉義後才能正常使用。
2.3.3. URL 分析器
線上工具訪問位址：https://dotnetools.com/url-parser
解析 url 字串以獲得所有不同的部分（協定、來源、參數、埠、使用者名稱密碼…）
2.3.4. 設備資訊
線上工具訪問位址：https://dotnetools.com/device-information
取得有關當前設備的資訊（螢幕大小、畫素比例、使用者代理等）
2.3.5. 別名字串
工具介紹：使字串 URL、檔名和 ID 安全。
這是一篇關於別名的介紹 什麼是 URL slug 及其對 SEO 的重要性：
slug 對於關鍵字 SEO 來說非常強大。如果用戶要在 Google 搜尋「什麼是 slug」，則內容 URL 結構中的關鍵字有助於向 Google 發出訊號，表明內容應該包含在 SERP 中。如果一個好的 slug 清楚地說明了網頁的內容，它可以改善用戶的體驗。
本文也使用了別名字串工具，截圖如下：
步驟是：
- 在百度翻譯中翻譯文章標題「Dotnet工具箱：開源、免費的純前端工具網站，帶你探索10大工具分類和73個即時線上小工具」；
- 將得到的英文標題「Dotnet Toolbox: Open source, free pure front-end tool website that takes you to explore 10 major tool categories and 73 real-time online small tools」複製到別名字串工具【需要轉別名的字串】輸入框；
- 點擊【複製別名】將【別名】輸入框中轉換的別名字串貼上到本文 Markdown 檔案內，檔案也以轉換的【[別名].md】命名；
- 使用別名訪問本文：https://dotnet9.com/2023/10/dotnet-toolbox-open-source-free-pure-front-end-tool-website-that-takes-you-to-explore-10-major-tool-categories-and-73-real-time-online-small-tools9
2.3.6. HTTP 狀態碼
線上工具訪問位址：https://dotnetools.com/http-status-codes
所有 HTTP 狀態碼的清單，其名稱和含義。
2.3.7. JSON 比對
線上工具訪問位址：https://dotnetools.com/json-diff
比較兩個 JSON 物件並取得它們之間的差異。
2.4. 圖片和影片
有 4 個小工具。
2.4.1. QR Code 產生器
線上工具訪問位址：https://dotnetools.com/qrcode-generator
產生並下載 url 或純文字的 QR Code，並自訂背景和前景色。
下面是上面的操作產生的 QR Code，微信掃碼可開啟 Dotnet 工具箱網站：
2.4.2. SVG 佔位符產生器
線上工具訪問位址：https://dotnetools.com/svg-placeholder-generator
產生 svg 圖片以用作應用程式中的佔位符，主要用於網站圖片未載入完成時的佔位圖片。
2.4.3. 攝影機錄影機
線上工具訪問位址：https://dotnetools.com/camera-recorder
從網路攝影機或相機拍照或錄製影片。
2.5. 開發
開發分類共有 10 個小工具。
2.5.1. Crontab 產生器
線上工具訪問位址：https://dotnetools.com/crontab-generator
驗證並產生 crontab，並取得 cron 排程的可讀描述。
2.5.2. JSON 美化與格式化
線上工具訪問位址：https://dotnetools.com/json-prettify
將 JSON 字串美化為人類友善的可讀格式，對應的有 JSON 壓縮工具。
2.5.3. SQL 美化與格式化
線上工具訪問位址：https://dotnetools.com/sql-prettify
線上格式化和美化您的 SQL 查詢語句（它支援各種 SQL 變體）。
2.5.4. Docker Compose 轉換器
線上工具訪問位址：https://dotnetools.com/docker-run-to-docker-compose-converter
將 docker 執行命令轉換為 docker-compose 檔案！
2.5.5. XML 格式化
線上工具訪問位址：https://dotnetools.com/xml-formatter
將 XML 字串美化為人類友善的可讀格式。
2.x. 其他分類
小工具太多，逐一介紹太佔篇幅，有興趣可訪問 Dotnet 工具箱 - 為開發人員提供方便的線上工具 (dotnetools.com) 探索使用。
3. 開發部署自己的工具站
it-tools 是一個開源專案，站長基於它開發部署了自己的 Dotnet 工具站，當然您也可以基於 it-tools 或 Dotnet 工具站 開發部署自己的工具網站，讓我們動起手來試試吧。
3.1. 簡單部署
it-tools 專案 readme 說明有比較詳細的專案相關說明、Docker 網站部署步驟，下面是站長 Dotnet 工具箱的打包、部署簡單說明：
- 克隆專案：https://github.com/dotnet9/Dotnet9
- 定位到 Dotnet 工具箱目錄：
./src/Dotnetools - 安裝前端開發必要環境：Node.js
- 終端安裝依賴：
npm install - 終端打包：
npm run build - 複製發佈目錄到伺服器即可。
3.2. 修改或擴展自己的工具
每個小工具原始碼在 ./src/Dotnetools/src/tools/ 下：
在 tools 目錄下增加或刪除小工具目錄後，需要改 src\tools\index.ts 檔案，這裡組織工具目錄列表：
3.3. 關於翻譯
部分小工具支援多語言在地化，可在下圖中 src\tools\token-generator 新增或維護語言：
src\plugins\i18n.plugin.ts 配置在地化使用的語言：
但大部分工具是未支援多語言的，可直接在 xx.vue 或 xxx.ts 中直接修改語言（比如：src\tools\http-status-codes\http-status-codes.vue）：
Dotnet 工具站 部分視圖翻譯肯定是存在問題的，歡迎大家提 PR 糾正。
4. 總結
這些工具站長每個都做了測試，請放心使用，不放心看原始碼提 PR，哈哈。
因為在家待業時間較多，但難免部分翻譯不正確，歡迎大家參與維護：
參與 it-tools 開發：https://github.com/CorentinTh/it-tools
參與 Dotnet 工具箱開發：https://github.com/dotnet9/Dotnet9/tree/develop/src/Dotnetools
糾正 Dotnet 工具箱中文翻譯、提 Issue、提 PR 都請訪問：https://github.com/dotnet9/Dotnet9
技術交流加群請新增站長微信號：codewf