Content synchronized from knowledge base, for Large-scale reusable document content management, like Wiki, Documentation, and content portal.
Knowledge base template deployed by Baklib WIKI.
.
├── README.md
├── config
│ └── settings_schema.json
├── layout
│ ├── error.liquid
│ └── theme.liquid
├── package-lock.json
├── package.json
├── snippets
│ ├── _breadcrumb copy.liquid
│ ├── _breadcrumb.liquid
│ ├── _custom_menu.liquid
│ ├── _export_page.liquid
│ ├── _export_tree.liquid
│ ├── _feedback_form.liquid
│ ├── _footer.liquid
│ ├── _header.liquid
│ ├── _index_tree.liquid
│ ├── _page.liquid
│ ├── _page_list.liquid
│ ├── _paginate.liquid
│ ├── _plugins.liquid
│ ├── _sidebar.liquid
│ ├── _tag.liquid
│ └── _tree.liquid
├── statics
│ └── about.liquid
├── tailwind.config.js
├── templates
│ ├── index.docs.liquid
│ ├── index.help_center.liquid
│ ├── index.list.liquid
│ ├── nav_tree.liquid
│ ├── page.export.liquid
│ ├── page.liquid
│ ├── search.liquid
│ └── tag.liquid
├── yarn-error.log
└── yarn.lock
-
The Template install Guide: https://help.baklib.cn/themes/wiki
-
The Baklib template install Guide: https://dev.baklib.cn/guide/git
npm run dev通过npm安装tailwindcss，然后创建tailwind.config.js配置文件
npm add -D tailwindcss
npx tailwindcss init/** @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: [],
}例如：./src/main.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@config '../tailwind.config.js'"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'"
}{{ 'css/main.css' | asset_url | stylesheet_tag: data-turbo-track: 'reload' }}yarn build