开发指南

巴克励步

发布于：2024-07-07

Docs 模板介绍

名称： Docs

概述：基于CMS的中型文档内容管理，可用于构建在线帮助中心、文档知识库、技术手册，内置多首页主题

模板特点：

首页具有更多样的布局方式，充当站点地图的引导作用。
支持多层级的树状菜单，让用户在任何时候都不迷路。
强调搜索框和搜索自定义功能。

适合场景：

中等规模文档内容管理，注重用户体验。
作为无头CMS内嵌到其他软件内，用于移动端访问效果更优。

不适合场景：

对知识库内容编辑协同、编排管理要求高，知识内容输出需多版本、多复用的场景，建议采用Wiki模板。

效果预览：

首页预览

详情页预览

创建Docs应用站点

在应用市场找到“docs文档管理系统”模板，点击安装，一共三个步骤：

第一步：

第二步：

第三步：

创建成功后，文档站点的预览效果如下：

站点设置

接下来我们将考虑如何打造这个主题模板，进入“站点设置-->界面设置”

Logo图标：显示在站点页头或页脚

首页背景大图：搜索框后面的背景图，一般采用虚化的深色图片。

站点描述：即一句话口号

热搜关键词：后台自定义的关键词。这个是Docs模板特殊的设置内容，我们可以看到

首页设置

设置好站点内容，并添加相关页面以后，整个站点的展示效果就丰满了，Docs模板提供了3个首页样式：

index.help_center.liquid 首页样式

特点：

首页显示背景大图和搜索栏（自定义热门搜索）
下面展示六个一级栏目及最近4条更新记录
常见问题栏目，按浏览量展示最近10条最新文章

index.docs.liquid 首页样式

特点：

首页跟内页保持一致展示效果
左侧树状菜单一目了然
右侧图标展示一级栏目和最新热门文章

index.list.liquid 首页样式

特点：

首页直接通过书目的形式展示知识库所有内容。

内页设置

内页的展示效果页比较简单清晰，大致分为几个版块：

页头：站点Logo+名称，右侧自定义导航菜单和暗黑模式切换开关。
左侧：整站内容多层级导航菜单
中间显示文章内容，用户反馈，上一页下一页导航。
右侧将自动提取文章内标题，实现内页导航
底部为页脚，显示品牌信息和自定义导航内容。

低代码开发

通过以上的配置和说明，已经满足大部分用户的需求了。但是如果还需要更进一步的魔改网站界面怎么办呢？ Baklib低代码平台就该出场了。这一部分将直接进入低代码模板开发环节。

模板layout:

<!doctype html>
<html lang="{{ site.language }}" class="scroll-smooth">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="author" content="Baklib">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% meta_tags %}
    {{ 'editor.css' | asset_url | stylesheet_tag: data-turbo-track: 'reload' }}
    {{ 'css/viewer.min.css' | asset_url | stylesheet_tag: data-turbo-track: 'reload' }}
    {{ 'javascripts/main.js' | asset_url | script_tag: defer: true, data-turbo-track: 'reload' }}
    {{ 'css/main.css' | asset_url | stylesheet_tag: data-turbo-track: 'reload' }}
    <style type="text/css">
      [x-cloak] { display: none !important; }
      /* 页内导航.active链接  */
      .menu_active {
        border-left: 2px solid rgb(var(--theme-color-primary));
        color: rgb(var(--theme-color-primary))
      }
      .scrollbar::-webkit-scrollbar {
        width: 0;
      }
      .active {
        color: rgb(var(--theme-color-primary))
      }
    </style>
    {%# TIPS：在低代码平台开发时，请打开下一行代码注释 %}
    {% if true %} {{ 'javascripts/cdn.tailwindcss.js' | asset_url | script_tag: data-turbo-track: 'reload' }} {% endif %}
  </head>
  <body class="antialiased text-slate-800 font-[350] bg-white dark:bg-slate-900 dark:text-slate-200">
    <div class="flex flex-col min-h-screen overflow-hidden">
        <!-- Site header -->
        {% render 'header', settings: site.settings %}
        <!-- Page content -->
        <main class="grow">
          {{ content_for_layout }}
        </main>
    </div>
  </body>
</html>

页面模板和片段：

themes/cms/docs/snippets
  _breadcrumb.liquid
  _collapse_pages.liquid
  _empty.liquid
  _feedback_form.liquid
  _footer.liquid
  _header.liquid
  _sidebar.liquid
  _tree.liquid
  
themes/cms/docs/templates
  index.docs.liquid
  index.help_center.liquid
  index.liquid
  nav_tree.liquid
  page.liquid
  search.liquid

详情页面的布局解析如下图所示：

暂时无法在飞书文档外展示此内容

提交反馈