Page Publishing

[sbernhard (Bernhard Suttner)]

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.

[Krischan]

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?

[reclaimedpress]

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

[MrDavis97 (Miles Davis)]

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

[lhkjacky (Jacky)]

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.

[rsmithlal (Robert Smith)]

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

[hellekin]

You can alter styling per the original post: Page Publishing

[rsmithlal (Robert Smith)]

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.

[hellekin]

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?

[cokestroke (Clement Oke)]

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

[JQ331]

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.)

[RGJ (Richard - Communiteq)]

@JQ331

Is there a way to add jquery or javascript to the page?

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

@RGJ

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

[hellekin]

Gibt es eine bevorzugte Methode, um von der veröffentlichten Seite auf den ursprünglichen Beitrag zurückzuverlinken?

Ich finde mich oft dazu bereit, dies zu tun, um Antworten von Lesern zu fördern und gleichzeitig die Kontrolle über den Stil der schreibgeschützten, veröffentlichten Seite zu behalten. Ich habe verschiedene Wege ausprobiert, einschließlich der Verlinkung zum Thema prominent oder einfach mit einem „Diskutieren“-Link.

Vielleicht könnte eine Option zum Hinzufügen eines Diskutieren-Buttons, der jederzeit sichtbar bleibt (aber dennoch mit CSS modifizierbar ist), funktionieren. Hat jemand bereits einen solchen CSS-Trick implementiert?

[lisandro_iaffar]

Je nach Art der Seite füge ich einen Link ein, wo es passt. Manchmal oben, wie hier:

Manchmal unten, wie hier:

Sie können einen Button “simulieren”, indem Sie CSS für ein bestimmtes Tag codieren, wie ich es für die Kopfzeile dieser Kategorie getan habe:

https://foro.enunionylibertad.com/c/uni2-cordoba/6

Text:

Bürger mit der Überzeugung, dass die Argentinische Republik ein besserer Ort sein kann, muss und wird sein, wenn wir alle gemeinsam für die Freiheit arbeiten.
    [**Mitgliedschaft**](https://foro.enunionylibertad.com/t/formulario-de-pre-afiliacion/92)

(Der wichtige Teil sind die <mark>-Tags)

CSS für die besagten <mark>-Tags:

/* Code zum ÄNDERN des "mark"-Tags-Renderings in etwas, das wie eine "Menüleiste" aussieht */
mark {
  display: inline-block;
  background-color: #E1E1E1 !important;
  color: black;
  border-radius: 20px !important;
  padding-top: 5px;
  padding-bottom: 5px;
}

[denvergeeks]

Eine Alternative zur Seitenveröffentlichung – eine weitere Methode besteht darin, CSS zu verwenden, um unerwünschte Elemente in einem regulären Thema-Beitrag zu entfernen, während die gesamte Funktionalität (d. h. Javascripts in installierten Theme-Komponenten und CSS-Styling usw.) erhalten bleibt.

Tags im Komponisten können verwendet werden, um eine bestimmte Formatierung selektiv auf einen bestimmten Thema-Beitrag anzuwenden.

Auf meiner Website erreiche ich dies beispielsweise, indem ich das folgende CSS in das CSS meines Themas im Tab Common einfüge:

/********************** DINGE AUS DEM LAYOUT MIT TAGS ENTFERNEN *************** /

.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;
    }
}

Dann erstelle ich Tags, die ich selektiv auf Thema-Beiträge anwenden kann und die den CSS-Selektoren im obigen Code entsprechen…

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

---

Hier sind also die beiden verschiedenen Versionen desselben Thema-Beitrags…

Vorher (keine Tags angewendet):

Nachher (alle Tags angewendet) – was ich auch als iFrame in andere Beiträge auf meiner Website einbetten kann :

[Richie (Richie Rich)]

Wow

Das ist wirklich cooles Out-of-the-Box-Denken

[denvergeeks]

Vielen Dank, @Richie!! Out-of-the-Box ist meine ganze Welt!

[Canapin (Coin-coin le Canapin)]

In Ihrem Code gibt es einen Tippfehler, ein doppeltes Semikolon:

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

Außerdem,

@denvergeeks

Nach (Alle Tags angewendet)

Haben Sie vergessen, Ihr Bild zu posten? Es sei denn, die Nach-Version Ihrer Seite ist nur Musik

---

Ich habe ein wenig mit Ihrem Code gespielt und das ist einfach brillant!

Wir könnten einige Ratschläge hinzufügen, wie man diesen Trick je nach Bedarf anwendet.

• Ihre Themen könnten geschlossen werden, um zu verhindern, dass Leute die CSS-Regeln umgehen und darauf antworten.

• Ihre Themen könnten nicht aufgeführt werden, um keine Unordnung in den Themenlisten zu verursachen oder in den Suchergebnissen zu erscheinen.

• Die Tags könnten in einer Tag-Gruppe sein, die für normale Benutzer unsichtbar ist, um Unordnung in den Tag-Listen zu vermeiden.

• Sie könnten einige Elemente ausblenden, die nur normale Benutzer, aber nicht den Administrator sehen (wie das Beitragsmenü).

Das ist mir nur schnell eingefallen, aber ich nehme an, es gibt noch andere Dinge, über die man nachdenken könnte.

[denvergeeks]

Danke @Canapin Ich habe die Tippfehler im Code behoben.

Kategorien und Unterkategorien können auch in CSS verwendet werden, indem category- verwendet wird.

z.B. …

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

Ich verwende diesen Trick auch ausgiebig auf meiner Website, um Inhalte und Einbettungen im laufenden Betrieb innerhalb des Komponisten zu gestalten…

Custom css inside a post / adding custom classes

Styles/classes are stripped out, but you can use data-theme-* attributes to target things in posts: <div data-theme-bot> Content here </div> For example, this paragraph is wrapped in a data-theme-bot div And then in a theme, target it like: div[data-theme-bot] { background-color: red; }

Ich habe einen Bereich auf meiner Website, in dem ich meine Entwicklungen dokumentiere (hauptsächlich damit mein zukünftiges Ich sich daran erinnern und finden kann, was ich bereits getan habe, damit ich nicht weiter meine eigenen Räder neu erfinde!) Aber jeder ist herzlich eingeladen, diese Kategorie zu besuchen und/oder zu abonnieren, wenn Sie möchten…

Site Development