开发指南

Baklib

发布于:2024-07-07

Docs 模板介绍

名称: Docs

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

模板特点:

  1. 首页具有更多样的布局方式,充当站点地图的引导作用。

  2. 支持多层级的树状菜单,让用户在任何时候都不迷路。

  3. 强调搜索框和搜索自定义功能。

适合场景:

  1. 中等规模文档内容管理,注重用户体验。

  2. 作为无头CMS内嵌到其他软件内,用于移动端访问效果更优。

不适合场景:

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

效果预览:

首页预览

详情页预览

创建Docs应用站点

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

第一步:

第二步:

第三步:

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

站点设置

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

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

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

站点描述:即一句话口号

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

首页设置

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

index.help_center.liquid 首页样式

特点:

  1. 首页显示背景大图和搜索栏(自定义热门搜索)

  2. 下面展示六个一级栏目及最近4条更新记录

  3. 常见问题栏目,按浏览量展示最近10条最新文章

index.docs.liquid 首页样式

特点:

  1. 首页跟内页保持一致展示效果

  2. 左侧树状菜单一目了然

  3. 右侧图标展示一级栏目和最新热门文章

index.list.liquid 首页样式

特点:

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

内页设置

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

  1. 页头:站点Logo+名称, 右侧自定义导航菜单和暗黑模式切换开关。

  2. 左侧:整站内容多层级导航菜单

  3. 中间显示文章内容,用户反馈,上一页下一页导航。

  4. 右侧将自动提取文章内标题,实现内页导航

  5. 底部为页脚,显示品牌信息和自定义导航内容。

低代码开发

通过以上的配置和说明,已经满足大部分用户的需求了。 但是如果还需要更进一步的魔改网站界面怎么办呢? 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

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

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

提交反馈