How to customize routes and render custom pages in a plugin?

[singi2016cn]

In a plugin, how do I customize routes and then render a custom page?

I looked at this post: Developing Discourse Plugins - Part 5 - Add an Admin Interface - Docs / Developer Guide - Discourse Meta, and other plugins, but they all failed.

My custom routes are returning JSON data, but what I want is to render an Ember template. Is there a post that explains this related knowledge? Thank you very much.

[merefield (Robert)]

If that’s all you want to do, take a look at:

Landing Pages Plugin

The Landing Pages Plugin lets you make standalone landing pages for your Discourse instance. You can display topics, users and other content from your forum. You can restrict pages to groups, apply Discourse themes, set custom paths, and manage pages in a dedicated git repository. [Screen Shot 2021-02-23 at 6.11.10 PM] Get the code Read the documentation Request a feature Report a bug Not sure how to install a plugin? Follow t…

And:

Landing Pages Plugin

Just to point out you can now display arbitrary pages within Discourse using the Landing Pages Plugin in combination with a couple of extensions:

[singi2016cn]

I am currently stuck here, here are my specific steps:

I defined the route in the file plugins/q/config/routes.rb:

get "/hello" => "examples#hello"

Controller: plugins/q/app/controllers/quectel/examples_controller.rb

def hello
   render json: { hello: "world" }
end

Now visiting: localhost:4200/q/hello, returns json

{"hello":"world"}

How can I render the Ember template when visiting localhost:4200/q/q/hello?

[Moin]

I bookmarked this topic some time ago to read later: Creating Routes in Discourse and Showing Data. Not sure if it’s up-to-date, but maybe it’ll still help.

[singi2016cn]

Yes, I also read this post and followed the steps above, but it didn’t work, and an “Page not found” error appeared. Then, I was confused.

[singi2016cn]

OK, I roughly achieved the desired effect by studying the code for plugins/discourse-subscriptions.

Visiting /q/hello displays the custom template content and fetches custom backend data.

Here are my steps:

1. Create a new path mapping file plugins/quectel/assets/javascripts/discourse/quectel-route-map.js

export default function quectel() {
  this.route("q/hello"); // 路由默认是/q/hello
};

2. Create a new route file plugins/quectel/assets/javascripts/discourse/routes/q/hello.js

import Route from "@ember/routing/route";
import { ajax } from "discourse/lib/ajax";

export default class HelloRoute extends Route {
  model() {
    return ajax('/q/hello') // 请求后端接口，获取数据
  }
}

3. Create a frontend template file plugins/quectel/assets/javascripts/discourse/templates/q/hello.gjs to render the data

import QHello from '../../components/q-hello'

<template>
  <h1>q-hello</h1>
  {{!-- 渲染组件 --}}
  <QHello />
  {{!-- 渲染模型数据 --}}
  <div>{{@model.hello}}</div>
</template>

4. Create a backend controller file plugins/quectel/app/controllers/quectel/examples_controller.rb

# frozen_string_literal: true

module ::Quectel
  class ExamplesController < ::ApplicationController
    requires_plugin PLUGIN_NAME

    def hello
      render json: { hello: "hello 2333" }
    end
  end
end

5. Define the backend route in plugins/quectel/config/routes.rb

# frozen_string_literal: true

Quectel::Engine.routes.draw do
  get "/hello" => "examples#hello"
end

Discourse::Application.routes.draw { mount ::Quectel::Engine, at: "q" }

Visiting /q/hello will show the following display: