Widget 设置

Widget 提供了一种在您的网站上嵌入 Quail 的订阅表单的方法。本文档将指导您完成设置 Widget 的过程。

访问列表的「列表设置 - 通用 - Widget 设置」来设置 Widget 的布局、样式和其他设置。

完成设置后，您可以点击「复制」按钮，复制嵌入代码，然后将其粘贴到您的网站中。

Widget 布局

目前有两种 Widget 布局：基本信息 和 订阅表单。

基本信息: 显示列表的基本信息，如列表名称、描述。

订阅表单: 显示订阅表单，让访客订阅列表。

定制 Widget 样式

你可以使用 CSS 来自定义 Widget 样式。点击 "编辑自定义样式" 按钮打开编辑器。

然后你可以在编辑器中编写你的 CSS 代码。保存后，代码将应用到 Widget 中。

应用新样式可能需要几十秒钟的时间。

讨论如何使用 CSS 定制 Widget 样式超出了本文档的范围。如果您需要帮助，欢迎加入我们的开发者社区。

示例 CSS 代码

这里有一些用于自定义 Widget 的 CSS 代码片段，请随意使用和修改他们。

1. 简约订阅表单

代码

/* adjust the layout and styles */
.widget-form {
  padding: 0 !important;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}
.widget-action-wrapper .q-text-field {
  text-align: left !important;
}
/* hide non-used elements */
.block-drop-shadow::after,
.widget-stat-form-row,
.widget-other-methods-form-row,
.widget-list-subtitle-form-row,
.widget-list-title-form-row,
.widget-list-avatar-form-row {
  display: none;
}

示例

2. 圆角和深色背景

代码

body {
  background-color: rgb(15, 23, 42);
}
.widget-form,
.widget-form-wrapper {
  background-color: rgb(15, 23, 42) !important;
}
.widget-action-wrapper .q-text-field,
.widget-action-wrapper .q-text-field-with-button {
  background-color: rgb(30, 41, 59);
  color: white;
  border: none !important;
  border-radius: 50em !important;
}
.widget-action-wrapper .q-text-field:focus {
  border: none !important;
  outline: none !important;
}
.widget-action-wrapper .q-text-field-with-button {
  padding: 0 8px;
  border-radius: 50em !important;
}
.widget-action-wrapper .q-text-button-wrapper .q-button {
  margin: 4px;
  border-radius: 50em;
  background-color: #29d5ef !important;
}
.widget-action-wrapper .q-text-button-wrapper .q-button:hover {
  background-color: #24cce6 !important;
}
.widget-action-wrapper .q-text-button-wrapper .q-button[disabled] {
  background-color: #25a6b9 !important;
}

/* hide non-used elements */
.block-drop-shadow::after,
.widget-stat-form-row,
.widget-other-methods-form-row,
.widget-list-subtitle-form-row,
.widget-list-title-form-row,
.widget-list-avatar-form-row {
  display: none;
}

示例

3. 自定义字体

代码

@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@200..900&display=swap");
* {
  font-family: "Inconsolata", monospace;
}