简体中文

English

简体中文

English

Widget 设置 ​

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

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

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

Widget 布局 ​

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

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

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

定制 Widget 样式 ​

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

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

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

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

示例 CSS 代码 ​

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

1. 简约订阅表单 ​

代码

css
/* 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. 圆角和深色背景 ​

代码

css
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. 自定义字体 ​

代码

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