Adding a Blog
初始设置
To setup your site's blog, start by creating a blog
directory within your repo's website
directory.
然后, 在 siteConfig.js
中添加一个指向您博客的 headerLinks
:
headerLinks: [
...
{ blog: true, label: 'Blog' },
...
]
添加文章
To publish in the blog, create a file within the blog directory with a formatted name of YYYY-MM-DD-My-Blog-Post-Title.md
. The post date is extracted from the file name.
例如, 文件 website/blog/2017-08-18-Introducing-Docusaurus.md
:
---
author: Frank Li
authorURL: https://twitter.com/foobarbaz
authorFBID: 503283835
title: Introducing Docusaurus
---
Lorem Ipsum...
顶部选项
唯一必填项是 title
;但是, 我们还提供了添加可选的文章作者信息的功能。
author
- 作者署名的文本标签。authorURL
- The URL associated with the author. This could be a Twitter, GitHub, Facebook account, etc.authorFBID
- The Facebook profile ID that is used to fetch the profile picture.authorImageURL
- The URL to the author's image. (Note: If you use bothauthorFBID
andauthorImageURL
,authorFBID
will take precedence. Don't includeauthorFBID
if you wantauthorImageURL
to appear.)title
- The blog post title.
摘要截取
Use the <!--truncate-->
marker in your blog post to represent what will be shown as the summary when viewing all published blog posts. <!--truncate-->
标记以上的内容都会成为摘要。 例如:
---
title: Truncation Example
---
All this will be part of the blog post summary.
Even this.
<!--truncate-->
But anything from here on down will not be.
Not this.
Or this.
修改侧边栏可见的文章数
默认情况下,侧边栏会显示最近的5篇文章。
你可以在 siteConfig.js
中添加 blogSidebarCount
属性,来配置你的想要展示的文章数。
The available options are an integer representing the number of posts you wish to show or a string with the value 'ALL'
.
例如:
blogSidebarCount: 'ALL',
Changing The Sidebar Title
You can configure a specific sidebar title by adding a blogSidebarTitle
setting to your siteConfig.js
.
The option is an object which can have the keys default
and all
. Specifying a value for default
allows you to change the default sidebar title. Specifying a value for all
allows you to change the sidebar title when the blogSidebarCount
option is set to 'ALL'
.
例如:
blogSidebarTitle: { default: 'Recent posts', all: 'All blog posts' },
RSS订阅
Docusaurus provides an 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.
A summary of the post's text is provided in the RSS feed up to the <!--truncate-->
. If no <!--truncate-->
tag is found, then all text up 250 characters are used.
社交按钮
如果想在文章底部显示Facebook与(或)Twitter社交按钮,那么在网站设置的siteConfig.js
中配置facebookAppId
与(或) twitter
选项。
Advanced Topics
I want to run in "Blog Only" mode.
You can run your Docusaurus site without a landing page and instead have your blog load first.
To do this:
- Create a file
index.html
inwebsite/static/
. - Place the contents of the template below into
website/static/index.html
- Customize the
<title>
ofwebsite/static/index.html
- Delete the dynamic landing page
website/pages/en/index.js
Now, when Docusaurus generates or builds your site, it will copy the file from
static/index.html
and place it in the site's main directory. The static file is served when a visitor arrives on your page. When the page loads it will redirect the visitor to/blog
.
You can use this template:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8" />
<meta http-equiv="refresh" content="0; url=blog/" />
<script type="text/javascript">
window.location.href = 'blog/';
</script>
<title>Title of Your Blog</title>
</head>
<body>
If you are not redirected automatically, follow this
<a href="blog/">link</a>.
</body>
</html>