liquidlight/typo3-shortcodes

TYPO3 的 WordPress 风格短代码

维护者

详细信息

github.com/liquidlight/typo3-shortcodes

主页

源代码

问题

安装数: 22,859

依赖关系: 0

建议者: 0

安全: 0

星标: 3

关注者: 3

分支: 1

开放问题: 7

类型：typo3-cms-extension

2.0.1 2024-09-27 09:28 UTC

Requires

GPL-2.0+ f376a711bcd8b5631b0062e75a63b32d33d0303a

  • Liquid Light <info.woop@liquidlight.co.uk>
  • Mike Street <mike.woop@liquidlight.co.uk>

This package is auto-updated.

Last update: 2024-09-27 09:28:52 UTC

README

为 TYPO3 嵌入外部内容提供的 WordPress 风格短代码。

安装

composer req liquidlight/typo3-shortcodes

使用

该扩展默认附带大量短代码以供您开始使用；包括 YouTube、Vimeo、Facebook、Twitter 等等。

要使用短代码，您可以使用缩写语法或遵循 WordPress、HTML 启发的方法。

以下将详细介绍每个标签的精确用法，但以 YouTube 为例，可以使用以下之一

⚠️ 如果使用完整 URL，建议在链接结尾和关闭括号之间留一个空格 - 这可以防止 ] 在链接中使用

缩写冒号语法

[youtube: https://www.youtube.com/watch?v=JrFFN9lag2w ]

缩写等号语法

[youtube=https://www.youtube.com/watch?v=JrFFN9lag2w ]

WordPress 长格式语法

[youtube url="https://www.youtube.com/watch?v=JrFFN9lag2w" ]

创建自己的关键词

在短代码领域，关键词是触发短代码的“服务”（例如，上面的例子中的 youtube）。

注册自己的关键词需要一个新的类，该类扩展 LiquidLight\Shortcodes\Keywords\AbstractKeyword。

如何扩展和使用的一个示例可以在 Classes/Keywords 文件夹中找到 - 除了 AbstractKeyword 类之外，都可以复制并使用。

创建后，您可以通过 ext_localconf.php 添加它，其中 new 是关键词的名称。

$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['shortcodes']['processShortcode']['new'] =
	\Vendor\Ext\Keywords\NewKeyword::class;

使用此方法允许您覆盖现有的关键词，如果您想更改它们的输出。唯一的要求是返回一个字符串。

现有短代码

所有短代码都允许 title 属性，以向基于 iframe 的短代码添加标题。如果没有添加，它将默认为类型（例如，“Google Maps”）。

Facebook

[facebook]

复制一篇 Facebook 帖子或视频的 URL

[facebook=https://#/20531316728/posts/10154009990506729/ ]

属性

  • url
  • width
  • height

默认值

[facebook=LINK width="500"]

Google Maps

[googlemaps]

⚠️ Google Maps 需要设置 API 密钥 - 有关添加密钥的设置部分，请参阅下面

显示一个地点、卫星、方向或街道视图。

[googlemaps search="Paris" ]

属性

所有属性都是列出的 文档 中的。

唯一的不同之处在于

  • search 可以用来代替 q
  • 添加了 loading - 默认为 lazy，但可以设置为 eager

设置

要使用 googlemaps 短代码，必须设置 API 密钥。

默认情况下，它将在您的 $_ENV 变量中查找 GOOGLE_MAP_API。

但是，您可以在 ext_localconf 中设置它，只要您觉得合适（请勿提交您的 API 密钥）。

$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['shortcodes']['config']['api']['googlemaps'] = '123';

如果您限制 API 密钥类型，请确保您已启用以下内容

  • 地图嵌入 API
  • 地图 JavaScript API
  • 地图静态 API

Iframe

[iframe]

允许渲染带有传入 URL 的通用 iframe

[iframe: https://typo3.com/ ]

属性

  • src
  • width
  • height
  • ratio - iframe 比例，以冒号或斜杠格式表示（例如，ratio="4:3" 或 ratio="16/9"）- 渲染为 data-ratio 属性
  • allowfullscreen
  • allow
  • frameBorder

Instagram

[instagram]

嵌入 Instagram 帖子

[instagram=https://www.instagram.com/p/CWI-FeDs-us/ ]

LinkedIn

[linkedin]

嵌入链接帖子 - 确保URL中包含urn:li:activity或类似内容。

例如

[linkedin=https://www.linkedin.com/feed/update/urn:li:activity:6856570271759949825/ ]

属性

  • height
  • width
  • 加载 - 默认为lazy，但可以设置为eager

默认值

[linkedin=LINK width="100%" height="600"]

Soundcloud

[soundcloud]

显示Soundcloud播放器，用于曲目或艺术家 - 可以自定义大小和颜色。使用URL

例如

[soundcloud=https://soundcloud.com/cbschmidt/seodriven-331 ]

属性

  • url
  • maxwidth
  • maxheight - 可以是166或450
  • color
  • auto_play
  • show_comments

Spotify

[spotify]

前往Spotify并点击您想要嵌入的内容 - 歌曲、艺术家、播放列表等。

点击三个点 -> 分享 -> 复制链接

[spotify=https://open.spotify.com/track/3gdewACMIVMEWVbyb8O9sY?si=145df8aede6a4b04 ]

属性

  • height - 可以是80或380
  • theme - 可以是1或0（禁用彩色背景）
  • 加载 - 默认为lazy，但可以设置为eager

默认值

[spotify=LINK height="380" theme="1"]

X

[x | twitter | tweet]

复制推文的URL（或状态代码）

[x=https://twitter.com/Interior/status/463440424141459456 ]

属性

任何属性都会传递到oembed-api，因此列表和默认值可以在那里找到

[tweet=https://twitter.com/Interior/status/463440424141459456 theme="light"]

视频

[video]

视频元素输出一个具有传入src的<iframe>。它允许传入任意视频URL，并将其包裹在<div>中，用于响应式样式。

[video=https://www.liquidlight.co.uk/path/to/video ]

属性

  • code - 如果使用缩写语法则是可选的
  • url - 如果使用缩写语法则是可选的
  • width
  • height
  • ratio - 视频比例，以冒号格式表示（例如 ratio="4:3"）- 默认为16:9 - 以data-ratio属性的形式渲染，用于样式
  • 加载 - 默认为lazy，但可以设置为eager

Vimeo

[vimeo]

渲染Vimeo iframe嵌入。可以接受完整URL或代码。

[vimeo=]

有关属性和使用方法，请参阅视频。

YouTube

[youtube]

渲染YouTube iframe嵌入。可以接受完整URL或代码。

[youtube=https://www.youtube.com/watch?v=JrFFN9lag2w ]

有关属性和使用方法，请参阅视频。