Neos CMS 的 Card / Teaser NodeTypes - 内容卡(就地编辑)、文档卡(对文档的引用)和社交卡(指向外部网站的链接)

安装次数: 3,625

依赖项: 1

建议者: 0

安全: 0

星星: 7

关注者: 18

分支: 2

公开问题: 0

类型:neos-package

v2.1.0 2024-05-06 07:31 UTC

README

可用的卡包
Card - 基础
卡组 - 美丽地聚合卡片
卡洗牌 - 卡组过滤
Bootstrap 4 样式卡
Materialize 样式卡

TechDivision.Card - 用于结构化信息卡片

如果以下情况适用,请使用此包:

  • 您只需要最基本的卡片功能
  • 您知道如何在自己的网站上应用 CSS 类和样式

卡片是清晰地、明显地、移动友好地展示网站信息的主要方式之一。实际上,它们是过去所谓的“预告”、“框”等现代方式。此包以易于使用的方式将卡片集成到 Neos 中,并将其拆分为一些包,这样您就只需安装所需的组件。

Card examples

资源

https://material.io/components/cards
https://materialize.node.org.cn/cards.html

对于编辑器

安装后,TechDivision.Card 会附带两个新的 NodeTypes - 以及一种新的编辑模式。

内容卡

内容卡是纯内容 NodeTypes。它们不可重用,但具有卡片外观和感觉。例如,可以用来展示不同的产品功能。
Content Card example

文档卡

文档卡基本上是对其他页面的引用,并且具有高度的复用性。
您不能在此编辑信息,但可以在文档本身中编辑。
这可以很容易地用来改善网站内的导航,通过将介绍您的产品和链接到您网站上不同位置的产品卡组合在一起 - 但保持您的数据集中。
Document Card example

社交卡

社交卡是链接到其他网站,这些网站包含 opengraphtwittercard 元信息。
卡将显示图像、标题和描述,并链接到页面。
我们不设置 target _blank,但如果您打算自己添加 target,我们会添加一个 noopener 属性
您可以使用此功能轻松链接到报纸、github 或其他与您的网站相关的页面。
Social Card example

卡片模式

为了编辑您的卡片,有一个新的编辑模式,您可以预览不同大小的文档卡。
Card editing mode

对于开发者

安装

TechDivision.Card 通过 Packagist 提供。将 "techdivision/card" : "~1.0" 添加到 composer.json 的 require 部分,或运行 composer require techdivision/card
这仅安装最基本的卡片功能。如果您不知道自己在做什么,我们建议您使用其他卡片包之一。

配置

由于 TechDivision.Card 默认情况下就可以运行,所以不需要做太多配置。一些选项包括

节点类型图

这是对节点类型的概述以及它们如何协同工作: 节点类型图

添加/删除 CardMixin

默认情况下,我们将 Mixin 添加到 Neos.NodeTypes:Page - 这样您可以开始工作了。
如果您不希望这种行为,请使用以下代码

Neos.NodeTypes:Page:
  superTypes:
    'TechDivision.Card:CardMixin': false

如果您有自己的文档节点类型,请按以下方式添加 Mixin

Your.Awesome.Package:SpecialDocumentNode:
  superTypes:
    'TechDivision.Card:CardMixin': true
    'TechDivision.Card:Constraint.Card.Document': true

节点类型 TechDivision.Card:Constraint.Card.Document 用于引用和其他约束。

添加您自己的 CardMode 样式表

CardMode 包含非常基本的样式。您可以自由添加自己的样式

prototype(TechDivision.Card:CardModePage) {
    head.stylesheets.cardModeStylesheet.stylesheet.path = 'resource://Your.Awesome.Package/Public/Styles/CardMode.css'
}

开发您自己的样式

我们添加了一组 afx-augmenters,您可以使用它们轻松地更改卡片样式。
最佳实践是创建自己的包,根据需要覆盖样式和组件。
将您的 techdivision/card* 依赖项放入该包的 composer.json 文件中。

查看这里以获取示例

贡献

我们很乐意接收 pull 请求 - 请不要犹豫!