Adding an comments and an About page to a Blog site

Hi,
These are probably embarassingly simple questions, sorry...

I am using Grav for a simple personal blog site. I have started with the blog skeleton and I love the antimatter theme out of the box, I will just be disabling some of the sidebar plugins and adding Disqus comments and an About page and I will be happy.

1st question, I have created my Disqus account and got my shortname. I will be using the JSComments plugin and it looks like I have to add a piece of twig code to my pages. Can I just check, should I be adding that twig snippet to the item.md pages or the blog.md page?

I'm guessing I add it to the item.md pages so that Disqus adds comments per blog post. Never used Disqus before though so just wanted to check. I assume Disqus will track different comments for each blog item?

2nd question, I would like to add an About page that contains an author bio, but I would like this page to still look/feel like part of the blog site. I have tried adding a new page default.md in a folder called 02.about and it showed up OK in the site navigation but when I viewed the About page the site banner disappeared and just showed a very plain white page. Is there a was to show a simple text page but with the same banner and layout as the main blog page?

Thanks,

Charles

Hello you are welcome :)
1) For add the jscomments in your scenario you need to edit the theme (best choice use a child theme) into partials/blog_item.html.twig file with this example code:

{{ jscomments('disqus', { shortname: 'your_short_name' }) }}

2) Im not sure understand your question then the best waiting devs :)

For JSComments if you have any questions can reply here or create a dedicated thread.

Read this blog post on Theme Inheritance to see how easy it is to create your own child theme based on a parent such as Antimatter. I think the JSComments Readme has more details about how to use it and enable it per-page.

Regarding your second question, the default.md uses the default.html.twig template file in the theme to render. The blog pages use blog.html.twig and item.html.twig to render. If you want your about page to have a layout similar to a blog, you can create your own template based on blog.html.twig, perhaps called about.html.twig that displays a header in a similar way, but without the sidebar and looping over content items.

Hi, thanks for the replies. I have got the theme inheritance and Disqus comments working great now, but still struggling to create a nice about page.
I copied the blog.html.twig and renamed to about.html.twig but I'm not sure exactly which bits are required. I thought I had only removed the part that showed the child items but I'm still getting a plain white page with no banner.

Looks like it is picking up my new about.html.twig template, but the template is referring to the blog media images, etc and it can't find any of that, so the top banner and navigation is broken.

It's just referring to a header image that is in the blog/ folder. You would need one in your about/ folder.

Hi,
I added {{ jscomments('disqus', { shortname: 'your_short_name' }) }} in the partials/blog_item.html.twig. A shortname is also created im my disqus account. However, I see only "Blog Comments Powered by Disqus" an the end of my blog item. What did I miss here?

Sorry i'm not familiar with that plugin. however there is another option.

On the getgrav.org site, I have a simple header variable disqus: true, then I have a check in the blog item template:

{% if page.header.disqus %}
            {% include 'partials/disqus.html.twig' %}
{% endif %}

Then in my partials/disqus.html.twig I have:

<div id="disqus_thread"></div>
<script>
var disqus_config = function () {
this.page.url = 'https://getgrav.org{{ page.route() }}';
this.page.identifier = '{{ page.route()|md5 }}';
};

(function() {
var d = document, s = d.createElement('script');
s.src = '//getgrav.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date()); 
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>

Of course you will have to just update this code with information appropriate for your site. Most of this is copied directly from the code that Disqus provide, I just added some getgrav.org specific settings and references to generate an appropriate identifier

Hi @whytwo,

I really don't know whether setting variables via jscomments('disqus', ...) ever worked. I will test it tomorrow and provide a new release, if necessary. At least you can try to use a workaround. Setup your disqus account in the JSComments plugins settings page (keep active: true) and just insert

{{ jscomments('disqus') }}

in your template. Otherwise use @rhukster's code if you like :-)

Just insert {{ jscomments('disqus') }} in my twig template works! without shortname parameter and changing anything else. This plugins rocks. It's so simple. Thanks a lotttt Sommerregen for the hint :).
Thank you also for rhukster for the another alternative code.

@whytwo Thanks! :-) I have updated the code. In beta.3 {{ jscomments('disqus', { shortname: 'your_short_name' }) }} works. FYI: I think it is better you provide your Disqus settings in the JSComments page settings and further select there provider: 'disqus'. In your theme you thus have to add something like that

{% if config.plugins.jscomments.enabled %}
  {{ jscomments() }}
{% endif %}

then :-)