开发指南
Baklib
发布于: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
详情页面的布局解析如下图所示:
暂时无法在飞书文档外展示此内容