如何使用tailwindcss自定义hugo主题

如何使用tailwindcss自定义hugo主题

如何使用tailwindcss自定义hugo主题?对于某些主题，可能作者开发时候，它不具备自定义指定css的功能，但这并不妨碍我们自己添加这个功能。这篇文章记录一下我对自己使用主题eureka的一些修改吧。因为想定义一下自己的profile界面，发现没有地方可以把自己的css，这可真是让我挠头了，于是就仔细思考、各种检索找到了解决方案。本文主要分享一下，对于不支持自定义css的主题，你如何扩展，让它可以支持自定义css。

要做哪些修改呢？我们可以参考Loveit主题，由于hugo中语法{{partial "site-style.html"}}是用来引入相关样式配置文件的，通常它都存在于layouts目录下的header.html文件中，所以，你想用自定义的方式实现指定css文件引入的功能，你就要修改这个文件。整体改分为二步。

• 第一步：在项目的config/_default/params.yaml文件中指定引入哪些自定义文件

...
css_custom: ["css/a.css","css/b.css"]
...

• 第二步：在layouts/partial目录下的创建site-style.html文件，文件里内容如下：

{{ range site.Params.custom_css }}
  {{ with partialCached "func/GetResource" . . }}{{ else }}
    <link rel="stylesheet" href="{{ relURL (.) }}">
  {{ end }}
{{ end }}

• 第三步，在head.html文件中引入这个文件

对于没有使用tailwindcss的主题，其实完成前两步就好了，但是对于使用了tailwindcss的主题，由于它还有一个编译的过程，根据你指定的content内容的匹配目录，如./**/*.{html,js}就指要对于根目录下所有的以.html或.js为后缀的文件进行编译。你说不编译可不可以用，其实也可以用，但是编译之后可以更规范你的代码，更加压缩文件的体积，这样加载效率也更高。

比如说我对主题加自定义的css文件，就只经历这个步骤就可以。在head.html文件中加入这段。在目录assets/css下创建custom.css文件并写好自定义样式，然后hugo -D编译完就可以了。

{{- $customCSS := resources.Get "css/custom.css" | postCSS (dict "config" "./assets/css/postcss.config.js" "inlineImports" true) | resources.ExecuteAsTemplate "css/custom.css" . | minify | fingerprint "sha384" }}
<link rel="stylesheet" href="{{ $customCSS.RelPermalink }}">

这个部分其实如果往下挖，涉及到很深层次的嵌套，但不要有畏难心理，这里没有太多复杂逻辑的东西，就是个相对绝对路径怎么引入的问题。以我举例的这个使用tailwindcss做为样式定义的package来说明，因为这是对hugo主题进行修改，所以这里就头脑中要有个概念，就是hugo是基于golang的一套系统，但是你在模板引擎内使用的语法已经剥离了golang编程语言，你只要读懂文档的使用规范，知道它的判断是咋定义的，它的全局变量是咋定义，知道它的局部变量输出值用什么符号表达就可以了。如果你使用过其它的模板引擎，比如说比较老牌的smarty，比如说django中的形如{% extends "base_generic.html" %}，甚至我觉得java中的mybatis都属于一种模板引擎。它们的共同特点就是你已经脱离了你使用的开发语言本身，这些开源系统帮你把后台语言和前台展示整合起来了。

这里要对于这个tailwindcss多说几句了。如果你写过前端界面的话，一路发展过来的路径，确实得让人们感觉到技术的进步。但是进步的底层动力，在我看来，还是由于有些聪明人想偷懒，想用更小力气完成以前大力气才能完成的事情。比如说jquery最开始用来做一些交互效果的东西，但是发现如果每个界面好多交互的效果都要一个一个选到dom上来写，太麻烦了，每个界面里都可能copy来copy去大量重复的代码，而且jquery实现出来的东西不能复用，这种copy来copy去就全无意义，于是就有很多基于jquery的扩展包，集中解决某一类问题，随着项目继续向前发展，每个界面都要一个个引入这些解决特定效果展现的包，还是很麻烦，就有包管理工具出现了。但是这些交互都还没有把交互拉进一个里程碑的时代，直到avalon、vue、react之类支持模型绑定的前端开发包的出现，它把“模型”和“视图”拉的更近了。

而“媒体查询(@media)”的强烈需求是伴随着移动互联网的迅猛发展而来的，因为要适应屏幕的大小越来越多样，如果你写过媒体查询一定知道我在说什么。而我觉得tailwindcss的出现就给解决媒体查询这种问题一个更艺术一点的解决方案了。使用方式也很简单，读读官方文档基本就明白，而我特别推荐就是针对于css定义这里适配屏幕部分的灵活，原来在做一个wordpress主题的时候，对于一些特定界面，要一步一步来适配所有屏幕，要一步一步尝试。所以，如果有个工具能把bootstrap中自适应的语法跟一些区域排列等的好工具的优秀功能都集成到一块就好了，这样你定义类或者id的时候，只要把这些好工具中用来定制界面显示效果的语法都往上堆，整个界面就适配所有屏幕，并且支持了很炫的堆叠效果，那就太省事了，而tailwindcss就在帮你解决这个问题。

当然tailwindcss的使用过程还是有很多技巧的，我自己也在摸索中，有什么新的想法再写文章分享。今天这篇有关如何使用tailwindcss自定义hugo主题的文章至此分享结束，感谢阅读。