Page Publishing

Page Publishing

Page Publishing allows Staff/Admin users the ability to convert a topic into a static standalone page with support for custom styling. This is similar to the pattern in use for Terms of Service or the Privacy Policy pages. Note that published pages will respect the visibility rules of the associated topic.

Enable Page Publishing

Activate enable page publishing under Admin > Settings

Enable page publishing when login is required

Activating show_published_pages_login_required under Admin > Settings will allow published pages to be visible even when not logged in.

Publish a Topic

On the first post of a public topic, hitting the ... menu (1) will reveal the wrench (2), which in turn will reveal the post administration menu (3), with a new option:

  1. Go to post #1 and select the ellipsis icon…
    image

  2. Select the wrench icon
    image

  3. Select “Page Publishing”
    image

This reveals a modal dialog proposing to publish the topic as a page, where you can choose the (pre-filled) slug, just as you would do for a category’s slug – it’s automatically generated from the post title. You will also get a preview of what your published page’s URL will look like.

Published Topic

A published topic shows a notice under the title that allows access to its publishing settings:

Unpublish a Topic

Selecting Publishing Settings will bring up options that allow you to unpublish the topic

Publishing Public Pages

In your admin settings, there is a show published pages login required setting that you can override to allow your pages to be displayed to everyone even when login_required is enabled on your account.

Public Page Indicators

When Publishing

There is a “public” checkbox on the Page Publishing modal dialog window to indicate that topic restrictions have been overriden:

On Topics

There will be a “Public” tag under your original topic’s name to indicate that the page is public.

Styling of a Published Page

The structure of a published page makes it easy to customize its CSS style:

Beginning of the HTML document of a published page
<body class="published-page">
    <div class="published-page-header">
        <div class="published-page-header-wrapper">
            <a>
                <img class="published-page-logo"/>
            </a>
            <h1 class="published-page-title">Guide for ActivityPub users</h1>
        </div>
    </div>
    <div class="published-page-content-wrapper">
        <div class="published-page-content-header">
            <div class="published-page-author">
                <img  class="avatar" src="/letter_avatar_proxy/v4/letter/n/da6949/90.png">
                <div class="published-page-author-details">
                    <div class="username">nedjo</div>
                    <div class="topic-created-at">February 8</div>
                </div>
            </div>
        </div>

        <div class="published-page-body">
The relevant CSS selectors
CSS Selector Affects
body.published-page the whole page (or simply: .published-page) Note that slug, category and tags will also be appended as css classes
.published-page-header a div containing the page header (similar styling to discourse d-header)
.published-page-header-wrapper a div around the site logo and page title
.published-page-logo The site logo (uses the small version)
.published-page-title The page title
.published-page-content-wrapper a div around the content
.published-page-content-header the title and authorship information
.published-page-title the topic title (h1 tag)
.published-page-author the avatar, name of the author, and topic creation date
.published-page-author .avatar the avatar
.published-page-author-details the username and topic creation date
.published-page-author-details .username the author’s username
.published-page-author-details .topic-created-at the topic’s creation date
.published-page-body the page contents

You can go to Admin > Customize > Themes > CSS and play with it.

Additional Notes:

Big special thanks to @hellekin for starting the documentation and providing us with valuable feedback.

Wiki Page

It’s possible to “publish” a wiki page, which means every member, not only Staff, can update it.

Theme Component

Users can look at creating a theme component to supplement the published pages.

107 Likes
Best landing page solution
ProCourse Static Pages
Using Discourse as a News Blog and Forum - Any Known Good Examples?
How to add a new page into the community? (Login isolated page)
Discourse Subscriptions
Blog Post Styling
Shared Drafts: Allow staff to collaborate on posts before publishing
How to share only few posts to public as links?
Open (anon) interaction with a forum
Open (anon) interaction with a forum
Create a "Docs" page like discource meta's
Invite people to reply to a topic without them needing to create an account
Secure Uploads
Allow anonymous users to view a topic?
What's the usage of "show published pages login required" setting?
How to add contact us page?
Is there any way to restrict posting in a topic to members of a group, but allow all users to read the topic?
Custom Homepage
Edit Code
Published page not visible?
Host HTML page on Discourse install
Is there an upper limit to how many pages can be published?
Change topic visibility in an admin category to public
Allow published pages to be visible to anon
Create a custom page with theme cli?
DiscoTOC - automatic table of contents
How do I redirect urls or create new ones?
How to make a website with Discourse
Twitter embeds have broken
Generate static file in discourse
Discourse for Teams is here!
Category Previews
Public Static pages and Private Forums - possible?
DiscoTOC - automatic table of contents
Filter view for muted categories
Category Previews
How to hide a single topic from showing up in "latest"?
ProCourse Static Pages
Control the visibility of /faq and /about
[Question/Request] Featured image url for post
Embedding private discussions on a wordpress site
Integrating webpage to current forum
Table of Contents not working on Published Pages
Is anyone here using their Discourse instance as their entire website?
Discourse + CMS, which one?
Is there any way to listen User login event using Theme component

I still need to try this out first hand so the following may not be grounded in reality, but:

It strikes me that this permission model sets up a scenario where you always see two copies of the pages’ content – one in the relevant Discourse category, and one in the published pages themselves. This of course seems duplicative if you’re wanting to publish pages for the general population that is similar to, or identical to, your Discourse user base.

OTOH, if pages had the “world readable” flag available, you could then restrict who can see/edit them to a small group, and the only place the content would be available to other Discourse users would be in the published links themselves.

(I’m thinking of a use case of a “documentation site” here.)

Otherwise, I’m pretty excited to test things out!

5 Likes

Awesome stuff, and thanks again for listening to your users. I love the ‘lets make this better for us all’ vibe that Discourse has! We’ll make heavy use of this.

When discussing one use (patching up an install that went a bit awry), another user pointed out a remaining bit of icing that could do with going on the cake:

Hey, is there any way to include the ability to make /faq and /about public as well, as they are currently hidden in Login Required sites. We can of course use the existing functionality that you’ve just released for /faq by making our own, changing the link in settings, and explicitly linking to it. However, this is not pretty and the existing navigation to it remains hidden. We can’t do that at all for /about of course.

8 Likes

Something that would go nice with this feature is to make publications onebox-compatible such that people could easily share the content.

14 Likes

Please excuse my ignorance, as I am very much a beginner in the HTML/CSS space… however, how would we go about applying our theme colour choices to published pages. At its simplest, I’d like to use the dark background/white text to give the published pages the same darkmode experience as accessing our forums.

Is this already in the product, or do I need to play with HTML/CSS? If the latter, could anyone give me some pointers in the right direction? Thanks!

4 Likes

Can you make this a separate feature request please? This is not related to page publishing, as in I wouldn’t have to change anything related to page publishing to make it possible. I do agree it would be better if all these “static” pages could have more or less the same behaviour, but there are multiple solutions here (do nothing? add site settings? migrate these to page publishing?), so we might want to have a dedicated topic for this.

8 Likes

GTM not loaded on published pages? Would be nice.

2 Likes

Hmm that is a really good point.

Just trying to think of a solution here… would it work if type="text/javascript" and type="text/discourse-plugin" were treated differently? The API needs the latter, right?

5 Likes

Yes I think we already support having a text/javascript in the theme fields, so there are certainly solutions in this area.

7 Likes

That would be great.

1 Like

So it’s currently impossible to have responsive published pages, and this site particularly wants

  1. images made available when sharing to public media, and
  2. responsive/resizing images displayed, especially on mobile–oh, mobile could just resize the image with CSS–that should work, right?
4 Likes

+1 for having the Discourse header in published pages. I’m missing my website logo, custom header links and beloved hamburger menu :slight_smile:

Another oddity: in posts, my lightboxed images open in a nice popup, whereas in published pages, they open in a new tab…

6 Likes

I think what’s needed is a set of theme components that add such. The last client I had to use this wanted the topic creator removed. I think it’s hard to guess what will meet people’s needs for this!

6 Likes

Are there currently any ongoing efforts for adding “simple” (non-API) Javascript support to published pages? Or should we forget about this near- to mid-term ?

8 Likes

Can i display external non-Discourse JSON on this page? Because we can’t use php code here and discourse strip most of html so i do not know how to do it…

2 Likes

I have a problem with a published page - the button to copy the content of the code block is not visible on a published page. Screenshot: Screenshot by Lightshot. I move the mouse over the block, but the button doesn’t appear. When logged in - everything works as usual - ok.

Can anybody repeat the problem? Any solution?

2 Likes

Thank you @riking !

It indeed seems that “regular” text/javascript is executing on published pages when it’s in the header or footer of a theme component.

7 Likes

Ha! So it seems that there’s a hacky way to make some theme components work with page publishing.

I’m looking into adding some header/footer to the published pages, and theme components seem to be the way to go. But it seems bad to go on and implement something that would potentially break in the near future.

@riking, it looks like the text/javacript type in header or footer working on published pages was unintented. Is it going to be fixed or used to extend published pages?

@syl, author of DiscPage, mentioned the possibility to re-implement the DiscPage plugin using Page Publishing functionality. Do you still have this in mind, @syl? What do you think would be the path of least resistance to integrate both functionality @riking?

7 Likes

Unfortunately, the “Page Publishing” feature doesn’t meet my needs. For me to use it, I would need published pages:

  1. to be displayed within the normal Discourse layout, i.e. with the standard Discourse header (just like the Terms of Service and the Privacy Policy), and
  2. to be rendered like normal (decorated) topics, i.e. supporting bbcode and plugins.
11 Likes

In the meantime I used the default Discourse customization facility:

  1. Identify the added element, e.g., with a published-page-footer-links CSS class.
  2. Customize CSS to hide this element by default and show it only for published pages
  3. Add the element in the Footer space

2. In CSS, add:

/* Only show footer links on published pages */
.published-page-footer-links { display: none; }
.published-page .published-page-footer-links { display: block;}

3. in Footer, add:

<nav class="published-page-footer-links">
Hi there! This is the footer for published pages!
</nav>
7 Likes