Baty.net

A blog about everything by Jack Baty

Adding an Edit link to Ghost posts

How I added a subtle link to edit the current page or post in Ghost.

Adding an Edit link to Ghost posts

When reading one of my posts in Ghost, it would be nice if there was a quick way to get to the control panel to make edits. I always make typos, but don't always catch them until later. Or I might be reading, say, the /now page and decide to update it. By default, this involves going into the control panel and browsing or searching for the post/page in order to make the edits.

I found a solution to this on Jonas Liljegren's blog. Here's my slightly modified version of their solution.

Add the following to the post.hbs template:

    <div id="pi-pos">
      <a href="/ghost/#/editor/post/{{post.id}}">π</a>
    </div>

Add a similar one to the page.hbs template:

    <div id="pi-pos">
      <a href="/ghost/#/editor/page/{{page.id}}">π</a>
    </div>

Then add some custom CSS:

    /* Backdoor edit link */
    #pi-pos {
      position: fixed;
      bottom: 1em;
      right: 1em;
    } 
    #pi-pos a {
      position: absolute;
      bottom: -1.6px;
      right: 3.2px;
      text-decoration: none;
      color: black;
      opacity: .2;
    }

Now, at the bottom right of every post and page, there's a subtle π link that takes me directly to that content in Ghost's control panel. I've already used it several times this morning.