主题安装
Baklib
发布于：2024-07-07
Guide模板介绍
名称： Guide
概述：小型文档内容管理，可用于构建产品手册、指南、FAQ、Release、Blog等
模板特点：
首页简洁明了，一排到底，没有复杂的层级结构。
提供了卡片列表和文本列表两种页面排版。
搭配Tag标签分类更显得内容丰满。
适合场景：
小规模文档内容管理，注重用户体验。
作为无头CMS内嵌到其他软件内，用于移动端访问效果更优。
不适合场景：
不适用于复杂层级（三级及以上）结构的文档排版
效果预览：
首页Card主题效果
标签页：
首页List主题效果
搜索页：
详情页效果
视频教程
如何十分钟创建一个Guide模板内容站点
Guide 模板视频教程制作
创建Guide模板站点
在模板市场中找到“Guide产品指南”的模板，进行应用创建，需要3步完成：
第1步：选择模板
第2步：设置站点
第3步：初始化页面
创建成功后，进入站点管理界面~
前端预览效果如下：
可以说一个基本的Guide CMS网站就创建好了。接下来需要做的事情，就是不定期的在后台新增页面即可。
进阶设置
站点设置
关于如何完善一个CMS网站的设置，包括基本信息设置、域名管理、访问控制、多应用关联、反馈设置以及回收站等功能，这里不再一一讲解，大家可以去参考CMS站点的教程。 接下来重点是要讲解基于本模板的一些特别的设置。 导航到工作台“应用设置--> 界面设置”：
站点基本信息：
品牌相关信息设置：
站点设置主要包括：
站点基本信息
品牌相关信息
页头页脚导航信息
站点主题颜色
当设置好站点信息以后，一个网站的基本骨架就构建完成了。在接下来的事就是讨论如何添加网站的页面。
页面设置
页面设置
预览
页面的设置也相对比较简单。主要是提供标题、摘要、标签、封面图、和内容。 我们可以看到页面设置的前端效果，同时在移动端也会有很好的适配。
子页面
本模板的页面是支持添加子页面的。且子页面的添加可以无限级，但是在前台只显示本页面的子页面一级，一次类推。
后台
前台
标签设置
本模板还支持标签设置管理，站点设置的标签，在添加页面的时候可以为每个页面打标签，前台实现标签分类：
用户反馈管理
在每个页面内容下方放置了页面反馈表单，可以通过后台设置是否启用反馈，是否启用反馈留言：
首页主题更换
本模板预设了两个首页主题。一个是card模式，基于图片封面展示页面列表，这种风格主要突出图文的表达。 另外一种是list模式，直接展示页面的标题摘要列表。 这两种风格各有特点。
其他特殊技巧
该主题可以设置用户反馈、页头、页脚部分是否显示的状态。同时，本模板创建的应用在移动端的展示效果会非常的简洁流畅，也适合于内嵌在应用当中做帮助中心指引。
低代码开发
通过以上的配置和说明，已经满足大部分用户的需求了。 但是如果还需要更进一步的魔改网站界面怎么办呢？ Baklib低代码平台就该出场了。这一部分将直接进入低代码模板开发环节。
模板layout:
<!DOCTYPE html>
<html lang="{{ site.language }}">
<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.0">
{% meta_tags %}
{{ 'editor.css' | asset_url | stylesheet_tag: data-turbo-track: 'reload' }}
{{ 'css/main.css' | asset_url | stylesheet_tag: data-turbo-track: 'reload' }}
<style type="text/css">
[x-cloak] { display: none !important; }
</style>
{{ 'javascripts/main.js' | asset_url | script_tag: defer: true, data-turbo-track: 'reload' }}
{%# TIPS：在低代码平台开发时，请打开下一行代码注释 %}
{% if true %} {{ 'javascripts/cdn.tailwindcss.js' | asset_url | script_tag: data-turbo-track: 'reload' }} {% endif %}
</head>
<body data-controller="scroll-animation">
{% if site.settings.is_allow_header %}
{% render 'header' %}
{% endif %}
<main class="relative" data-scroll-animation-target="container">
{{ content_for_layout }}
{% if site.settings.is_allow_footer %}
{% render 'footer' %}
{% endif %}
</main>
</body>
</html>
页面模板和片段：
themes/cms/guide/templates/
index.card.liquid
index.list.liquid
page.liquid
search.liquid
tag.liquid
themes/cms/guide/snippets/
_card.liquid
_feedback_form.liquid
_footer.liquid
_header.liquid
_list.liquid
_page.liquid
_sidebar.liquid
_sub_page_list.liquid暂时无法在飞书文档外展示此内容
当知道模板和对应的页面板块的关系以后。我们就可以针对性的修改。 不同的部分来完全的定制化每一个方面。