使用 Automad 进行开发

为博客或网站选择合适的 CMS 可能很困难。每个网络项目都有其自身的需求和要求，这意味着一个 CMS 可能更适合一个站点，但对另一个站点却不太适用。简单的解决方案可能缺少一些基本功能，而更复杂的系统可能会为给定任务创建不必要的开销。

我想介绍一下 Automad，这是一个知名度不如 WordPress 等巨头的 CMS，但它仍然提供了一些强大的功能，同时保持了像静态网站生成器一样的小巧和简单的优势。

具体来说，Automad 在以下几个关键方面填补了大型和小型产品的空白

• 它是基于文件的，但不需要数据库。这确保了快速设置、可移植性、安全性、速度和轻松部署。
• 即使没有数据库，它也提供了数据库功能，例如搜索、标记、过滤和排序。
• 多层缓存引擎可以有效地缓存存储在文件系统中的内容。
• 基于浏览器的仪表板和页面内（“实时”）编辑模式允许直观的內容管理。

但真正让 Automad 与众不同的是其集成的 模板引擎。模板化是许多 CMS 的核心要求，因为它创建并设定了网站视觉显示的基础。由于 Automad 的模板引擎与核心非常接近，因此它允许您创建具有复杂导航的模板，并使用简洁的语法批量处理图像。一旦上手，您就会感受到其中的区别，我们稍后将一起逐步完成一个示例。

但首先，快速概述一下模板化

作为设计师或开发人员，您可能对如何为 Automad 开发主题和模板 感兴趣。我的意思是，这正是我们首先使用 CMS 的原因。如果您对 WordPress 的主题设计 有所了解，那么使用 Automad 会感觉似曾相识，甚至可能更容易。

创建 Automad 主题的最低要求是一个 .php 文件和一个 theme.json 文件，它们捆绑在您在默认 Automad 安装的顶级 /packages 目录中创建的子目录中。

packages/
  yourTheme/
    yourTemplate.php
    theme.json

Automad 附带的 教程包 为理解主题的基本概念提供了一个良好的起点。

看看 Automad 模板中使用的语法

虽然可以使用 纯 PHP 编写模板，但这不是必需的，实际上也不推荐这样做。原因是 Automad 自身的模板语法更短、更易读，并且通过在仪表板中自动列出所有使用的变量，与用户界面很好地集成。它可以无缝地混合到 HTML 标记中。

基本上，语法可以分为两组

1. 回显内容：@{ variable }
2. 语句，如函数、循环和条件语句：<@ function @> 或 <@ statement @>…<@ end @>

回显内容

假设我们要将帖子的正文内容提取到模板中，并且我们为此设置了一个名为 text 的变量。在 WordPress 中，这将是一个全局变量（the_content），它在 PHP 中被调用。

<?php the_content(); ?>

在 Automad 中，我们可以不用 PHP 做到这一点。

<p>@{ text }</p>

可以通过使用 管道（|）运算符将值传递给函数，从而操作变量的输出。以下示例显示了如何将给定文本缩短到最多 100 个字符，而不会截断单词。

@{ text | shorten (100) }

这与您可能在 WordPress 中使用函数定义帖子摘录所做的事情相同。

/* Limit excerpt to 20 words */
function my_custom_excerpt_length( $length ) {
    return 20;
}
add_filter( 'excerpt_length', 'wpdocs_custom_excerpt_length', 999 )
}

一些 CMS 解决方案（如 Jeykll）的关键优势之一是，使用 Markdown 创建站点内容是一项原生功能。Automad 也可以做到这一点。假设我们要将 Markdown 文本转换为 HTML。使用管道运算符非常简单（且高效）。

@{ text | markdown }

使用语句

语句是定义内容并有条件地显示内容的一种便捷方法。与变量不同，语句用 <@ … @> 定界符括起来。以下示例可以使用 nav 函数创建一个简单的顶级菜单。

<@ nav { context: "/", class: "nav" } @>

假设您想默认显示帖子内容，但如果由于某种原因该内容不存在，则显示一个备用内容。在这里，我们可以使用条件语句和 控制结构。

<# If the post content exists then display... #>
<@ if @{ text } @>
  <p>...</p>

<# Otherwise, display this... #>
<@ else @>
  <p>Sorry, no content here!</p>

<# OK, no more conditions. #>
<@ end @>

想要创建循环？这对于显示与条件匹配的帖子列表或任何可重复内容非常有用。我们可以在 Automad 中通过在 foreach 循环中提供一个或多个 glob 模式来实现这一点。

例如，让我们显示帖子的所有 JPG 和 PNG 图像，并将其裁剪为 400x300 并显示其标题。

<@ foreach in "*.jpg, *.png" { width: 400, height: 300, crop: true } @>
  <img src="@{:fileResized}" width="@{:widthResized}" height="@{:heightResized}">
  <p>@{:caption}</p>
<@ end @>

您注意到了吗？！如本例所示，Automad 的一个显著功能是在循环语句内嵌入每个匹配文件的调整大小选项。无需再注册需要在模板中调用的复杂函数来定义大小了！

值得注意的是，foreach 循环也可用于迭代 对象。Automad 了解多种类型的对象。其中最重要的对象之一是 pagelist，因为它能够输出站点上的所有页面，例如您在构建导航时可能想要做的事情。当迭代 pagelist 时，上下文在每次迭代中都会更改为循环中的当前页面。这样，就可以在循环的代码块中使用页面变量。

要配置 pagelist，我们可以使用 newPagelist 函数，如下所示。

<@ newPagelist { context: "/", type: "children" } @>
<ul>
  <@ foreach in pagelist @>
    <li><a href="@{ url }">@{ title }</a></li>
  <@ end @>
</ul>

给超级极客们一窥幕后 🤓

Automad 的模板解释器是用纯 PHP 编写的，它可以动态处理模板。因此，根本不需要额外的构建过程。系统要求列表也相当简短。Web 服务器（Apache 或 Nginx）和 PHP 5.4+ 已经足以运行站点。仅当内容发生更改或系统更新后才会呈现页面。

Automad 的多层缓存引擎将渲染后的页面存储在单独的 .html 文件中，并将所有抓取的数据存储在文件系统中，作为一种内容对象。该对象还用于加速页面搜索和过滤。

由于这种机制，您可以使用 基于浏览器的 仪表板直接在线编辑生产环境中的站点内容，或者在本地编辑站点并通过 Git 或纯 rsync 部署它。

让我们写一些代码！

在网络上了解任何东西的最佳方法是 构建网站。以下是一些使用 Automad 入门的示例。

示例 1：递归导航

创建站点树导航是使用模板中递归的一个很好的示例。从概念上讲，创建这样的递归导航可以分为三个步骤。

1. 定义一个可重用的代码片段来创建站点树的一个分支，该分支有条件地调用自身。

2. 配置一个动态页面列表，该列表自动仅包含其当前上下文的子页面
3. 定义站点树的根页面（例如首页），并最初调用递归代码段

让我们更详细地分解这些步骤...

定义可重用的代码段

在 Automad 中，可以通过使用 snippet 关键字定义代码块以便在以后重用。关于此示例，以下代码段将在循环遍历 pagelist 时有条件地调用自身，并且当前迭代的活动页面本身具有子页面

<@ snippet navigation @>  
  <ul class="menu-list">       
    <@ foreach in pagelist @>
      <li>
        <a href="@{ url }">@{ title }</a>
        <# Call snippet recursively. #>
        <@ navigation @>
      </li>
    <@ end @>
  </ul>
<@ end @>

配置动态页面列表

pagelist 必须配置为children 类型。上下文（或父页面）将始终以这种方式在上面定义的代码段中递归更改。pagelist 将自动仅包含当前处理页面的子页面。

<@ newPagelist { 
  type: 'children'
} @>

定义根页面

在最后一步，必须定义导航树的根上下文，并且必须调用一次代码段以启动递归。with 语句 用于此处将上下文更改为首页。

<div class="menu">
  <@ with '/' @>
    <@ navigation @>
  <@ end @>
</div>

Automad 中已包含一个完整的工作教程模板。

示例 2：使用文件

由于图像对于内容管理非常重要，因此使用它们应该尽可能简单直观。Automad 的模板语言提供了用于基本图像处理（如调整大小和裁剪）的便捷方法。当使用单个图像或迭代一组图像时，可以将调整大小选项传递给 with 语句或foreach 循环。查看随 Automad 提供的教程，以便快速入门。

<@ foreach in '*.jpg, *.png' { width: 400, height: 300, crop: true } @>
  <# Code to be used for each image in the filelist. #>
  <img 
  src="@{ :fileResized }" 
  alt="@{ :basename }"
  title="@{ :file }"
  width="@{ :widthResized }"
  height="@{ :heightResized }"
  >
  <p>@{ :caption | markdown }</p>
<@ else @>
  <# Code to be used when the list of images is empty. #>
<@ end @>

除了在 foreach 循环中使用 glob 模式之外，还可以使用filelist 对象。

如果您查看上面的示例代码，您会注意到使用了某些运行时 变量来访问代码块中的图像属性。虽然 :file 变量表示原始文件，但 :fileResized 指的是已调整大小并缓存的版本的路径。:caption 变量使您可以获取与文件一起存储的标题文本。

---

您将构建什么？

我们在这里只是触及了 Automad 的表面，但希望我们涵盖的所有内容都能让您很好地了解它为内容管理提供的可能性。虽然在 CMS 世界中没有一刀切的模式，但可能会有这样的场景：介于强大和精简选项之间的 CMS 会派上用场。

其他资源

• Automad 文档
• 教程
• 演示主题