pedroborges/kirby-meta-tags

Kirby 3 的 HTML 元标签生成器。

维护者

详细信息

github.com/pedroborges/kirby-meta-tags

主页

源代码

问题

安装次数: 21,887

依赖项: 2

建议者: 0

安全: 0

星标: 97

关注者: 7

分支: 11

开放性问题: 9

类型:kirby-plugin

v2.1.0 2021-07-19 11:23 UTC

Requires

MIT e88cea13966d5affd04f98e0c51835bb8db14707

  • Pedro Borges <oi.woop@pedroborg.es>

JSON-LDopen-graphmeta-tagstwitter-cardskirby-plugin

This package is auto-updated.

Last update: 2024-09-24 05:20:57 UTC

README

Kirby 的 HTML 元标签生成器。支持开箱即用的 Open Graph、Twitter Cards 和 JSON Linked Data。

需求

  • Kirby 3
  • PHP 7.1+

安装

下载

下载并复制此存储库到 site/plugins/meta-tags。

Git 子模块

git submodule add https://github.com/pedroborges/kirby-meta-tags.git site/plugins/meta-tags

Composer

composer require pedroborges/kirby-meta-tags

对于 Kirby 2，您可以下载 v1.1.1 并将文件复制到 site/plugins/meta-tags。

基本用法

安装 Meta Tags 插件后，您需要将一行添加到模板的 head 元素或 header.php 片段中

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
+   <?php echo $page->metaTags() ?>

默认情况下，metaTags 页面方法会一次性渲染所有标签组。但您也可以一次渲染一个标签

<?php echo $page->metaTags('title') ?>

或指定要渲染哪些标签

<?php echo $page->metaTags(['og', 'twitter', 'json-ld']) ?>

默认

该插件附带一些默认元标签，以便您方便使用

return [
    // other options...
    'pedroborges.meta-tags.default' => function ($page, $site) {
        return [
            'title' => $site->title(),
            'meta' => [
                'description' => $site->description()
            ],
            'link' => [
                'canonical' => $page->url()
            ],
            'og' => [
                'title' => $page->isHomePage()
                    ? $site->title()
                    : $page->title(),
                'type' => 'website',
                'site_name' => $site->title(),
                'url' => $page->url()
            ]
        ];
    }
]

pedroborges.meta-tags.default 选项应用于您的 Kirby 网站上的所有页面。当然，您可以更改默认值。要这样做，只需将此示例复制到您的 site/config/config.php 文件中，并对其进行调整以符合您的网站需求。

模板

遵循 Kirby 的灵活精神，您还可以选择添加特定于模板的元标签

return [
    // other options...
    'pedroborges.meta-tags.templates' => function ($page, $site) {
        return [
            'song' => [
                'og' => [
                    'type' => 'music.song',
                    'namespace:music' => [
                        'duration' => $page->duration(),
                        'album' => $page->parent()->url(),
                        'musician' => $page->singer()->html()
                    ]
                ]
            ]
        ];
    }
]

在上面的示例中，这些设置将仅应用于模板为 song 的页面。

有关所有可用的 meta、link、Open Graph 和 Twitter Card 标签的更多信息，请参阅这些资源

选项

both the pedroborges.meta-tags.default and pedroborges.meta-tags.templates accept similar values

pedroborges.meta-tags.default

它接受一个数组，包含以下键中的任何或所有：title、meta、link、og 和 twitter。除 title 之外，所有其他组必须返回一个键值对的数组。查看 tag groups 部分，了解每个键接受哪些值类型。

'pedroborges.meta-tags.default' => function ($page, $site) {
    return [
        'title' => 'Site Name',
        'meta' => [ /* meta tags */ ],
        'link' => [ /* link tags */ ],
        'og' => [ /* Open Graph tags */ ],
        'twitter' => [ /* Twitter Card tags */ ],
        'json-ld' => [ /* JSON-LD schema */ ],
    ];
}

pedroborges.meta-tags.templates

此选项允许您定义特定于模板的元标签集。它必须返回一个数组，其中每个键对应于您要针对的模板名称。

'pedroborges.meta-tags.templates' => function ($page, $site) {
    return [
        'article' => [ /* tags groups */ ],
        'about' => [ /* tags groups */ ],
        'products' => [ /* tags groups */ ],
    ];
}

当键与当前页面模板名称匹配时，它会合并并覆盖在 pedroborges.meta-tags.default 选项上定义的任何重复属性，这样您就不必重复自己。

标签组

这些组接受字符串、闭包或数组作为其值。由于其灵活性，Meta Tags 可以做到的事情几乎是无限的！

title

对应于 HTML <title> 元素，并接受一个 string 作为值。

'title' => $page->isHomePage()
    ? $site->title()
    : $page->title(),

您也可以传递一个返回 string 的 closure，如果生成 title 的逻辑更复杂。

meta

放置任何通用 HTML <meta> 元素的正确位置。它接受一个键值对数组。返回值必须是一个 string 或 closure。

'meta' => [
    'description' => $site->description(),
    'robots' => 'index,follow,noodp'
],
显示 HTML 👁

<meta name="description" content="Website description">
<meta name="robots" content="index,follow,noodp">

link

此标签组用于渲染HTML <link> 元素。它接受一个键值对 array。返回值可以是 string、array 或 closure。

'link' => [
    'stylesheet' => url('assets/css/main.css'),
    'icon' => [
      ['href' => url('assets/images/icons/favicon-62.png'), 'sizes' => '62x62', 'type' =>'image/png'],
      ['href' => url('assets/images/icons/favicon-192.png'), 'sizes' => '192x192', 'type' =>'image/png']
    ],
    'canonical' => $page->url(),
    'alternate' => function ($page) {
        $locales = [];

        foreach (kirby()->languages() as $language) {
            if ($language->code() == kirby()->language()) continue;

            $locales[] = [
                'hreflang' => $language->code(),
                'href' => $page->url($language->code())
            ];
        }

        return $locales;
    }
],
显示 HTML 👁

<link rel="stylesheet" href="https://pedroborg.es/assets/css/main.css">
<link rel="icon" href="https://pedroborg.es/assets/images/icons/favicon-62.png" sizes="62x62" type="image/png">
<link rel="icon" href="https://pedroborg.es/assets/images/icons/favicon-192.png" sizes="192x192" type="image/png">
<link rel="canonical" href="https://pedroborg.es">
<link rel="alternate" hreflang="pt" href="https://pt.pedroborg.es">
<link rel="alternate" hreflang="de" href="https://de.pedroborg.es">

og

在这里您可以定义 Open Graph <meta> 元素。

'og' => [
    'title' => $page->title(),
    'type' => 'website',
    'site_name' => $site->title(),
    'url' => $page->url()
],
显示 HTML 👁

<meta property="og:title" content="Passionate web developer">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Pedro Borges">
<meta property="og:url" content="https://pedroborg.es">

当然，您可以使用 Open Graph 结构化对象。让我们看一个博客文章的例子

'pedroborges.meta-tags.templates' => function ($page, $site) {
    return [
        'article' => [ // template name
            'og' => [  // tags group name
                'type' => 'article', // overrides the default
                'namespace:article' => [
                    'author' => $page->author(),
                    'published_time' => $page->date('Y-m-d'),
                    'modified_time' => $page->modified('Y-m-d'),
                    'tag' => ['tech', 'web']
                ],
                'namespace:image' => function(Page $page) {
                    $image = $page->cover()->toFile();
    
                    return [
                        'image' => $image->url(),
                        'height' => $image->height(),
                        'width' => $image->width(),
                        'type' => $image->mime()
                    ];
                }
            ]
        ]
    ];
}
显示 HTML 👁

<!-- merged default definition -->
<title>Pedro Borges</title>
<meta name="description" content="Passionate web developer">
<meta property="og:title" content="How to make a Kirby plugin">
<meta property="og:site_name" content="Pedro Borges">
<meta property="og:url" content="https://pedroborg.es/blog/how-to-make-a-kirby-plugin">
<!-- template definition -->
<meta property="og:type" content="article">
<meta property="og:article:author" content="Pedro Borges">
<meta property="og:article:published_time" content="2017-02-28">
<meta property="og:article:modified_time" content="2017-03-01">
<meta property="og:article:tag" content="tech">
<meta property="og:article:tag" content="web">
<meta property="og:image" content="https://pedroborg.es/content/blog/how-to-make-a-kirby-plugin/code.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/jpeg">

使用 namespace: 前缀为结构化属性

  • 在 namespace:article 内部的 author 变为 og:article:author。
  • 在 namespace:image 内部的 image 变为 og:image。
  • 在 namespace:image 内部的 width 变为 og:image:width。

当使用 Open Graph 标签时，您可能需要在 html 元素上添加 prefix 属性，如 他们文档 中建议的：<html prefix="og: http://ogp.me/ns#">

twitter

此标签组与上一个标签组类似，但它生成的是 Twitter Cards 的 <meta> 标签。

'twitter' => [
    'card' => 'summary',
    'site' => $site->twitter(),
    'title' => $page->title(),
    'namespace:image' => function ($page) {
        $image = $page->cover()->toFile();

        return [
            'image' => $image->url(),
            'alt' => $image->alt()
        ];
    }
]
显示 HTML 👁

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@pedroborg_es">
<meta name="twitter:title" content="My blog post title">
<meta name="twitter:image" content="https://pedroborg.es/content/blog/my-article/cover.jpg">
<meta name="twitter:image:alt" content="Article cover image">

json-ld

使用此标签组向您的网站添加 JSON Linked Data 模式。

'json-ld' => [
    'Organization' => [
        'name' => $site->title()->value(),
        'url' => $site->url(),
        "contactPoint" => [
            '@type' => 'ContactPoint',
            'telephone' => $site->phoneNumber()->value(),
            'contactType' => 'customer service'
        ]
    ]
]

如果您省略它们，则会添加 http://schema.org 作为 @context，并将数组键添加为 @type。

显示 HTML 👁

<script type="application/ld+json">
{
    "@context": "http://schema.org",
    "@type": "Organization",
    "name": "Example Co",
    "url": "https://example.com",
    "contactPoint": {
        "@type": "ContactPoint",
        "telephone": "+1-401-555-1212",
        "contactType": "customer service"
    }
}
</script>

变更日志

本项目所有显著变更将记录在：https://github.com/pedroborges/kirby-meta-tags/blob/master/CHANGELOG.md

许可

Meta Tags 插件是开源软件，许可协议为 MIT 许可协议。

版权所有 © 2019 Pedro Borges oi@pedroborg.es