我们承诺每页最多只显示一个小型广告。别担心，隐藏这条消息将确保你不会再收到烦人的提示。
自定义管道
导入 Gulp 任务
您不必使用 我们的 Gulp 管道，只需将任务导入到您自己的 gulpfile 中即可
您可以 分叉此示例项目 来查看如何将 Semantic UI 任务导入到您的项目中的示例。
var gulp = require('gulp'), watch = require('./semantic/tasks/watch'), build = require('./semantic/tasks/build') ; // 使用自定义任务名称导入任务 gulp.task('watch ui', watch); gulp.task('build ui', build);
Semantic.json 设置
自动安装
正常运行 npm install 将启动一个交互式安装程序，要在没有用户交互的情况下允许此安装程序运行，请在 semantic.json 文件中包含一个特殊标志 autoInstall: true。
{ // 现在安装将自动构建您的项目文件，无需用户交互 "autoInstall": true, // 这些设置可能有所不同 "base": "", "paths": { "source": { "config": "src/theme.config", "definitions": "src/definitions/", "site": "src/site/", "themes": "src/themes/" }, "output": { "packaged": "dist/", "uncompressed": "dist/components/", "compressed": "dist/components/", "themes": "dist/themes/" }, "clean": "dist/" }, "permission": false, "rtl": false, }
从右到左 (RTL) 语言
包含标志 rtl:true 将使用 RTLCSS 构建 Semantic UI。
要构建 LTR 和 RTL 版本，请使用标志 rtl: 'both'
{ // 构建 LTR 和 RTL 版本 "rtl": "both", // 这些设置可能有所不同 "base": "", "paths": { "source": { "config": "src/theme.config", "definitions": "src/definitions/", "site": "src/site/", "themes": "src/themes/" }, "output": { "packaged": "dist/", "uncompressed": "dist/components/", "compressed": "dist/components/", "themes": "dist/themes/" }, "clean": "dist/" }, "permission": false, }
使用 Semantic UI 进行原型设计
单个组件
标记版本
组件库在 NPM 上发布，并在 GitHub 上作为标记版本发布。
查看 GitHub 上 Semantic Org 下提供的库列表。
每个组件的发布说明将自动更新，其中包含该组件从主要版本获得的相关说明。
npm install semantic-ui-component
服务器端渲染
单个组件库包含一个 自动生成 的 index.js 文件，以简化 require 在 NodeJS 中的使用，用于服务器端渲染或使用 Browserify。
npm install semantic-ui-dropdown
var dropdown = require('semantic-ui-dropdown') ; foo.dropdown();
导入 LESS
仅 LESS 分发
针对使用自定义集成且不需要我们构建工具的项目，提供了一个特殊分发 Semantic-UI-LESS。
导入 Semantic
semantic.less 在所有版本中都可用，作为导入其他 LESS 文件中的多个组件的入口点。
/* 导入所有组件 */ @import 'src/semantic';
导入组件
如果您需要导入单个组件，则应将每个导入范围限定，以避免继承问题。
/* 使用范围导入特定组件 */ & { @import 'src/definitions/elements/button'; } & { @import 'src/definitions/elements/list'; }
在本地运行文档
下载文档服务器
获取 Semantic UI 文档 的最简单方法是克隆仓库。
git clone https://github.com/Semantic-Org/Semantic-UI-Docs.git
关于路径的说明
Semantic UI 的 构建工具 包含两个用于文档的特殊命令 build-docs 和 serve-docs。这些命令将直接将 ui/ 文件夹中的更改传递到一个实时文档服务器。
这些 Gulp 任务需要两个兄弟文件夹
ui/
来自 Semantic UI 仓库的文件
docs/
来自文档仓库的文件
构建 UI
第一次运行文档时，您需要构建整个项目一次。
cd ui/ gulp build-docs
运行 Docpad 服务器
Docpad
cd docs/ # 初始构建可能需要几分钟 docpad run
将 UI 提供给文档
然后，您可以继续修改 UI 并将这些文件“提供”给实时文档实例，以立即查看更改。
cd ui/ gulp serve-docs
托管文档
如果您正在管理文档，可以使用内置的 docpad gh-pages 插件自动部署到 GitHub Pages。
有关 GitHub Pages 的更多信息，请查看 GitHub 文档。
docpad deploy-ghpages --env static
自定义文档路径
Doc 任务路径在 tasks/config/docs.js 文件中指定，可以调整它以使用项目所需的任何文件夹设置。