我们可以用 `.gjs` 作为路由模板吗？

[bitmage (Brandon Mason)]

路由目前是否支持 glimmer 组件？

• 当前的 Discourse 文档显示了 Handlebars 模板。
• Ember 版本“polaris”应该会为路由添加对 glimmer 模板的支持。
• 看起来 Polaris 还没有发布?
• 有人在 2 年前为 Ember 的前一个版本 Octane 创建了一个适配器。

我猜答案是 Discourse 的“否”，但如果不是，我很乐意了解。

[david (David Taylor)]

是的，您现在就可以在 Discourse 中为路由模板使用 .gjs 文件。事实上，我们今天就在核心中转换了大量文件！请查看 https://github.com/discourse/discourse/tree/main/app/assets/javascripts/discourse/app/templates 中的示例。

@bitmage

有人两年前做了一个适配器

“有人”就是 Discourse——我们赞助了 ember-route-template 的开发，并且它在我们的 GitHub 组织中

我们还没有使用最新的 Ember 6.x 版本，但我们使用该插件来实现此功能。

[bitmage (Brandon Mason)]

太棒了！ 感谢您的快速回复！

哈哈，我甚至都没注意到它在 Discourse 的 GitHub 上。说得有理。

[bitmage (Brandon Mason)]

在应用程序中添加新路由非常不直观。我将在此处记录下来供他人参考。

我想在根目录下添加一个 /print 路由。

• 本教程记录了如何添加 /admin 路由，但没有记录普通路由。
• 这里有关于如何在根路径添加 API 端点的信息（不是 Ember 路由）。
• 这里有一个关于排查顶级 Ember 路由的冗长讨论。

我最终使用的代码如下。county-fence 是我的插件名称，请将其替换为您自己的名称。

Ember 路由

assets/javascripts/discourse/routes/county-fence-route-map.js.es6

export default function() {
  this.route('print', { path: '/print' });
}

assets/javascripts/discourse/routes/print.js

import Route from "@ember/routing/route";

export default class PrintRoute extends Route {
  model() {
    return { message: "This is a custom print page!" };
  }
}

assets/javascripts/discourse/templates/print.gjs

import RouteTemplate from "ember-route-template";
import ...;

export default RouteTemplate(
  <template>
    ...
  </template>
)

API 路由

plugin.rb

after_initialize do
  require_relative "app/controllers/print_controller"
end

app/controllers/print_controller.rb

# frozen_string_literal: true
# HTTP Status codes: https://github.com/discourse/discourse/blob/main/lib/discourse.rb

class ::CountyFence::PrintController < ::ApplicationController
  requires_plugin CountyFence::PLUGIN_NAME


  def save_print
  end

  def list_prints
    render json: { name: "donut", description: "delicious!" }
  end

  def get_print
  end

end

Discourse::Application.routes.append do
  post "/print" => "county_fence/print#save_print"
  get "/print" => "county_fence/print#list_prints"
  get "/print/:id" => "county_fence/print#get_print"
end

[bitmage (Brandon Mason)]

有什么办法可以得到一个没有布局、导航栏或网站任何 CSS 的空白页面吗？我想使用 Glimmer 组件，但网站的任何样式都无助于生成打印页面。

[Alteras (Steven Chang)]

如果只是为了打印页面而进行样式设置，并且您不介意在查看页面时出现导航栏和其他附加内容，您可以使用 @media print CSS 选择器来更改打印时的样式。Discourse 已经在打印时隐藏了很多内容（https://github.com/discourse/discourse/blob/main/app/assets/stylesheets/common/printer-friendly.scss）。您可以使用 Firefox 检查模式中的“打印媒体模拟”模式预览页面。Chrome 的检查模式中应该也有类似的功能。

如果您需要一个完全空白的画布，不仅是在打印模式下，而且在正常的网页浏览中，您可以使用一些 CSS 技巧。
假设您的 Glimmer 组件有一个根 div，其 id 为 print-component__root，我们可以让 CSS 使用 :has() 选择器检查它的存在（或者从 Glimmer 组件生命周期中添加/删除 body 的类），并有选择性地应用样式。

body:has(#print-component__root) {
  header,
  .avatar,
  .sidebar-wrapper,
  ... {
    all: unset !important;  // all: unset 可能有点过于激进
    display: none !important;
  }
}

#print-component__root {
  // 普通样式
}

可能有一种更好、更简洁的方法来实际移除 DOM 元素，但 CSS 是重置一切的一个很好的解决方法。

[bitmage (Brandon Mason)]

我的 SCSS 未加载。有什么想法吗？我已按照核心中的聊天插件设置了我的文件：https://github.com/discourse/discourse/tree/47248573feb648364833254396892bedf83b7166/plugins/chat。

我在 plugins.rb 中有：

register_asset "stylesheets/common/index.scss"

在 assets/stylesheets/common/index.scss 中：

@import "common";

在 assets/stylesheets/common/common.scss 中：

body:has(#print-root) {
  header,
  .avatar,
  .sidebar-wrapper {
    all: unset;  // all: unset 可能会有点过于激进
    display: none !important;
  }
}

[Alteras (Steven Chang)]

为了确保问题出在加载 SCSS 而不是我提供的样式规则上，请尝试添加一个不带 :has() 选择器的样式。例如：

.sidebar-wrapper {
  outline: 5px solid red;
}

我也建议尝试重启你的 Rails 服务器。过去我曾遇到过添加/删除 register_asset 调用需要我完全重启 Docker 容器的问题。

[bitmage (Brandon Mason)]

• 我删除了 :has() 选择器。
• 将代码放入 index.scss 中以验证问题不是 @import 语句引起的。
• 运行了 d/rake assets:clobber tmp:clear 和 d/rails s。

到目前为止，还没有任何东西能让它加载。

大多数其他文件会在浏览器中自动重新加载。这个文件没有这样做。所以我认为 register_asset 可能是问题所在。我认为 register asset 会自动查找 assets 文件夹？我看到的所有示例都表明情况就是这样。

[bitmage (Brandon Mason)]

d/rails c 和 DiscoursePluginRegistry.stylesheets 显示：

"county-fence"=#Set: {"/src/plugins/county-fence/assets/stylesheets/common/index.scss"}

所以有些事情正在发生。 ^^

[bitmage (Brandon Mason)]

我在 d/rails s 日志中发现：No such file or directory @ rb_sysopen - /src/app/assets/stylesheets/plugin-cf.scss。

因此，尽管插件已作为 county-fence 符号链接到 /plugins 文件夹，并且我的插件在 plugins.rb 中明确命名为 county-fence，但某些代码正在读取基础目录名 plugin-cf 并假定我的插件的编译后的 CSS 名称是什么。

这是一个错误还是一个功能？

我认为这个故事的寓意是在任何情况下都不要将插件目录命名为与插件名称不匹配的任何名称。 正确命名的符号链接不足以解决问题。

编辑：另外 register_asset \"stylesheets/common/index.scss\", plugin: \"county-fence\" 是一个强制正确设置插件名称的解决方法。

[bitmage (Brandon Mason)]

body:has() 下的规则应用存在问题。它们似乎没有在资源编译管道中更新。我运行 d/rake assets:clobber tmp:clear 并使用 d/rails s 重启服务器，它们仍然没有更新。

例如，我可以将 body { background-color: red !important; } 放在 body:has() 部分，但它根本不会出现在 body 元素的样式中。它不仅仅是被覆盖，它根本就不存在于开发者工具的“样式”中。

当我将相同的 CSS 放在 body:has() 之外时，它就能正常显示。

浏览器控制台中的 document.querySelector(\"body:has(#print-root)\") !== null 返回 true。并且 body:has() 中的一些规则正在被应用。

我想知道是否是资源生成管道中的某些规则阻止了这些更改生效。

[bitmage (Brandon Mason)]

我认为我解决此问题的方法是在 Glimmer 组件中直接包含页面的样式。这是我尝试过的唯一始终有效的方法。这样我就不必处理条件 CSS 规则了。

CSS 编译管道一直给我带来无尽的麻烦——我发现它在刷新、应用规则方面非常不一致……东西会消失，而我不知道为什么。我不知道这是否与在 Docker 容器中运行有关？我现在已经完全放弃了指向插件文件夹的符号链接——我相信这导致了 Docker 卷挂载和文件监视/重新编译的问题。我或许可以创建一个最小的仓库来重现这些问题……我会看看是否能做到这一点，并在未来几天内将其发布。

[bitmage (Brandon Mason)]

关于此事的后续跟进……

现在，从 Stripe 渲染的 iframe 导致我的打印布局底部出现空白页。iframe 被硬编码为 display: block !important 直接在元素上。

我想我将通过在此路由加载时删除 iframe 来解决这个特定的错误……（顺便说一句，Stripe 正在渲染一个页面宽的 div，该 div 会检测所有点击事件——这似乎是一种隐私侵犯……我相信这来自 subscriptions 插件。）

但我在展望未来，并预见到在打印页面上进行“打地鼠”式故障排除的漫长道路。未来引入布局中新元素的任何东西，即使它不明显可见，都可能导致打印出现故障。

对我来说，继承此路由的网站布局并不是一个理想的场景。有什么办法可以让我选择退出，或者设置我自己的布局吗？