如何将 Semantic-UI 添加到 Phoenix

Posted 2023-03-07

技术标签:

【中文标题】如何将 Semantic-UI 添加到 Phoenix【英文标题】：How to add Semantic-UI to Phoenix 【发布时间】：2016-07-24 16:30:27 【问题描述】：

？

Semantic-UI 安装在一个文件夹中并使用 NPM 进行更新，实际的 CSS 和 javascript 文件是使用 GULP 构建的。完整的安装文件夹应该放在哪里？

能否像其他依赖一样通过 Mix 自动更新？

生成的css和javascript应该放在project/web/static/css（或/js）还是/vendor？

如何设置 Gulp/Sematic-UI 配置以自动将文件放在正确的位置？

再一次，Mix 可以自动运行 Gulp/Semantic-UI 构建吗？

【问题讨论】：

【参考方案1】：

完整的安装文件夹应该放在哪里？

其实你只需要2个文件：semantic.js & semantic.css。如果你做了npm install --save semantic-ui，你应该在./semantic/dist/找到它们

那么，这两个文件应该放在哪里呢？ 这取决于...您是 brunch 还是 webpack？与 phoenix 应用程序相关的是在 endpoint.ex 中看到 ./priv/static 文件夹中的静态文件（css、js、字体、img...） Plug.Static。 Phoenix 不知道您在运行 brunch、webpack 或/和 gulp 之前放置这些文件的目录。

能不能通过Mix自动更新...

是，在package.json中添加脚本，修改config/dev.exs中的watchers

生成的css和javascript应该放在project/web/static/css（或/js）还是/vendor？

同样的答案，你是 brunch 还是 webpack？与 phoenix 应用程序相关的是在 ./priv/static 文件夹中找到静态文件（css、js、字体、img...），如您在 中所见端点.ex Plug.Static。 Phoenix 不知道您在运行 brunch、webpack 或/和 gulp 之前放置这些文件的目录。

如何设置 Gulp/Sematic-UI 配置以自动将文件放在正确的位置？

查看文件 ./semantic.json 以设置 gulp build 命令的输出。

Mix 可以自动运行 Gulp/Semantic-UI 构建吗？

是，在package.json中添加脚本，修改config/dev.exs中的watchers

这并不容易，我建议你首先开始使用npm semantic-ui-css，当你的构建运行良好时切换到npm semantic-ui

【讨论】：

谢谢，这样更清楚了。我正在使用早午餐。据我了解，Brunch 会将 web/static 子目录中的所有 .js 和 .css 文件放到两个文件中（priv/static/js/app.js 和 css/app.css）。但是，它将以不同的方式处理 /vendor 目录文件（我相信与命名空间有关）。那么，semantic.js 和 .css 应该进入 web/static/css (/js) 还是 /vendor 目录？另外，是否可以让 Gulp 将输出直接放在 web/static 目录中（看起来它必须放在基本 Semantic 目录的子目录中）？ @PaulB 我做了一个video 来向你展示如何用早午餐来做到这一点。这是我的第一个视频......所以这不是质量视频，但我希望它仍然可以帮助你【参考方案2】：

将Semantic UI LESS only Distribution 与Phoenix 应用程序集成非常简单，需要一点技巧。我建议你使用 Webpack 而不是 brunch/gulp，因为它相对流行，有很多插件并且易于配置。

在开始该过程之前，预计 Phoenix 应用程序已安装默认的早午餐构建工具并且它正在工作。

集成 Webpack

请按照我的语义 UI 和 Webpack 集成详细指南进行详细的分步操作。这个答案参考了这篇文章。链接：How to Integrate Your Phoenix Application with Semantic UI and Webpack

集成语义用户界面

在我们安装 Semantic UI 之前，我们需要进行一些配置。我们将创建一个新的语义修复文件。

vim web/static/lib/semantic-fix.js

将以下内容粘贴到我们刚刚创建的 semantic-fix.js 文件中。该文件将负责将所有语义 UI 资产放置到位，以便在我们的应用程序中使用它

// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------

var fs = require('fs');

// relocate default config
fs.writeFileSync(
  'node_modules/semantic-ui-less/theme.config',
  "@import '../../src/semantic/theme.config';\n",
  'utf8'
);

// fix well known bug with default distribution
fixFontPath('node_modules/semantic-ui-less/themes/default/globals/site.variables');
fixFontPath('node_modules/semantic-ui-less/themes/flat/globals/site.variables');
fixFontPath('node_modules/semantic-ui-less/themes/material/globals/site.variables');

function fixFontPath(filename) 
  var content = fs.readFileSync(filename, 'utf8');
  var newContent = content.replace(
    "@fontPath  : '../../themes/",
    "@fontPath  : '../../../themes/"
  );
  fs.writeFileSync(filename, newContent, 'utf8');

我们将为 Semantic UI 制作一个自定义的 theme.config 文件。因此更改semantic-fix.js文件中的路径位置如下：

// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------

// Old default code
fs.writeFileSync(
  'node_modules/semantic-ui-less/theme.config',
  "@import '../../src/semantic/theme.config';\n",
  'utf8'
);

将其替换为以下代码：

// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------

// Relocate default config
fs.writeFileSync(
  'node_modules/semantic-ui-less/theme.config',
  "@import '../../web/static/css/theme.config';\n",
  'utf8'
);

我最近编写了一个深入的分步教程，将 Semantic UI 框架与基于 Elixir 的 Phoenix 应用程序和 Webpack 集成。

在安装 npm 包时，添加语义修复.js 需要在每个 postinstall 回调上运行。因此，我们将其放置在package.jsonscripts部分下。

// ----------------------------------------------------
// File: package.json
// ----------------------------------------------------


  ...
  "scripts": 
    ...
    "postinstall": "node semantic-fix.js",
    ...
  
  ...

现在是安装 Semantic UI LESS 包的时候了。安装完成后，semantic-fix.js文件会被postinstall脚本调用。

npm install --save semantic-ui-less && node semantic-fix.js

Semantic UI 安装完成后，我们需要将node_modules/semantic-ui-less/theme.config.example 复制到web/static/css/theme.config。

cp node_modules/semantic-ui-less/theme.config.example web/static/css/theme.config

将现有路径覆盖到我们的路径

/* Path to site override folder */
@siteFolder  : '../../web/static/css/site';

// @import "theme.less";
@import "~semantic-ui-less/theme.less";

将语义 LESS 初始化文件 node_modules/semantic-ui-less/semantic.less 复制到 web/static/css。此文件导入不同的组件样式。

将此文件的导入语句的位置从 @import "definitions/...."' 更改为 @import "~semantic-ui-less/definitions/...."

同样我们需要将semantic.js文件添加到web/static/js文件夹中来导入所有的JavaScript组件，如下：

//---------------------------------------------
// File: web/statis/js/semantic.js
//---------------------------------------------

import 'semantic-ui-less/definitions/globals/site';
import 'semantic-ui-less/definitions/behaviors/api';
import 'semantic-ui-less/definitions/behaviors/colorize';
import 'semantic-ui-less/definitions/behaviors/form';
import 'semantic-ui-less/definitions/behaviors/state';
import 'semantic-ui-less/definitions/behaviors/visibility';
import 'semantic-ui-less/definitions/behaviors/visit';

import 'semantic-ui-less/definitions/modules/accordion';
import 'semantic-ui-less/definitions/modules/checkbox';
import 'semantic-ui-less/definitions/modules/dimmer';
import 'semantic-ui-less/definitions/modules/dropdown';
import 'semantic-ui-less/definitions/modules/embed';
import 'semantic-ui-less/definitions/modules/modal';
import 'semantic-ui-leKaabilss/definitions/modules/nag';
import 'semantic-ui-less/definitions/modules/popup';
import 'semantic-ui-less/definitions/modules/progress';
import 'semantic-ui-less/definitions/modules/rating';
import 'semantic-ui-less/definitions/modules/search';
import 'semantic-ui-less/definitions/modules/shape';
import 'semantic-ui-less/definitions/modules/sidebar';
import 'semantic-ui-less/definitions/modules/sticky';
import 'semantic-ui-less/definitions/modules/tab';
import 'semantic-ui-less/definitions/modules/transition';
import 'semantic-ui-less/definitions/modules/video';

web/static/js/app.js 是我们 webpack 配置中的入口文件。因此，我们需要将包括语义 UI 文件在内的所有文件导入 app.js。在app.js文件末尾添加以下行

//---------------------------------------------
// File: web/statis/js/app.js
//---------------------------------------------

...
...

import "./semantic.js";
import '../css/semantic.less';

集成现已完成并可以运行。 Semantic UI 现在已经与 webpack 完全集成，是时候尝试一下了。从项目根目录运行 Phoenix 服务器mix phoenix.server。它应该触发 webpack 编译所有文件，包括语义 UI - mix phoenix.server

我的文章（链接在顶部）中更详细地记录了此过程，如果有任何混淆，可以参考。

希望对您有所帮助。

【讨论】：

【参考方案3】：

在开始该过程之前，预计 Phoenix 应用程序已安装默认的早午餐构建工具并且它正在工作。

集成 Webpack

请按照我的语义 UI 和 Webpack 集成详细指南进行深入的分步操作。这个答案参考了这篇文章。链接：How to Integrate Your Phoenix Application with Semantic UI and Webpack

集成语义用户界面

在我们安装 Semantic UI 之前，我们需要进行一些配置。我们将创建一个新的语义修复文件。

vim web/static/lib/semantic-fix.js

将以下内容粘贴到我们刚刚创建的 semantic-fix.js 文件中。该文件将负责将所有语义 UI 资产放置到位，以便在我们的应用程序中使用它

// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------

var fs = require('fs');

// relocate default config
fs.writeFileSync(
  'node_modules/semantic-ui-less/theme.config',
  "@import '../../src/semantic/theme.config';\n",
  'utf8'
);

// fix well known bug with default distribution
fixFontPath('node_modules/semantic-ui-less/themes/default/globals/site.variables');
fixFontPath('node_modules/semantic-ui-less/themes/flat/globals/site.variables');
fixFontPath('node_modules/semantic-ui-less/themes/material/globals/site.variables');

function fixFontPath(filename) 
  var content = fs.readFileSync(filename, 'utf8');
  var newContent = content.replace(
    "@fontPath  : '../../themes/",
    "@fontPath  : '../../../themes/"
  );
  fs.writeFileSync(filename, newContent, 'utf8');

我们将为 Semantic UI 制作一个自定义的 theme.config 文件。因此更改semantic-fix.js文件中的路径位置如下：

// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------

// Old default code
fs.writeFileSync(
  'node_modules/semantic-ui-less/theme.config',
  "@import '../../src/semantic/theme.config';\n",
  'utf8'
);

将其替换为以下代码：

// ----------------------------------------------------
// File: web/static/lib/semantic-fix.js
// ----------------------------------------------------

// Relocate default config
fs.writeFileSync(
  'node_modules/semantic-ui-less/theme.config',
  "@import '../../web/static/css/theme.config';\n",
  'utf8'
);

我最近编写了一个深入的分步教程，将 Semantic UI 框架与基于 Elixir 的 Phoenix 应用程序和 Webpack 集成。

在安装 npm 包时，添加语义修复.js 需要在每个 postinstall 回调上运行。因此，我们将其放置在package.jsonscripts部分下。

// ----------------------------------------------------
// File: package.json
// ----------------------------------------------------


  ...
  "scripts": 
    ...
    "postinstall": "node semantic-fix.js",
    ...
  
  ...

现在是安装 Semantic UI LESS 包的时候了。安装完成后，semantic-fix.js文件会被postinstall脚本调用。

npm install --save semantic-ui-less && node semantic-fix.js

Semantic UI 安装完成后，我们需要将node_modules/semantic-ui-less/theme.config.example 复制到web/static/css/theme.config。

cp node_modules/semantic-ui-less/theme.config.example web/static/css/theme.config

将现有路径覆盖到我们的路径

/* Path to site override folder */
@siteFolder  : '../../web/static/css/site';

// @import "theme.less";
@import "~semantic-ui-less/theme.less";

将语义 LESS 初始化文件 node_modules/semantic-ui-less/semantic.less 复制到 web/static/css。此文件导入不同的组件样式。

将此文件的导入语句的位置从 @import "definitions/...."' 更改为 @import "~semantic-ui-less/definitions/...."

同样我们需要将semantic.js文件添加到web/static/js文件夹中来导入所有的JavaScript组件，如下：

//---------------------------------------------
// File: web/statis/js/semantic.js
//---------------------------------------------

import 'semantic-ui-less/definitions/globals/site';
import 'semantic-ui-less/definitions/behaviors/api';
import 'semantic-ui-less/definitions/behaviors/colorize';
import 'semantic-ui-less/definitions/behaviors/form';
import 'semantic-ui-less/definitions/behaviors/state';
import 'semantic-ui-less/definitions/behaviors/visibility';
import 'semantic-ui-less/definitions/behaviors/visit';

import 'semantic-ui-less/definitions/modules/accordion';
import 'semantic-ui-less/definitions/modules/checkbox';
import 'semantic-ui-less/definitions/modules/dimmer';
import 'semantic-ui-less/definitions/modules/dropdown';
import 'semantic-ui-less/definitions/modules/embed';
import 'semantic-ui-less/definitions/modules/modal';
import 'semantic-ui-leKaabilss/definitions/modules/nag';
import 'semantic-ui-less/definitions/modules/popup';
import 'semantic-ui-less/definitions/modules/progress';
import 'semantic-ui-less/definitions/modules/rating';
import 'semantic-ui-less/definitions/modules/search';
import 'semantic-ui-less/definitions/modules/shape';
import 'semantic-ui-less/definitions/modules/sidebar';
import 'semantic-ui-less/definitions/modules/sticky';
import 'semantic-ui-less/definitions/modules/tab';
import 'semantic-ui-less/definitions/modules/transition';
import 'semantic-ui-less/definitions/modules/video';

web/static/js/app.js 是我们 webpack 配置中的入口文件。因此，我们需要将包括语义 UI 文件在内的所有文件导入 app.js。在app.js文件末尾添加以下行

//---------------------------------------------
// File: web/statis/js/app.js
//---------------------------------------------

...
...

import "./semantic.js";
import '../css/semantic.less';

我的文章（链接在顶部）中更详细地记录了此过程，如果有任何混淆，可以参考。

希望对您有所帮助。

【讨论】：

以上是关于如何将 Semantic-UI 添加到 Phoenix的主要内容，如果未能解决你的问题，请参考以下文章

Semantic-ui 模态与 VueJS 重复

semantic-ui 输入框

在 React 中使用 Semantic-UI 固定菜单和侧边栏

搭建一个Semantic-ui项目

Semantic-UI选项卡历史记录激活选项卡

semantic-ui 容器与栅格