安装

使用 npm 安装:

  • 默认会提问一些目录设置然后手动 gulp build 安装(?),要自动化安装,可在 semantic.json 中设置 "autoInstall": true

修改 google 字体引用

semantic-ui 使用了 google 字体, 有时会导致页面打开很慢或无法打开。

grep 看了一下, 有 4 个文件引用了 google 字体 URL:

$ grep -Fo 'fonts.googleapis.com' -R bower_components/semantic/dist/
bower_components/semantic/dist/semantic.min.css:fonts.googleapis.com
bower_components/semantic/dist/components/site.min.css:fonts.googleapis.com
bower_components/semantic/dist/components/site.css:fonts.googleapis.com
bower_components/semantic/dist/semantic.css:fonts.googleapis.com

baidu 了一下, 国内可使用 360 google 字体加速, 将域名替换为 fonts.useso.com 即可:

find bower_components/semantic/dist/ -type f | xargs sed -r 's#fonts\.googleapis\.com#fonts.useso.com#g' -i

360 google 字体服务有时也不稳定, 可考虑自己搭一个字体加速服务按需引用, 或者直接禁用 google 字体。

grep 一下找到 import font 的地方:

$ grep -Po -e '\@import\s*url\(\S*?\/\/fonts\.\S*?;' -R bower_components/semantic/dist/
bower_components/semantic/dist/semantic.min.css:@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin);
bower_components/semantic/dist/components/site.min.css:@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin);
bower_components/semantic/dist/components/site.css:@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin');
bower_components/semantic/dist/semantic.css:@import url('https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic&subset=latin');

使用 sed 命令将匹配内容删除:

find bower_components/semantic/dist/ -type f | xargs sed -r 's#\@import\s*url\(\S*?\/\/fonts\.\S*?;##g' -i

npm 安装修改对应路径:

find node_modules/semantic-ui/dist/ -type f | xargs sed -r 's#\@import\s*url\(\S*?\/\/fonts\.\S*?;##g' -i