Using or in themes is now deprecated. Any use of these tags in themes should be updated according to the instructions below. Regular and are unaffected by this change. Timeline These are rough estimates, subject to change May 2025 - console deprecation messages enabled July 2025 - admin warning banners enabled Late September 2025 March 2026 - removal of feature Converting Templates introduced using this method should be moved to dedicated .hbs files, or refactored into gjs files. To keep as HBS, connector templates can be placed in: {theme}/javascripts/discourse/connectors/{outlet-name}/{connector-name}.hbs and component templates can be placed in: {theme}/javascripts/discourse/components/{component-name}.hbs :warning: Since March 2026, .hbs files are also deprecated. After making this conversion, move on to the instructions in Deprecating .hbs file extension in themes and plugins To build connectors and components in the modern .gjs format, check out this chapter of the theme developer tutorial: [图片] Theme Developer Tutorial: 4. Using Outlets to insert and replace content Developer Guides Discourse uses the Ember JS Framework for its user interface. On top of Ember, Discourse provides a number of APIs to allow themes to customize the user interface. The most commonly-used API is Plugin Outlets. These outlets are positioned throughout Discourse core, and allow themes to render Ember Components inside them. Those components are given access to some contextual information called “outlet args”. Some outlets also “wrap” part of the core user interface, which allows themes to add the… Converting Code inside these tags can be migrated to a dedicated JavaScript file. If you develop your theme via the admin panel interface, copy the code out of the , and move it into the JS tab (where it says // your code here). If you develop your theme locally, create a new file at {theme}/javascripts/discourse/api-initializers/init-theme.js then add this wrapper, and place your code in the indicated spot: import { apiInitializer } from "discourse/lib/api"; export default apiInitializer((api) => { // Your code here }); In script tags, the only way to import other JS modules was using the require() syntax. While that will still work in a .js file, it will soon be deprecated, so now would be a good time to convert it to modern ES6 imports. For example: - const I18n = require("discourse-i18n").default; + import I18n from "discourse-i18n"; - const { h } = require("virtual-dom"); + import { h } from "virtual-dom"; For more information on JS initializers: [图片] Theme Developer Tutorial: 6. Using the JS API Developer Guides In the last couple of chapters, we’ve explored how to use the JavaScript API to render content into outlets. renderInOutlet is the most commonly-used API, but there are a ton more! In this chapter we’ll try out a few of them, and show you how to discover more. Common API methods getCurrentUser() api.getCurrentUser() will return information about the current user, or null if nobody is logged in. This can be used for all sorts of things, including per-group logic, or rendering a user’s username i…

Maybe a very dumb question, but I have a very very simple theme component that I put directly into the admin console under : {{whos-online}} If I’m following this post correctly, does it mean that I now have to create a separate theme component folder, host it on GitHub and add the component just for something as simple as adding to a plugin outlet? I sure hope not, as it’ll break most of my simple theme components :grimacing:

There is the JS tab now, so you can probably use api.renderInOutlet now.

[图片] NateDhaliwal: here is the JS tab now, so you can probably use api.renderInOutlet now. [图片] david: If you develop your theme via the admin panel interface, copy the code out of the , and move it into the JS tab (where it says // your code here). Ah, I didn’t see that this was possible to do with connectors/components as well, but in the linked article found this: [图片]Theme Developer Tutorial: 4. Using Outlets to insert and replace content The simplest component is a “template only component”, and can be authored like this: const MyComponent = Hello World ; api.renderInOutlet("some-outlet", MyComponent); // Or on one line api.renderInOutlet("some-outlet", Hello World ); Maybe easier than I thought, thank you!

Thank you for this post! May be a very basic question I believe: Since we do not have a sandbox, I need to be sure before I proceed. I have to update a theme affected so am I correct if say that all the code related to “Script” from “head” tab need to be moved into the JS tab as illustrated below: [Screenshot 2025-07-14 at 1.15.15 pm]

Almost, but not quite. You’d want to remove the script tags, and change the imports to something like: import { ajax } from "discourse/lib/ajax"; Then, paste all this in the JS tab, inside: [图片] david: export default apiInitializer((api) => { // Your code here });

Our Discourse site (hosted by Discourse) is currently generating the following error bar (which is what led me to this thread): [Screenshot 2025-07-14 at 10.40.31 AM] I’m not aware that we’ve done any cutomization of the ‘Light’ theme of our own, and looking at its admin page, am not seeing anything suggesting this is anything more than the system-provided default (but could easily be missing something). For a hosted site like ours, is this likely to self-resolve over time, or does it require some action on our part? Thanks, -Brad

You will need to take action to resolve this - it won’t go away on its own. I took a quick look at your site in chrome dev tools, and it looks like the relevent code is related to adding the ‘chapel’ language to highlightjs. [SCR-20250714-qmbq] If you visit your ‘Light’ theme, and hit ‘edit code’, you should be able to find this under one of the HTML tabs. Then you can follow the instructions in the OP of this topic to move it to the ‘JS’ tab.

Thanks @david! I’d forgotten that we’d done some customizations to get Chapel highlighting and am not sure I would’ve gotten there on my own from the error banner, so appreciate the assistance and pointers. -Brad

I have a simple .html file: I’m kind of confused with different ways to do this migration. Appreciate if someone explains what to do. Thanks

Just renderInOutlet to the connector import { apiInitializer } from "discourse/lib/api"; export default apiInitializer((api) => { api.renderInOutlet("below-site-header", ); });

为模板和JS API 现代化内联脚本标签

开发

NateDhaliwal (Nate Dhaliwal) 2025 年6 月 28 日 11:52 3

现在有了 JS 标签，所以你现在大概可以使用 api.renderInOutlet 了。

话题		回复	浏览量
Upcoming Header Changes - Preparing Themes and Plugins Development dev-news	36	4782	2024 年9 月 8 日
Templating of my "component" broke. How do I fix it? Development	14	578	2026 年3 月 17 日
A versioned API for client side plugins Development rest-api	33	20759	2024 年6 月 21 日
Using the JS API Developer Guides plugin-api , explanation , code	18	12883	2026 年1 月 30 日
Developing Discourse Plugins - Part 2 - Connect to a plugin outlet Developer Guides plugin-guides , tutorial	38	31040	2025 年11 月 23 日

为模板和JS API 现代化内联脚本标签

相关话题