Giới thiệu về VuePress
Bạn có thể đã nghe nói về VuePress gần đây, nó xuất hiện gần như qua đêm và ngay sau đó trở thành Sản phẩm của ngày trên ProductHunt . Điều gì ở VuePress khiến nó trở nên đặc biệt? VuePress là gì? Chà, nó thực sự là một trình tạo trang web tĩnh. Đặc biệt, một trình tạo trang web tĩnh được hỗ trợ bởi Vue.js nhằm mục đích xây dựng các trang web tài liệu. Tại sao nó rất đặc biệt? Người sáng tạo, Evan You, có sở trường xây dựng phần mềm cực kỳ đơn giản nhưng linh hoạt. Rốt cuộc, anh ấy đã làm cho Vue.js. VuePress cũng không khác. Sau khi chạy hai lệnh, bạn sẽ có một SPA thân thiện với SEO, không cấu hình, với hỗ trợ Vue.js đầy đủ. Một vài dòng cấu hình và nó sẽ được cá nhân hóa để phù hợp với nhu cầu của bạn.
Bắt đầu
Bước 1: Cài đặt VuePress.
$ npm install -g vuepress Bước 2: Viết một cái gì đó.
Tạo README.md trong một folder và viết một số đánh dấu (trộn với biểu thức Vue.js!) Trong đó.
## Hello VuePress! _How are you doing?_ > **I'm doing fine, thanks!** _Great, I was wondering what `49 + 32` is?_ > **{{49 + 32}}** _Could you repeat that a few times?_ > **Sigh...** <p v-for="i of 3">{{49 + 32}}</p> Chạy $ vuepress dev trong folder đó và truy cập URL kết quả. (Nó có tính năng reload module nóng!)
Kết quả trông như sau :
Như bạn thấy , nếu bạn đã quen với hệ thống tạo khuôn mẫu của Vue, bạn sẽ cảm thấy như ở nhà với VuePress. Ngoài ra, nếu bạn chú ý, bạn sẽ thấy rằng các tiêu đề trong trang trở thành các neo mà bạn có thể liên kết đến, điều này rất hữu ích.
Bước 3: Xây dựng nó.
Khi đã sẵn sàng xuất bản trang web của bạn , hãy chạy $ vuepress build . Kết quả kết quả sẽ ở .vuepress/dist , được xây dựng độc đáo và thu nhỏ với Webpack.
Nhưng có lẽ bạn cần thực hiện một vài chỉnh sửa trước, phải không? Một trang duy nhất là một chút nhàm chán.
Đăng metadata
Điều đầu tiên, hãy tiếp tục và tạo thêm một vài file đánh dấu trong folder dự án của bạn.
# This is Page 1 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. # This is Page 2 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Nếu bạn kiểm tra trình duyệt của bạn ngay bây giờ, bạn sẽ nhận thấy rằng một số liên kết bài đăng tiếp theo / trước đó đã xuất hiện. Văn bản của các liên kết đó sẽ giống như tiêu đề đầu tiên trong các bài đăng đó. Trong trường hợp này, điều đó có nghĩa This is Page 1/2 . Đó không hoàn toàn là những gì ta muốn.
Hãy tiếp tục và thêm khối YAML Front-matter ở đầu hai file đánh dấu trang.
--- title: Page 1 # We can even add meta tags to the page! This sets the keywords meta tag. # <meta name="keywords" content="my SEO keywords"/> meta: - name: keywords - content: my SEO keywords --- # This is Page 1 ... --- title: Page 2 --- # This is Page 2 ... Cùng với đó, các liên kết của bạn bây giờ sẽ nói Page 1 và Page 2 thay vì This is Page ...
Đây là danh sách đầy đủ của metadata vấn đề chính .
Thêm thanh bên
Điều hướng bằng các liên kết chuyển tiếp / tiếp theo hơi bất tiện, phải không? Ngoài ra, các trang có vẻ không theo thứ tự. Sẽ thật tuyệt nếu có một thanh bên hoặc thứ gì đó có thể giải quyết cả hai vấn đề đó?
Chủ đề mặc định của VuePress đi kèm với sự hỗ trợ cho một thanh bên mạnh mẽ, nhưng để kích hoạt nó, bạn cần tạo một file cấu hình đơn giản.
Hãy tiếp tục và tạo .vuepress/config.js trong folder dự án của bạn và kích hoạt thanh bên.
module.exports = { themeConfig: { sidebar: [ '/', '/Page 1', '/Page 2' ] } } Đó là tất cả những gì bạn cần cho một thanh bên cơ bản, nhưng cũng có nhiều tùy chọn cấu hình khác.
Bật Navbar
Vì vậy, bạn đã có các trang và thanh bên, nhưng trang web vẫn cảm thấy hơi nhạt nhẽo. Tại sao không cải tiến mọi thứ bằng cách thêm thanh chuyển và chức năng tìm kiếm?
module.exports = { title: 'My VuePress Site', themeConfig: { sidebar: [ ... ], } } Hóa ra tất cả những gì bạn cần làm để tạo thanh chuyển và trường tìm kiếm là thêm tiêu đề vào trang web ! Nói về thuận tiện! Và chức năng tìm kiếm hoạt động hiệu quả!
(Tất nhiên, bạn có thể làm một số việc khác để cấu hình thanh chuyển .)
Sử dụng các thành phần Vue
Hãy nâng cao mọi thứ. Sức mạnh thực sự của VuePress nằm ở khả năng sử dụng các thành phần Vue trong các trang.
Lưu ý, các thành phần Vue của bạn phải có khả năng SSR, vì vậy bạn không nên làm bất kỳ điều gì sửa đổi DOM hoặc giao diện với các API chỉ dành cho trình duyệt bên ngoài hook mounted() hoặc trình nghe sự kiện mounted() .
Hãy tạo một thành phần Vue cho phép ta tăng và giảm một số. (Những thứ thực sự quan trọng ở đây, mọi người.) VuePress tự động phát hiện các thành phần Vue được tạo trong .vuepress/components , vì vậy hãy tiếp tục và tạo .vuepress/components/NumberModifier.vue
<template> <div class="number-modifier"> <button @click="increment()">+</button> <strong> {{value}} </strong> <button @click="decrement()">-</button> </div> </template> <script> export default { props: ['start'], // We have to copy the value because we can't use v-model with // nothing to bind to. // (VuePress doesn't have support for reactive page variables at the moment.) data() { return { value: this.start } }, methods: { increment() { this.value++ }, decrement() { this.value-- } } } </script> Và chỉ cần như vậy, ta có thể sử dụng nó trong bất kỳ bài đăng nào. Ví dụ: Page-1.md
... # This is Page 1 **Our Component:** <NumberModifier :start="5"></NumberModifier> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
Phương pháp tương tự áp dụng cho bất kỳ thành phần nào. Điều này làm cho nó trở thành một cách tốt để chứng minh các thành phần bạn viết nội tuyến với tài liệu của bạn cho chúng, hoặc thậm chí xây dựng các trang web nâng cao hơn! Tuỳ bạn.
Chủ đề tùy chỉnh
Không phải ai cũng muốn trang web tĩnh của bạn trông giống như mọi trang web khác được xây dựng bằng các công cụ giống nhau, vì vậy rất có thể cuối cùng bạn cần bắt đầu tùy chỉnh mọi thứ.
Các sửa đổi cơ bản
Chủ đề mặc định sử dụng Stylus làm bộ xử lý trước CSS của nó. Nếu tất cả những gì bạn muốn làm là thay đổi một hoặc hai màu, bạn có thể thực hiện điều đó bằng cách thêm .vuepress/override.styl và sửa đổi một vài giá trị trong đó. Bạn thậm chí có thể thêm một vài overrides CSS vào đó nếu cần.
Chủ đề mặc định đủ cơ bản mà bạn có thể cần thay đổi là màu nhấn.
// Color configuration $accentColor = #3eaf7c $textColor = #2c3e50 $borderColor = #eaecef $codeBgColor = #282c34 // Layout configuration $navbarHeight = 3.6rem $sidebarWidth = 20rem $contentWidth = 740px Tạo chủ đề mới
Trong VuePress, các chủ đề chỉ là tập hợp các thành phần Vue và các tài sản liên quan. Nếu bạn muốn bắt đầu với chủ đề của riêng mình, cách dễ nhất là đẩy chủ đề mặc định bằng cách sử dụng $ vuepress eject . Tất cả những việc này là sao chép các file chủ đề mặc định sang .vuepress/theme .
Nếu bạn nhìn vào chủ đề mặc định, bạn sẽ thấy rằng nó cực kỳ dễ hiểu. Ít hơn 25 file với trung bình mỗi dòng ~ 70 dòng. Về cơ bản không có boilerplate.
Bạn có thể tiếp tục và bắt đầu tùy chỉnh chủ đề ngay lập tức. Các thành phần sẽ được reload nóng giống như phần còn lại của trang web ! Để biết thêm chi tiết về các chủ đề tùy chỉnh, hãy xem các tài liệu .
Kết luận
VuePress chỉ mới bắt đầu và tôi có thể nói rằng nó trông rất tuyệt. Ngay cả khi bạn không có kế hoạch xây dựng bất cứ thứ gì với nó ngay lập tức, hãy theo dõi các tài liệu chính thức . Mọi thứ sẽ trở nên tốt hơn từ đây.
Các tin liên quan
