AnQiCMS 提供了一套非常灵活且强大的内容管理机制,让我们可以轻松地对文章详情页面的显示布局进行个性化定制。无论是为了提升用户体验、优化SEO,还是为了更好地展现品牌特色,AnQiCMS都能通过其直观的模板系统和丰富的标签功能,帮助我们实现这些目标。

那么,具体该如何操作呢?我们可以从以下几个方面逐步深入。

1. 理解AnQiCMS的模板机制

首先,我们需要了解AnQiCMS是如何识别并渲染文章详情页面的。所有的模板文件都存放在 /template 目录下,并且静态资源(如CSS、JS、图片)则位于 /public/static/ 目录。AnQiCMS采用了类似Django模板引擎的语法,使用双花括号 {{变量}} 来输出变量,使用单花括号和百分号 {% 标签 %} 来处理条件判断、循环控制等逻辑。

AnQiCMS在渲染文章详情页时,会按照一定的优先级寻找模板文件:

  • 默认文章详情模板: 所有的文章详情页通常会使用 /template/{你的模板目录}/{模型table}/detail.html 作为默认模板。例如,如果你使用的是“文章模型”,默认模板路径就是 article/detail.html
  • 针对特定文章ID的定制: 如果你需要为某一篇特殊的文章(例如ID为10的文章)设计一个独有的布局,可以创建一个名为 article/detail-10.html 的模板文件。系统会优先使用这个更具体的模板。
  • 通过后台设置进行定制: AnQiCMS提供了更为灵活的方式。在发布或编辑文章时,你可以在“其他参数”中找到“文档模板”字段。在这里,你可以直接填写一个自定义的模板文件名(例如 my_special_article.html)。系统就会在 /template/{你的模板目录}/ 目录下寻找并使用这个文件。
  • 通过分类设置进行定制: 更进一步,你还可以为某个分类下的所有文章指定一个统一的详情页模板。在“文档分类”的管理界面中,编辑分类时,在“其他参数”中可以设置“文档模板”,甚至可以选择“是否应用到子分类”。这样,该分类及子分类下的所有文章,都会按照这个模板来显示。

这些灵活的模板指定方式,为我们定制文章详情页提供了极大的自由度。

2. 后台配置:构建内容和数据

在开始编写模板代码之前,很重要的一步是在AnQiCMS后台准备好我们所需的内容结构和数据。

  • 灵活的内容模型: AnQiCMS的核心亮点之一就是“灵活的内容模型”。除了系统默认的文章和产品模型外,我们可以根据业务需求自定义新的内容模型,并为每个模型添加专属的“自定义字段”。例如,如果我们在文章模型中添加了“文章作者”、“文章来源”等字段,那么这些字段的数据就可以在文章详情页进行调用和展示,极大地丰富了内容维度。
  • 发布文档时填充内容: 在“添加文档”或编辑现有文档时,我们需要充分利用这些字段。例如,除了常规的文章标题、简介、内容外,我们还可以上传缩略图、设置相关的Tag标签、填写自定义URL,并尤其要注意前面提到的“文档模板”字段,在这里选择或填写你为当前文章准备的定制模板路径。
  • 分类管理中的文档模板设置: 如前所述,如果想让某个分类下的所有文章都采用特定的详情页布局,可以在“文档分类”中编辑该分类,然后在“其他参数”里指定“文档模板”,并选择是否应用于子分类。这对于保持特定内容区块(如新闻、案例、博客等)的统一风格非常有效。

3. 前端模板编写:实现精美布局

一旦后台数据和模板路径准备就绪,我们就可以着手编写前端模板代码了。AnQiCMS的模板系统基于Go语言的强大能力,并且易于学习。

  • 模板的结构化:继承与包含 通常,一个网站会有公共的头部、底部和侧边栏。我们可以利用 extendsinclude 标签来构建模块化的模板:

    • {% extends 'base.html' %}:在 base.html 中定义网站的基本骨架(如HTML结构、引入CSS/JS、公共页眉页脚),并通过 {% block content %} 等标签定义可重写区域。文章详情页模板可以继承 base.html,只关注 content 部分的布局。
    • {% include 'partial/header.html' %}:对于一些小的可复用代码片段(如导航栏、联系方式信息),可以使用 include 标签引入,保持代码整洁。
  • 调用文章核心内容 在文章详情页模板中,最核心的是如何获取并展示当前文章的数据。archiveDetail 标签是我们的主要工具: “`twig

    <h1>{% archiveDetail with name="Title" %}</h1> {# 显示文章标题 #}
    <div class="article-meta">
        <span class="category">分类:<a href="{% categoryDetail with name='Link' %}">{% categoryDetail with name='Title' %}</a></span>
        <span class="pub-date">发布时间:{% archiveDetail with name="CreatedTime" format="2006-01-02 15:04" %}</span>
        <span class="views">阅读量:{% archiveDetail with name="Views" %}</span>
        <div class="tags">
            {% tagList tags with itemId=archive.Id limit="10" %} {# 调用当前文章的标签 #}
            {% for item in tags %}
                <a href="{{item.Link}}">{{item.Title}}</a>
            {% endfor %}
            {% endtagList %}
        </div>
    </div>
    <div class="article-content">
        {%- archiveDetail articleContent with name="Content" %}
        {{ articleContent|safe }} {# 输出文章内容,|safe 确保HTML标签被正确解析 #}
    </div>
    {# 如果文章内容是Markdown格式,且需要在前端渲染,可以使用render过滤器 #}
    {# {{- archiveDetail articleMarkdownContent with name="Content" render=true %}}
       {{ articleMarkdownContent|safe