A Discourse plugin to create static pages and insert discussion balloons in the text.
To discuss this plugin, see the post on Meta.
Basic static page: http://www.docuss.org/t/discpage-demo
Full website: https://www.castafiore.org
A static page:
A static page with a balloon's right panel showing a topic list:
A static page with a balloon's right panel showing a discussion:
Follow
those directions
using https://github.com/sylque/discpage.git as the repository URL.
DiscPage requires that you create at least one category for holding static pages. You can learn how to create a category in this tutorial.
Set the category parameters as follow:
Generaltab /Category Name→ Page (for example)Securitytab /Edit Permissions→- remove line
everyone can… Create / Reply / See - add line
admins can… Create / Reply / See - add line
everyone can… See
- remove line
In the Discourse Admin panel, open the Settings page and set:
tagging enabled→ checkeddiscpage enabled→ checkeddiscpage page categories→ [static page category created above]
If your Discourse instance doesn't use tags (i.e. if tagging enabled was
unchecked before you checked it as part of the above setup), set:
discpage hide tags→ checked
A red hamburger menu means that DiscPage is disabled. This occurs:
- when an error has prevented DiscPage from starting (in that case, check the debug console for a DiscPage-related error), and
- when you manually turn DiscPage off (see below).
When logged-in as admin, you can perform the following actions:
-
To create a static page, add the static page category to a topic: the initial post of the topic will be turned into a static page.
-
To edit a static page, click the "pencil" button at the top right of the static page (you can also turn DiscPage off from the hamburger menu, then edit the topic as you would do normally).
-
To style static pages, use the
.dpg-page-contentclass. To style an individual page, use thehtml[data-dpg-page-id]data attribute. For example, go toSettings > Customize > Light Theme > Edit CSS/HTMLand enter the following in theCommon > CSSsection:/* This will turn text to red in all static pages */ .dpg-page-content { color: red; } /* This will turn text to yellow in static page 13 */ html[data-dpg-page-id="13"] .dpg-page-content { color: yellow; }
To add a balloon, add [dpgb id=myBalloonId][/dpgb] to your topic text. For
example:
## Introduction [dpgb id=intro][/dpgb]
The balloon id must contain only [a-zA-z_]. Unless you know what you're doing, it should be unique to the page.
When adding a balloon to a heading, selecting the balloon will highlight both the heading and the following subsection.
To append a balloon to the page title, add {dpg-title-balloon}
anywhere in the page. The balloon id will be title.
At any time, if you need to see your website without DiscPage, use the
DiscPage On/Off item in the hamburger menu. This comes handy when
troubleshooting issues with tags or categories. When turning DiscPage off,
the hamburger menu turns red (see above).
Keyboard shortcut: alt+a
If you don't want static page topics to appear in /latest, use the
Suppress-Categories-From-Latest
plugin.
If you don't want static page topics to appear in digest emails, use the
digest suppress categories Discourse setting.
If you want to delete the "about" topic of the category ("Make Unlisted" in Discourse terms), see here.
To add a button allowing users to navigate through page revisions, add
{dpg-show-rev-button} anywhere in the page.
Use the dpg_displaypage DOM custom event on the <html> tag. For example,
you can add this code to a theme component's </head> section:
<script>
document.documentElement.addEventListener('dpg_displaypage', e => {
const pageData = e.detail
if (pageData.pageId === 19) {
$(pageData.node).find('.cooked').append('
<p>This paragraph has been dynamically added!</p>'
)
}
}, false);
</script>
To set a static page as the Discourse home page, use the discourse-home-page plugin.
You can customize your Discourse header with links pointing on static pages. To learn more about it, see Best way to customize the header and discourse-custom-header-links2.
-
discpage balloon categoryThis will set the specified category (for example: Orange Balloon) to all topics created through DiscPage balloons. This category will be hidden by DiscPage, so that users don't use it outside of static pages.
In fact, you can set multiple categories in here. Let's call PageCat the category of the static page the balloon belongs to. If there are more than one balloon category in this field, DiscPage will take the first one which is either a sibling of PageCat (same immediate parent) or the immediate parent of PageCat. If no such category is found, DiscPage will take the first category of the list. This feature allows to pair [static page category, balloon category], which is useful, for example, for multilingual forums or to set up static pages with different group permissions.
-
discpage never bump pagesIn Discourse, editing the last post of a topic bumps the topic. A DiscPage static page being usually the only post of a topic, any minor edit will bump it by default and force you to use the Reset Bump Date feature. The provided option disables the default behavior: editing a static page won't trigger a bump.
-
discpage hide sugg topicsThis will hide the "suggested topics" that are displayed at the bottom of topics created through DiscPage balloons.
At the moment, this project is released with minified source code only.