prismaticbytes/prismatic-links

链接预览字段

1.1.2 2021-04-13 09:51 UTC

This package is not auto-updated.

Last update: 2024-09-11 01:57:40 UTC


README

Screenshot

Prismatic Links for Craft CMS

Prismatic Links 将应用式的链接预览带到您的条目中。

Screenshot

要求

此插件需要 Craft CMS 3.0.0 或更高版本。

安装

您可以从插件商店或使用 Composer 安装此插件。

注意:此插件的许可费用为 15.00 美元,通过 Craft 插件商店支付。支持此插件将资助未来的开发。

从插件商店

转到项目控制面板中的插件商店,搜索“Prismatic Links”。然后在其模态窗口中点击“安装”按钮。

使用 Composer

打开终端并运行以下命令

# go to the project directory
cd /path/to/my-project

# tell Composer to load the plugin
composer require prismaticbytes/prismatic-links

# tell Craft to install the plugin
./craft install/plugin prismatic-links

用法

CMS 字段

像其他字段一样创建您的字段。

用法

  • 插入链接,预览将自动加载
  • 图片选择器允许您在目标 URL 上找到的所有图片之间循环
  • 刷新按钮将重新抓取页面

Screenshot

模板

使用我们的模板或使用自己的

{% for block in entry.externalLinks %}
    {% if block.externalLink.valid %}
        {% include 'prismatic-links/prismatic-link-template.twig' with block.externalLink %}
    {% endif %}
{% endfor %}
{% if myField.valid %}
    <a class="prismaticlinks-container" href="{{ myField.url }}" target="_blank">
        <div class="prismaticlinks-image">
            <img src="{{ myField.image_cached ?? myField.image ?? "" }}" alt="">
        </div>
        <div class="prismaticlinks-meta">
            <div class="prismaticlinks-title">
                {{ myField.title ?? "" }}
            </div>
            <div class="prismaticlinks-description">
                {{ myField.description ?? "" }}
            </div>
            <div class="prismaticlinks-domain">
                {{ myField.domain ?? "" }}
            </div>
        </div>
    </a>
{% endif %}

可用变量

myField.valid         # the URL was fetched successfully
myField.url           # the URL
myField.image_cached  # the locally cached version of the image 
myField.image         # the original image URL
myField.images        # an array of available images from the original URL
myField.title         # the og: or meta title
myField.description   # the og: or meta description
myField.domain        # the domain

CSS

使用我们的 CSS 或使用自己的

{% do view.registerAssetBundle("prismaticbytes\\prismaticlinks\\assetbundles\\prismaticlinks\\PrismaticLinksAsset") %}

➡️ PrismaticLinksField.css

缓存

图像无限期缓存,以避免目标页面从其服务器上删除图像时出现缺失图像。

图像存储在 Craft 的 storage 路径中,作为 storage/prismaticlinks

如果您想确保这些文件不会被删除,请务必在您的部署策略中考虑这一点。

运行时模板方法

此方法将在运行时获取数据并渲染模板 HTML。

⚠️ 不要在您的主模板中使用此方法,例如主页。对外部网站的远程调用执行将导致页面加载缓慢,并可能导致您的网站挂起或超时。

✅ 创建一个要通过 AJAX 加载的模板片段,例如 entries/url-preview/{entry_id},并使用 JavaScript 异步加载模板例如 $.load("entries/url-preview/12345")

{{ craft.prismaticLinks.fetch(url, template, cacheDuration)|raw }}

url            # the URL to fetch
template       # the template to render
cacheDuration  # the duration of the cache in seconds
                 null: the cache default will be used
                 0: infinity
                 -1: disabled
{{ craft.prismaticLinks.fetch('https://www.github.com')|raw }}
{{ craft.prismaticLinks.fetch('https://www.nytimes.com', 'test-template')|raw }}
{{ craft.prismaticLinks.fetch('https://www.nytimes.com', 'test-template', 0)|raw }}

Prismatic Bytes 提供