返回顶部

添加文本和图像

在本主题中

  1. 添加和格式化文本
  2. 更改文本颜色
  3. 更改字体
  4. 添加项目符号列表或编号列表
  5. 添加独立图像
  6. 添加背景图像和颜色
  7. 在行卡片上选择图像布局
  8. 添加按钮
  9. 添加手风琴式菜单
  10. 请参阅“支持的 Calcite 组件”
  11. 使用 HTML 配置文本

站点编辑者可以使用以下卡片向站点添加图像和文本：

  • 行卡片 - 站点的构建块。 所有卡片必须嵌套在行卡片内。 可以将图像和背景颜色添加到行卡片。
  • 文本卡片 - 通过将此卡片拖动到行卡片上，可以向站点的任意位置添加文本。 您也可以使用此卡片向您的站点添加按钮、列表、表格和自定义代码。
  • 图像卡片 - 将独立图像添加到站点上任何位置的任何行卡片。

添加和格式化文本

可以将文本添加到站点中任意位置处的行卡片。

要添加文本并设置其格式，请完成以下步骤：

  1. 以编辑模式打开站点或页面。
  2. 在自定义面板上，选择布局。
  3. 将文本卡片拖动到布局中的一行上。
  4. 选择要格式化的任何文本。 选项包括样式（常规、代码、页眉等）、粗体、斜体和链接。
  5. 要调整文本大小，请选择样式按钮，然后选择标题大小。
  6. 要调整文本对齐方式，请选择段落选项，然后选择一个选项。 要移动一行文本，请选择段落选项，然后选择减少缩进或缩进。

    提示：
    如果操作错误，请按键盘上的 Command+Z 或 Ctrl+Z 来恢复更改。

  7. 选择保存。

更改文本颜色

要对站点上的所有文本应用相同的颜色，请使用站点的主题设置更改文本颜色。 您也可以使用行设置来调整文本颜色。

要更改文本颜色，请完成以下步骤：

  1. 以编辑模式打开站点或页面。
  2. 要为站点或页面上的所有文本设置颜色，请打开侧面板并展开主题菜单。 有关主题的详细信息，请参阅使用页眉和主题选项来打造站点品牌。
  3. 要设置指定行的颜色，请选择该行的编辑铅笔 编辑铅笔。
  4. 通过输入十六进制颜色代码，或者选择颜色来更改颜色。

    提示：
    使用十六进制代码有助于确保组织资源的品牌一致性。 如果您不确定与组织品牌相关的详细信息，请查看组织是否提供了任何文档或品牌指南。

  5. 选择保存。

更改字体

您可以使用 Google Fonts 来更改文本标题和基础文本的字体。 基础文本包括站点布局中的所有文本。 该字体还适用于已添加到您的站点的任何页面、通过站点搜索访问的项目详细信息页面以及所有活动视图。

添加项目符号列表或编号列表

请按照以下步骤创建列表。

要更改文本颜色，请完成以下步骤：

  1. 以编辑模式打开站点或页面。
  2. 将文本卡片添加到行中。
  3. 添加文本或选择现有文本。
  4. 选择无序列表以创建项目符号列表，或选择有序列表以创建编号列表。
  5. 选择保存。

添加独立图像

可以将独立图像添加至任意行卡片。

要添加独立图像，请完成以下步骤：

  1. 以编辑模式打开站点或页面。
  2. 将图像卡片拖动到布局中的一行上。
  3. 在图像下，选择图像源。 两个选项均支持 JPG、JPEG、PNG 等。
    • 要提供 URL，请选择图像 URL，然后在 URL 字段中粘贴一个支持的图像链接。
    • 要上传文件，选择上传图像。 将文件拖动到框上或选择浏览图像以添加图像（文件大小不超过 3 MB）。
  4. 要自定义上传的图像，请选择裁剪图像按钮，然后拖动控点以调整裁剪框的大小。 要重新定位裁剪框，请选择虚线并在其上方拖动。 要调整缩放，使用图像下方的滑块。
  5. 在选项菜单中，提供图像替代文本以帮助盲人用户并改善站点的可访问性。
  6. 如果适用，提供图像超链接，并设置链接是在同一选项卡中打开还是在新选项卡中打开。

    注：
    辅助功能指南（有关输入 3.2.2 和 技术 G201）建议您避免在新选项卡或窗口中打开链接，除非您提供高级警告。

  7. 为图像标题提供文本并选择文本对齐方式。
  8. 或者，选择缩放图像以进行填充以设置图像的焦点。 焦点将确保针对不同的屏幕调整大小时，画面始终聚焦于所需的图像位置。
  9. 选择保存。

添加背景图像和颜色

可以使用行卡片在其他卡片后面添加图像。

提示：

要在图像上显示文本或内容，选择对比效果明显的背景颜色。 例如，如果您使用浅色文本或显示浅色地图，请选择深色背景颜色（例如黑色），以确保文本保持清晰。 然后，调整颜色透明度以使图像保持可见。

要添加背景图像和颜色，请完成以下步骤：

  1. 以编辑模式打开站点或页面。
  2. 向布局添加行卡片，然后在外观下设置格式。
  3. 在背景图像下，选择图像源。 两个选项均支持 JPG、JPEG、PNG 等。
    • 要提供 URL，请选择图像 URL，然后在 URL 字段中粘贴一个支持的图像链接。
    • 要上传文件，选择上传图像。 将文件拖动到框上或选择浏览图像以添加图像（文件大小不超过 3 MB）。
  4. 通过输入十六进制代码或选择一种颜色来选择背景颜色。
    注：

    仅行卡片支持背景颜色。

  5. 要调整图像透明度，请使用滑块或在百分比字段中输入一个值。 此举会使背景颜色变亮或变暗并有助于确保盲人用户可以无障碍访问图像和文本。
  6. 选择保存。

在行卡片上选择图像布局

每个行卡片均提供两个布局选项，用于设置图像的显示方式。

要选择图像布局，请完成以下步骤：

  1. 将图像添加到行卡片后，您可以为卡片上显示的图像和其他内容选择固定布局或宽布局。
    • 如果您希望图像保持固定，请选择框。
    • 如果您希望图像跨越站点宽度，请选择宽。
  2. 设置图像焦点以确保针对不同的屏幕调整大小时，画面始终聚焦于所需的图像位置。
  3. 选择保存。

添加按钮

包含其他位置（例如，部分或页面）链接的按钮是十分有用的导航工具。 按钮也可以包含行动号召，提示用户执行某项操作，例如注册、了解详细信息或参与调查。 按钮将使用正文链接颜色和正文背景颜色，确保所有类型的用户均可访问这些按钮。 有关详细信息，请参阅此 Hub 按钮主题颜色更新。

要添加按钮，请完成以下步骤：

  1. 以编辑模式打开站点或页面。
  2. 向布局添加文本卡片。
  3. 选择插入按钮，然后选择按钮。
  4. 选择 </> 以 HTML 格式编辑。
  5. 在“href”标签中，输入 URL 替换“#”，输入链接文本替换“Button”（Calcite 组件指南）。
  6. 选择应用和保存。

添加手风琴式菜单

如需添加常用问题，通常可以选择添加可折叠菜单。

要添加手风琴式菜单，请完成以下步骤：

  1. 以编辑模式打开站点或页面。
  2. 向布局添加文本卡片。
  3. 选择插入按钮，然后选择手风琴式。
  4. 选择 </> 以 HTML 格式编辑以添加和格式化文本（Calcite 组件指南）。
  5. 选择应用和保存。

请参阅“支持的 Calcite 组件”

文本卡片支持以下 Calcite Design System 组件。 请参阅所有 Calcite 组件的目录，其中包含描述、最佳使用场景、示例等信息。

  • 'calcite-action'
  • 'calcite-accordion'
  • 'calcite-accordion-item'
  • 'calcite-avatar'
  • 'calcite-block'
  • 'calcite-button'
  • 'calcite-card'
  • 'calcite-chip'
  • 'calcite-dropdown-group'
  • 'calcite-dropdown-item'
  • 'calcite-fab'
  • 'calcite-flow'
  • 'calcite-icon'
  • 'calcite-link'
  • 'calcite-modal'
  • 'calcite-panel'
  • 'calcite-rating'
  • 'calcite-split-button'
  • 'calcite-stepper'
  • 'calcite-stepper-item'
  • 'calcite-tab'
  • 'calcite-tab-nav'
  • 'calcite-tab-title'
  • 'calcite-tabs'
  • 'calcite-tile'
  • calcite-tip'
  • 'calcite-tooltip'

使用 HTML 配置文本

使用以下元素和属性在 HTML 自定义文本。

要使用 HTML 配置文本，请完成以下步骤：

  1. 以编辑模式打开站点或页面。
  2. 向布局添加文本卡片。
  3. 选择 </> 以 HTML 格式编辑以添加和格式化文本（Calcite 组件指南）。
  4. 可以使用 <a> 标签以创建指向页面的链接。 在 <a> 标签的 href="" 属性之间粘贴页面的 slug，例如 <a href="/pages/target-page">Visit the linked page</a>。
    5. 提示：

    如果在 <a> 标签中使用相对路径而非绝对路径，则在选择链接时可以阻止对整个页面进行刷新。 要在新选项卡中打开链接，请直接在 <a> 标签上的 href 属性后追加 target="_blank"。

  5. 选择应用和保存。

警告：

出于安全目的，文本卡片不支持嵌入式 JavaScript。 脚本标记将被忽略。

允许的 HTML 元素

  • 'a'
  • 'abbr'
  • 'acronym'
  • 'address'
  • 'article'
  • 'audio'
  • 'b'
  • 'bdi'
  • 'bdo'
  • 'big'
  • 'blockquote'
  • 'br'
  • 'caption'
  • 'center'
  • 'cite'
  • 'code'
  • 'col'
  • 'colgroup'
  • 'datalist'
  • 'dd'
  • 'del'
  • 'details'
  • 'dfn'
  • 'div'
  • 'dl'
  • 'dt'
  • 'em'
  • 'embed'
  • 'fieldset'
  • 'figcaption'
  • 'figure'
  • 'font'
  • ''footer'
  • 'frameset'
  • 'h1'
  • 'h2'
  • 'h3'
  • 'h4'
  • 'h5'
  • 'h6'
  • ''head'
  • ''header'
  • 'hgroup'
  • 'hr'
  • 'i'
  • 'image'
  • 'input'
  • 'ins'
  • 'kbd'
  • 'keygen'
  • 'li'
  • 'link'
  • 'main'
  • 'map'
  • 'mark'
  • 'menu'
  • 'meter'
  • 'nav'
  • 'ol'
  • 'optgroup'
  • 'option'
  • 'output'
  • 'br'
  • 'p'
  • 'param'
  • 'pre'
  • ''progress'
  • 'q'
  • 'rp'
  • 'rt'
  • 'ruby'
  • 's'
  • 'samp'
  • 'section'
  • 'small'
  • 'source'
  • 'span'
  • 'strike'
  • 'strong'
  • 'style'
  • 'sub'
  • 'summary'
  • 'sup'
  • 'table'
  • 'tbody'
  • 'td'
  • 'tfoot'
  • 'textarea'
  • 'th'
  • 'thead'
  • 'time'
  • 'title'
  • 'tr'
  • 'track'
  • 'tt'
  • 'u'
  • 'ul'

允许上述元素的以下属性。 所有受支持的 HTML 元素允许：['class', 'style']。

  • 'a'：['href', 'title', 'data-toggle', 'data-target', 'data-toggle' 'name', 'rel', 'style', 'target']
  • 'audio'：['autoplay', 'controls', 'loop', 'muted', 'preload']
  • 'blockquote'：['cite']
  • 'button'：['name', 'value', 'data-toggle', 'data-target', 'data-dismiss']
  • 'col'：['span', 'width']
  • 'colgroup'：['span', 'width']
  • 'div'：['style', 'align', 'data-show', 'data-target', 'data-toggle']
  • 'font'：['size', 'color', 'style']
  • 'img'：['align', 'alt', 'border', 'height', 'style', 'src', 'title', 'width']
  • 'ol'：['align', 'start', 'type']
  • 'p'：['style']
  • 'q'：['cite']
  • 'source'：['media', 'src', 'type']
  • 'span'：[style]
  • 'table'：['border', 'cellspacing', 'cellpadding', 'class', 'height' 'style', 'summary', 'width']
  • 'td'：['abbr', 'align', 'axis', 'colspan', 'height', 'nowrap', 'rowspan', 'style', 'valign', 'width']
  • 'th'：['abbr', 'align', 'axis', 'colspan', 'height', 'nowrap', 'rowspan', 'style', 'valign', 'width']
  • 'tr'：[alignt, 'height', style', valign']
  • 'ul'：['type']

有关此主题的反馈?

在本主题中
  1. 添加和格式化文本
  2. 更改文本颜色
  3. 更改字体
  4. 添加项目符号列表或编号列表
  5. 添加独立图像
  6. 添加背景图像和颜色
  7. 在行卡片上选择图像布局
  8. 添加按钮
  9. 添加手风琴式菜单
  10. 请参阅“支持的 Calcite 组件”
  11. 使用 HTML 配置文本