` 元素中添加 `kg-width-wide` 和 `kg-width-full` 类来实现。下面是宽幅图像的示例：
```html
{{/* Output */}}
```
图像卡具有 `width` 和 `height` 属性。宽度和高度与源图片的尺寸和宽高比相对应，在编辑器中选择不同尺寸选项时不会改变。如果您的主题为图片设置了 `max-width` 样式，那么也必须设置 `height: auto` 样式，以避免图片出现拉伸或压扁。
1. 响应式图像尺寸，图像将具有 `srcset` 和 `sizes` 属性，以便将较小的图像提供给屏幕较小的设备。完整的输出将与此类似：
```html
{{/* Output */}}
```
#### 内容卡
编辑器中的每个内容卡都需要 CSS 和 Javascript 才能正确显示和运行。Ghost 会自动提供这些默认 CSS 和 Javascript 资产，并在 `{{ghost_head}}` 助手中以 `cards.min.css` 和 `cards.min.js` 的形式输出。
您可以通过配置主题的 `package.json` 来排除特定卡片的资产，从而覆盖个别卡片的默认样式和行为：
```json
"card_assets": {
"exclude": ["bookmark", "gallery"]
}
```
或者，您也可以将 `card_assets` 设置为 false（默认为 true），从而禁用所有卡:`"card_assets": false`。
可用的卡片有 `audio` , `blockquote` , `bookmark` , `button` , `callout` , `file` , `gallery` , `header` , `nft` , `product` , `toggle` , `video` 和 `signup` 。
您可以使用自定义 CSS 来定制单个卡片的样式。每张卡片都有一个独特的类名，你可以针对这个类名应用自己的样式。下面列出了每种卡片类型的类名：
- 音频： `.kg-audio-card`
- 方括号： `blockquote` 或 `.kg-blockquote-alt`
- 书签： `.kg-bookmark-card`
- 按钮： `.kg-button-card`
- 呼出： `.kg-callout-card`
- 文件： `.kg-file-card`
- 画廊： `.kg-gallery-card`
- 页眉： `.kg-header-card`
- NFT： `.kg-nft-card`
- 产品： `.kg-product-card`
- 切换： `.kg-toggle-card`
- 视频： `.kg-video-card`
- 注册： `.kg-signup-card`
```css
.kg-product-card .kg-product-card-container {
background-color: #f0f0f0;
}
```
参考文档：[Ghost 主题功能：编辑器](https://ghost.org/docs/themes/content/?ref=nigzu.com)和默认卡片样式：[Ghost/ghost/core/core/frontend/src/cards](https://github.com/TryGhost/Ghost/tree/main/ghost/core/core/frontend/src/cards?ref=nigzu.com)
### 搜索
Ghost 有一个本地搜索功能，使用搜索的最简单方法是在导航栏或网站的任何地方添加一个 `#/search` URL。除此之外，还可以使用数据属性直接在主题中实现搜索。
最快捷的方法是使用 `{{search}}` 助手输出带有搜索图标的按钮。更多详情，请参阅帮助文档。或者，将 `data-ghost-search` 数据属性添加到主题中的任何元素。下面是默认主题 Casper 中的一个示例：
```handlebars
```
这两种方法都允许访问者通过点击元素打开搜索模式或使用快捷方式 `Cmd/Ctrl + K` 搜索内容。
如果网站规模较大，帖子数量超过 10,000 篇，数据结构复杂，或需要高级搜索功能，建议使用 Algolia。Ghost 拥有开源工具，可预先填充 Algolia 搜索索引，并使用网络钩子和 Netlify 函数保持索引更新。
### 会员
会员可以通过使用门户功能在任何主题中激活，门户功能是一种可嵌入的会员功能，可以通过管理用户界面启用和自定义。还可以通过 URL 或数据属性在主题中访问门户屏幕。例如，门户链接可以使用绝对链接或相对链接：
```html
// Absolute URLs takes readers to the homepage and opens a Portal screen.
Subscribe
// Relative URLs open Portal on the current page.
Subscribe
```
使用 `data-portal` 数据属性控制门户用户界面时，会在元素中添加额外的 `gh-portal-open` 和 `gh-portal-close` 类，以便自定义打开和关闭状态的样式。
另外，也可以直接在主题中建立完全自定义的会员和注册流程。参考文档：[Ghost主题开发：创建自定义会员流程](https://ghost.org/docs/themes/members/?ref=nigzu.com)。
#### 会员内容可见性
所有登录网站的成员都有一个访问级别。与此相对应，所有帖子的 `content` 中都附加了 `visibility` 设置。
`access` 是一个变量，用于计算查看帖子的成员的访问级别和应用于帖子的访问级别设置。如果成员的访问权限符合或超过帖子的访问权限级别， `access` 将返回 `true` ；如果不符合，则返回 `false` 。
```handlebars
{{#post}}
{{title}}
{{#if access}}
Thanks for being a member...
{{else}}
You need to become a member in order to read this post...
{{/if}}
{{content}}
{{/post}}
```
使用 `{{content}}` 助手，无法访问文章（由 `access` 属性决定）的访问者将在内容区域看到默认的行动呼吁，提示用户升级订阅。与帖子内容中的免费公开预览结合使用时，CTA 将显示在免费预览之后。可以通过在主题中提供 `./partials/content-cta.hbs` 模板文件来覆盖默认 CTA。Ghost 提供的默认内容 CTA 可用作参考。
`@member` 对象可用于根据成员的访问级别来确定主题中的哪些内容可以公开。这可以通过 `#if` 语句来实现：
```handlebars
{{#if @member}}
Thanks for becoming a member 🎉
{{else}}
You should totally sign up... 🖋
{{/if}}
```
使用 `@member.paid` 允许您向已激活付费订阅的会员公开不同的内容。`@member.paid` 返回 `true` ，用于状态为 "激活"、"试用"、"未支付 "和 "逾期 "的有效订阅会员。要取消付款失败会员的访问权限，请更新 Stripe 设置，以便在所有付款尝试失败后自动取消订阅。
```handlebars
{{#if @member.paid}}
Thanks for becoming a paying member 🎉
{{/if}}
```
`visibility` 属性是相对于帖子或页面而言的，可根据查看者的状态为模板提供额外的属性信息。 `visibility` 有 3 种可能的值： `public` 、 `members` 或 `paid` 。
```handlebars
{{title}}
```
默认情况下，所有文章（包括设置为 `members-only` 或 `paid-members only` 的文章）都将显示在文章存档中，除非 `visibility` 参数与 `#foreach` 助手一起包含。
将可见性标志与 `#has` 助手一起使用，可以在 `public` 、 `members` 和 `paid` 帖子之间实现更独特的样式。例如：
```handlebars
{{#foreach posts}}
{{#has visibility="paid"}}
Premium
{{/has}}
{{/foreach}}
```
更多和会员有关的主题设置参考官方文档。
### 路由
Ghost 的所有路由配置都定义在 `content/settings/routes.yaml` 中，如果手动编辑文件，则需要重启 Ghost 才能看到更改，但如果在管理器中上传文件，则路由会立即自动更新。
所有新安装的 Ghost 都默认使用 `routes.yaml` 设置传统的发布结构。网站主页是网站文章的反序列表，每篇文章都有自己的 URL，由 `{slug}` 参数定义，如 `my-great-post` 。此外，还有按标签和作者分类的附加文章档案。
```yaml
## routes.yaml
routes:
collections:
/:
permalink: /{slug}/
template: index
taxonomies:
tag: /tag/{slug}/
author: /author/{slug}/
```
#### 自定义单页路由
模板路由允许您将单个 URL 映射到 Ghost 主题中的特定模板文件。例如：让 `/features/` 加载 `features.hbs`，以及使用自定义路由来模拟子目录，还有使用`data`属性来在自定义路由的页面使用存储在 Ghost 中的数据：
```yaml
routes:
/features/: features
/about/team/:
template: team
data: page.team
```
现在， `site.com/team/` 中的数据将在 `site.com/about/team/` 上自定义 `team.hbs` 模板中的 `{{#page}}` 块助手内可用，旧 URL 将重定向到新 URL，以防止内容在两个地方重复。
事实上，可以让路由输出任何内容，例如自定义 RSS 源或 JSON 端点。例如创建了一个自定义模板文件，并使用{{#get}}辅助 API 查询加载筛选过的帖子列表，您就可以在自定义路由上返回这些帖子，并自定义格式：
```yaml
routes:
/podcast/rss/:
template: podcast-feed
content_type: text/xml
```
#### 自定义集合路由
编辑默认集合的一个最简单的例子就是将其移动到一个新的位置，为自定义主页腾出空间，以及进行筛选。
```yaml
routes:
/: home
collections:
/blog/:
permalink: /blog/{slug}/
template: index
/podcast/:
permalink: /podcast/{slug}/
template: podcast
filter: primary_tag:podcast
```
##### 创建多语言网站
对于以多种语言发布内容，并希望为每个地区创建不同区域和 URL 模式的网站来说，集合还有一个非常受欢迎的用途。
```yaml
collections:
/:
permalink: /{slug}/
template: index
filter: 'tag:-hash-de'
/de/:
permalink: /de/{slug}/
template: index-de
filter: 'tag:hash-de'
```
#### 自定义分类和频道
Taxonomies 是分类，帖子分组。帖子可以出现在多个分类标准中。可以自定义分类标准，可以不分类：
```yaml
taxonomies:
tag: /topic/{slug}/
author: /host/{slug}/
```
如果你想要比分类标准更灵活，但又不像集合那么死板的东西，那么可以用channels 。频道是与特定过滤器匹配的分页内容的自定义流。这样，您就可以通过将现有帖子组合或划分为内容中心，创建内容子集和超子集。频道不会影响帖子的 URL 或在网站中的位置，因此帖子可以属于任意数量的频道。将频道视为一组永久搜索结果的最佳方式。它是对整个网站内容的过滤切片，而不会修改内容本身。
```yaml
routes:
/apple-news/:
controller: channel
filter: tag:[iphone,ipad,mac]
/editors-column/:
controller: channel
filter: tag:column+primary_author:cameron
```
#### 可用的路由属性
| Property | Description |
| ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| template | 决定此路由将使用哪个 Handlebars 模板文件。如果未指定，默认为 index.hbs 。 |
| permalink | 集合中任何帖子的生成 URL。可包含基于帖子数据的动态变量：\- {id} \- 一组唯一的字符，如 5982d807bcf38100194efd67\- {slug} \- 职位标题，例如 my-post\- {year} \- 出版年份，如： 2019 。\- {month} \- 出版月份，如： 04 。\- {day} \- 出版日期，如： 29 。\- {primary\_tag} \- 帖子中列出的第一个标记的标题，如： news 。\- {primary\_author} \- 第一作者的标题，如： cameron 。 |
| filter | 使用 Ghost Content API 的全部功能和语法，对集合和频道中返回的帖子进行广泛过滤 例如， author:cameron+tag:news 将返回卡梅伦发布的所有帖子，并标记为 "新闻"。根据需要进行混合和匹配。 |
| order | 为内容选择任意数量的字段和排序顺序：\- published\_at desc \- 默认，最新文章在前\- published\_at asc \- 按时间顺序排列，最早的在前\- featured desc, published\_at desc \- 特写文章，然后是普通文章，最新文章在前 |
| data | 从 Ghost API 获取数据并将其与指定路由相关联。数据源路由将重定向到新的自定义路由。\- post.slug \- 用 => {{#post}} 获取数据\- page.slug \- 用 => {{#page}} 获取数据\- tag.slug \- 用 => {{#tag}} 获取数据\- author.slug \- 用 => {{#author}} 获取数据 |
| rss | 可通过将 rss 属性设置为 false 来禁用自动生成的 RSS 源。 |
| content\_type | 指定当前路由的 mime 类型，默认值： HTML |
| controller | 向路由添加自定义控制器，以执行其他功能。目前唯一支持的值是 channel |
### 自定义主题设置
自定义主题设置由主题开发人员在 `package.json` 文件中的 `config.custom` 键处指定，以便在Ghost Admin设置，有五种自定义主题设置可供选择：`select`、`boolean`、`color`、`image`、 `text`。
```json
{
"config": {
"custom": {
"typography": {
"type": "select",
"options": ["Modern sans-serif", "Elegant serif"],
"default": "Modern sans-serif"
},
"cta_text": {
"type": "text",
"default": "Sign up for more like this",
"group": "post",
"description": "Used in a large CTA on the homepage and small one on the sidebar as well"
}
}
}
}
```
设置key必须全部小写，不含特殊字符，并以 `snake_case` 表示，其中每个空格用 `_` 表示,如`cta_text`。描述必须少于 100 个字符。
在发布新主题版本时更改设置的key，对于从旧版本升级的网站所有者来说是一个破坏性的更改。使用旧key的设置将被删除，网站所有者输入的任何值也将丢失，而使用当前key的新设置将以其默认值创建。
在 `package.json` 文件中定义后，可在 Handlebars 模板中使用 `@custom` 对象访问自定义设置。
```handlebars
...
```
主题设置属于 "设计与品牌 "中的 "主题 "选项卡，分为三类：Site wide、Homepage、Post，默认情况下，所有自定义设置都显示在全站类别中。针对主页或文章显示的自定义设置可通过可选的 `"group"` 属性进行定义，该属性的值为 `"homepage"` 或 `"post"` 。
#### 自定义字体的支持
自定义字体允许用户从一个精选列表中为自己的主题选择标题和正文字体。选择自定义字体后，Ghost 会通过 `{{ghost_head}}` 在前端加载字体文件，并设置两个 CSS 变量来引用它们：
```html
```
要在主题中使用自定义字体，请在主题的 CSS 文件中应用所提供的变量，如果没有设置自定义字体，可以使用主题自己的字体作为后备：
```css
```