docusaurus/docs/en/1.0.13/blog.html
Website Deployment Script f37197db13 Deploy website
Deploy website version based on b577f60d4a
2018-10-14 22:11:14 +00:00

138 lines
No EOL
21 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Adding a Blog · Docusaurus</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="## Initial Setup"/><meta name="docsearch:version" content="1.0.13"/><meta name="docsearch:language" content="en"/><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 property="og:image" content="https://docusaurus.io/img/docusaurus.png"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://docusaurus.io/img/docusaurus.png"/><link rel="shortcut icon" href="/img/docusaurus.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://docusaurus.io/blog/atom.xml" title="Docusaurus Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://docusaurus.io/blog/feed.xml" title="Docusaurus Blog RSS Feed"/><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-44373548-31', 'auto');
ga('send', 'pageview');
</script><link rel="stylesheet" href="/css/code-blocks-buttons.css"/><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js"></script><script type="text/javascript" src="/js/code-blocks-buttons.js"></script><script src="https://unpkg.com/vanilla-back-to-top@7.1.14/dist/vanilla-back-to-top.min.js"></script><script>
document.addEventListener('DOMContentLoaded', function() {
addBackToTop(
{"zIndex":100}
)
});
</script><link rel="stylesheet" href="/css/prism.css"/><link rel="stylesheet" href="/css/main.css"/></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/en"><img class="logo" src="/img/docusaurus.svg" alt="Docusaurus"/><h2 class="headerTitleWithLogo">Docusaurus</h2></a><a href="/en/versions"><h3>1.0.13</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/docs/en/1.0.13/installation" target="_self">Docs</a></li><li class=""><a href="/en/help" target="_self">Help</a></li><li class=""><a href="/en/users" target="_self">Users</a></li><li class=""><a href="/en/about-slash" target="_self">About /</a></li><li class=""><a href="/blog/" target="_self">Blog</a></li><li class=""><a href="https://github.com/facebook/docusaurus" target="_self">GitHub</a></li><span><li><a id="languages-menu" href="#"><img class="languages-icon" src="/img/language.svg" alt="Languages icon"/>English</a><div id="languages-dropdown" class="hide"><ul id="languages-dropdown-items"><li><a href="/docs/es-ES/1.0.13/blog">Español</a></li><li><a href="/docs/ro/1.0.13/blog">Română</a></li><li><a href="/docs/tr/1.0.13/blog">Türkçe</a></li><li><a href="/docs/zh-CN/1.0.13/blog">简体中文</a></li><li><a href="https://crowdin.com/project/docusaurus" target="_blank" rel="noreferrer noopener">Help Us Translate</a></li></ul></div></li><script>
const languagesMenuItem = document.getElementById("languages-menu");
const languagesDropDown = document.getElementById("languages-dropdown");
languagesMenuItem.addEventListener("click", function(event) {
event.preventDefault();
if (languagesDropDown.className == "hide") {
languagesDropDown.className = "visible";
} else {
languagesDropDown.className = "hide";
}
});
</script></span><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></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 class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle">Getting Started</h3><ul><li class="navListItem"><a class="navItem" href="/docs/en/1.0.13/installation">Installation</a></li><li class="navListItem"><a class="navItem" href="/docs/en/1.0.13/site-preparation">Site Preparation</a></li><li class="navListItem"><a class="navItem" href="/docs/en/1.0.13/site-creation">Creating your site</a></li><li class="navListItem"><a class="navItem" href="/docs/en/1.0.13/publishing">Publishing your site</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Guides</h3><ul><li class="navListItem navListItemActive"><a class="navItem" href="/docs/en/1.0.13/blog">Adding a Blog</a></li><li class="navListItem"><a class="navItem" href="/docs/en/1.0.13/custom-pages">Custom Pages</a></li><li class="navListItem"><a class="navItem" href="/docs/en/1.0.13/search">Enabling Search</a></li><li class="navListItem"><a class="navItem" href="/docs/en/1.0.13/navigation">Navigation and Sidebars</a></li><li class="navListItem"><a class="navItem" href="/docs/en/1.0.13/translation">Translations &amp; Localization</a></li><li class="navListItem"><a class="navItem" href="/docs/en/1.0.13/versioning">Versioning</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">API</h3><ul><li class="navListItem"><a class="navItem" href="/docs/en/1.0.13/commands">CLI Commands</a></li><li class="navListItem"><a class="navItem" href="/docs/en/1.0.13/doc-markdown">Markdown Features</a></li><li class="navListItem"><a class="navItem" href="/docs/en/1.0.13/api-pages">Pages and Styles</a></li><li class="navListItem"><a class="navItem" href="/docs/en/1.0.13/site-config">siteConfig.js</a></li></ul></div></div></section></div><script>
document.addEventListener('DOMContentLoaded', function() {
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
createToggler('#tocToggler', 'body', 'tocActive');
const headings = document.querySelector('.toc-headings');
headings && headings.addEventListener('click', function(event) {
if (event.target.tagName === 'A') {
document.body.classList.remove('tocActive');
}
}, false);
function createToggler(togglerSelector, targetSelector, className) {
var toggler = document.querySelector(togglerSelector);
var target = document.querySelector(targetSelector);
if (!toggler) {
return;
}
toggler.onclick = function(event) {
event.preventDefault();
target.classList.toggle(className);
};
}
});
</script></nav></div><div class="container mainContainer docMainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/docusaurus/edit/master/docs/guides-blog.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 class="postHeaderTitle">Adding a Blog</h1></header><article><div><span><h2><a class="anchor" aria-hidden="true" id="initial-setup"></a><a href="#initial-setup" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Initial Setup</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><code class="hljs"><span class="hljs-string">headerLinks:</span> [
...
{<span class="hljs-string">blog:</span> <span class="hljs-literal">true</span>, <span class="hljs-string">label:</span> <span class="hljs-string">'Blog'</span>},
...
]
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="adding-posts"></a><a href="#adding-posts" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Adding Posts</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><code class="hljs"><span class="hljs-meta">---</span>
<span class="hljs-attr">author:</span> <span class="hljs-string">Frank</span> <span class="hljs-string">Li</span>
<span class="hljs-attr">authorURL:</span> <span class="hljs-attr">https://twitter.com/foobarbaz</span>
<span class="hljs-attr">authorFBID:</span> <span class="hljs-number">503283835</span>
<span class="hljs-attr">title:</span> <span class="hljs-string">Introducing</span> <span class="hljs-string">Docusaurus</span>
<span class="hljs-meta">---</span>
<span class="hljs-string">Lorem</span> <span class="hljs-string">Ipsum...</span>
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="header-options"></a><a href="#header-options" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Header Options</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 profile ID that is used to fetch the profile picture.</li>
<li><code>authorImageURL</code> - The URL to the author's image. (Note: If you use both <code>authorFBID</code> and <code>authorImageURL</code>, <code>authorFBID</code> will take precedence. Don't include <code>authorFBID</code> if you want <code>authorImageURL</code> to appear.)</li>
<li><code>title</code> - The blog post title.</li>
</ul>
<h2><a class="anchor" aria-hidden="true" id="summary-truncation"></a><a href="#summary-truncation" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Summary Truncation</h2>
<p>Use the <code>&lt;!--truncate--&gt;</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>&lt;!--truncate--&gt;</code> will be part of the summary. For example:</p>
<pre><code class="hljs"><span class="hljs-meta">---</span>
<span class="hljs-attr">title:</span> <span class="hljs-string">Truncation</span> <span class="hljs-string">Example</span>
<span class="hljs-meta">---</span>
<span class="hljs-string">All</span> <span class="hljs-string">this</span> <span class="hljs-string">will</span> <span class="hljs-string">be</span> <span class="hljs-string">part</span> <span class="hljs-string">of</span> <span class="hljs-string">the</span> <span class="hljs-string">blog</span> <span class="hljs-string">post</span> <span class="hljs-string">summary.</span>
<span class="hljs-string">Even</span> <span class="hljs-string">this.</span>
<span class="hljs-string">&lt;!--truncate--&gt;</span>
<span class="hljs-string">But</span> <span class="hljs-string">anything</span> <span class="hljs-string">from</span> <span class="hljs-string">here</span> <span class="hljs-string">on</span> <span class="hljs-string">down</span> <span class="hljs-string">will</span> <span class="hljs-string">not</span> <span class="hljs-string">be.</span>
<span class="hljs-string">Not</span> <span class="hljs-string">this.</span>
<span class="hljs-string">Or</span> <span class="hljs-string">this.</span>
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="changing-how-many-blog-posts-show-on-sidebar"></a><a href="#changing-how-many-blog-posts-show-on-sidebar" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Changing How Many Blog Posts Show on Sidebar</h2>
<p>By default, 5 recent blog posts are shown on the sidebar.</p>
<p>You can configure a specific amount of blog posts to show by adding a <code>blogSidebarCount</code> setting to your <code>siteConfig.js</code>.</p>
<p>The available options are an integer representing the number of posts you wish to show or a string with the value 'ALL'.</p>
<p>Example:</p>
<pre><code class="hljs"><span class="hljs-string">blogSidebarCount:</span> <span class="hljs-string">'ALL'</span>
</code></pre>
<h2><a class="anchor" aria-hidden="true" id="rss-feed"></a><a href="#rss-feed" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>RSS Feed</h2>
<p>Docusaurus provides a simple RSS feed for your blog posts. Both RSS and Atom feed formats are supported. This data is automatically to your website page's HTML <HEAD> tag.</p>
<p>A summary of the post's text is provided in the RSS feed up to the <code>&lt;!--truncate--&gt;</code>. If no <code>&lt;!--truncate--&gt;</code> tag is found, then all text up 250 characters are used.</p>
<h2><a class="anchor" aria-hidden="true" id="social-buttons"></a><a href="#social-buttons" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Social Buttons</h2>
<p>If you want Facebook and/or Twitter social buttons at the bottom of your blog posts, set the <code>facebookAppId</code> and/or <code>twitter</code> <a href="/docs/en/1.0.13/site-config">site configuration</a> options in <code>siteConfig.js</code>.</p>
</span></div></article></div><div class="docLastUpdateTimestamp"><em><strong>Last updated: </strong>2018-4-18 06:15:27</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/docs/en/1.0.13/publishing"><span class="arrow-prev"></span><span>Previous</span></a><a class="docs-next button" href="/docs/en/1.0.13/custom-pages"><span>Next</span><span class="arrow-next"></span></a></div></div></div><nav class="onPageNav docOnPageNav"><ul class="toc-headings"><li><a href="#initial-setup">Initial Setup</a></li><li><a href="#adding-posts">Adding Posts</a></li><li><a href="#header-options">Header Options</a></li><li><a href="#summary-truncation">Summary Truncation</a></li><li><a href="#changing-how-many-blog-posts-show-on-sidebar">Changing How Many Blog Posts Show on Sidebar</a></li><li><a href="#rss-feed">RSS Feed</a></li><li><a href="#social-buttons">Social Buttons</a></li></ul></nav></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 class="footerSection"><h5>Docs</h5><a href="
/docs/en/installation">Getting Started</a><a href="
/docs/en/versioning">Versioning</a><a href="
/docs/en/translation">Localization</a><a href="
/docs/en/search">Adding Search</a></div><div class="footerSection"><h5>Community</h5><a href="/en/users">User Showcase</a></div><div class="footerSection"><h5>Social</h5><div class="social"><a class="github-button" href="https://github.com/facebook/Docusaurus" data-count-href="https://github.com/facebook/Docusaurus/stargazers" data-show-count="true" data-count-aria-label="# stargazers on GitHub" aria-label="Star this project on GitHub">Docusaurus</a></div><div class="social"><a href="https://twitter.com/docusaurus" class="twitter-follow-button">Follow @docusaurus</a></div><div class="social"><div class="fb-like" data-href="https://docusaurus.io" data-colorscheme="dark" data-layout="standard" data-share="true" data-width="225" data-show-faces="false"></div></div></div></section><a href="https://code.facebook.com/projects/" target="_blank" rel="noreferrer noopener" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright"><span>Copyright © 2018 Facebook Inc.</span></section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'199138890728411',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
document.addEventListener('keyup', function(e) {
if (e.target !== document.body) {
return;
}
// keyCode for '/' (slash)
if (e.keyCode === 191) {
const search = document.getElementById('search_input_react');
search && search.focus();
}
});
</script><script>
var search = docsearch({
apiKey: '3eb9507824b8be89e7a199ecaa1a9d2c',
indexName: 'docusaurus',
inputSelector: '#search_input_react',
algoliaOptions: {"facetFilters":["language:en","version:1.0.13"]}
});
</script></body></html>