我最近在 Meta 上安装了一个主题组件，该组件在查看帖子时会引入“阅读模式”。
用于切换此功能的按钮位于帖子时间线控件的顶部：
单击它会将帖子置于“阅读模式”，用略带半透明的覆盖层覆盖大部分用户界面，以最大程度地减少干扰。
其他一些发生的事情是，对所有头像和图像应用了滤镜，将它们变成灰度图像。
这是它使用中的屏幕录像。
该组件在 Meta 上安装的以下主题中可用：
这仍然是一个 WIP（在制品），非常感谢在此处发布的任何错误报告或反馈 
太棒了！
我注意到一些样式更改会导致单击按钮时布局“跳转”。我猜有些元素被设置为 display: none; 了？或者一些字体大小发生了变化？
能否将按钮设置为纯粹地“灰色”显示（或 visibility: hidden;）不必要的元素，而不会引起任何布局变化？
是的，这是我遇到的一个痛点。
理想情况下，侧边栏会像单击侧边栏切换按钮时一样正常关闭并带有动画效果。
由于我的组件关闭了侧边栏，但没有为其添加动画，因此会出现抖动。
我可以：
visibility: hidden; 怎么样？或者 opacity: 0;？这样它仍然存在并且包含在布局中，但不可见？我想我们还需要一些东西来阻止点击/聚焦它？或者也许我们在悬停/聚焦时让它再次可见？
一种相对安全的方法是模拟用户交互：
if(document.body.classList.contains("has-sidebar-page")){ // Sidebar is visible
document.querySelector(".btn-sidebar-toggle").click()
}
你说的是侧边栏吗？
如果是的话，我实际上是用我的组件来切换它的关闭状态，所以它使用的是与此相同核心方式：
@action
toggleReaderMode() {
if (this.sidebarIsOpen && !this.isActive) {
getOwner(this).lookup("controller:application").set("showSidebar", false);
this.readerModeActive = !this.readerModeActive;
} else {
getOwner(this).lookup("controller:application").set("showSidebar", true);
this.readerModeActive = false;
}
}
我实际上并没有从页面上移除任何东西，除了将这个侧边栏切换关闭。
对了，但这会导致布局移动。所以我在想我们可以让它保持打开状态，但让它不可见？
好的，是的，抱歉造成了困惑。我现在明白了。由于读者模式并不为人所知是侧边栏的切换器，因此切换它可能会令人困惑，导致您不希望发生的偏移。
我猜我以为如果侧边栏切换器会导致偏移，那么读者模式做同样的事情也没关系。
我可以尝试不切换侧边栏，然后在此处发布一个视频向您展示。
当在reader模式按钮之前关闭侧边栏时，侧边栏会打开，之后，该按钮将不起作用。
我之前还在想那个新图标到底是什么。现在我知道了。谢谢。
但是。
DiscourseHub、iPad 和主题默认：它所做的只是展开侧边栏。
编辑。
好的，我必须先打开侧边栏。之后就会发生神奇的事情。除非……我在这里不使用侧边栏 
这是一个非常酷的功能。干得好，乔丹！ 
正如大卫所说，我想知道是否可以不移动内容。
另外，缩减原始宽度是否有特别的原因？尽管我可能不知道一些限制。
我的意思是有点像这样：
功能上，这似乎只是隐藏了时间线和通知栏，因为侧边栏本身就可以折叠。我不认为这种体验的改变或改进足以在每个主题中再增加一个按钮。
如果它能以某种有意义的方式改变阅读体验，比如在阅读模式下使其全屏显示，那会更有意义。就目前而言，我可能永远不会使用这个功能，所以讽刺的是，它对我来说只是给时间线增加了更多的视觉干扰。
我有一些长期目标，比如添加字体、文本大小、内容宽度等选项。但目前，这只是一个小实验，还在进行中。
此组件已合并最新的更改以限制移动并实现更好的过渡
是的，也许我也可以让它有点透明。我尝试过平滑过渡来隐藏它，但由于我们渲染列表项的方式，有时看不到，并且尝试隐藏它会很麻烦。
这同样适用于所有小的帖子通知和时间间隔。我唯一能想到的方法是使用元素观察器 API，但即使那样，移动也略微不可预测，并且我注意到随机发生的抖动。
这对我来说很有意义
键盘快捷键（CTRL-某个键）在这里切换会很棒（我们可以在您悬停在按钮上时进行教学）
我不喜欢黑白处理图像，我觉得我丢失了信息。
我赞成移除很多界面元素，比如“点赞数”、回复按钮，甚至可能还有头像。
Jordan，改进得很棒！现在看不到任何移动变化，而且一些动画使过渡更流畅，体验好多了。
我同意 Sam 的建议；如果我们隐藏非必要信息，恢复颜色将是一个很好的折衷方案。不过，这也可以作为一个选项。
是的，是的，是的！！！
进入阅读模式后，您必须点击才能转到另一页，然后，如果您想要阅读模式，您必须再次点击才能重新开启它。也许让其他导航链接稍微不那么隐藏，让它们可以工作，并在我们转到下一个主题时保持开启状态。
另一个想法是，当您到达主题末尾时自动关闭它。
或者，自动导航到您上次访问的主题列表中的下一个主题！
