侧边栏用户字段切换

主题组件
1

|||
|-|-|-|
| :information_source: | 摘要 | 在新侧边栏中添加开关 |
| :hammer_and_wrench:|代码库| GitHub - Lhcfl/sidebar-user-field-toggle: Add toggles into new sidebar |
| :question:|安装指南|如何安装主题或主题组件|
| :open_book:|刚接触 Discourse 主题？| Discourse 主题使用入门指南|

安装此主题组件

特别感谢 Discourse Meta 上的 @Kinetiksoft 在开发此主题组件过程中给予我的支持。没有 @Kinetiksoft，这个主题组件就不会存在。

此主题组件允许您在新侧边栏中添加一组按钮来调整用户字段。

image

image
image1170×447 22.2 KB

image
image2139×738 51.9 KB

开发人员附加说明

该主题组件在按钮被按下和首次加载时会发送一个 AppEvent。

如果您需要在按下按钮时执行操作，请使用 api.onAppEvent("sidebar_user_fields_toggled", (e) => { ... });

    // 使用 `api.onAppEvent("sidebar_user_fields_toggled", (e) => { ... });`
    // 来处理按钮切换事件
    this.appEvents.trigger("sidebar_user_fields_toggled", { user_fields });
9 个赞
2

感谢 @Lhc_fl 提供的快速高质量解决方案。

我们的用例基于我们的市场请求描述：
这个想法受到了 Our solution for blurring NSFW content 的启发，我们只是通过反转逻辑开始，并需要一个切换按钮供我们的社区模糊和取消模糊媒体。

只需添加一个自定义用户字段作为复选框，并按照我们下面的方法进行操作。

我们使用侧边栏用户字段切换并添加自定义组件，如下所示：

  1. 在您的管理仪表板中创建新的主题组件
    /admin/customize/ → Components → Install → Create new (component)
  2. 添加 CSS：
CSS 
/* 在 #nswf 主题中的任何媒体上显示 nsfw 模糊和覆盖文本 */
.nsfw-hide { 
	.topic-body .cooked img:not(.emoji):not(.avatar), 
	.topic-body .cooked iframe, 
	.topic-body .cooked .lazyYT-container,
	.topic-body .cooked .video-container,
	.topic-thumbnail img:not(.emoji) {
        filter: blur(10px);	
        -webkit-transition: .3s ease-in-out;
        transition: .2s ease-in-out;
	}

	.topic-body:hover .cooked img:not(.emoji), 
	.topic-body:hover .cooked iframe,
	.topic-body:hover .cooked .lazyYT-container,
	.topic-body:hover .cooked .video-container,
	.topic-thumbnail:hover img:not(.emoji) {
        filter: blur(0);	
        -webkit-transition: .3s ease-in-out;
        transition: .2s ease-in-out;
	}

	.topic-body .cooked a.lightbox:before, 
	.topic-body .cooked iframe:before,
	.topic-thumbnail a:before {
	    z-index:2;
        padding: 5px;
        font-size:1em;
        position:absolute;

        color:#fff;
        content: '👀 Hover to show';
        background: #e86800;
	}
	
	.topic-body .cooked a.lightbox:before, 
	.topic-body .cooked iframe:before {
        top: 15px;
        left: 10px;
	}

	.topic-thumbnail a:before {
        top: 65px;
        left: 20px;
	}
	
	.topic-body .cooked a.lightbox:hover:before, 
	.topic-body .cooked iframe:hover:before,
	.topic-thumbnail a:hover:before,
	.topic-body .cooked .video-container:hover:before {		
	    display:none;
	}
}
  1. 添加 JS (Head)：
JS 代码 
<script type="text/discourse-plugin" version="0.8.7">
const { userPath } = require("discourse/lib/url");
const { ajax } = require("discourse/lib/ajax");

const you = api.getCurrentUser();

if (you) {
  ajax(userPath(`${you.username_lower}.json`)).then((res) => {
    api
      ._lookupContainer("model:site")
      .appEvents.trigger("sidebar_user_fields_toggled", {
        user_fields: res.user.user_fields,
      });
  });
}
// https://meta.discourse.org/t/css-classes-for-group-membership-for-simplified-ui-mode/60838/2

api.onAppEvent("sidebar_user_fields_toggled", (status) => {
    if (window.jQuery) {
        window.jQuery(function ($) {
            if (status.user_fields[2] === "true") { // 或其他
                $('body').addClass('nsfw-hide' );
            } else {
                $('body').removeClass('nsfw-hide' );
            }
        });
    }
});

</script>
  1. 只需按照您想要的方式设置切换组件的按钮。我们在此处使用自定义用户字段 ID 作为参考。

附注：我们可能可以将相同的代码输入到切换组件本身，但我懒得测试，而且为什么要去修改一个完美工作的代码呢？

:plus: @Lhc_fl 的组件在下拉导航类型中也能完美运行。

7 个赞