Bài viết Blog
Bài viết Tính năng blog cho phép bạn triển khai một blog đầy đủ tính năng ngay lập tức.
Thông tin Kiểm tra tài liệu Tham khảo API Plugin Blog để biết danh sách đầy đủ các tùy chọn.
Thiết lập ban đầu Để thiết lập blog trên trang web của bạn, hãy bắt đầu bằng cách tạo một thư mục.blog
Sau đó, thêm một liên kết mục vào blog của bạn trong:docusaurus.config.js
docusaurus.config.js
export default {
themeConfig: {
// ...
navbar: {
items: [
// ...
{to: 'blog', label: 'Blog', position: 'left'}, // or position: 'right'
],
},
},
};
Thêm bài viết Để xuất bản trong blog, hãy tạo một tệp Markdown trong thư mục blog.
Ví dụ: tạo một tệp tại:website/blog/2019-09-05-hello-docusaurus.md
trang web / blog / 2019-09-05-xin chào-docusaurus.md
---
title: Welcome Docusaurus
description: This is my first post on Docusaurus.
slug: welcome-docusaurus-v2
authors:
- name: Joel Marcey
title: Co-creator of Docusaurus 1
url: https://github.com/JoelMarcey
image_url: https://github.com/JoelMarcey.png
socials:
x: joelmarcey
github: JoelMarcey
- name: Sébastien Lorber
title: Docusaurus maintainer
url: https://sebastienlorber.com
image_url: https://github.com/slorber.png
socials:
x: sebastienlorber
github: slorber
tags: [hello, docusaurus-v2]
image: https://i.imgur.com/mErPwqL.png
hide_table_of_contents: false
---
Welcome to this blog. This blog is created with [**Docusaurus 2**](https://docusaurus.io/).
<!-- truncate -->
This is my first post on Docusaurus 2.
A whole bunch of exploration to follow.
Vấn đề phía trước rất hữu ích để thêm nhiều siêu dữ liệu vào bài đăng trên blog của bạn, ví dụ: thông tin tác giả, nhưng Docusaurus sẽ có thể suy ra tất cả các siêu dữ liệu cần thiết mà không cần vấn đề phía trước. Đối với tất cả các trường có thể, hãy xem tài liệu API.
Danh sách blog Trang chỉ mục của blog (theo mặc định, nó ở ) là trang danh sách blog, nơi tất cả các bài đăng trên blog được hiển thị chung./blog
Sử dụng điểm đánh dấu trong bài đăng trên blog của bạn để thể hiện những gì sẽ được hiển thị dưới dạng tóm tắt khi xem tất cả các bài đăng trên blog đã xuất bản. Bất cứ điều gì ở trên sẽ là một phần của bản tóm tắt. Lưu ý rằng phần phía trên điểm đánh dấu cắt ngắn phải là Markdown có thể hiển thị độc lập. Chẳng hạn:
<!--truncate--><!--truncate-->
trang web/blog/my-post.md
---
title: Markdown blog truncation example
---
All these will be part of the blog post summary.
<!-- truncate -->
But anything from here on down will not be.
Đối với các tệp sử dụng phần mở rộng, hãy sử dụng nhận xét MDX để thay thế:.mdx
trang web/blog/my-post.mdx
---
title: MDX blog truncation Example
---
All these will be part of the blog post summary.
{/* truncate */}
But anything from here on down will not be.
Theo mặc định, 10 bài đăng được hiển thị trên mỗi trang danh sách blog, nhưng bạn có thể kiểm soát phân trang bằng tùy chọn trong cấu hình plugin. Nếu bạn đặt , phân trang sẽ bị vô hiệu hóa và tất cả các bài đăng sẽ được hiển thị trên trang đầu tiên. Bạn cũng có thể thêm mô tả meta vào trang danh sách blog để SEO tốt hơn:postsPerPagepostsPerPage: 'ALL'
docusaurus.config.js
export default {
// ...
presets: [
[
'@docusaurus/preset-classic',
{
blog: {
blogTitle: 'Docusaurus blog!',
blogDescription: 'A Docusaurus powered blog!',
postsPerPage: 'ALL',
},
},
],
],
};
Thanh bên blog Thanh bên blog hiển thị các bài đăng trên blog gần đây. Số lượng mục mặc định được hiển thị là 5, nhưng bạn có thể tùy chỉnh với tùy chọn trong cấu hình plugin. Bằng cách cài đặt, thanh bên sẽ bị vô hiệu hóa hoàn toàn, với vùng chứa cũng bị xóa. Điều này sẽ làm tăng chiều rộng của thùng chứa chính. Đặc biệt, nếu bạn đã đặt, tất cả các bài đăng sẽ được hiển thị.blogSidebarCountblogSidebarCount: 0blogSidebarCount: 'ALL'
Bạn cũng có thể thay đổi văn bản tiêu đề thanh bên bằng tùy chọn. Ví dụ: nếu bạn đã đặt , thay vì mặc định "Bài viết gần đây", bạn có thể đặt nó thành "Tất cả bài viết":blogSidebarTitleblogSidebarCount: 'ALL'
docusaurus.config.js
export default {
presets: [
[
'@docusaurus/preset-classic',
{
blog: {
blogSidebarTitle: 'All posts',
blogSidebarCount: 'ALL',
},
},
],
],
};
Ngày đăng blog Docusaurus sẽ trích xuất một ngày từ nhiều mẫu như hoặc . Điều này cho phép bạn dễ dàng nhóm các bài đăng trên blog theo năm, theo tháng hoặc sử dụng cấu trúc phẳng.YYYY-MM-DDYYYY-MM-DD-my-blog-post-title.mdYYYY/MM/DD/my-blog-post-title.md
Các mẫu trích xuất ngày được hỗ trợ mẹo Sử dụng một thư mục có thể thuận tiện để cùng định vị hình ảnh bài đăng trên blog cùng với tệp Markdown.
Quy ước đặt tên này là tùy chọn và bạn cũng có thể cung cấp ngày làm vấn đề trước. Vì front matter tuân theo cú pháp YAML trong đó ký hiệu datetime được hỗ trợ, bạn có thể sử dụng front matter nếu bạn cần ngày xuất bản chi tiết hơn. Ví dụ: nếu bạn có nhiều bài đăng được xuất bản trong cùng một ngày, bạn có thể sắp xếp chúng theo thời gian trong ngày:
earlier-post.md
---
date: 2021-09-13T10:00
---
later-post.md
---
date: 2021-09-13T18:00
---
Tác giả bài đăng trên blog Sử dụng trường front matter để khai báo tác giả bài đăng trên blog. Một tác giả nên có ít nhất một hoặc một . Docusaurus sử dụng thông tin như , , và , nhưng bất kỳ thông tin nào khác đều được phép.authorsnameimage_urlurlemailtitle
Tác giả nội tuyến Tác giả bài đăng trên blog có thể được khai báo trực tiếp bên trong vấn đề trước:
Tác giả đơn lẻ Nhiều tác giả my-blog-post.md
---
authors:
name: Joel Marcey
title: Co-creator of Docusaurus 1
url: https://github.com/JoelMarcey
image_url: https://github.com/JoelMarcey.png
email: jimarcey@gmail.com
socials:
x: joelmarcey
github: JoelMarcey
---
mẹo Tùy chọn này hoạt động tốt nhất để bắt đầu hoặc cho các tác giả bình thường, không thường xuyên.
Thông tin Thích sử dụng vật chất phía trước, nhưng vật chất phía trước cũ vẫn được hỗ trợ:authorsauthor_*
my-blog-post.md
---
author: Joel Marcey
author_title: Co-creator of Docusaurus 1
author_url: https://github.com/JoelMarcey
author_image_url: https://github.com/JoelMarcey.png
---
Tác giả toàn cầu Đối với các tác giả bài đăng trên blog thông thường, việc duy trì thông tin của tác giả trong mỗi bài đăng trên blog có thể tẻ nhạt.
Có thể khai báo các tác giả đó trên toàn cầu trong một tệp cấu hình:
trang web/blog/authors.yml
jmarcey:
name: Joel Marcey
title: Co-creator of Docusaurus 1
url: https://github.com/JoelMarcey
image_url: https://github.com/JoelMarcey.png
email: jimarcey@gmail.com
socials:
x: joelmarcey
github: JoelMarcey
slorber:
name: Sébastien Lorber
title: Docusaurus maintainer
url: https://sebastienlorber.com
image_url: https://github.com/slorber.png
socials:
x: sebastienlorber
github: slorber
mẹo Sử dụng tùy chọn plugin để định cấu hình đường dẫn. JSON cũng được hỗ trợ.authorsMapPath
Trong các bài đăng trên blog front matter, bạn có thể tham khảo các tác giả được khai báo trong tệp cấu hình toàn cầu:
Tác giả đơn lẻ Nhiều tác giả my-blog-post.md
---
authors: jmarcey
---
Thông tin Hệ thống rất linh hoạt và có thể phù hợp với trường hợp sử dụng nâng cao hơn:authors
Kết hợp tác giả nội tuyến và tác giả toàn cầu Ghi đè cục bộ các tác giả toàn cầu Bản địa hóa tệp cấu hình của tác giả Một tác giả, hoặc được tuyên bố thông qua vấn đề phía trước hoặc thông qua bản đồ tác giả, cần phải có tên hoặc hình đại diện, hoặc cả hai. Nếu tất cả các tác giả của một bài đăng không có tên, Docusaurus sẽ hiển thị hình đại diện của họ một cách nhỏ gọn. Xem bài đăng thử nghiệm này để biết hiệu ứng.
Tạo nguồn cấp dữ liệu Nguồn cấp dữ liệu RSS yêu cầu đặt email của tác giả để tác giả xuất hiện trong nguồn cấp dữ liệu.
Trang tác giả Tính năng trang tác giả là tùy chọn và chủ yếu hữu ích cho các blog nhiều tác giả.
Bạn có thể kích hoạt nó một cách độc lập cho từng tác giả bằng cách thêm một thuộc tính vào cấu hình tác giả chung:page: true
trang web/blog/authors.yml
slorber:
name: Sébastien Lorber
page: true # Turns the feature on - route will be /authors/slorber
jmarcey:
name: Joel Marcey
page:
# Turns the feature on - route will be /authors/custom-author-url
permalink: '/custom-author-url'
Plugin blog bây giờ sẽ tạo:
Một trang tác giả dành riêng cho mỗi tác giả (ví dụ) liệt kê tất cả các bài đăng trên blog mà họ đã đóng góp Trang chỉ mục tác giả (ví dụ) liệt kê tất cả các tác giả này, theo thứ tự chúng xuất hiện trong authors.yml Giới thiệu về tác giả nội tuyến Chỉ các tác giả toàn cầu mới có thể kích hoạt tính năng này. Tác giả nội tuyến không được hỗ trợ.
Thẻ bài viết blog Các thẻ được khai báo trong vấn đề phía trước và giới thiệu một khía cạnh khác của phân loại.
Có thể xác định thẻ nội tuyến hoặc tham chiếu các thẻ được xác định trước được khai báo trong tệp thẻ (tùy chọn, thường là ).blog/tags.yml
Trong ví dụ sau:
docusaurus tham chiếu một khóa thẻ được xác định trước được khai báo trong blog/tags.yml Releases là một thẻ nội tuyến, vì nó không tồn tại trong blog/tags.yml blog/my-post.md
---
title: 'My blog post'
tags:
- Releases
- docusaurus
---
Content
blog/tags.yml
docusaurus:
label: 'Docusaurus'
permalink: '/docusaurus'
description: 'Blog posts related to the Docusaurus framework'
Thời gian đọc Docusaurus tạo ước tính thời gian đọc cho mỗi bài đăng trên blog dựa trên số từ. Chúng tôi cung cấp một tùy chọn để tùy chỉnh điều này.
docusaurus.config.js
export default {
presets: [
[
'@docusaurus/preset-classic',
{
blog: {
showReadingTime: true, // When set to false, the "x min read" won't be shown
readingTime: ({content, frontMatter, defaultReadingTime}) =>
defaultReadingTime({content, options: {wordsPerMinute: 300}}),
},
},
],
],
};
Callback nhận ba tham số: văn bản nội dung blog dưới dạng chuỗi, front matter dưới dạng bản ghi các khóa chuỗi và giá trị của chúng, và hàm thời gian đọc mặc định. Nó trả về một số (thời gian đọc tính bằng phút) hoặc (tắt thời gian đọc cho trang này).readingTimeundefined
Thời gian đọc mặc định có thể chấp nhận các tùy chọn bổ sung: dưới dạng số (mặc định: 300) và dưới dạng hàm từ chuỗi đến boolean. Nếu chuỗi được truyền đến phải là một từ bị ràng buộc (khoảng trắng, tab và ngắt dòng theo mặc định), hàm sẽ trả về .wordsPerMinutewordBoundwordBoundtrue
mẹo Sử dụng callback cho tất cả các nhu cầu tùy chỉnh của bạn:
Vô hiệu hóa mỗi bài đăng Tùy chọn vượt qua Sử dụng thuật toán tùy chỉnh Tắt thời gian đọc trên một trang:
docusaurus.config.js
export default {
presets: [
[
'@docusaurus/preset-classic',
{
blog: {
showReadingTime: true,
readingTime: ({content, frontMatter, defaultReadingTime}) =>
frontMatter.hide_reading_time
? undefined
: defaultReadingTime({content}),
},
},
],
],
};
Sử dụng:
---
hide_reading_time: true
---
This page will no longer display the reading time stats!
Cho ăn Bạn có thể tạo nguồn cấp dữ liệu RSS / Atom / JSON bằng cách chuyển . Theo mặc định, nguồn cấp dữ liệu RSS và Atom được tạo. Để tắt tính năng tạo nguồn cấp dữ liệu, hãy đặt thành .feedOptionsfeedOptions.typenull
type FeedType = 'rss' | 'atom' | 'json';
type BlogOptions = {
feedOptions?: {
type?: FeedType | 'all' | FeedType[] | null;
title?: string;
description?: string;
copyright: string;
language?: string; // possible values: http://www.w3.org/TR/REC-html40/struct/dirlang.html#langcodes
limit?: number | false | null; // defaults to 20
// XSLT permits browsers to style and render nicely the feed XML files
xslt?:
| boolean
| {
//
rss?: string | boolean;
atom?: string | boolean;
};
// Allow control over the construction of BlogFeedItems
createFeedItems?: (params: {
blogPosts: BlogPost[];
siteConfig: DocusaurusConfig;
outDir: string;
defaultCreateFeedItems: (params: {
blogPosts: BlogPost[];
siteConfig: DocusaurusConfig;
outDir: string;
}) => Promise<BlogFeedItem[]>;
}) => Promise<BlogFeedItem[]>;
};
};
Ví dụ sử dụng:
docusaurus.config.js
export default {
// ...
presets: [
[
'@docusaurus/preset-classic',
{
blog: {
feedOptions: {
type: 'all',
copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`,
createFeedItems: async (params) => {
const {blogPosts, defaultCreateFeedItems, ...rest} = params;
return defaultCreateFeedItems({
// keep only the 10 most recent blog posts in the feed
blogPosts: blogPosts.filter((item, index) => index < 10),
...rest,
});
},
},
},
},
],
],
};
Nguồn cấp dữ liệu có thể được tìm thấy tại:
RSS Nguyên tử JSON https://example.com/blog/rss.xml
Chủ đề nâng cao Chế độ chỉ dành cho blog Bạn có thể chạy trang web Docusaurus của mình mà không cần trang đích chuyên dụng và thay vào đó có trang danh sách bài đăng trên blog của bạn làm trang chỉ mục. Đặt to be để phục vụ blog thông qua route gốc thay vì tuyến phụ.routeBasePath'/'example.com/example.com/blog/
docusaurus.config.js
export default {
// ...
presets: [
[
'@docusaurus/preset-classic',
{
docs: false, // Optional: disable the docs plugin
blog: {
routeBasePath: '/', // Serve the blog at the site's root
/* other blog options */
},
},
],
],
};
cảnh báo Đừng quên xóa trang chủ hiện có tại nếu không sẽ có hai tệp ánh xạ đến cùng một tuyến đường nhé!./src/pages/index.js
cảnh báo Nếu bạn tắt plugin docs, đừng quên xóa tham chiếu đến plugin docs ở nơi khác trong tệp cấu hình của bạn. Đáng chú ý, hãy đảm bảo xóa các mục navbar liên quan đến tài liệu.
mẹo Ngoài ra còn có "chế độ chỉ dành cho tài liệu" cho những người chỉ muốn sử dụng tài liệu. Đọc chế độ chỉ dành cho Tài liệu để biết hướng dẫn chi tiết hoặc giải thích chi tiết hơn về .routeBasePath
Nhiều blog Theo mặc định, chủ đề cổ điển chỉ giả định một blog cho mỗi trang web và do đó chỉ bao gồm một phiên bản của plugin blog. Nếu bạn muốn có nhiều blog trên một trang web, điều đó cũng có thể! Bạn có thể thêm một blog khác bằng cách chỉ định một plugin blog khác trong tùy chọn cho .pluginsdocusaurus.config.js
Đặt tuyến đường URL mà bạn muốn blog thứ hai của mình được truy cập. Lưu ý rằng ở đây phải khác với blog đầu tiên nếu không có thể có sự va chạm của các đường dẫn! Ngoài ra, hãy đặt thành đường dẫn đến thư mục chứa các mục nhập blog thứ hai của bạn.routeBasePathrouteBasePathpath
Như đã được ghi lại cho các plugin đa phiên bản, bạn cần gán một ID duy nhất cho các plugin.
docusaurus.config.js
export default {
// ...
plugins: [
[
'@docusaurus/plugin-content-blog',
{
/**
* Required for any multi-instance plugin
*/
id: 'second-blog',
/**
* URL route for the blog section of your site.
* *DO NOT* include a trailing slash.
*/
routeBasePath: 'my-second-blog',
/**
* Path to data on filesystem relative to site dir.
*/
path: './my-second-blog',
},
],
],
};
Ví dụ, chúng tôi tổ chức một blog thứ hai ở đây.