feat(v2): add option for blog meta title #3571

* feat(blog-meta-title): add support for additional meta title

* retrocompatible blog title

Co-authored-by: slorber <lorber.sebastien@gmail.com>
This commit is contained in:
DeadEnglish 2020-10-12 12:23:54 +01:00 committed by GitHub
parent 2e51034b0c
commit d1510770f4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 18 additions and 6 deletions

View file

@ -65,6 +65,7 @@ declare module '@theme/BlogListPage' {
}; };
export type Metadata = { export type Metadata = {
readonly blogTitle: string;
readonly blogDescription: string; readonly blogDescription: string;
readonly nextPage?: string; readonly nextPage?: string;
readonly page: number; readonly page: number;

View file

@ -140,6 +140,7 @@ export default function pluginContentBlog(
? blogPaginationPermalink(page + 1) ? blogPaginationPermalink(page + 1)
: null, : null,
blogDescription: options.blogDescription, blogDescription: options.blogDescription,
blogTitle: options.blogTitle,
}, },
items: blogPosts items: blogPosts
.slice(page * postsPerPage, (page + 1) * postsPerPage) .slice(page * postsPerPage, (page + 1) * postsPerPage)

View file

@ -27,6 +27,7 @@ export const DEFAULT_OPTIONS = {
blogPostComponent: '@theme/BlogPostPage', blogPostComponent: '@theme/BlogPostPage',
blogListComponent: '@theme/BlogListPage', blogListComponent: '@theme/BlogListPage',
blogDescription: 'Blog', blogDescription: 'Blog',
blogTitle: 'Blog',
postsPerPage: 10, postsPerPage: 10,
include: ['*.md', '*.mdx'], include: ['*.md', '*.mdx'],
routeBasePath: 'blog', routeBasePath: 'blog',
@ -52,6 +53,7 @@ export const PluginOptionSchema = Joi.object({
blogTagsPostsComponent: Joi.string().default( blogTagsPostsComponent: Joi.string().default(
DEFAULT_OPTIONS.blogTagsPostsComponent, DEFAULT_OPTIONS.blogTagsPostsComponent,
), ),
blogTitle: Joi.string().allow('').default(DEFAULT_OPTIONS.blogTitle),
blogDescription: Joi.string() blogDescription: Joi.string()
.allow('') .allow('')
.default(DEFAULT_OPTIONS.blogDescription), .default(DEFAULT_OPTIONS.blogDescription),

View file

@ -29,6 +29,7 @@ export interface PluginOptions {
blogPostComponent: string; blogPostComponent: string;
blogTagsListComponent: string; blogTagsListComponent: string;
blogTagsPostsComponent: string; blogTagsPostsComponent: string;
blogTitle: string;
blogDescription: string; blogDescription: string;
remarkPlugins: ([Function, object] | Function)[]; remarkPlugins: ([Function, object] | Function)[];
beforeDefaultRehypePlugins: ([Function, object] | Function)[]; beforeDefaultRehypePlugins: ([Function, object] | Function)[];
@ -70,6 +71,7 @@ export interface BlogPaginatedMetadata {
totalCount: number; totalCount: number;
previousPage: string | null; previousPage: string | null;
nextPage: string | null; nextPage: string | null;
blogTitle: string;
blogDescription: string; blogDescription: string;
} }

View file

@ -17,11 +17,12 @@ function BlogListPage(props: Props): JSX.Element {
const { const {
siteConfig: {title: siteTitle}, siteConfig: {title: siteTitle},
} = useDocusaurusContext(); } = useDocusaurusContext();
const isBlogOnlyMode = metadata.permalink === '/'; const {blogDescription, blogTitle, permalink} = metadata;
const title = isBlogOnlyMode ? siteTitle : 'Blog'; const isBlogOnlyMode = permalink === '/';
const title = isBlogOnlyMode ? siteTitle : blogTitle;
return ( return (
<Layout title={title} description="Blog"> <Layout title={title} description={blogDescription}>
<div className="container-fluid mt-4"> <div className="container-fluid mt-4">
<div className="row row-cols-1 row-cols-sm-1"> <div className="row row-cols-1 row-cols-sm-1">
{items.map(({content: BlogPostContent}) => ( {items.map(({content: BlogPostContent}) => (

View file

@ -18,9 +18,9 @@ function BlogListPage(props: Props): JSX.Element {
const { const {
siteConfig: {title: siteTitle}, siteConfig: {title: siteTitle},
} = useDocusaurusContext(); } = useDocusaurusContext();
const isBlogOnlyMode = metadata.permalink === '/'; const {blogDescription, blogTitle, permalink} = metadata;
const title = isBlogOnlyMode ? siteTitle : 'Blog'; const isBlogOnlyMode = permalink === '/';
const {blogDescription} = metadata; const title = isBlogOnlyMode ? siteTitle : blogTitle;
return ( return (
<Layout title={title} description={blogDescription}> <Layout title={title} description={blogDescription}>
<div className="container margin-vert--lg"> <div className="container margin-vert--lg">

View file

@ -175,6 +175,7 @@ module.exports = {
'@docusaurus/preset-classic', '@docusaurus/preset-classic',
{ {
blog: { blog: {
blogTitle: 'Docusaurus blog!',
blogDescription: 'A docusaurus powered blog!', blogDescription: 'A docusaurus powered blog!',
}, },
}, },

View file

@ -200,6 +200,10 @@ module.exports = {
*/ */
editUrl: editUrl:
'https://github.com/facebook/docusaurus/edit/master/website/blog/', 'https://github.com/facebook/docusaurus/edit/master/website/blog/',
/**
* Blog page title for better SEO
*/
blogTitle: 'Blog title',
/** /**
* Blog page meta description for better SEO * Blog page meta description for better SEO
*/ */