Customize ghost blog with code injection

frontend

That’s why I like dynamic blog system but not static blog system. It’s easy to change post content & blog config on the fly without recompilation. So let’s see what we can do with the code injection function provided by ghost.

Customize css style

We can customize blog css style by inject <style> in header or footer. If it’s a static system, we need to change the css style file on the server. BTW, I hope that ghost can also allow us to change the hbs file on the fly. So that we can customize every part of the blog on the fly. My blog is based on the alto theme. I don’t like the quote style of the theme. The quote style indents the paragraph too much with big font size. So I injected below style to change the blockquote and also the strange author image style after post title.

<style>
blockquote {
    border-left: 4px solid #3897D3;
    font-weight: unset;
    line-height: unset;
    font-size: 17px;
    padding-left: 1rem;
    margin: 1rem 0;
}

.post-author-image {
    width: 100%;
    height: 100%;
}
</style>

Add google analytics

Just like static blog system, we can integrate with google analysis if we add the js script with track id to every page. Thanks to the code inject function on portal, we can also add js script easily on the header part as below:

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxx"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-xxxxx');
</script>

Add code highlight

There’s an official guide for this. It injects code highlight css from header and javascript from footer.

Support me