在雨果网站中使用Tw-elements

Question

我想在雨果网站上添加旋转木马，所以我试图使用Tw-elements。我已经使用了他们的快速启动指南，然后将TW-Elements插件放入插件部分tailwind-config.js文件，但脚本未导出到公共文件夹。有人做过吗？我想念什么步骤？ 谢谢！

Answer 1

仅将tailwind-config.js文件放在雨果中就不够了。您需要：

1. 生成style.css使用Assets/或static/目录中的tailwind
2. 将链接放在样式中。 CSS由Tailwind生成的雨果（例如＆lt; head＆gt;＆lt;/head＆gt;部分，例如在baseof.html模板中。

请参阅此处，以获取有关将Hugo与Tailwind集成的完整指南：
https://www.unsungngovelty.org/posts/03/2022/how-to-to-to-x-add-tailwind-css-3-to-a-a-a-hugo-website-in-20222/

noreferrer “ 通过将以下行放入＆lt; head＆gt;＆lt;/head＆gt;部分：

<script src="https://cdn.tailwindcss.com"></script>

Answer 2

使用命令行首次设置项目

#bash
hugo new site your-website-name
cd your-website-name

使用雨果创建自己的主题

#bash
hugo new theme your-theme-name

激活您的主题：在您的根部打开Hugo.toml（或Hugo.yaml）文件Hugo站点并添加或更新主题配置：在FrontMatter中添加此

theme = "your-theme-name"

package.json使用

npm init -y

install tailwindcss及其同行依赖性通过NPM创建您的tailwind.config .js文件。

npm install -D tailwindcss postcss autoprefixer postcss-import

因此，现在我们必须在我们的主题目录和一个样式中创建tailwind和Postcss配置文件。CSS文件，该文件充当CSS输出文件

touch themes/your-theme-name/assets/css/postcss.config.js
touch themes/your-theme-name/assets/css/tailwind.config.js
touch themes/your-theme-name/assets/css/style.css

现在，让我们配置我们的Postcss配置文件，以便打开PostCSSS 。

const themeDir = __dirname + '/../../';
// here __dirname is current working directory where postcss.config.js file loacted.
module.exports = {    
    plugins: [   
        require('postcss-import')({
            path: [themeDir]
            }), 
        require('tailwindcss')(themeDir + 'assets/css/tailwind.config.js'),
        require('autoprefixer')({
            path: [themeDir]
        }),
    ]
}

​

const themeDir = __dirname + "/../../";
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [`${themeDir}/layouts/**/*.html`, `${themeDir}/content/**/*.md`],
  theme: {
    extend: {},
  },
  plugins: [],
};

​
打开我们以前创建的

@tailwind base;
@tailwind utilities;
@tailwind components;

在Head Tag中导入CSS的style.CSS文件
当我们创建新主题时，Hugo通过创建一些启动模板文件来帮助我们。这些入门文件之一是head.html部分。

此文件的位置您的website-name/themes/your-theme-name/layouts/partials

添加此行head.html文件，元标记

{{ $time := now }} 
{{ $styles := resources.Get "css/styles.css" 
    | postCSS (dict"config" "./assets/css/postcss.config.js") 
    | resources.ExecuteAsTemplate (printf "styles.%s.css" $time) 
    $time 
  }} 

{{ if hugo.IsServer }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" />
{{ else }} {{ $styles := $styles | minify | fingerprint | resources.PostCSS }}
<link rel="stylesheet" href="{{ $styles.RelPermalink }}" />
{{ end }}

现在转到baseof.html文件在Body标签中添加一些HTML元素
并使用尾风类。
在您的website-name/content文件夹中创建一些标记文件，请访问该页面，查看您的页面是否看起来像baseof.html文件，

如果遇到任何错误，可能是由于错别字，无论是从您的身边还是我的。检查拼写，如果发生其他错误，请在评论中告诉我。