用户装扮|User Decoration

使用CSS和特殊标记创建用户可以使用的装扮

Title Poster

实际上，本插件一个更加合适的名字可能是“基于用户的样式注入引擎”

须知

此代码使用了一些激进的技巧来拦截所有头像/用户名. 这可能造成其他部分的插件出现问题. 如果出现问题, 请在设置中禁用头像/用户名劫持.

为了体验完整功能, 你可能需要安装 xypp/store。Store 插件仍在开发过程中，如果出现问题请向开发者报告。

本插件默认不含任何装扮，站长/管理员可以根据需要添加装扮。如有不理解的情况，可以查看github的discussion页面，其中包含了一些示例。

介绍

本插件提供了一种可以使用 CSS 和其他特殊标记来改变用户组件的方法。

管理员可以创建装扮，然后将其授予用户。用户在个人主页可以看到已经获得的装扮，并运用。装扮理论上生效与论坛的任何地方。

github discussion 中给出了一些关于如何填写Style的例子. 同时，我们也欢迎各位前来发表自己的装扮方案.

如果安装了xypp/store，用户可以从商店购买装扮

用法

添加装扮

使用管理员账号登录，导航到用户页，点击装扮按钮打开装扮页面。点击右上角的添加装扮按钮即可。

授予装扮

导航到用户页，点击右上角的控制按钮，点击“授予装扮”即可。

创建商品

导航到商店页面，点击右上角的添加商品按钮。

填写完基本信息后，选择商品提供者为装扮

待加载完成后，在下方选择要作为商品的装扮。

如果希望装扮有时间限制，可以直接填写时间限制。

如非必要请不要填写使用次数限制，这不会产生影响，但是会导致用户从已购中使用时扣除次数。

特殊标记

使用.base 来选中装扮的容器元素（即.decoration-container 元素）。该元素会拥有原先的对应元素的所有属性并包装其内容。

使用.element-aNameToBeFillThere[…]来创建一个新的元素。具体用例见下

/** 规则 */
.element-<unique-id>[tag="<tag>"][parent="<parent selector>"][copy="<copy selector>"][after="<after selector>"][content="<content>"][class="<class>"]

.element-test
/** 创建一个内容为Hello的span元素，位于container下 */
.element-test1[tag="span"][content="hello"] {
  ....;
}
/** 创建一个div元素，位于.Post-body下 */
.element-test1[tag="div"][parent="Post-body"] {
  ....;
}
/** 创建一个内容为Hello的span元素，位于第一个元素的第一个子元素下 */
.element-test1[tag="div"][parent="* *"] {
  ....;
}
/** 复制第一个img元素，位于container下 */
.element-test1[tag="#"][content="img"] {
  ....;
}

上文中的<parent selector> 和 <copy selector> 支持使用 * 匹配任意元素,或者使用字符串直接匹配 className 或者 tagName。注意 className 和 tagName 不需要加.或者#前缀，同时区分大小写。多级匹配之间用空格分割。

Q&A

为什么样式选择不适用 QuerySelector？

元素匹配不运行在 DOM 上，而是运行在 VNode 树上。

管理员无法删除自己的装扮？

关闭查看所有功能

装扮不生效

打开控制台查看是否输出了警告或错误。

安装

使用 composer:

composer require xypp/user-decoration:"*"

更新

composer update xypp/user-decoration:"*"
php flarum migrate
php flarum cache:clear