Discourse Integration in Ease theme ( Not Working )

I am looking for help, please provide information about how to correctly add Discourse HTML snippet in post.hbs

I have been able to accomplish this with Casper theme however with EASE theme its very unclear.

Please look at the post.hbs code added with Discourse HTML Snippet

{{!< default}}

<div class="content-area">
    <main class="site-main">
        {{#post}}
            <article class="{{post_class}} single">
                {{> post-header tag="h1" show_meta=true single=true}}
                {{> post-media same_height=false with_caption=true}}
                <div class="post-content gh-content kg-canvas">
                    {{content}}
                </div>
                {{#if @custom.show_tags}}
                    {{> post-tags}}
                {{/if}}
		<section class = "article-comments gh-canvas">
<div id='discourse-comments'></div>

<script type="text/javascript">
  DiscourseEmbed = { discourseUrl: 'https://mydomain.com/',
                     discourseEmbedUrl: '{{url absolute="true"}}' };

  (function() {
    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
  })();
</script>	

		</section>
            </article>
        {{/post}}
        {{#if @custom.show_related_posts}}
            {{> related}}
        {{/if}}
        {{> comment}}
    </main>
</div>

I am sure I made some mistake. Please refer to the original code in post.hbs code below.

This is post.hbs code in EASE theme without Discourse HTML Snippet.

{{!< default}}

<div class="content-area">
    <main class="site-main">
        {{#post}}
            <article class="{{post_class}} single">
                {{> post-header tag="h1" show_meta=true single=true}}
                {{> post-media same_height=false with_caption=true}}
                <div class="post-content gh-content kg-canvas">
                    {{content}}
                </div>
                {{#if @custom.show_tags}}
                    {{> post-tags}}
                {{/if}}
            </article>
        {{/post}}
        {{#if @custom.show_related_posts}}
            {{> related}}
        {{/if}}
        {{> comment}}
    </main>
</div>```

What issue are you running into? There shouldn’t be anything significantly different between Ghost and Ease that prevent the embed from working. Are you able to share a link?

The issue is that Discourse can be easily integrated with Casper Theme by adding HTML Snippet in Casper Theme.

This article shows exactly code can be added but in Casper theme.

I am seeking help to learn where I can add HTML snippet in post.hbs for EASE Theme.

Both themes are different and have different post.hbs code.

This is post.hbs code for EASE Theme

{{!< default}}

<div class="content-area">
    <main class="site-main">
        {{#post}}
            <article class="{{post_class}} single">
                {{> post-header tag="h1" show_meta=true single=true}}
                {{> post-media same_height=false with_caption=true}}
                <div class="post-content gh-content kg-canvas">
                    {{content}}
                </div>
                {{#if @custom.show_tags}}
                    {{> post-tags}}
                {{/if}}
            </article>
        {{/post}}
        {{#if @custom.show_related_posts}}
            {{> related}}
        {{/if}}
        {{> comment}}
    </main>
</div>```

This is post.hbs for Casper Theme. Please check comment section in the code.

{{!< default}}

{{!-- The tag above means: insert everything in this file
into the {body} tag of the default.hbs template --}}


{{#post}}
{{!-- Everything inside the #post block pulls data from the post --}}

<main id="site-main" class="site-main">
    <article class="article {{post_class}} {{#match @custom.post_image_width "Full"}}image-full{{else match @custom.post_image_width "=" "Small"}}image-small{{/match}}">

        <header class="article-header gh-canvas">

            {{#if primary_tag}}
            <section class="article-tag">
                <a href="{{primary_tag.url}}">{{primary_tag.name}}</a>
            </section>
            {{/if}}

            <h1 class="article-title">{{title}}</h1>

            {{#if custom_excerpt}}
            <p class="article-excerpt">{{custom_excerpt}}</p>
            {{/if}}

            <div class="article-byline">
                <section class="article-byline-content">
                    <ul class="author-list">
                        {{#foreach authors}}
                        <li class="author-list-item">
                            {{#if profile_image}}
                            <a href="{{url}}" class="author-avatar">
                                <img class="author-profile-image" src="{{img_url profile_image size="xs"}}" alt="{{name}}" />
                            </a>
                            {{else}}
                            <a href="{{url}}" class="author-avatar author-profile-image">{{> "icons/avatar"}}</a>
                            {{/if}}
                        </li>
                        {{/foreach}}
                    </ul>
                    <div class="article-byline-meta">
                        <h4 class="author-name">{{authors}}</h4>
                        <div class="byline-meta-content">
                            <time class="byline-meta-date" datetime="{{date format="YYYY-MM-DD"}}">{{date}}</time>
                            <span class="byline-reading-time"><span class="bull">&bull;</span> {{reading_time}}</span>
                        </div>
                    </div>
                </section>
            </div>

            {{#if feature_image}}
            <figure class="article-image">
                {{!-- This is a responsive image, it loads different sizes depending on device
                https://medium.freecodecamp.org/a-guide-to-responsive-images-with-ready-to-use-templates-c400bd65c433 --}}
                <img
                    srcset="{{img_url feature_image size="s"}} 300w,
                            {{img_url feature_image size="m"}} 600w,
                            {{img_url feature_image size="l"}} 1000w,
                            {{img_url feature_image size="xl"}} 2000w"
                    sizes="(min-width: 1400px) 1400px, 92vw"
                    src="{{img_url feature_image size="xl"}}"
                    alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
                />
                {{#if feature_image_caption}}
                    <figcaption>{{feature_image_caption}}</figcaption>
                {{/if}}
            </figure>
            {{/if}}
        </header>

        <section class="gh-content gh-canvas">
            {{content}}
        </section>

        {{!--
        <section class="article-comments gh-canvas">
            If you want to embed comments, this is a good place to paste your code!
        </section>
        --}}

    </article>
</main>

{{!-- A signup call to action is displayed here, unless viewed as a logged-in member --}}
{{#match @custom.email_signup_for_logged_out_visitors "!=" "None"}}
{{#unless @member}}{{#if access}}
    <section class="footer-cta {{#match @custom.email_signup_for_logged_out_visitors "Bottom of post"}}cta-alt{{/match}}">
        <div class="inner">
            {{#if @custom.email_signup_text}}<h2>{{@custom.email_signup_text}}</h2>{{/if}}
            <a class="footer-cta-button" href="#/portal" data-portal>
                <div class="footer-cta-input">Enter your email</div>
                <span>Subscribe</span>
            </a>
            {{!-- ^ This looks like a form element, but it's just a link to Portal,
            making the form validation and submission much simpler. --}}
        </div>
    </section>
{{/if}}{{/unless}}
{{/match}}


{{!-- Read more links, just above the footer --}}
{{#if @custom.show_recent_posts}}
    {{!-- The {#get} helper below fetches some of the latest posts here
    so that people have something else to read when they finish this one.

    This query gets the latest 3 posts on the site, but adds a filter to
    exclude the post we're currently on from being included. --}}
    {{#get "posts" filter="id:-{{id}}" include="authors" limit="3" as |more_posts|}}

        {{#if more_posts}}
            <aside class="read-more-wrap">
                <div class="read-more inner">
                    {{#foreach more_posts}}
                        {{> "post-card"}}
                    {{/foreach}}
                </div>
            </aside>
        {{/if}}

    {{/get}}
{{/if}}

It would be helpful to learn where I can learn to add discourse HTML Snippet in post.hbs for Ease Theme

In Ease, in the partials folder, there’s a file called comment.hbs.

Open that file and uncomment it by removing the {{!-- at the beginning of the file and --}} at the end. Then replace the text “If you want to embed comments, this is a good place to do it!” with your Discourse code.

Let me know how it goes.

Thank you so much for your reply. I tried but it didn’t work.

<div class="comment-container">
    <div class="container">
        <div class="comment container medium">
<div id='discourse-comments'></div>

<script type="text/javascript">
  DiscourseEmbed = { discourseUrl: 'https://example.com',
                     discourseEmbedUrl: '{{url absolute="true"}}' };

  (function() {
    var d = document.createElement('script'); d.type = 'text/javascript'; d.async = true;
    d.src = DiscourseEmbed.discourseUrl + 'javascripts/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(d);
  })();
</script>
        </div>
    </div>
</div>```

Can you share a link to your site?

It works fine. I restarted web server. Thanks alot for help.

1 Like

The solution that you provided is accurate. Thank you so much.

1 Like