How to Preview a Blog Post with Drafts
2020-11-14 18:36:03
I’ve been writing my articles in the text editor Drafts for a few years now. I really enjoy it because of its versatility. You can use Drafts solely for incredibly fast text input, or you can make it as complicated as you want by creating complex actions that can run Javascript or access an API or crazy filters that only display certain drafts. It supports several syntaxes such as Markdown which is what I like to use. I could talk so much more about Drafts' capabilities, but I wanted to highlight how to use one of its best features: Advanced HTML Previews.
Advanced HTML Previews
Advanced HTML Previews enables you to create a custom template that mimics your own website or app in order to preview how your drafts will look. That’s straight up sick. This will help you see if anything needs to be tweaked before posting.
The Process
You can configure your template with the same exact CSS, Javascript, and images your website uses; and just like a website, this can be achieved either through CDNs/URLs or local iCloud Drive filepaths.
If you choose the iCloud Drive approach, you first need to put all the files into iCloud Drive/Drafts/Library/Previews. These files can be organized into subfolders if you’d like. Then you need to create the actual HTML template file and put that in iCloud Drive/Drafts/Library/Templates.
To make my template file I copied the appropriate HTML from all of the Blade files that I use to display a post and pasted that in. I changed the filepath of my stylesheet to ../Previews/app.css. Then in my app.css file that I placed in the Previews directory, I changed the paths of the fonts (url("John_Joe/Slim_Joe.otf") and images (url("bloganueva-header-square-separate.png")) so they can be properly referenced inside of iCloud Drive.
The next step is inserting the proper Drafts tags into the template.
<h1>%%[[title]]%%</h1>
<h6>[[created|%m-%d-%Y %H:%M:%S]]</h6>
<img src="../Previews/drafts.jpeg">
%%[[body]]%%
<em><h6>Updated at: [[modified|%m-%d-%Y %H:%M:%S]]</h6></em>
Available tags are listed in the documentation, but the ones that I used in my template are shown in above snippet between double brackets ([[]]). You will also see that I have double percent signs (%%) surrounding the title tag and body tag. These just tell Drafts to convert my Markdown into HTML. If you don't use them the preview will display the draft in plain text.
That was really it! Once you open the preview, choose your newly created template at the bottom of the window. It took me a few tries to get the paths correct, but it wasn't a big deal. My template looks just like my live website. Links, code, buttons, everything. I'm really excited to use this feature for all of my future posts! If you're looking for a powerful text editor, Drafts could be the one for you!
