Metas

自动添加 <meta> 标签，用于 SEO 和社交网络。

配置参数

extensions string[]: The list extensions this plugin applies to
name string: The key name for the transformations definitions

描述

此插件为你的 HTML 页面生成 <meta> 标签，用于 Open graph、Twitter cards、Schema.org 和 SEO 目的。数据必须在每个页面的 metas 关键字中定义，支持的值包括：

type: 页面类型（默认为 website）。
site: 站点名称。
title: 页面、文章、帖子等的标题。
lang: 页面语言。
description: 页面描述。
image: 页面、文章、帖子等的主要图片。
icon: 站点的标志或图标。
keywords: 关键词数组。
twitter: Twitter 用户名。
fediverse: Fediverse 句柄用于作者署名。
color: 网站的颜色主题。它可以是包含单一颜色的字符串（如 #fff），也可以是包含两种颜色的数组，分别用于浅色和深色模式（例如 ["white", "black"]）。
robots: 搜索引擎的配置（布尔值用于启用/禁用，或包含自定义值的字符串）。
generator: 生成页面的软件 (Lume v1.x)。可以为 true 以自动生成，或包含自定义值的字符串。

安装

在你的 _config.ts 文件中导入此插件以使用它：

import lume from "lume/mod.ts";
import metas from "lume/plugins/metas.ts";

const site = lume();

site.use(metas(/* Options */)); // 使用选项

export default site;

用法

在项目根目录的数据文件（如 /_data.yml）中，添加默认值。

metas:
  site: Oscar's blog
  twitter: "@misteroom"
  fediverse: "@misteroom@mastodon.gal"
  icon: /img/icon.png
  lang: en
  generator: true

你可以使用每个页面的特定值来完成 meta 值。例如：

---
metas:
  title: Hello world
  description: My first post
  image: /hello-world.png
---

This is my first post

输出的 HTML 页面将包含 <meta> 标签，其中包含合并默认值和特定页面值的结果。它应该类似于：

<html>
  <head>
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="Oscar's blog" />
    <meta property="og:locale" content="en" />
    <meta property="og:title" content="Hello world" />
    <meta property="og:description" content="My first post" />
    <meta property="og:url" content="http://example.com/" />
    <meta property="og:image" content="http://example.com/hello-world.png" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@misteroom" />
    <meta name="fediverse:creator" content="@misteroom@mastodon.gal" />
    <meta itemprop="name" content="Hello world" />
    <meta itemprop="description" content="My first post" />
    <meta itemprop="image" content="http://example.com/hello-world.png" />
    <meta name="description" content="My first post" />
    <meta name="generator" content="Lume v1.10.1" />
  </head>
  <body>
    <p>This is my first post</p>
  </body>
</html>

字段别名

字段别名允许在 metas 中使用现有值。别名以 = 开头，后跟字段名称：

title: This is the title

metas:
  title: "=title" # 别名到 title 值

也可以使用点号表示子值：

title: This is the title
intro:
  text: Page description
metas:
  title: "=title"
  description: "=intro.text"

从 Lume 1.17.0 开始，可以使用 CSS 选择器，使用 $ 前缀：

metas:
  title: "$ h1" # 使用第一个 <h1> 元素的内容
  image: "$ img.cover attr(src)" # 使用 img.cover 元素的 src 属性

从 Lume 2.4.0 开始，可以使用不同的回退值，用 || 分隔：

metas:
  title: "=title || $ h1 || Default title"

在上面的示例中，插件将尝试从 title 变量中获取值，如果不存在，则从 h1 CSS 选择器中获取值，如果仍然不存在，则使用 Default title 值。

附加值

从 Lume 2.2 开始，任何附加值都用于创建自定义的 <meta> 标签。例如，以下 metas 对象具有附加的 twitter:* 键：

title: Lume is awesome
author: Dark Vader
metas:
  title: =title
  "twitter:label1": Reading time
  "twitter:data1": 1 minute
  "twitter:label2": Written by
  "twitter:data1": =author

此配置生成以下代码：

<meta name="title" content="Lume is awesome" />
<meta name="twitter:label1" content="Reading time" />
<meta name="twitter:data1" content="1 minute" />
<meta name="twitter:label2" content="Written by" />
<meta name="twitter:data2" content="Dark Vader" />