Semantic UI
Semantic UI—完全語義化的前端界面開發框架。
作為一個 C# Desktop 程序員，寫前端顯得比較吃力，好在有很多 UI 框架可用。最近在使用 Semantic UI，簡單記錄過程中出現的問題以及解決方法。遇到的問題基本上都是直接搜索，GitHub Issues 了，因為懶得去深入，畢竟不是專業的前端，應用就行。
安裝
操作系統為：Microsoft Windows 10 Pro，10.0.18363
- 安裝 NodeJS，官網下載安裝文件一步一步執行即可。
- 安裝 Gulp，Gulp 是一個必須在全局安裝的 NPM 模塊。
npm install -g gulp - 安裝 Semantic UI
npm install semantic-ui --save
cd semantic/
gulp build
問題
問題出在安裝 Semantic UI 的時候，一直卡在Creating src/theme.config (less config) src/theme.config這一步。在 issues #6641https://github.com/Semantic-Org/Semantic-UI/issues/6641中找到了解決方法，方法就是切換到特定的 NodeJS 版本。
使用
把 semantic.min.css 和 semantic.min.js 這兩個文件，加入到 HTML 的頭部：
<head>
<link href="./semantic.min.css" rel="stylesheet" type="text/css">
<script src="./jquery.min.js"></script>
<script src="./semantic.min.js"></script>
</head>
jQuery 庫也要加入，這是 Semantic UI 所需要的全部依賴。
問題
無法加載 Googl 字體Lato， Semantic UI 默認會加載 Googl 字體Lato，見 semantic.css 的第一行代碼@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin);
解決方法有以下幾種：
- 切換到 https://font.im ，
https://fonts.font.im/css?family=Lato:400,700,400italic,700italic&subset=latin。還可以在https://font.im下載字體到本地。很多提到 360 字體庫https://fonts.useso.com，其實是停止服務了。行不通。 - 修改 Semantic UI 默認字體，Semantic UI 為模板機制，打開模板文件
/semantic/src/themes/default/globals/site.variables修改'Lato'為其他字體，如微軟雅黑，@fontName : 'Microsoft YaHei';，@importGoogleFonts設為false，然后重新編譯。gulp build - 安裝 Google WebFont Downloader
npm install -g goog-webfont-dl。這個方法也必須能邊上 Google 才行，行不通。
Note：之所以使用 Semantic UI ，是一位前端的朋友推薦的，照著官網的 Get Started 走了一遍下來，非常的順手。后來發覺這個框架社區活躍度遠沒有其他像 Bootstrap 等等高，在中文環境下找到的文章大多都是 2018 年之前的。隨他吧，自己用著舒服就行，相信切換到其他可能問題也不大吧。
應用
采用 Flask + Semantic UI + Nginx + Gunicorn 實現了一個 Demo 性質的小站點查詢工具集。在Certbot申請了 Let's Encrypt 免費 SSL 證書，支持 HTTPS，沒有配置成強制跳轉，可以這樣訪問，http://www.mfzxs.com，也可以通過 HTTPS 訪問，https://www.mfzxs.com。小站點的 README.md 也搬到了簡書上：查詢工具集簡介。現在已經遷移到新的域名https://www.ebox001.com/，因個人備案要求較嚴格，直接用了域名的近似音譯“意博科思”作為網站的命名
參考
Semantic UI Get Started:https://semantic-ui.com/introduction/getting-started.html
42.前端開發框架Semantic UI（一）:https://blog.csdn.net/a464057216/article/details/52493469
