Baklib Logo
Digidocs Wiki 模板

Wiki

Digidocs Wiki 模板

个简单清爽的 wiki 模板,包含首页、FAQs、栏目列表以及多种类型的详情页

类型: Wiki

分类: #Wiki

关键词:

文档、知识库、Wiki、简洁模板
模板描述
界面截图
开发指南

A clean wiki template which including homepage, FAQs, lists and many detail pages.

Wiki template deployed by Baklib.

wiki-digidocs 模板是一个简洁轻量的解决方案,用于使用 Baklib 平台创建 wiki 或知识库网站。让我们更详细地分解其特点、用途和技术要求:

特点 (Characteristics):

  • 简洁明了的界面设计: 该模板优先考虑简洁明了的审美,注重可读性和易于导航。这使其适用于各种内容类型和品牌风格。

  • 基本的 Wiki 功能: 它包含功能齐全的 wiki 所需的所有核心组件,例如主页、常见问题解答、用于对内容进行分类的列表页面以及用于深入文章或文档的单个详细信息页面。

  • 与 Baklib 集成: 专为 Baklib 平台设计,确保与 Baklib 的功能和特性无缝集成。这意味着熟悉 Baklib 的用户会发现它易于使用。

  • 可定制性: 虽然提供简洁的默认设计,但该模板可能可以通过其 Liquid 模板和 CSS 进行定制,允许用户根据其特定需求和品牌对其外观进行调整。使用 Tailwind CSS 表明在样式方面具有一定的灵活性。

  • 结构组织良好: 仓库的文件夹结构组织良好,方便导航和理解模板的组件。

用途 (Purpose):

  • 内部知识库: 非常适合希望创建内部 wiki 以在员工之间共享信息、文档和最佳实践的公司或组织。

  • 公共文档网站: 适用于需要简单有效的方式来发布其产品或服务文档的项目或企业。

  • 常见问题解答页面: 内置的常见问题解答功能使其成为需要专门部分来回答常见问题的网站的良好选择。

  • 简单的 Wiki: 对于不需要复杂、功能丰富的解决方案的小型 wiki 或知识库。

技术要求 (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

Baklib Birds
to top icon
loading...