主题安装

巴克励步

发布于：2024-07-07

Guide模板介绍

名称： Guide
概述：小型文档内容管理，可用于构建产品手册、指南、FAQ、Release、Blog等
模板特点：
  1. 首页简洁明了，一排到底，没有复杂的层级结构。
  2. 提供了卡片列表和文本列表两种页面排版。
  3. 搭配Tag标签分类更显得内容丰满。
适合场景：
  1. 小规模文档内容管理，注重用户体验。
  2. 作为无头CMS内嵌到其他软件内，用于移动端访问效果更优。
不适合场景：
  1. 不适用于复杂层级（三级及以上）结构的文档排版
效果预览：
首页Card主题效果
标签页：
首页List主题效果
搜索页：
详情页效果

视频教程

如何十分钟创建一个Guide模板内容站点
  • Guide 模板视频教程制作

创建Guide模板站点

在模板市场中找到“Guide产品指南”的模板，进行应用创建，需要3步完成：
第1步：选择模板
第2步：设置站点
第3步：初始化页面
创建成功后，进入站点管理界面~
前端预览效果如下：
可以说一个基本的Guide CMS网站就创建好了。接下来需要做的事情，就是不定期的在后台新增页面即可。

进阶设置

站点设置

关于如何完善一个CMS网站的设置，包括基本信息设置、域名管理、访问控制、多应用关联、反馈设置以及回收站等功能，这里不再一一讲解，大家可以去参考CMS站点的教程。 接下来重点是要讲解基于本模板的一些特别的设置。 导航到工作台“应用设置--> 界面设置”：
站点基本信息：
品牌相关信息设置：
站点设置主要包括：
  1. 站点基本信息
  2. 品牌相关信息
  3. 页头页脚导航信息
  4. 站点主题颜色
当设置好站点信息以后，一个网站的基本骨架就构建完成了。在接下来的事就是讨论如何添加网站的页面。

页面设置

页面设置
预览
页面的设置也相对比较简单。主要是提供标题、摘要、标签、封面图、和内容。 我们可以看到页面设置的前端效果，同时在移动端也会有很好的适配。

子页面

本模板的页面是支持添加子页面的。且子页面的添加可以无限级，但是在前台只显示本页面的子页面一级，一次类推。
后台
前台

标签设置

本模板还支持标签设置管理，站点设置的标签，在添加页面的时候可以为每个页面打标签，前台实现标签分类：

用户反馈管理

在每个页面内容下方放置了页面反馈表单，可以通过后台设置是否启用反馈，是否启用反馈留言：

首页主题更换

本模板预设了两个首页主题。一个是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
暂时无法在飞书文档外展示此内容
当知道模板和对应的页面板块的关系以后。我们就可以针对性的修改。 不同的部分来完全的定制化每一个方面。

Guide模板构建的页面参考

提交反馈
下一页
开发指南