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.
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
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.
<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!