Really quite nice for a personal/professional blog

Hi

I have been using Ghost for a new personal/professional web presence, importing quite a bit of legacy content from a WordPress blog. Overall I have enjoyed the experience. I think the membership is a useful feature (during peak blogging years, I used to send out a monthly digest from the legacy blog) although appreciate that some don’t want it. I also appreciate the spareness of Ghost. Although as I note here, my current technical capacities mean that I am limited in what I can do myself. Anyway, I thought some folks might be interested in my (rather long) reflection on starting a new web presence with Ghost. I use the Krabi theme (well-supported) on Ghost(Pro). (I did share the post with Support before publishing.)

6 Likes

Thanks for taking the time to write this up, Lorcan. Really interesting and educational read for anyone tinkering with Ghost.

1 Like

Thanks for kind note :slight_smile:

I thought somebody might read the post and offer a suggestion for removing the white box where there is no TOC (as in example below) … :slight_smile:

I also did some styling, placing [TOC] in the white-box widget characteristic of the theme. […] Also, you may notice that if there are no headings in the post, the white TOC box continues to appear but is empty. The logic of what I need to do to prevent that is obvious (has no heading, do not include TOC) but after a few guesses at the syntax I moved on.

@lorcand I suppose there might be some kind of JS way to detect if there are any H1s or H2 etc. within a page’s .c-content area and which you could easily just drop into your site’s code injection footer, but I don’t know JS so I can’t help you there.

Alternatively, the way I remove the TOC section on my site when I don’t want it there is to integrate a {{#has}} helper. Depending on if you have fewer posts that utilise TOC functionality or not, you can create either the internal tag #yes-TOC or #no-TOC and then apply those to the relevant posts. Then in the portion of your theme where you call the TOC itself, wrap that in

{{#has tag="#yes-TOC"}}
    <div class="toc"></div>
{{/has}}

or on the other hand

{{^has tag="#no-TOC"}}
    <div class="toc"></div>
{{/has}}

You may have to bring the {{#has}} helper one level higher to wrap around the
<div class="u-bg-white u-border u-border-radius u-p-32">...</div> portion, from what I see on your site.

Ah … thanks. Yes, this would work if I were doing things prospectively. My issue is that I have imported 1.9K posts from a legacy blog … many don’t have headings and many that do don’t have them marked up as headings. So, the script is running and finding no headings to populate it. I could do what you suggest with all the legacy posts (which all have a hidden tag applied before I imported them so as I could generate the collection on it) but then the ones I have retrospectively added headings to or which have headings would not generate TOC.

Hi, thank you for sharing!
Quick feedback: it seems a wall of text is certain parts (eg: The learning curve is in the wrong place)

I have changed the way I do this and partially solved the issue. I have moved the classes doing the box out of the theme. And then styled TOC, Toc-list, etc, in code injection to give a similar look. I do have an issue that in legacy posts with headings, WordPress did not create IDs. So, the navigation from the TOC does not work. Something to think about on another day :slight_smile: