Page Publishing

I would like to replace procourse-static-pages with “page publishing”. Is it somehow possible to add the default discourse header to “published page”? I mean, show the logo on the left side, the search, hamburger icon, avatar and the related functionality for theses buttons on the right side. Then it would be a replacement of procourse-static-pages.

Additionally, it would be great to use DiscoTOC for the published page, too.

7 Likes

Thanks a lot for this feature! It allows to build great landing pages apart from the homepage. So it would be nice to have the appropriate metadata that you need for sharing on social media, SEO or Google Discover (the latter apparently became more important than Google search in my country during the last months when it comes to traffic). Are there any plans to provide a meta title / description and the custom meta tags for the big social networks or even make them editable?

7 Likes

Any update on being able to include the Discourse header on published pages?

6 Likes

Will it ever be possible to render LaTeX in a published page? Would be cool to write math articles.

2 Likes

May I ask, Is there a url that can list all the published page for Admin ? So Admin can easily see all the page they published.
Something similar to wordpress ?
If not, It would be great if the url example.com/pub/. list all the page published.

5 Likes

Are there any plans to allow rendering of these published pages inside the normal Discourse Ember layout? It seems a shame that you can’t just pull them into the layout like the other app sections. I’ve seen a number of others ask this in this thread but nobody seems to have given a direct answer yet.

All of the other static pages plugins that I’ve seen in my research seem to be also rendering their static content in their own Rails layouts, too. Is this a limitation of the Discourse platform, or just that nobody has coded it in yet?

If there is no hard limitation against rendering the published pages inside the normal app layout (with header), where should I start when it comes to getting this feature moving?

Thank you :smiley:

3 Likes

You can alter styling per the original post: Page Publishing

2 Likes

Thank you @hellekin. However, this does not address the main point of my reply. I asked if it’s possible to render the published pages within the normal Ember.js app layout (with the logo, search, hamburger nav, and user nav), not how to customize the separate published pages layout.

I want the static content to render within the normal app layout the same way that a category or topic detail page would load. I would like to use of all the existing plugins and theme components that interface with the main Ember app layout.

3 Likes

I think the purpose of published pages is to remove the Discourse UI.

Although I agree that it would be great to have some features (e.g., from theme components or plugins), I think linking to topics would work better in your case. Maybe you want to explore styling closed topics instead?

2 Likes

Is it possible to have the published page keep the site heading intact or did I miss a trick?

5 Likes

Page publishing is really cool–the topics look great as standalone pages. But I haven’t been able to use it like I had hoped:

  1. I thought one cool use would be to set up page publishing as a landing page for the forum–so before users login they get to see a topic I have published and styled to be the page they see. Is that possible?

  2. The original post here mentions you can style the page. Is there a way to add jquery or javascript to the page? (edit: I see that from the earlier discussion there have been requests for being able to add jquery, javascript to the pages but not yet there, at least as of last year–basically, it looks like people have been hoping that they could have a static page, but render with the same customization possibilities of a normal topic–which is what I would appreciate too.)

3 Likes

Yes, there is, although it is not immediately obvious.

5 Likes

Is there a preferred way to link back to the original post from the published page?

I find myself willing to do this quite often, to encourage replies from readers, while keeping control over the style of the read-only, published page. I tried several ways, including linking to the topic prominently or simply with a ‘discuss’ link.

Maybe an option to add a discuss button that would remain visible at all times (but still be modifiable with CSS) could work. Did someone implement such a CSS trick already?

5 Likes

2 posts were split to a new topic: Can a published page appear alongside about/faqs/tos/privacy?

Depending on the nature of the page, I leave a link wherever suitable. In some at the top, like here:

In some at the bottom, like here:

You can “simulate” a button by codding CSS for a specific tag, like I did for the header of this category:

Text:

Ciudadanos con la convicción de que la República Argentina puede, debe, y va a ser un lugar mejor, si trabajamos todos Unidos en pos de la Libertad.
<mark>&nbsp;&nbsp;&nbsp;[**Afiliación**](https://foro.enunionylibertad.com/t/formulario-de-pre-afiliacion/92)&nbsp;&nbsp;&nbsp;</mark>

(the important part are the <mark> tags)

CSS for said <mark> tags:

/* Code to CHANGE "mark" tag render to something that looks like a "menu bar" */
mark {
  display: inline-block;
  background-color: #E1E1E1 !important;
  color: black;
  border-radius: 20px !important;
  padding-top: 5px;
  padding-bottom: 5px;
}
2 Likes

An alternative to Page Publishing - another method is to use CSS to remove the unwanted elements on a regular Topic Post, while preserving all of the functionality (i.e. Javascripts in installed Theme Components, and CSS styling, etc.)

Tags in the composer can be used to selectively apply formatting to a specific Topic Post.

For example, on my site I achieve this by pasting the following CSS into my theme’s CSS in the Common tab:

/********************** REMOVE THINGS FROM LAYOUT USING TAGS ***************/

.tag-no-header {
    .d-header {
        display: none !important;
    }
    #post_1 nav.post-controls .actions button.edit {
    top: 0px !important;
    }
    .topic-body h1 {
        padding-top: 0 !important;
    }
}

.tag-no-sidebars {
    aside.sidebar {
        display: none !important;
    }
}

.tag-no-category {
    .topic-category {
        display: none !important;
    }
}

.tag-no-timeline {
    .topic-navigation {
        display:none !important;
    }
    .container.posts {
        grid-template-columns: 100% !important;
    }
    .topic-body {
    width: 100% !important;
    }
}

.tag-no-post-links {
    .post-links-container {
        display:none !important;
    }
}

.tag-no-box-shadow {
    .topic-body {
        width: 100% !important;
        border-top: none !important;
        box-shadow: none !important;
        background-color: unset !important;
    }
}

.tag-no-topic-meta-data {
    .topic-meta-data {
        display:none !important;
    }
}

.tag-no-side-margins {
    .wrap {
        max-width: unset !important;
        padding: 0 10px !important;
    }
    .content-wrapper {
        display: block !important;
    }
    #main-outlet-wrapper {
        width: 100% !important;
    }
    .topic-body {
        width: 100% !important;
    }
}

.tag-no-footer-buttons {
    #topic-footer-buttons {
        display: none !important;
    }
}

Then I create Tags that I can selectively apply to Topic Posts, matching the CSS selectors in the code above…

no-header
no-sidebars
no-category
no-timeline
no-post-links
no-box-shadow
no-topic-meta-data
no-side-margins
no-footer-buttons


So here are the two different versions of the same Topic Post…

Before (no Tags applied):

After (All Tags applied) - which I can also embed as an iFrame into other Posts on my site :nerd_face::

23 Likes

Wow :star_struck:

That’s some seriously cool out of the box thinking :smiley:

4 Likes

Thank you so much @Richie!! Out-of-the-Box is my entire World!

2 Likes

There’s a typo in your code, a double semicolon:

    .topic-body h1 {
        padding-top: 0 !important;;
    }

Also,

Did you forget to post your image? Unless the After version of your page is just music :smile:


I played a bit with your code and that’s just :sparkles: brilliant! :sparkles:

We could add some advice for using this trick depending on your needs.

  • Your topics could be closed to prevent people circumvent the CSS rules and reply to them

  • Your topics could be unlisted to not add noise to topic lists or appear in the search results

  • The tags could be in a tag group invisible to regular users to remove noise in the tag lists

  • You could hide some elements only regular users but not for the admin (like the post menu)

That just came quickly to my mind, but I suppose there are other things that may be thought about.

4 Likes

Thanks @Canapin :sparkling_heart: I fixed the code typos.

Categories and Sub-Categories can also be used in CSS by using category-

i.e…

.category-books .main-content,
.category-my-great-book .main-content {
    width:100% !important;
}

I’m also using this trick on my site extensively, to style content and embeds on-the-fly inside the composer…

I have a section of my site where I document my developments (mainly so my future self can recall and find what I have already done, so I don’t continue to reinvent my own wheels!) But anyone is welcome to visit and/or subscribe to that category if you’d like…

3 Likes