将新侧边栏从左侧切换到右侧(英文论坛)

大家好,

我搜索了论坛,并在几天前在新聊天中询问了这个问题。有人建议我在论坛上发帖。希望有人能帮忙。

是否有插件可以将新的侧边栏移到右侧?

或者是否有内置方法可以从左侧切换到右侧?

5 个赞

没有内置方法可以做到这一点,也没有我所知道的现有插件。因此,虽然可以进行定制来实现这一点,但这可能会开辟新天地,并可能遇到一些未预见的问题。

5 个赞

桌面视图:

    body #main-outlet-wrapper {
        grid-template-areas: "content sidebar";
        grid-template-columns: minmax(0, 1fr) 0;
    }
    
    body.sidebar-animate #main-outlet-wrapper {
        grid-template-areas: "content sidebar";
    }
    body.has-sidebar-page #main-outlet-wrapper {
        grid-template-areas: "content sidebar";
        grid-template-columns: minmax(0, 1fr) var(--d-sidebar-width);
        padding: 0 0 0 10px;
    }
8 个赞

谢谢。我该把它粘贴在这里吗?

为了安全起见,请将其放在 Desktop-\u003eCSS

6 个赞

谢谢!部分生效。三明治菜单仍在左上方,挤占了徽标的空间。

我希望导航栏中的三明治菜单保留在原始位置,与右侧的图标一起。

另外,切换侧边栏实际上会使页面宽度变窄。(我有一个自定义页面宽度,但在启用侧边栏时被忽略了)

干得好 @Lhc_fl :clap:

有一个网站设置可以实现此功能。查找 navigation menu 并将其设置为“Header Dropdown” :slight_smile:

4 个赞

不,你完全没理解问题。当你启用“Header Dropdown”时,侧边栏会被移除。:slightly_smiling_face:

这个帖子是在问“切换”侧边栏从左到右,并将汉堡菜单保留在右侧,因为汉堡菜单一直都在那里。(你也可以说它应该在那里)

我已经启用了“Header Dropdown”,直到有办法将侧边栏和图标都放在右侧。

左侧的 Logo 会带你到“论坛首页”(很棒)。但现在 Logo 的位置被侧边栏切换图标取代了,你可能会不小心切换侧边栏。我认为所有的菜单图标都应该保留在右侧。

侧边栏切换不需要一直切换,所以将其移到 Logo 左侧是一个太容易触发的热点。

侧边栏也是如此,我更喜欢页面内容在左侧,侧边栏在右侧。

这只是个人偏好,我确定。所以只是询问一下,因为其他论坛所有者一定对所有东西都在左侧没意见。

4 个赞

啊,是的,我明白了。我忘了右侧的汉堡菜单不会触发真正的侧边栏。内容相同,但更像是一个下拉菜单,而不是您想要的侧边栏。

我看了一下 Discourse 的代码,不幸的是,在我看来,它仍然像一些巫师的神秘公式 :mage: :scroll:
似乎 是两个组件的渲染方式大相径庭。

包含侧边栏切换小部件的标题内容:discourse/app/assets/javascripts/discourse/app/widgets/header-contents.js at fde9e6bc25227b69195181d45ee4360c25c279da · discourse/discourse · GitHub

侧边栏小部件:discourse/app/assets/javascripts/discourse/app/widgets/sidebar-toggle.js at 5b6604f5a7e1c8ff29fe556236dbf86872908b03 · discourse/discourse · GitHub

当前的右侧汉堡菜单代码:discourse/app/assets/javascripts/discourse/app/widgets/header.js at c43cb0c5716a3671a682c87295f5a7dad61eb65d · discourse/discourse · GitHub

也许这能帮助一些人为此目的创建一个主题组件。

3 个赞

谢谢!顺便说一句,这是烤奶酪三明治,不是汉堡包。:nerd_face:

2 个赞

我想知道您为什么想把菜单移到右边?这是您认为对所有网站都更好的反馈,还是您的网站有特殊情况,导致左侧位置不合适?比如,您在那里有另一个菜单吗?否则,我认为导航菜单的左侧位置(可以隐藏/显示)正成为行业标准……

哪个词更能勾起您的食欲!:rofl: 不过我认为汉堡包更易于识别。我个人喜欢叫它“汉堡大盗”!:man_detective:

2 个赞

好的,添加这一行。

span.header-sidebar-toggle {
    order: 1;
}

2 个赞

FWIW 我有一些用户在我推出它之后要求将其放在右侧。也许他们习惯了汉堡包的位置?

4 个赞

感谢您的辛勤工作和更新。:coffee:

有没有可能现在可以做到?

1 个赞

您好 @haydenjames :slight_smile:
您已经在功能请求中提出过此问题:

无需在不同主题下重复发帖,因此我已将您的帖子从该链接移出 :slight_smile:

另外,@Lhc_fl 提供了一些很好的变通方法。 :+1:

工作区几乎就在那里。我只需要汉堡包图标保留在右边第二个图标,而不是最右边的第一个。但@Lhc_fl确认这仅通过 CSS 无法实现。

我更喜欢将内容放在左边,侧边栏(不常用)放在右边——而不移动原始汉堡包图标的位置。

编辑:我认为允许自由选择侧边栏,并且不将右侧图标分成左侧和右侧,将鼓励更多论坛所有者启用侧边栏。

目前,启用侧边栏会将菜单图标分成最左边和最右边,并将论坛徽标移到汉堡包图标旁边,使其紧挨着论坛主页的点击。

我希望保留这个:
image

同时拥有这个:

如果未来可能的话……谢谢。 :handshake:

4 个赞

您或许可以修改此主题组件,以实现汉堡菜单的位置。

1 个赞

不确定我是否理解。抱歉。该插件上的截图看起来与 Discourse 新的将图标分成最左边和最右边的做法完全相同。

但是,我不希望菜单切换汉堡图标离返回论坛主页的徽标太近。我想切换侧边栏,然后正常使用论坛,而不会让侧边栏切换图标占据左侧徽标的热点位置。

目前,切换菜单关闭——正如开发人员所实现的那样——没有任何价值或优势,因为页面宽度会恢复到已经太窄的宽度。所有这些都意味着大多数用户不会(理所当然地)不断地打开和关闭侧边栏。

即使他们这样做,汉堡图标位于返回主页徽标热点左侧(IMO)也不是一个好位置,并且违背了 Discourse 之前的设计,即所有图标都位于顶部菜单栏的右侧。我想保留这一点:
image
…同时将内容保留在左侧,并将侧边栏放在右侧。(如上截图所示)

感谢您的回复!我将继续阅读有关该插件的更多信息,以便更好地了解我们是否在讨论相同的更改。

1 个赞

我的意思是,结合将面板移到右侧的 @Lhc_fl 组件。研究我链接的组件中的代码,您或许可以将汉堡菜单放回搜索和个人资料之间。如果我理解了您的要求以及 Lhc_fl 当前的解决方法存在的问题。

因为它已经使用了代码来移动菜单,所以代码中可能包含一些细节,可以作为修改的示例,以达到您想要的效果。

在移动设备上,您的截图显示的是您在桌面模式下想要的位置。

有经验的人或许可以提取移动设备上使用的代码,并将其应用于桌面设备。可以通过研究桌面设备在加载移动视图网站时检查元素来实现。

关于宽度,有一个新的组件可以更改网站宽度,这或许值得探索。

1 个赞

是的,我希望如此。您关于移动与桌面菜单图标的说法是正确的。

1 个赞