bnomei/kirby3-htmlhead

Kirby 3 插件,用于扩展 HTML Head 元素的最佳实践,支持使用代码片段。

3.3.4 2024-08-06 15:30 UTC

README

Release Downloads Build Status Coverage Status Maintainability Twitter

Kirby 3 插件,用于扩展 HTML Head 元素的最佳实践,支持使用代码片段。

商业用途


支持开源!

此插件是免费的,但如果您将其用于商业项目,请考虑赞助我或进行捐赠。
如果我的工作帮助您赚到一些钱,那么我觉得我也应该得到一点回报,对吧?

友好相处。分享一点。谢谢。

- Bruno
 

安装

  • 解压缩 master.zip 为文件夹 site/plugins/kirby3-htmlhead
  • git submodule add https://github.com/bnomei/kirby3-htmlhead.git site/plugins/kirby3-htmlhead
  • composer require bnomei/kirby3-htmlhead

与以下软件兼容

用法

站点方法: attrLang

还有一个语言助手可用。

<?php ?>
<html <?= site()->langAttr() ?>>
<!-- ... -->
</html>

页面方法: htmlhead

在任何模板或您的 header 代码片段中,在应首先出现的标签之后调用页面方法。

   <!DOCTYPE html>
-  <html>
+  <html <?= site()->langAttr() ?>>
     <head>
-      <meta charset="utf-8">
-      <meta http-equiv="x-ua-compatible" content="ie=edge">
-      <meta name="viewport" content="width=device-width, initial-scale=1 shrink-to-fit=no">
-      <base href="<?= site()->url() ?>'">'
-      <title><?= $page->title() ?></title>
+      <?= $page->htmlhead() ?>

您还可以通过将 新的或额外的 数据传递给页面方法来覆盖任何默认设置。

<?= $page->htmlhead([
    // override defaults
    'htmlhead/meta-description' => function ($kirby, $site, $page) {
        return Str::unhtml($page->myDescriptionField()->kti());
    },
    // add new
    'htmlhead/link-feedrss' => function ($kirby, $site, $page) {
        return []; // use defaults of snippet
    },
]) ?>

但我会建议您通过配置设置(见下文)来配置要使用的代码片段。

设置

只有一个名为 bnomei.htmlhead.snippets 的设置,它接受回调数组的参数。它有一些 合理的默认值,但您可以添加 提供的代码片段 或您自己的代码片段。此插件的单元测试有 更具体的示例 供您探索。

https://github.com/bnomei/kirby3-htmlhead/blob/master/tests/config/config.php

<?php

return [
    'bnomei.htmlhead.snippets' => [
        /********************************
         * IMPORTANT: order matters! based on research from @csswizardry
         */
        'htmlhead/recommended-minimum' => null,
        'htmlhead/title' => function ($kirby, $site, $page) {
            return ['title' => $page->title()];
        },
        // async first then sync js scripts
        'htmlhead/script-js' => function ($kirby, $site, $page) {
            return ['files' => [
                '/assets/app.js'            
            ]];
        },
        'htmlhead/link-css' => function ($kirby, $site, $page) {
            return ['files' => ['/assets/app.css']];
        },
        'htmlhead/link-preload' => function ($kirby, $site, $page) {
            return ['files' => ['/assets/app.css', '/endpoint/data.json']];
        },
        // deferred scripts after sync css is faster
        'htmlhead/script-js-defer' => function ($kirby, $site, $page) {
            return ['files' => [
                [
                    'src' => '//unpkg.com/alpinejs', 
                    'defer' => true,
                ],        
            ]];
        },
        'htmlhead/link-prefetch' => function ($kirby, $site, $page) {
            return ['files' => ['/assets/next-page.js']];
        },
        'htmlhead/base' => function ($kirby, $site, $page) {
            return ['href' => kirby()->site()->url()];
        },
        'htmlhead/meta-robots' => function ($kirby, $site, $page) {
            return ['content' => 'index, follow, noodp'];
        },
        'htmlhead/meta-author' => function ($kirby, $site, $page) {
            return ['content' => $site->author()];
        },
        'htmlhead/meta-description' => function ($kirby, $site, $page) {
            return ['content' => Str::unhtml($page->seodesc())];
        },
        'htmlhead/link-feedrss' => function ($kirby, $site, $page) {
            // defaults
            return [
                'url' => url('/feed'),
                'title' => $page->title(),
            ];
        },
        'htmlhead/link-feedrss' => function ($kirby, $site, $page) {
            // defaults
            return [
                'url' => url('/feed'),
                'title' => $page->title(),
            ];
        },
    ],
    // ... other options
];

免责声明

本插件“原样提供”,不提供任何保证。自行承担使用风险,并在生产环境中使用之前自行测试。如果您发现任何问题,请 创建新问题

许可证

MIT

不建议在任何宣传种族主义、性别歧视、恐同、动物虐待、暴力或其他任何形式仇恨言论的项目中使用此插件。