首页
/ Metamagic 项目技术文档

Metamagic 项目技术文档

2024-12-18 23:49:59作者:咎竹峻Karen

1. 安装指南

首先,确保您的项目环境中安装有 Ruby 1.9 或以上版本以及 Rails 3.0 或以上版本。在您的项目 Gemfile 文件中添加以下依赖:

gem 'metamagic'

然后执行 bundle install 命令以安装 Metamagic gem。

2. 项目的使用说明

Metamagic 是一个用于创建 meta 标签的 Ruby on Rails 插件,支持常规 meta 标签、OpenGraph(Facebook)、Twitter Cards 以及自定义标签。

基本用法

在您的视图文件顶部,如 app/views/posts/show.html.erb

<%
meta title: "我的标题",
     description: "我的描述",
     keywords: %w(关键词1 关键词2 关键词3)
%>

然后在布局文件 app/views/layouts/application.html.erb 中:

<head>
  <%= metamagic %>
  ...
</head>

这会生成以下 meta 标签:

<head>
  <title>我的标题</title>
  <meta content="我的描述" name="description" />
  <meta content="关键词1, 关键词2, 关键词3" name="keywords" />
  ...
</head>

使用模板

模板可用于在布局中插入视图中设置的 meta 值。例如,如果您想在所有页面的标题中添加内容,或为所有页面添加默认关键词,可以使用模板。模板支持所有标签类型,包括 OpenGraph、Twitter 等。

标题模板

在模板中:

<%
meta title: "我的标题"
%>

在布局中:

<%
metamagic site: "我的站点", title: [:title, :site], separator: " — "
%>

这将渲染以下内容:

<head>
  <title>我的标题 — 我的站点</title>
  ...
</head>

默认分隔符是 -

如果视图中未设置标题,它将只显示站点名称。

关键词模板

关键词模板可用于为站点的所有页面添加默认关键词。

在模板中:

<%
meta keywords: %{一个 两个 三}
%>

在布局中:

<%
metamagic keywords: [:keywords, "四个", "五个", "六个"]
%>

这将生成以下内容:

<head>
  <meta content="一个, 两个, 三, 四个, 五个, 六个" name="keywords" />
  ...
</head>

为其他标签类型添加模板

模板支持所有标签类型。可以通过将视图中的冒号(:)替换为下划线(_)来访问 meta 键的值,例如 og:image 可以通过 og_image 访问。

快捷助手

为了方便设置 meta 标签,您可以使用快捷助手:

<%
title "我的标题"
description "我的描述"
keywords %w(关键词1 关键词2 关键词3)
%>

这会生成以下内容:

<head>
  <title>我的标题</title>
  <meta content="我的描述" name="description" />
  <meta content="关键词1, 关键词2, 关键词3" name="keywords" />
  ...
</head>

快捷助手返回您发送给它们的值,因此可以通过在 <h1> 标签中设置标题来减少代码冗余:

<h1><%= title "我的标题" %></h1>

这与在视图顶部设置标题相同。

注意: 快捷助手不会覆盖视图中已经存在的方法,例如如果已经有一个名为 title 的方法,它不会被覆盖。

指定默认 meta 标签值

可以在布局中指定默认值,如果视图没有指定自己的值,将显示这些默认值:

<head>
  <%= metamagic title: "我的默认标题", description: "我的默认描述。", keywords: %w(关键词1 关键词2 关键词3) %>
  ...
</head>

3. 项目API使用文档

Metamagic 提供了多种方法来定义 meta 标签,包括自定义标签和属性。

自定义 meta 标签

<%
meta my_custom_name: "我的自定义值"
%>

这将生成以下内容:

<head>
  ...
  <meta content="我的自定义值" name="my_custom_name" />
  ...
</head>

添加关系链接

<%
meta rel: {
  author: "http://test.com/author.html",
  publisher: "http://test.com/publisher.html"
}
%>

或者使用 rel 快捷助手:

<%
rel author: "http://test.com/author.html",
    publisher: "http://test.com/publisher.html"
%>

自定义属性

OpenGraph(Facebook)

<%
meta og: {
  image: "http://mydomain.com/images/my_image.jpg"
}
%>

Twitter Cards

<%
meta twitter: {
  card: "summary",
  site: "@flickr"
}
%>

其他自定义属性

<%
meta property: {
  one: "属性一",
  two: "属性二",
  nested: {
    a: "嵌套A",
    b: "嵌套B"
  }
}
%>

自定义标签

可以为指定的标签前缀添加自定义渲染:

config/initializers/metamagic.rb

Metamagic::Renderer.register_tag_type :custom, ->(key, value) { tag(:custom_tag, first: key, second: value) }

在视图中:

<%
meta title: "我的标题",
     custom: {
       key_one: "我的第一个键",
       key_two: "我的第二个键"
     }
%>

这将渲染以下内容:

<title>我的标题</title>
<custom_tag first="custom:key_one" second="我的第一个键" />
<custom_tag first="custom:key_two" second="我的第二个键" />

当注册一个新的标签类型时,会自动定义一个快捷助手。因此,上面的代码也可以写成:

<%
custom key_one: "我的第一个键",
       key_two: "我的第二个键"
%>

4. 项目安装方式

Metamagic 可以通过添加到 Gemfile 并运行 bundle install 来安装。确保您使用的是 Ruby 1.9 或更高版本以及 Rails 3.0 或更高版本。在 Gemfile 中添加以下代码:

gem 'metamagic'

然后执行以下命令:

bundle install
热门项目推荐
相关项目推荐

项目优选

收起
Python-100-DaysPython-100-Days
Python - 100天从新手到大师
Python
266
55
国产编程语言蓝皮书国产编程语言蓝皮书
《国产编程语言蓝皮书》-编委会工作区
65
17
Cangjie-ExamplesCangjie-Examples
本仓将收集和展示高质量的仓颉示例代码,欢迎大家投稿,让全世界看到您的妙趣设计,也让更多人通过您的编码理解和喜爱仓颉语言。
Cangjie
196
45
openHiTLSopenHiTLS
旨在打造算法先进、性能卓越、高效敏捷、安全可靠的密码套件,通过轻量级、可剪裁的软件技术架构满足各行业不同场景的多样化要求,让密码技术应用更简单,同时探索后量子等先进算法创新实践,构建密码前沿技术底座!
C
53
44
HarmonyOS-ExamplesHarmonyOS-Examples
本仓将收集和展示仓颉鸿蒙应用示例代码,欢迎大家投稿,在仓颉鸿蒙社区展现你的妙趣设计!
Cangjie
268
69
qwerty-learnerqwerty-learner
为键盘工作者设计的单词记忆与英语肌肉记忆锻炼软件 / Words learning and English muscle memory training software designed for keyboard workers
TSX
333
27
CangjieCommunityCangjieCommunity
为仓颉编程语言开发者打造活跃、开放、高质量的社区环境
Markdown
896
0
advanced-javaadvanced-java
Advanced-Java是一个Java进阶教程,适合用于学习Java高级特性和编程技巧。特点:内容深入、实例丰富、适合进阶学习。
JavaScript
419
108
MateChatMateChat
前端智能化场景解决方案UI库,轻松构建你的AI应用,我们将持续完善更新,欢迎你的使用与建议。 官网地址:https://matechat.gitcode.com
144
24
HarmonyOS-Cangjie-CasesHarmonyOS-Cangjie-Cases
参考 HarmonyOS-Cases/Cases,提供仓颉开发鸿蒙 NEXT 应用的案例集
Cangjie
58
4