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 版本。

issues6641.jpg

使用

把 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);

Google Fonts Lato font.im.jpg

解决方法有以下几种：

切换到 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/，因个人备案要求较严格，直接用了域名的近似音译“意博科思”作为网站的命名