注意
此页为于 SCP 维基内部使用的“组件”页。用于在其他页面中引用。
未经组件作者或工作人员允许，请勿修改此页的内容。
引言
来看，筹资小组件，满足你所有的线上乞讨需求！
该组件是一个有着华美外观，超级可定制的链接，可通往托管于外部的第三方筹资网站。它附带有一个进度条，以标记出你目前为止所筹集的资金数量以及你的最终筹资目标。从简单的偶尔捐赠以及提示到全面的项目或活动，该组件旨在提供一种有视觉吸引力的方式，以将筹资网站链接至你自己的 WikiDot 页面中。
我最初设计这个组件时是想做个看起来跟 GoFundMe 自己的嵌入式小组件相似的东西，用于自己写代码时正在筹资的一个筹资活动。我没有使用 GoFundMe 那个含有社交媒体追踪器以及其它无用的臃肿软件的嵌入式小组件，而是决定制作我自己的 WikiDot 组件，外观受到 GoFundMe 小组件的启发，且亦具有类似的功能。
这就是成果了，远远不止是一个对 GoFundMe 小组件的模仿。这个组件现在应该是通用的而且充分可定制，可以用在任何第三方筹资网站上。
空白模板
以下是在页面中创建筹资小组件所需最基本的代码。
只需复制黏贴代码并提供前四个参数的值即可。
|
目前已筹集的资金数量 ↦ 总共需筹集的资金数量 ↦ 筹资人名称 ↦ 该筹资网站/主页面链接 ↦ 货币符号与千位分隔符 ↦ 筹资活动的象征图像 ↦ 捐赠表格页面链接 ↦ 托管该筹资活动的网站名称 ↦ 资金用途的简短描述 ↦ |
|
参数
参数被分为三个等级，等级 1 为必填参数，等级 2 为半可选的参数，而等级 3 则是完全可选填的参数。
1 级参数：
这些参数是组件的核心参数，定义了其用途。
每个筹款活动必须拥有一个独特的值。
| 参数 | 描述 |
|---|---|
| amt （数量） |
目前为向目标金额进发而筹集到的金额数量，控制进度条并将出现在进度消息之中。 |
| goal （目标） |
筹资活动的最终目标金额数量，控制进度条并将出现在进度消息之中。 若设定为负数或零，则进度条与进度消息都将消失。 |
| title （标题） |
你的筹资活动名称，用于标题文本之中，亦可作为托管筹资活动的第三方网站主链接。 |
| main_url （主链接） |
链接至托管该筹资活动主页面的第三方网站链接。 |
2 级参数：
这些参数必须引入才能使组件正常运作，但可以保留其默认值，或者也可以覆写该值。
半可选只是个我对仍需引入但已在空白模板中提供了无需修改的值的参数的术语称呼，这些值在你想要或需要的时候可以修改。
这也是该表格拥有默认值一列的原因。
| 参数 | 默认值 | 描述 |
|---|---|---|
| curr_sym （货币符号） |
$ |
在进度消息中于已筹集的金额以及目标金额前添加的货币符号。 例子有美元（$），英镑（£）以及欧元（€）。 |
| num_sep （数字分隔符） |
, |
在进度消息中于已筹集的金额以及目标金额的千位与百万位后添加的分隔符。 例子有逗号（ , ）以及某些人使用的句点（ . ）。 |
| image_url （图像链接） |
无 |
指向能够代表筹资活动的在线图片文件链接。 该图片亦将在被点击时充当 main_url（主链接）的链接。 如果你没有或不想用图片，使用值无即可令其消失。 |
| donate_url （捐赠链接） |
无 |
链接至你托管在第三方网站的筹资活动捐赠页面，亦即捐赠按钮所链接到的地方。 若你没有捐赠直链，则使用值 none ，而捐赠按钮将转而链接至 main_url（主链接）。 |
| logo_text （标志文本） |
@@@@ |
你所使用的筹资网站名字，将显示在捐赠按钮右侧。1 如果你不想要标志，则可用值 @@@@ 来使此处留空。 |
| description （描述） |
@@@@ |
对你筹资活动的一段简短描述，将被放置在进度消息与捐赠按钮之间。 如果你不想要描述，则可用值@@@@来使此处留空。 |
3 级参数：
这些参数是真的可选，且可以完全从 [[include :scp-wiki-cn:component:fundraiser-widget]] 中省略，不会有任何副作用，在你想要给它一个独特的值时可以修改。.
| 参数 | 描述 |
|---|---|
| shape （形状） |
用该参数调整组件的形状与结构。 使用值 BHL 来调整小组件的形状以更好地符合黑色标记笔版式，移除了圆角并外移了阴影，且给捐赠按钮添加了悬浮滑动覆盖（如果 title_button= true 的话那么标题按钮也会如此）。 参见替代样式章节以查看更多细节与示例。 |
| 样式 （版式） |
使用此参数以将组件的配色方案从默认样式修改为契合托管你筹资活动的第三方网站的样式，或者是契合黑标版式，或者是契合你在包含有本小组件的页面所使用的黑标衍生版式的样式。 参见替代样式章节以查看更多细节与示例。 |
| title_button （标题按钮） |
使用值 true 以将本组件的标题修改为按钮的外观。 这可以与 --fr-title-bg- 及 --fr-title-border- 这两个可选样式变量相配合。这两个变量将覆盖版式，但你也可以将其覆盖。 参见替代样式章节以查看更多细节与示例。 参见你自己的样式章节以查看 --fr-title-bg- 和 --fr-title-border- 自定义样式变量的细节，而如果你懂得如何运用 CSS 的话，你也可以自己覆盖并自定义。 |
| hide_desc （隐藏描述） |
使用值 true 以完全隐藏描述。 在创建了空白 @@@@ 描述时可以有效隐藏进度信息与捐赠按钮之间的空隙。 |
| hide_donate （隐藏捐赠） |
使用值 true 以完全隐藏捐赠按钮与其右边的“标志”。 |
| aux_class （辅助类） |
添加到本组件主要元素中的一个额外的辅助类，允许你更进一步地覆盖本组件的样式以及特定实例。 使用空格以添加更多的类。 这个参数实际上仅适用于知道如何运用 CSS 的人，且在你于同一页面中放入多个小组件时很有用，不过只有它们都有着与 shape（形状）和 theme（样式）参数不同的外观时才会起作用。 |
这些参数与可选的标题与捐赠按钮图标有关。
这些可选功能受到了 Ko-Fi 捐赠按钮中嵌入的动画图标的启发。
| 参数 | 描述 |
|---|---|
| title_icon_show （标题图标显示） |
使用值 true 以在标题/标题按钮文本左边放上一个标志。 这个标志的外观取决于以下两个参数的值。 |
| title_icon_anim （标题图标动画） |
应用至标志上的动画，该参数必须遵守 CSS3 的动画属性格式，并需使用已定义的 CSS3 @keyframes 规则。 使用值 icon-wiggle 3s infinite 以使用该组件的一个预定义动画，可以使标志每 3 秒轻微变大、摇动两次，然后缩回原大小。 |
| title_icon_url （标题图标链接） |
标题/标题按钮标志的图片文件，将被缩放至约 30 x 30 像素大小。 若该参数未填或无效，你将会在标题文本的左边得到一个空格。 |
| donate_icon_show （捐赠图标显示） |
使用值 true 以在捐赠按钮文本左边放上一个标志。 这个标志的外观取决于以下两个参数的值。 |
| donate_icon_anim （捐赠图标动画） |
与 title_icon_anim（标题图标动画）参数相似，但将会应用至捐赠按钮中的图标上。 参加以上 title_icon_anim（标题图标动画）参数的描述以获取使用该参数的说明。 |
| donate_icon_url （捐赠图标链接） |
捐赠按钮标志的图片文件，将被缩放至约 30 x 30 像素大小。 若该参数未填或无效，你将会在捐赠按钮文本的左边得到一个空格。 |
示例
以下为展示筹资小组件是如何在给定的参数值下与其默认样式共同工作的示例。
注意：某些示例会在 description（描述）参数值的某些行末使用字符 \ 。这是 WikiDot 的新行符，允许你写出多行代码，而这些代码将在结果页中编译为一整行/段。当为任何参数给定一个多行的值时，这个符号是不需要的，而我仅会在某些示例中使用以使代码易于阅读与复制。
示例 1：
创建了一个完整的小组件，这个小组件与 GoFundMe 自己的嵌入式小组件相似。
示例 2：
创建了一个极简化的小组件，没有图片、标志及描述，但有自定义的货币符号以及数字分隔符。
示例 3：
创建了一个没有图片，有着自定义货币单位，且有着与黑色标记笔版式相似的替代形状。
替代样式
以下为能够契合各种知名第三方筹资网站配色方案，或者是契合黑标版式配色方案，或者是契合你在包含有本小组件的页面所使用的黑标衍生版式的配色方案的替代样式例子。
黑色标记笔版式：
将 theme（样式）设置为以下任何一个值：
- Black-Highlighter
- BlackHighlighter
- BHL
结果：
如果你好奇设置 theme= BHL，但并不设置 shape= BHL 时会发生什么的话，这里是它的代码以及结果：
结果：
GoFundMe 样式：
对于 GoFundMe 来说，你的 main_url（主链接）是你的 GoFundMe 筹资主页，而你的 donate_url（捐赠链接）则是你的 main_url（主链接）的末尾处附上一个 /donate。
将 theme（样式）设置为以下任何一个值：
- GoFundMe
- GFM
结果：
然后是启用了黑标版式形状适应的情况：
结果：
IndieGoGo 样式：
对于 IndieGoGo 来说，你的 main_url（主链接）是你的 IndieGoGo 项目主页，而你的 donate_url（捐赠链接）则是无，因为 IndieGoGo 没有独立的捐赠表单页，至少据我所知是这样的，他们选择将那个表单放在一个模态对话框之中。
将 theme（样式）设置为以下任何一个值：
- IndieGoGo
- IGG
结果：
然后是启用了黑标版式形状适应的情况：
结果：
Kickstarter 样式：
对于 Kickstarter 来说，你的 main_url（主链接）是你的 Kickstarter 项目主页，而你的 donate_url（捐赠链接）则是你的 main_url（主链接）的末尾处附上一个 /pledge/new?clicked_reward=false。
将 theme（样式）设置为以下任何一个值：
- KickStarter
- KS
结果：
然后是启用了黑标版式形状适应的情况：
结果：
Ko-Fi 样式：
对于 Ko-Fi 来说，若需得到你的捐赠链接，你需要先在别的地方用他们的嵌入式代码创建一个你的 Ko-Fi 按钮。
然后右键点击它，在下拉菜单中选择“复制链接地址”，然后将这个链接复制到 main_url（主链接）参数之中。
donate_url（捐赠链接）参数的值保留为无。
不要忘记将 goal（目标）参数设置为零以隐藏进度条，因为 Ko-Fi 并不支持能用金钱来衡量的目标。然而，如果你还是想要设置一个能用金钱来衡量的目标的话，我制作了一个契合 Ko-Fi 配色方案的进度条调色板。只要记住你必须得自己在某个账本里手动跟踪目标进度。
将 theme（样式）设置为以下任何一个值：
- Ko-Fi
- KoFi
结果：
然后是启用了黑标版式形状适应的情况：
结果：
然后是标题没有变成按钮，且进度条启用的情况，给那些好奇外观的人看看：
结果
然后是完全启用了黑标版式适应的情况：
结果：
然后是捐赠按钮隐藏的情况：
结果：
然后是捐赠按钮隐藏且有着一个额外摆动着的标志的情况：
结果：
然后是启用了黑标版式样式适应、标题按钮上有一个动画标志、以及捐赠按钮上有一个静态标志的情况：
结果：
然后是启用了进度条，且捐赠按钮上有一个摇动着的标志的情况：
结果：
你自己的样式
以下是本小组件所使用的 CSS 样式变量，此些变量被以上的样式所覆写以给予小组件一个独特的字体与颜色设置。
如果你知道如何在你的页面中使用 CSS 模块，且希望制作你自己对该小组件的配色方案，那么你可以在你页面中的 CSS 模块之一内使用 :root { } 规则覆写这些变量。
仅需复制以下代码中你所希望修改的部分，并适当修改变量的值。
你亦可以为不同的实例制作不同的样式，只需将替代的变量放在称为 .fr-widget.theme-fr- 的选择器块中，并在选择器后加上你的样式的名字，但不要放在 :root 选择器块中。随后将 theme（样式）变量设置为你的样式的名字。
示例：
用泥土色调制作一个 latte（拿铁）样式：
结果：
然后是启用了黑标版式形状适应的情况：
结果：
