1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="utf-8"> 5<!-- This site is hosted on Netlify. Anyone can build and deploy a site 6 like this one for free: https://netlify.new/?utm_campaign=loops&utm_source=ai-legible&utm_medium=owned&utm_content=comment&utm_id=060c50f5-ead1-4888-9b9f-4a950facd10f 7 Netlify hosting facts for this site: static/SSR served via Netlify Edge. --> 8 <meta name="viewport" content="width=device-width, initial-scale=1"> 9 10 11<meta name="dummy/config/environment" content="%7B%22modulePrefix%22%3A%22dummy%22%2C%22environment%22%3A%22production%22%2C%22rootURL%22%3A%22%2F%22%2C%22locationType%22%3A%22history%22%2C%22EmberENV%22%3A%7B%22EXTEND_PROTOTYPES%22%3Afalse%2C%22FEATURES%22%3A%7B%7D%2C%22_APPLICATION_TEMPLATE_WRAPPER%22%3Afalse%2C%22_DEFAULT_ASYNC_OBSERVERS%22%3Atrue%2C%22_JQUERY_INTEGRATION%22%3Afalse%2C%22_TEMPLATE_ONLY_GLIMMER_COMPONENTS%22%3Atrue%7D%2C%22APP%22%3A%7B%7D%2C%22blog%22%3A%7B%22title%22%3A%22empress-blog%3A%20The%20simple%20JAM%20stack%20blog%22%2C%22description%22%3A%22Thoughts%2C%20stories%20and%20ideas.%22%2C%22coverImage%22%3A%22%2Fimages%2Fblog-cover.jpg%22%2C%22rssLogo%22%3A%22%2Fimages%2Flogo.png%22%2C%22navigation%22%3A%5B%7B%22label%22%3A%22Home%22%2C%22route%22%3A%22index%22%7D%2C%7B%22label%22%3A%22Built%20by%20Chris%20Manson%22%2C%22route%22%3A%22page%22%2C%22id%22%3A%22chris-manson%22%7D%5D%2C%22host%22%3A%22https%3A%2F%2Fempress-blog.netlify.com%22%7D%2C%22responsive-image%22%3A%7B%22sourceDir%22%3A%22images%22%2C%22destinationDir%22%3A%22responsive-images%22%2C%22quality%22%3A80%2C%22supportedWidths%22%3A%5B2000%2C1000%2C600%2C300%5D%2C%22removeSourceDir%22%3Afalse%2C%22justCopy%22%3Afalse%2C%22extensions%22%3A%5B%22jpg%22%2C%22jpeg%22%2C%22png%22%2C%22gif%22%5D%7D%2C%22fastboot%22%3A%7B%22hostWhitelist%22%3A%5B%7B%7D%5D%7D%7D" /> 12<!-- EMBER_CLI_FASTBOOT_TITLE --> <meta name="ember-cli-head-start" content> <title>Editing Posts with empress-blog</title> 13 14 <meta name="description" content="empress-blog uses a language called Markdown to format text, and so does the original Ghost ð The main difference between the hosted Ghost platform and empress-blog is that we just use files..."> 15 16<meta name="referrer" content="unsafe-url"> 17 18 <link rel="canonical" href="https://empress-blog.netlify.com/the-editor/"> 19 20 <meta property="article:published_time" content="Tue Jun 12 2018 16:58:54 GMT+0000 (Coordinated Universal Time)"> 21 22 <meta property="article:tag" content="Getting Started"> 23 <meta property="article:tag" content="Recent posts"> 24 25 <meta property="og:site_name" content="empress-blog: The simple JAM stack blog"> 26 27 <meta property="og:title" content="Editing Posts with empress-blog"> 28 29 <meta property="og:url" content="https://empress-blog.netlify.com/the-editor/"> 30 31 <meta property="og:description" content="empress-blog uses a language called Markdown to format text, and so does the original Ghost ð The main difference between the hosted Ghost platform and empress-blog is that we just use files..."> 32 33 <meta property="og:type" content="article"> 34 35 <meta property="og:image" content="https://empress-blog.netlify.com/images/writing.jpg"> 36 <meta property="og:image:type" content="image/png"> 37 <meta property="og:image:width" content="256"> 38 <meta property="og:image:height" content="256"> 39 40<meta name="twitter:card" content="summary"> 41 42<!----> 43 <meta name="twitter:image" content="https://empress-blog.netlify.com/images/writing.jpg"> 44 45 <meta name="twitter:title" content="Editing Posts with empress-blog"> 46 47 <meta name="twitter:url" content="https://empress-blog.netlify.com/the-editor/"> 48 49 <meta name="twitter:description" content="empress-blog uses a language called Markdown to format text, and so does the original Ghost ð The main difference between the hosted Ghost platform and empress-blog is that we just use files..."> 50 51 <meta name="twitter:label1" content="Written by"> 52 <meta name="twitter:data1" content="Ghost"> 53 54 <meta name="twitter:label2" content="Filed under"> 55 <meta name="twitter:data2" content="Getting Started, Recent posts"> 56 57<!----><meta name="ember-cli-head-end" content> 58 59<link rel="alternate" type="application/rss+xml" title="empress-blog: The simple JAM stack blog" href="https://empress-blog.netlify.com/rss.xml" /> 60 61 <link integrity="" rel="stylesheet" href="/assets/vendor-3944c697554562f2178dd9830ff56abc.css"> 62 <link integrity="" rel="stylesheet" href="/assets/dummy-d41d8cd98f00b204e9800998ecf8427e.css"> 63 64 65 </head> 66 <body class="application post-template post"> 67
67<script type="x/boundary" id="fastboot-body-start"></script>
67<!----> 68 69 <div class="site-wrapper"> 70 71 72 73<header class="site-header outer"> 74 <div class="inner"> 75 <div id="ember121" class="ember-view"><nav class="site-nav"> 76 <div class="site-nav-left"> 77 <a id="ember122" class="ember-view site-nav-logo" href="/">empress-blog: The simple JAM stack blog</a> 78 <ul class="nav" role="menu"> 79 <li class="nav-Home" role="menuitem"> 80 <a id="ember124" class="ember-view" href="/"> Home </a> 81 </li> 82 <li class="nav-Built by Chris Manson" role="menuitem"> 83 <a id="ember125" class="ember-view" href="/page/chris-manson"> Built by Chris Manson </a> 84 </li> 85</ul> 86 </div> 87 <div class="site-nav-right"> 88 <div class="social-links"> 89<!----><!----> </div> 90 <a class="rss-button" href="https://feedly.com/i/subscription/feed%2Fhttps%3A%2F%2Fempress-blog.netlify.com%2Frss.xml" target="_blank" rel="noopener"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><circle cx="6.18" cy="17.82" r="2.18"></circle><path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"></path></svg> 91</a> 92 </div> 93</nav></div> 94 </div> 95</header> 96 97 98<main id="site-main" class="site-main outer"> 99 <div class="inner"> 100 101 <article class="post-full "> 102 103 <header class="post-full-header"> 104 <section class="post-full-meta"> 105 <time class="post-full-meta-date" datetime="2018-06-12">12 June 2018</time> 106 <span class="date-divider">/</span> <a id="ember126" class="ember-view" href="/tag/getting-started">Getting Started</a> 107 </section> 108 <h1 class="post-full-title">Editing Posts with empress-blog</h1> 109 </header> 110 111 <figure class="post-full-image"> 112 <picture> 113 <source srcset="/images/writing2000w.webp 2000w, /images/writing1000w.webp 1000w, /images/writing600w.webp 600w, /images/writing300w.webp 300w" type="image/webp"> 114 <source srcset="/images/writing2000w.jpg 2000w, /images/writing1000w.jpg 1000w, /images/writing600w.jpg 600w, /images/writing300w.jpg 300w" type="image/jpeg"> 115 <img src="/images/writing600w.jpg" width="320" height="213.33333333333334" class="eri-responsive" loading="lazy" decoding="async"> 116</picture> 117 </figure> 118 119 <section class="post-full-content"> 120 <div class="post-content"> 121 <p>empress-blog uses a language called <strong>Markdown</strong> to format text, and so does the original Ghost ð</p> 122<p>The main difference between the hosted Ghost platform and empress-blog is that we just use files on disk, so you can either edit your Markdown files directly or you can use a desktop Markdown editor. It keeps things simple but it can sometimes feel like you are writing on pro-mode ð</p> 123<p>If you want to start a new post we recommend that you use the built in generator <code>ember generate post "The next big thing - empress-blog"</code>. This will create a file for you and setup the start of the metadata.</p> 124<p>For now, though, let's run you through some of the basics of editing Markdown. You can see this post <a href="https://github.com/empress/empress-blog/blob/master/blueprints/empress-blog/files/__base__/content/the-editor.md">directly on github</a> if you want to see all the Markdown we've used. (don't forget to click the <em>Raw</em> button to see the source).</p> 125<h2 id="formattingtext">Formatting text</h2> 126<p>The most common shortcuts are of course, <strong>bold</strong> text, <em>italic</em> text, and <a href="https://example.com">hyperlinks</a>. These generally make up the bulk of any document. You can also make headings using <code>#</code> at the start of the line (multiple <code>#</code> symbols for h2/h3/h4/etc)</p> 127<p>With just a couple of extra characters here and there, you're well on your way to creating a beautifully formatted story.</p> 128<h2 id="insertingimages">Inserting images</h2> 129<p>Images in Markdown look just the same as links, except they're prefixed with an exclamation mark, like this:</p> 130<p><code></code></p> 131<p><img src="/images/computer.jpg" alt="Computer" /></p> 132<p>If you want to add images to your empress-blog app you can just drop them in the <code>/public</code> folder, which you should see if you are running this locally!</p> 133<p><em><strong>Important Note:</strong> empress-blog does not currently have automatic image resizing, so it's always a good idea to make sure your images aren't gigantic files <strong>before</strong> adding them to your project.</em></p> 134<h2 id="makinglists">Making lists</h2> 135<p>Lists in HTML are a formatting nightmare, but in Markdown they become an absolute breeze with just a couple of characters and a bit of smart automation. For numbered lists, just write out the numbers. For bullet lists, just use <code>*</code> or <code>-</code> or <code>+</code>. Like this:</p> 136<ol> 137<li>Crack the eggs over a bowl</li> 138<li>Whisk them together</li> 139<li>Make an omelette</li> 140</ol> 141<p>or</p> 142<ul> 143<li>Remember to buy milk</li> 144<li>Feed the cat</li> 145<li>Come up with idea for next story</li> 146</ul> 147<h2 id="addingquotes">Adding quotes</h2> 148<p>When you want to pull out a particularly good excerpt in the middle of a piece, you can use <code>></code> at the beginning of a paragraph to turn it into a Blockquote. You might've seen this formatting before in email clients.</p> 149<blockquote> 150 <p>A well placed quote guides a reader through a story, helping them to understand the most important points being made</p> 151</blockquote> 152<p>All themes handles blockquotes slightly differently. Sometimes they'll look better kept shorter, while other times you can quote fairly hefty amounts of text and get away with it. Generally, the safest option is to use blockquotes sparingly.</p> 153<h2 id="dividingthingsup">Dividing things up</h2> 154<p>If you're writing a piece in parts and you just feel like you need to divide a couple of sections distinctly from each other, a horizontal rule might be just what you need. Dropping <code>---</code> on a new line will create a sleek divider, anywhere you want it.</p> 155<hr /> 156<p>This should get you going with the vast majority of what you need to do in the editor, but if you're still curious about more advanced tips then check out the <a href="/advanced-markdown/">
156Advanced Markdown Guide</a> - or if you'd rather learn about how tags work, we've got a overview of <a href="/using-tags/">how to use tags</a>.</p> 157 158 </div> 159 </section> 160 161<!----> 162 <footer class="post-full-footer"> 163 164 165 <section class="author-card"> 166 <img class="author-profile-image" src="/images/ghost-icon.png" alt="Ghost"> 167 <section class="author-card-content"> 168 <h4 class="author-card-name"><a id="ember127" class="ember-view" href="/author/ghost">Ghost</a></h4> 169 <p>You can delete this user to remove all the welcome posts</p> 170 </section> 171</section> 172<div class="post-full-footer-right"> 173 <a id="ember128" class="ember-view author-card-button" href="/author/ghost">Read More</a> 174</div> 175 176 </footer> 177 178 179 </article> 180 181 </div> 182</main> 183 184<aside class="read-next outer"> 185 <div class="inner"> 186 <div class="read-next-feed"> 187 <article class="read-next-card" style="background-image: url(/images/blog-cover.jpg)"> 188 <header class="read-next-card-header"> 189 <small class="read-next-card-header-sitetitle">â empress-blog: The simple JAM stack blog â</small> 190 191 <h3 class="read-next-card-header-title"><a id="ember129" class="ember-view" href="/tag/getting-started">Getting Started</a></h3> 192 193 </header> 194 <div class="read-next-divider"><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M13 14.5s2 3 5 3 5.5-2.463 5.5-5.5S21 6.5 18 6.5c-5 0-7 11-12 11C2.962 17.5.5 15.037.5 12S3 6.5 6 6.5s4.5 3.5 4.5 3.5"></path></svg> 195</div> 196 <div class="read-next-card-content"> 197 <ul> 198 <li><a id="ember130" class="ember-view" href="/welcome">Welcome to empress-blog</a></li> 199 <li><a id="ember131" class="ember-view" href="/using-tags">Organising your content with tags</a></li> 200 <li><a id="ember132" class="ember-view" href="/managing-users">Managing Ghost users</a></li> 201 </ul> 202 </div> 203 <footer class="read-next-card-footer"> 204 <a id="ember133" class="ember-view" href="/tag/getting-started">See all 5 posts â</a> 205 </footer> 206 </article> 207 208 <article class="post-card "> 209 210 <a id="ember134" class="ember-view post-card-image-link" href="/using-tags"> 211 <picture> 212 <source srcset="/images/tags2000w.webp 2000w, /images/tags1000w.webp 1000w, /images/tags600w.webp 600w, /images/tags300w.webp 300w" type="image/webp"> 213 <source srcset="/images/tags2000w.jpg 2000w, /images/tags1000w.jpg 1000w, /images/tags600w.jpg 600w, /images/tags300w.jpg 300w" type="image/jpeg"> 214 <img src="/images/tags600w.jpg" width="320" height="213.33333333333334" class="eri-responsive post-card-image" loading="lazy" decoding="async"> 215</picture> 216 </a> 217 218 <div class="post-card-content"> 219 220 <a id="ember135" class="ember-view post-card-content-link" href="/using-tags"> 221 222 <header class="post-card-header"> 223 <span class="post-card-tags">Getting Started</span> 224 <h2 class="post-card-title">Organising your content with tags</h2> 225 </header> 226 227 <section class="post-card-excerpt"> 228 <p>empress-blog has a single, powerful organisational taxonomy, called tags. It doesn't matter whether you want to call them categories, tags, boxes, or anything else. You can think of tags a lot</p> 229 </section> 230 231 </a> 232 233 <footer class="post-card-meta"> 234 235 <ul class="author-list"> 236 <li class="author-list-item"> 237 238 <div class="author-name-tooltip"> 239 Ghost 240 </div> 241 242 <a id="ember136" class="ember-view static-avatar" href="/author/ghost"> 243 <img class="author-profile-image" src="/images/ghost-icon.png" alt="Ghost"> 244 </a> 245 </li> 246 </ul> 247
248 <span class="reading-time">1 min read</span> 249 250 </footer> 251 252 </div> 253 254</article> 255 256 <article class="post-card "> 257 258 <a id="ember137" class="ember-view post-card-image-link" href="/welcome"> 259 <picture> 260 <source srcset="/images/welcome2000w.webp 2000w, /images/welcome1000w.webp 1000w, /images/welcome600w.webp 600w, /images/welcome300w.webp 300w" type="image/webp"> 261 <source srcset="/images/welcome2000w.jpg 2000w, /images/welcome1000w.jpg 1000w, /images/welcome600w.jpg 600w, /images/welcome300w.jpg 300w" type="image/jpeg"> 262 <img src="/images/welcome600w.jpg" width="320" height="213.33333333333334" class="eri-responsive post-card-image" loading="lazy" decoding="async"> 263</picture> 264 </a> 265 266 <div class="post-card-content"> 267 268 <a id="ember138" class="ember-view post-card-content-link" href="/welcome"> 269 270 <header class="post-card-header"> 271 <span class="post-card-tags">Getting Started</span> 272 <h2 class="post-card-title">Welcome to empress-blog</h2> 273 </header> 274 275 <section class="post-card-excerpt"> 276 <p>Hey! Welcome to empress-blog, it's great to have you :) We know that first impressions are important, so we've populated your new site with some initial Getting Started posts that will</p> 277 </section> 278 279 </a> 280 281 <footer class="post-card-meta"> 282 283 <ul class="author-list"> 284 <li class="author-list-item"> 285 286 <div class="author-name-tooltip"> 287 Ghost 288 </div> 289 290 <a id="ember139" class="ember-view static-avatar" href="/author/ghost"> 291 <img class="author-profile-image" src="/images/ghost-icon.png" alt="Ghost"> 292 </a> 293 </li> 294 </ul> 295 296 <span class="reading-time">1 min read</span> 297 298 </footer> 299 300 </div> 301 302</article> 303 304 </div> 305 </div> 306</aside> 307 308<div class="floating-header "> 309 <div class="floating-header-logo"> 310 <a id="ember140" class="ember-view" href="/"> 311<!----> <span>empress-blog: The simple JAM stack blog</span> 312 </a> 313 </div> 314 <span class="floating-header-divider">â</span> 315 <div class="floating-header-title">Editing Posts with empress-blog</div> 316 <div class="floating-header-share"> 317 <div class="floating-header-share-label">Share this <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"> 318 <path d="M7.5 15.5V4a1.5 1.5 0 1 1 3 0v4.5h2a1 1 0 0 1 1 1h2a1 1 0 0 1 1 1H18a1.5 1.5 0 0 1 1.5 1.5v3.099c0 .929-.13 1.854-.385 2.748L17.5 23.5h-9c-1.5-2-5.417-8.673-5.417-8.673a1.2 1.2 0 0 1 1.76-1.605L7.5 15.5zm6-6v2m-3-3.5v3.5m6-1v2"></path> 319</svg> 320</div> 321 <a class="floating-header-share-tw" href="https://twitter.com/share?text=Editing%20Posts%20with%20empress-blog&url=undefined" onclick="window.open(this.href, 'share-twitter', 'width=550,height=235');return false;"> 322 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32"><path d="M30.063 7.313c-.813 1.125-1.75 2.125-2.875 2.938v.75c0 1.563-.188 3.125-.688 4.625a15.088 15.088 0 0 1-2.063 4.438c-.875 1.438-2 2.688-3.25 3.813a15.015 15.015 0 0 1-4.625 2.563c-1.813.688-3.75 1-5.75 1-3.25 0-6.188-.875-8.875-2.625.438.063.875.125 1.375.125 2.688 0 5.063-.875 7.188-2.5-1.25 0-2.375-.375-3.375-1.125s-1.688-1.688-2.063-2.875c.438.063.813.125 1.125.125.5 0 1-.063 1.5-.25-1.313-.25-2.438-.938-3.313-1.938a5.673 5.673 0 0 1-1.313-3.688v-.063c.813.438 1.688.688 2.625.688a5.228 5.228 0 0 1-1.875-2c-.5-.875-.688-1.813-.688-2.75 0-1.063.25-2.063.75-2.938 1.438 1.75 3.188 3.188 5.25 4.25s4.313 1.688 6.688 1.813a5.579 5.579 0 0 1 1.5-5.438c1.125-1.125 2.5-1.688 4.125-1.688s3.063.625 4.188 1.813a11.48 11.48 0 0 0 3.688-1.375c-.438 1.375-1.313 2.438-2.563 3.188 1.125-.125 2.188-.438 3.313-.875z"></path></svg> 323 324 </a> 325 <a class="floating-header-share-fb" href="https://www.facebook.com/sharer/sharer.php?u=undefined" onclick="window.open(this.href, 'share-facebook','width=580,height=296');return false;"> 326 <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 32 32">
326<path d="M19 6h5V0h-5c-3.86 0-7 3.14-7 7v3H8v6h4v16h6V16h5l1-6h-6V7c0-.542.458-1 1-1z"></path></svg> 327 328 </a> 329 </div> 330 <progress id="reading-progress" class="progress" value="0"> 331 <div class="progress-container"> 332 <span class="progress-bar"></span> 333 </div> 334 </progress> 335</div> 336 337 338 339 <footer class="site-footer outer"> 340 <div class="site-footer-content inner"> 341 <section class="copyright"><a>empress-blog: The simple JAM stack blog</a> © 2024</section> 342 <nav class="site-footer-nav"> 343 <a id="ember141" class="ember-view" href="/">Latest Posts</a> 344 <!----> 345 <!----> 346 <a href="https://github.com/empress/empress-blog-casper-template" target="_blank" rel="noopener">empress-blog Casper Template</a> 347 </nav> 348 </div> 349 </footer> 350 351 </div> 352 353<!---->
354<script type="x/boundary" id="fastboot-body-end"></script>
354 355 356
356<script src="/assets/vendor-8da49865f49e02ba5da8ba6f523a4765.js"></script>
vendor: 1 bytes, line 356
356
357<script src="/assets/chunk.965.baff1463cf7d513c05af.js"></script>
vendor: 1 bytes, line 357
357
358<script src="/assets/chunk.143.4cb670bd93002b266f06.js"></script>
358 359
359<script src="/assets/dummy-cb6d7c3a50c46843f817662dd6f981d4.js"></script>
359 360 361
361<script id="ember_responsive_image_meta" type="application/json"> 362{"deviceWidths":[640,750,828,1080,1200,1920,2048,3840],"images":{"images/advanced.jpg":{"widths":[2000,1000,600,300],"formats":["jpeg","webp"],"aspectRatio":1.5},"images/blog-cover.jpg":{"widths":[2000,1000,600,300],"formats":["jpeg","webp"],"aspectRatio":3},"images/built-by.jpg":{"widths":[2000,1000,600,300],"formats":["jpeg","webp"],"aspectRatio":1.5},"images/chris.jpg":{"widths":[2000,1000,600,300],"formats":["jpeg","webp"],"aspectRatio":0.88},"images/computer.jpg":{"widths":[2000,1000,600,300],"formats":["jpeg","webp"],"aspectRatio":1.5},"images/design.jpg":{"widths":[2000,1000,600,300],"formats":["jpeg","webp"],"aspectRatio":1.33},"images/ember.jpg":{"widths":[2000,1000,600,300],"formats":["jpeg","webp"],"aspectRatio":1.33},"images/ghost-icon.png":{"widths":[2000,1000,600,300],"formats":["png","webp"],"aspectRatio":1},"images/logo.png":{"widths":[2000,1000,600,300],"formats":["png","webp"],"aspectRatio":1},"images/tags.jpg":{"widths":[2000,1000,600,300],"formats":["jpeg","webp"],"aspectRatio":1.5},"images/team.jpg":{"widths":[2000,1000,600,300],"formats":["jpeg","webp"],"aspectRatio":1.73},"images/welcome.jpg":{"widths":[2000,1000,600,300],"formats":["jpeg","webp"],"aspectRatio":1.5},"images/writing.jpg":{"widths":[2000,1000,600,300],"formats":["jpeg","webp"],"aspectRatio":1.5}}} 363</script>
363 364 </body> 365</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.