README

此扩展提供了一种 "Article" 字段类型，它是一个强大的文本编辑器，用于在您的 Bolt 网站上创建丰富内容。它可以与网格、嵌入、排版标记和媒体一起使用。编辑器本身由 Imperavi 开发，并获准用于 Bolt。

此扩展允许您在 contenttypes.yaml 中添加 type: article 字段，就像添加其他任何字段类型一样。

安装

注意：如果您已安装默认的 Bolt 项目，则不需要安装。在这种情况下，它已经存在。如果您通过其他方式安装了 Bolt，则需要运行以下命令

composer require bolt/article

安装后，您可以在 contenttypes.yaml 中的任何 ContentType 中添加它，就像添加其他任何字段一样。例如

blogposts:
    name: Blogposts
    singular_name: Blogpost
    fields:
        title:
            type: text
        slug:
            type: slug
            uses: title
        content:
            type: article

结果将如下所示

您可以在 config/extensions/bolt-article.yaml 中配置编辑器。此配置会影响您在 ContentTypes 中配置的所有 Article 字段实例。默认配置如下所示

# Settings for Bolt Article

default:
  plugins: [ blockcode, buttonlink, definedlinks, inlineformat, reorder, tags, underline ]
  source: true
  grid:
    classname: 'article-grid'
    columns: 12
    patterns:
      '4|4|4': 'col-4|col-4|col-4'
      '4|8': 'col-4|col-8'
      '6|6': 'col-6|col-6'
      '8|4': 'col-8|col-4'

plugins:
  ~

配置按钮

Bolt 的 Article 版本包含所有官方插件和选项。您可以通过在 plugins: 参数中配置它们来添加或删除按钮和插件。请参阅官方 Article 文档以获取 所有可用按钮。请注意，某些按钮可能需要您启用相应的插件。请在此处查看 可用插件列表。

设置

在适用的情况下，您可以在 bolt-article.yaml 配置中的 default: 键下添加额外设置。请参阅文档了解可用的设置。

请注意，此文档使用 JavaScript，而 Bolt 的配置使用 YAML。例如，"粘贴" 的文档有此示例

ArticleEditor('#entry', {
    css: '/your-article-dist-path/',
    paste: {
        autolink: false
    }
});

在 bolt-Article.yaml 中，您可以添加如下内容

default:
  buttons: [ …]
  plugins: [ … ]
  css: '/your-article-dist-path/'
  paste:
    autolink: false

添加自定义插件

如果您根据 创建插件 或 创建块 的文档编写了自己的 Article 块或插件，您可以通过将其放置在 /public/assets/article/_plugins 中将其添加到 Bolt 编辑器中。然后，将其添加到 bolt-article.yaml 配置中

default:
  buttons: [ … ]
  plugins: [ … ]

plugins:
  myplugin: [ 'myplugin/myplugin.js', 'myplugin/myplugin.css' ]

网格设置

使用 Article，您可以让编辑器插入网格元素，将 "主要列" 分割成两个或更多列，为内容布局提供更多变体。

默认情况下，Article 包含一个简单的由 12 列组成的网格，允许编辑器选择 '4 + 4 + 4'、'4 + 8'、'6 + 6' 和 '8 + 4' 作为选项。网格将创建如下 HTML

<div class="article-grid">
    <div class="col-6">
    …
    </div>
    <div class="col-6">
    …
    </div>
</div>

在网站的前端，需要正确地使用 CSS 样式化，以便正常工作。这可以通过以下几种方式完成

1. 链接到默认样式。
2. 将 grid.css 文件复制到您的主题中以自定义它。
3. 使用您自己的 CSS 手动样式化网格。

您可以使用以下方式链接 Article 中的 grid.css

<link rel="stylesheet" href="{{ asset('assets/article/grid.css', 'public') }}">

如果您更喜欢将文件复制到您自己的主题中，您可以使用以下方式链接它

<link rel="stylesheet" href="{{ asset('css/article_grid.css', 'theme') }}">

或者，如果你的主题使用 Bootstrap 或 Bulma，你可以配置文章直接使用你喜欢的框架的网格格式。请参阅有关使用 Bootstrap 网格或使用 Bulma 网格的文档。

以下内容仅适用于开发扩展。在 Bolt 项目中一般使用扩展时不需要

运行 PHPStan 和 Easy Codings Standard

首先，确保已安装依赖项

COMPOSER_MEMORY_LIMIT=-1 composer update

然后运行 ECS

vendor/bin/ecs check src --fix