Tạo blog với vuepress
# Mục lục
# Tạo project vue press:
Tại giao diện terminal, bạn gõ lệnh để tải và cài đặt vuepress
npx create-vuepress-site blog4share
bạn sẽ được hỏi một số thông tin về project, để đơn giản cứ enter hết là xong.
Kế tiếp bạn vào thư mục blog4share/docs
cd blog4share/docs
Tại đây, để chạy trang vuepress bạn gõ lệnh
npm run dev
Khi xuất hiện dòng chữ bên dưới tức là đã cài được vuepress thành công và http://localhost:8080/ cũng là địa chỉ để truy cập vào vuepress.
> VuePress dev server listening at http://localhost:8080/
khi vào địa chỉ phía trên sẽ ra giao diện như hình bên dưới
Ở bước tiếp theo chúng ta sẽ cài plugin blog cho vuepress.
# Cài theme blog cho vue press
Để cài theme blog, bạn chạy lệnh
npm install @vuepress/theme-blog -D
Sau khi chạy xong, bạn sửa file src/.vuepress/config.js với nội dung như dưới đây
// src/.vuepress/config.js
module.exports = {
title: 'Blog 4 Sharing', // Title for the site. This will be displayed in the navbar.
theme: '@vuepress/theme-blog',
themeConfig: {
nav: [
{
text: "Trang chủ",
link: "/",
},
{
text: "Bài viết",
link: "/posts/",
},
],
}
}
Chạy đoạn lệnh bên dưới để kiểm tra
npm run dev
Nếu kết quả như hình dưới tức là đã cài xong theme blog.
Nhưng rồi cũng đâu giống trang blog nhỉ, danh sách các bài viết ở đâu?
Cái đó thì cần viết component qua bước kế tiếp để thực hiện điều đó nhé.
# Viết components để hiển thị bài viết
Vào thư mục src/.vuepress/components tạo một file có tên BlogIndex.vue với nội dung như bên dưới
<!--src/.vuepress/components/BlogIndex.vue -->
<template>
<div>
<div v-for="post in posts">
<h2>
<router-link :to="post.path">{{ post.frontmatter.title }}</router-link>
</h2>
<p>{{ post.frontmatter.description }}</p>
<p><router-link :to="post.path">Read more</router-link></p>
</div>
</div>
</template>
<script>
export default {
computed: {
posts() {
return this.$site.pages
.filter(x => x.path.startsWith('/posts/') && !x.frontmatter.blog_index)
.sort((a, b) => new Date(b.frontmatter.date) - new Date(a.frontmatter.date));
}
}
}
</script>
Đoạn script này đại ý là lấy toàn bộ những url có chứa /posts/ vào danh sách hiển thị.
Bạn tạo thư mục tại src/posts và tạo các bài viết theo mẫu file bên dưới
<!-- /posts/first-post.md --> không copy đòng này
# Using Vue in Markdown 3
## Browser API Access Restrictions
Because VuePress applications are server-rendered in Node.js when generating static builds, any Vue usage must conform to the [universal code requirements](https://ssr.vuejs.org/en/universal.html). In short, make sure to only access Browser / DOM APIs in `beforeMount` or `mounted` hooks.
If you are using or demoing components that are not SSR friendly (for example containing custom directives), you can wrap them inside the built-in `<ClientOnly>` component:
##
cũng tại thư mục posts, bạn tạo file index.md có nội dung như sau
<!-- /posts/index.md --> không copy đòng này
---
blog_index: true
---
# Blog
Welcome on Blog 4 Share
<BlogIndex />
Chạy đoạn lệnh bên dưới để kiểm tra
npm run dev
# Một số chỉnh sửa nho nhỏ cho trang blog
Để chỉnh trang chủ, bạn vào file src/index.md đổi nội dung như bên dưới:
---
home: true
---
<OtherComponent/>
<Bar/>
<demo-component/>
Để cấu hình thanh nav ở trên, bạn edit file src/.vuepress/config.js như bên dưới để tùy chỉnh
// src/.vuepress/config.js
module.exports = {
title: 'Blog 4 Share',
themeConfig: {
nav: [
{ text: 'Home', link: '/' },
{ text: 'Blog', link: '/blog/' }
]
}
}
Cuối cùng là chạy:
npm run dev
Trang chủ hiện như hình bên dưới là thành công
Bài viết này chỉ tập trung những thao tác cốt lõi nhất để tạo một blog cơ bản với vuepress. Để tìm hiểu sâu hơn, bạn nên xem tài liệu hỗ trợ tại https://vuepress.vuejs.org/ .