mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-12 08:37:25 +02:00
33 lines
No EOL
8.9 KiB
HTML
33 lines
No EOL
8.9 KiB
HTML
<html><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/><title>Adding a Blog · Docusaurus</title><meta name="viewport" content="width=device-width"/><meta property="og:title" content="Adding a Blog · Docusaurus"/><meta property="og:type" content="website"/><meta property="og:url" content="https://docusaurus.io/index.html"/><meta property="og:description" content="## Initial Setup"/><meta name="robots" content="noindex"/><link rel="shortcut icon" href="/img/docusaurus.ico"/><link rel="stylesheet" href="/css/main.css"/><script async="" defer="" src="https://buttons.github.io/buttons.js"></script></head><body class="sideNavVisible"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/"><img src="/img/docusaurus.svg"/><h2>Docusaurus</h2></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li><a href="/docs/installation.html" target="_self">Docs</a></li><li><a href="/en/help.html" target="_self">Help</a></li><li><a href="https://github.com/facebookexperimental/docusaurus" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><i></i></div><h2><i>›</i><span>Guides</span></h2></div><div class="navGroups"><div class="navGroup navGroupActive"><h3>Getting Started</h3><ul><li class="navListItem"><a class="navItem" href="/docs/installation.html#content">Installation</a></li><li class="navListItem"><a class="navItem" href="/docs/site-preparation.html#content">Site Preparation</a></li><li class="navListItem"><a class="navItem" href="/docs/site-creation.html#content">Creating your site</a></li></ul></div><div class="navGroup navGroupActive"><h3>Guides</h3><ul><li class="navListItem"><a class="navItem" href="/docs/custom-pages.html#content">Custom Pages</a></li><li class="navListItem"><a class="navItem" href="/docs/navigation.html#content">Navigation and Sidebars</a></li><li class="navListItem navListItemActive"><a class="navItem navItemActive" href="/docs/blog.html#content">Adding a Blog</a></li><li class="navListItem"><a class="navItem" href="/docs/translation.html#content">Translations</a></li><li class="navListItem"><a class="navItem" href="/docs/search.html#content">Enabling Search</a></li><li class="navListItem"><a class="navItem" href="/docs/versioning.html#content">Versioning</a></li></ul></div><div class="navGroup navGroupActive"><h3>API</h3><ul><li class="navListItem"><a class="navItem" href="/docs/commands.html#content">CLI Commands</a></li><li class="navListItem"><a class="navItem" href="/docs/api-pages.html#content">Pages and Styles</a></li><li class="navListItem"><a class="navItem" href="/docs/site-config.html#content">siteConfig.js</a></li><li class="navListItem"><a class="navItem" href="/docs/doc-markdown.html#content">Markdown Features</a></li></ul></div></div></section></div><script>
|
||
var toggler = document.getElementById('navToggler');
|
||
var nav = document.getElementById('docsNav');
|
||
toggler.onclick = function() {
|
||
nav.classList.toggle('docsSliderActive');
|
||
};
|
||
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebookexperimental/docusaurus/edit/master/docs/guides-blog.md" target="_blank">Edit this Doc</a><h1>Adding a Blog</h1></header><article><div><h2><a class="anchor" name="initial-setup"></a>Initial Setup <a class="hash-link" href="#initial-setup">#</a></h2><p>To setup your site's blog, start by creating a <code>blog</code> folder within your repo's <code>website</code> directory.</p><p>Then, add a header link to your blog within <code>siteConfig.js</code>:</p><pre class="prism language-javascript">headerLinks<span class="token punctuation">:</span> <span class="token punctuation">[</span>
|
||
<span class="token operator">...</span>
|
||
<span class="token punctuation">{</span>blog<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> label<span class="token punctuation">:</span> <span class="token string">'Blog'</span><span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token operator">...</span>
|
||
<span class="token punctuation">]</span></pre><h2><a class="anchor" name="adding-posts"></a>Adding Posts <a class="hash-link" href="#adding-posts">#</a></h2><p>To publish in the blog, create a file within the blog folder with a formatted name of <code>YYYY-MM-DD-My-Blog-Post-Title.md</code>. The post date is extracted from the file name.</p><p>For example, at <code>website/blog/2017-08-18-Introducing-Docusaurus.md</code>:</p><pre class="prism language-javascript"><span class="token operator">--</span><span class="token operator">-</span>
|
||
author<span class="token punctuation">:</span> Frank Li
|
||
authorURL<span class="token punctuation">:</span> https<span class="token punctuation">:</span><span class="token operator">/</span><span class="token operator">/</span>twitter<span class="token punctuation">.</span>com<span class="token operator">/</span>foobarbaz
|
||
authorFBID<span class="token punctuation">:</span> <span class="token number">503283835</span>
|
||
title<span class="token punctuation">:</span> Introducing Docusaurus
|
||
<span class="token operator">--</span><span class="token operator">-</span>
|
||
|
||
Lorem Ipusm<span class="token punctuation">.</span><span class="token punctuation">.</span></pre><h2><a class="anchor" name="header-options"></a>Header Options <a class="hash-link" href="#header-options">#</a></h2><p>The only required field is <code>title</code>; however, we provide options to add author information to your blog post as well.</p><ul><li><code>author</code> - The text label of the author byline.</li><li><code>authorURL</code> - The url associated with the author. This could be a Twitter, GitHub, Facebook account, etc.</li><li><code>authorFBID</code> - The Facebook ID that is used to extract the profile picture.</li><li><code>title</code> - The blog post title.</li></ul><h2><a class="anchor" name="summary-truncation"></a>Summary Truncation <a class="hash-link" href="#summary-truncation">#</a></h2><p>Use the <code><!--truncate--></code> marker in your blog post to represent what will be shown as the summary when viewing all blog published blog posts. Anything above <code><!--truncate--></code> will be part of the summary. For example:</p><pre class="prism language-javascript"><span class="token operator">--</span><span class="token operator">-</span>
|
||
title<span class="token punctuation">:</span> Truncation Exmaple
|
||
<span class="token operator">--</span><span class="token operator">-</span>
|
||
|
||
All <span class="token keyword">this</span> will be part <span class="token keyword">of</span> the blog post summary<span class="token punctuation">.</span>
|
||
|
||
Even <span class="token keyword">this</span><span class="token punctuation">.</span>
|
||
|
||
<span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span>truncate<span class="token operator">--</span><span class="token operator">></span>
|
||
|
||
But anything <span class="token keyword">from</span> here on down will not be<span class="token punctuation">.</span>
|
||
|
||
Not <span class="token keyword">this</span><span class="token punctuation">.</span>
|
||
|
||
Or <span class="token keyword">this</span><span class="token punctuation">.</span></pre></div></article></div><div class="docs-prevnext"><a class="docs-prev button" href="navigation.html#content">← Previous</a><a class="docs-next button" href="translation.html#content">Next →</a></div></div></div></div><footer class="nav-footer" id="footer"><section class="sitemap"><a href="/" class="nav-home"><img src="/img/docusaurus_monochrome.svg" alt="Docusaurus" width="66" height="58"/></a><div><h5>Docs</h5><a href="
|
||
/docs/installation.html">Getting Started</a></div><div><h5>Community</h5><a href="/en/users.html">User Showcase</a></div><div><h5>More</h5><a href="https://github.com/facebookexperimental/docusaurus">GitHub</a><a class="github-button" href="https://github.com/facebookexperimental/docusaurus" data-icon="octicon-star" data-count-href="/facebookexperimental/docusaurus/stargazers" data-count-api="/repos/facebookexperimental/docusaurus#stargazers_count" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Star</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2017 Facebook Inc.</section></footer></div></body></html> |