Add config option for setting title of the blog sidebar (#770)

* Allow controlling the title of the blog sidebar

* Update guides-blog.md
This commit is contained in:
Jonathan Ingram 2018-06-15 17:08:34 +10:00 committed by Yangshun Tay
parent 62a2c7c1a5
commit 58fba70dea
4 changed files with 19 additions and 3 deletions

View file

@ -74,6 +74,8 @@ headerLinks: [
`blogSidebarCount` - Control the number of blog posts that show up in the sidebar. See the [adding a blog docs](guides-blog.md#changing-how-many-blog-posts-show-on-sidebar) for more information. `blogSidebarCount` - Control the number of blog posts that show up in the sidebar. See the [adding a blog docs](guides-blog.md#changing-how-many-blog-posts-show-on-sidebar) for more information.
`blogSidebarTitle` - Control the title of the blog sidebar. See the [adding a blog docs](guides-blog.md#changing-the-sidebar-title) for more information.
`cleanUrl` - If `true`, allow URLs with no `html` extension. For example, a request to URL https://docusaurus.io/docs/installation will returns the same result as https://docusaurus.io/docs/installation.html. `cleanUrl` - If `true`, allow URLs with no `html` extension. For example, a request to URL https://docusaurus.io/docs/installation will returns the same result as https://docusaurus.io/docs/installation.html.
`cname` - The CNAME for your website. It will go into a `CNAME` file when your site is built. `cname` - The CNAME for your website. It will go into a `CNAME` file when your site is built.

View file

@ -80,6 +80,18 @@ Example:
blogSidebarCount: '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'`.
Example:
```js
blogSidebarTitle: { default: 'Recent posts', all: 'All blog posts' },
```
## RSS Feed ## RSS Feed
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. 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.

View file

@ -97,6 +97,7 @@ class BlogPostLayout extends React.Component {
render() { render() {
let post = this.props.metadata; let post = this.props.metadata;
post.path = utils.getPath(post.path, this.props.config.cleanUrl); post.path = utils.getPath(post.path, this.props.config.cleanUrl);
let blogSidebarTitleConfig = this.props.config.blogSidebarTitle || {};
return ( return (
<Site <Site
className="sideNavVisible" className="sideNavVisible"
@ -124,7 +125,7 @@ class BlogPostLayout extends React.Component {
</div> </div>
<div className="blog-recent"> <div className="blog-recent">
<a className="button" href={this.props.config.baseUrl + 'blog'}> <a className="button" href={this.props.config.baseUrl + 'blog'}>
Recent Posts {blogSidebarTitleConfig.default || 'Recent Posts'}
</a> </a>
</div> </div>
</Container> </Container>

View file

@ -14,11 +14,12 @@ const MetadataBlog = require('./MetadataBlog.js');
class BlogSidebar extends React.Component { class BlogSidebar extends React.Component {
render() { render() {
let blogSidebarCount = 5; let blogSidebarCount = 5;
let blogSidebarTitle = 'Recent Posts'; let blogSidebarTitleConfig = this.props.config.blogSidebarTitle || {};
let blogSidebarTitle = blogSidebarTitleConfig.default || 'Recent Posts';
if (this.props.config.blogSidebarCount) { if (this.props.config.blogSidebarCount) {
if (this.props.config.blogSidebarCount == 'ALL') { if (this.props.config.blogSidebarCount == 'ALL') {
blogSidebarCount = MetadataBlog.length; blogSidebarCount = MetadataBlog.length;
blogSidebarTitle = 'All Blog Posts'; blogSidebarTitle = blogSidebarTitleConfig.all || 'All Blog Posts';
} else { } else {
blogSidebarCount = this.props.config.blogSidebarCount; blogSidebarCount = this.props.config.blogSidebarCount;
} }