技术要求 (Technical Requirements):
Baklib 帐户: 部署和使用此模板需要 Baklib 帐户。
基本的 Liquid 知识: 熟悉 Liquid 模板语言有助于自定义模板的外观和功能。虽然对于基本使用不是严格要求,但对于高级修改至关重要。
CSS 知识(可选): 虽然 Tailwind CSS 简化了样式设置,但对于更广泛的自定义,基本的 CSS 知识将是有益的。
Node.js 和 npm(用于开发): package.json
文件表明使用 Node.js 和 npm 用于开发目的,特别是用于管理像 Tailwind CSS 这样的依赖项和构建项目。只有在你打算修改模板代码时才需要这样做。
Git(用于版本控制): 该项目托管在 GitHub 上,建议使用 Git 进行版本控制。这对于使用模板不是严格要求,但对于软件开发来说是标准做法。
🚀 Project Structure
.
├── README.md
├── config
│ └── settings_schema.json
├── layout
│ └── theme.liquid
├── package-lock.json
├── package.json
├── snippets
│ ├── _aside.liquid
│ ├── _breadcrumb.liquid
│ ├── _custom_menu.liquid
│ ├── _export_page.liquid
│ ├── _export_tree.liquid
│ ├── _feedback_form.liquid
│ ├── _footer.liquid
│ ├── _header.liquid
│ ├── _page.liquid
│ ├── _page_list.liquid
│ ├── _paginate.liquid
│ ├── _plugins.liquid
│ ├── _popular_pages.liquid
│ ├── _sidebar.liquid
│ ├── _tag.liquid
│ └── _tree.liquid
├── statics
│ ├── about.liquid
│ ├── faq-item.liquid
│ ├── faq-simple.liquid
│ ├── faq-toggle-cards.liquid
│ ├── faq-toggle.liquid
│ ├── digidocs-dashboard-alternative.liquid
│ ├── digidocs-dashboard.liquid
│ └── digidocs-page.liquid
├── tailwind.config.js
├── templates
│ ├── index.docs.liquid
│ ├── index.faqs.liquid
│ ├── index.pages.liquid
│ ├── nav_tree.liquid
│ ├── page.channel.liquid
│ ├── page.export.liquid
│ ├── page.liquid
│ ├── search.liquid
│ └── tag.liquid
├── yarn-error.log
└── yarn.lock
🧞 Install guide
开发
npm run dev
安装配置TailwindCSS
TailwindCSS官网
1.安装Tailwindcss
通过npm
安装tailwindcss
,然后创建tailwind.config.js
配置文件
npm add -D tailwindcss
npx tailwindcss init
2.配置模板文件的路径和自定义样式
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./templates/**/*.liquid", "./snippets/**/*.liquid", "./layout/**/*.liquid", "./statics/**/*.liquid"],
darkMode: 'class',
theme: {
extend: {
colors: () => {
return {
slate: {
150: "#E9EEF5"
},
...["primary", "secondary", "accent", "info", "success", "warning"].reduce((map, name) => {
return {
...map,
[name]: {
DEFAULT: `hsl(var(--theme-color-${name}) / <alpha-value>)`,
lighten: `hsl(var(--theme-color-${name}-hsl-h) var(--theme-color-${name}-hsl-s) calc(var(--theme-color-${name}-hsl-l) + 15%))`,
darken: `hsl(var(--theme-color-${name}-hsl-h) var(--theme-color-${name}-hsl-s) calc(var(--theme-color-${name}-hsl-l) - 15%))`,
...[50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].reduce((map,lightness) => {
return {
...map,
[lightness]: `hsl(var(--theme-color-${name}-hsl-h) var(--theme-color-${name}-hsl-s) ${100 - lightness/10*0.8}%)`
}
}, {})
}
}
}, {}),
// 错误色永远是红色,饱和度与主色调保持一致
error: {
DEFAULT: `hsl(355 75% var(--theme-color-primary-hsl-l) / <alpha-value>)`,
lighten: `hsl(355 75% calc(var(--theme-color-primary-hsl-l) + 15%))`,
darken: `hsl(355 75% calc(var(--theme-color-primary-hsl-l) - 15%))`,
...[50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950].reduce((map,lightness) => {
return {
...map,
[lightness]: `hsl(355 75% ${100 - lightness/10*0.8}%)`
}
}, {})
}
}
},
spacing: {
4.5: "1.125rem",
5.5: "1.375rem",
18: "4.5rem",
},
},
},
plugins: [],
}
3.引入Tailwindcss到css文件中
例如:./src/main.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@config '../tailwind.config.js'
4.在package.json
中配置css编译路径
"scripts": {
"build": "npm-run-all --parallel build:css build:js",
"build:css": "npx tailwindcss -i ./src/main.css -o ./assets/css/main.css",
......
"dev": "npm-run-all --parallel 'build:css -- --watch' 'build:js -- --watch'"
}
5.在theme.liquid
文件中引入css
{{ 'css/main.css' | asset_url | stylesheet_tag: data-turbo-track: 'reload' }}
编译&发布
yarn build