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
