这是一个Hexo插件,开发这个插件的目的主要是为了可以模块化的开发Hexo主题样式,并将一些流行的技术以更好的方式引入到Hexo的主题开发世界中来。 安装此构建器插件后,你就可以在你的主题开发中使用:

  • TailwindCSS 语法
  • 基于 npm 包来构建前端组件和功能
  • 将主题功能拆分为不同组件并且支持多项目复用

安装

我已经将这个构建器发布到了 NPM 组件库,你现在可以使用下列命令直接在你的Hexo目录下安装:

npm i @investravis.com/hexo-goose-builder

如果在Windows平台上安装请执行:

npm i "@investravis.com/hexo-goose-builder"

初始化

再开始初始化之前,你需要在你的 hexo 根目录的主配置文件 _config.yml 中设置好需要使用的主题,然后执行下列命令:

hexo goose tailwind-init

根据提示完成设置即可,此命令帮助你在当前主题目录下建立一个 Tailwindcss4的主配置文件 tailwind.css,该文件将作为构建器编译Tailwindcss样式的入口。现在,你就可以直接在编写.ejs模板时书写Tailwindcss语法了。

集成

避免复杂的设置,我将这个过程编辑成了一个Hexo助手函数,该助手将在每次编译静态脚本时自动完成对应的css和js注入到你的页面中,你只需要将下列代码放到你当前正在使用的主题的布局文件(或其他单独定义HTML结构的文件)的头部</head>标签之前:

<!-- 构建器页面依赖助手 -->
<%- load_theme_assets() %>

至此你已经完成了所有的安装和配置。建议你接下来参考下方的入门介绍,以便更高效的使用构建器的功能。 查看项目和反馈问题,请在这里提交Issue