Sổ tay Lume SSG
Ngày 18 tháng 11 năm 2022/#Deno
Lume là trình tạo trang web tĩnh mới dựa trên Deno. Deno là môi trường chạy thời gian thực dựa trên JavaScript hỗ trợ TypeScript.
Lume không được xây dựng xung quanh bất kỳ ngôn ngữ cụ thể nào. Nó hỗ trợ Markdown, Nunjucks, TypeScript và JavaScript theo mặc định. Lume cũng hỗ trợ các plugin. Một số plugin được cài đặt sẵn theo mặc định. Đây là lý do tại sao bản thân Lume không phụ thuộc vào ngôn ngữ mẫu.
Trước khi tìm hiểu thêm về Lume, chúng ta hãy thảo luận về Deno và xem xét một số tính năng quan trọng của Deno.
Deno là gì?
Deno là một giải pháp thay thế cho Node.js do Ryan Dahl (người cũng phát triển Node) xây dựng. Deno dựa trên ngôn ngữ lập trình Rust và thành phần chính thứ hai trong Deno là công cụ JavaScript V8 cho WebAssembly.
Deno có nhiều tính năng thú vị – nhanh, bảo mật theo mặc định, tương thích với web assembly và hỗ trợ TypeScript, có các công cụ phát triển tích hợp, v.v. Deno cũng hỗ trợ API Node.js để bạn có thể sử dụng tất cả npm được đóng gói với Deno.
Trong Deno, bạn không cần tạo tệp cấu hình để chạy một chương trình đơn giản. Bạn chỉ cần triển khai trang web của mình ngay lập tức với mạng on-edge thứ hai. Nhưng tính năng yêu thích cuối cùng của tôi là node_modulesthư mục mới trong không gian làm việc. Deno lưu trữ đệm tất cả các gói cục bộ và sử dụng chúng, rất nhanh so với Node.
Bạn có thể xem trang web blog demo tại đây và toàn bộ mã đều có sẵn trên GitHub tại đây .
Bây giờ chúng ta hãy cùng xem hướng dẫn nhé.
Mục lục
- Lume + Đánh dấu
- Tại sao Lume lại đặc biệt?
- Lume so với các trình tạo trang web tĩnh khác như thế nào?
- Cách bắt đầu một dự án mới với Lume
- Cấu trúc thư mục Lume
- Các thư mục bổ sung
- Cách tạo dữ liệu toàn cầu
- Cách tạo trang động
- Cách tạo trang chủ và trang phân trang
- Làm thế nào để xây dựng một trang bài viết
- Cách tạo trang danh mục
- Cách tạo trang thẻ
- Cách bật chức năng tìm kiếm
- Cách cài đặt tìm trang
- SEO của Lume
- Sơ đồ trang web Lume
- Plugin Lume
- Làm thế nào để bật bình luận
- Cách sử dụng Netlify CMS với Lume
- Cách triển khai blog của bạn với Deno Deploy
- Các trang Github
- Phần kết luận
Lume + Đánh dấu
Lume là trình tạo trang web tĩnh mới dựa trên Deno do Óscar Otero tạo ra và duy trì . Lume sử dụng markdown-it làm markdown mặc định. Bạn có thể sử dụng plugin nhận xét để thay đổi markdown mặc định.
Markdown là ngôn ngữ giúp viết tài liệu, tệp readme và blog trên internet. John Gruber đã tạo ra markdown vào năm 2004.
Markdown-it tương tự như Markdown (GFM) của GitHub . GFM và markdown-it đều tuân theo các thông số kỹ thuật markdown chính x ác .
Nếu bạn đã làm việc với GitHub và viết các tệp README, điều đó có nghĩa là bạn có thể quen thuộc với markdown GFM. Nếu bạn không thích markdown mặc định (markdown-it), bạn có thể thay đổi markdown bằng plugin nhận xét.
Có rất nhiều trình tạo site tĩnh. Vậy tại sao Lume lại đặc biệt? Nó cung cấp những gì so với các trình tạo site tĩnh khác? Hãy cùng tìm hiểu.
Tại sao Lume lại đặc biệt?
Như bạn đã biết, Lume được xây dựng trên Deno và Deno là một giải pháp thay thế cho Node.js—đó là lý do tại sao Lume cung cấp nhiều tính năng sẵn có.
Lume hoạt động tương tự như tệp readme GitHub. Nếu bạn quen với việc viết một trong những tệp đó (và sử dụng markdown), bạn không cần phải học bất cứ điều gì khác để viết bài viết và tài liệu hướng dẫn bằng Lume.
Sau đây là một số lợi ích của Lume:
- Lume hỗ trợ nhiều công cụ tạo mẫu như Markdown, Nunjucks , Eta , JSX , Liquid hoặc Pug .
- Nó hỗ trợ nhiều tác giả
- Nó có cú pháp mã tô sáng
- Có hỗ trợ SEO tuyệt vời
- Lume hỗ trợ nhiều ngôn ngữ
- Nó có hỗ trợ Windi CSS
- Có hỗ trợ phân trang và thành phần
- Nó hỗ trợ thu nhỏ JavaScript, HTML, CSS và SASS
- Nó có hỗ trợ quan hệ
- Có chức năng tìm kiếm tích hợp sẵn
- Nó hỗ trợ Netlify CMS
- Nó hỗ trợ hình ảnh và SVG
- Có hỗ trợ plugin Remark.js
- Bạn có thể triển khai với Netlify, Vercel, GitLab Pages và trang GitHub.
Lume so sánh với các trình tạo trang web tĩnh khác như thế nào?
Lume là trình tạo trang web tĩnh mới so với các trình tạo khác, nhưng nó đi kèm với nhiều tùy chọn cấu hình và bạn có thể làm bất cứ điều gì với nó. Bạn thậm chí không cần sử dụng bất kỳ plugin của bên thứ ba nào.
Với bộ xử lý và bộ tiền xử lý Lume, bạn có thể dễ dàng thao tác mã HTML bằng JavaScript DOM API. Các trình tạo trang tĩnh khác hỗ trợ một số công cụ mẫu, nhưng Lume hỗ trợ nhiều công cụ mẫu như JavaScript, JSX, Nunjucks, Eta, JSX, Liquid và Pug.
Lưu ý rằng Lume có vẻ khó để bắt đầu với người mới bắt đầu. Nhưng nếu bạn đang theo dõi bài viết của tôi, hãy đảm bảo mở mã để mọi thứ trở nên rõ ràng hơn nhiều đối với bạn.
Cách bắt đầu một dự án mới với Lume
Bạn có thể thiết lập một dự án mới với Lume CLI bằng lệnh này:
deno run -Ar https://deno.land/x/lume/init.ts
Bản demo cài đặt Lume
Thực hiện theo các bước sau:
- Đầu tiên, tạo một
mkdir lume-denodự án thư mục trống. - Sau đó chạy lệnh lume
init.ts. - Chọn một plugin có sẵn từ danh sách.
Và bạn nên bắt đầu và chạy thôi.
Cấu trúc thư mục Lume
Sau khi cài đặt hoàn tất, chúng ta thấy ba tập tin:
_config fileđược sử dụng để cấu hình Lume.deno.jsonlà một tập lệnh hoặc nhiệm vụ được xác định cho Deno.import_map.jsonlà giúp bạn nhập gói Deno cho internet.
cấu trúc thư mục mặc định của lume
Cách chạy máy chủ Lume
Để chạy máy chủ phát triển cục bộ, bạn sẽ sử dụng deno task lume --servelệnh. Để xây dựng trang web, hãy chạy deno task buildlệnh.
Nếu bạn gặp lỗi 404 - không tìm thấy, bạn có thể tạo một index.njktệp trong thư mục gốc.
Trong index.njktệp, dán đoạn mã sau.
---
title: "hello"
---
hello world
Và bạn sẽ thấy kết quả sau:
Lume xin chào thế giới
Các thư mục bổ sung:
poststhư mục không phải là thư mục bắt buộc. Nó chứa tất cả các tệp đánh dấu bài đăng của bạn.pagesthư mục không phải là thư mục bắt buộc. Nó chứa tất cả các tệp đánh dấu trang của bạn.authorthư mục không phải là thư mục bắt buộc. Nó chứa tất cả các tệp markdown của tác giả bạn._componentsthư mục là thư mục bắt buộc . Nó chứa tất cả các thành phần của bạn._includesthư mục là thư mục bắt buộc . Nó chứa bố cục và mẫu cho trang web của bạn.imagesthư mục không phải là thư mục bắt buộc. Nó chứa tất cả hình ảnh của bạn.
Các thư mục bài viết, trang, tác giả và hình ảnh là tùy chọn. Bạn có thể đổi tên các thư mục này theo ý muốn của mình. Các thư mục _componentsvà _includeslà bắt buộc và bạn không được đổi tên chúng.
Sự khác biệt giữa các thành phần, bố cục và mẫu như sau:
- Các thành phần là mã có thể tái sử dụng
- Bố cục và mẫu không thể tái sử dụng như các thành phần.
Cách tạo dữ liệu toàn cầu
Trong Lume, bạn có thể tạo biến dữ liệu có thể truy cập toàn bộ trang web bởi tất cả các công cụ tạo mẫu.
// Set a variable
site.data("post_per_page", 10);
// Set a function
site.data("randomNumber", function () {
return Math.random();
});
Cách tạo bài viết, trang và tệp markdown của tác giả
Bạn tạo bài đăng, trang và thư mục tác giả trong thư mục gốc. Sau đó, bên trong mỗi thư mục, bạn viết các tệp markdown.
Bạn có thể truy cập tất cả bài đăng, trang và tác giả theo tên tệp trên trình duyệt:
localhost:3000/posts/your-title.htmllocalhost:3000/pages/your-pages.htmllocalhost:3000/author/your-author.html
Giả sử bạn cần một bài đăng demo, các trang và markdown của tác giả cho một dự án hoặc mẫu. Sau đó, bạn có thể sử dụng demo-markdown posts cho dự án của mình. Nó miễn phí và mã nguồn mở, và bạn có thể tạo mẫu của riêng mình.
Cách tạo trang đ ộng
Trong Lume, .tmpl.jscác .tmpl.tstiện ích mở rộng sử dụng JS và TS làm công cụ tạo mẫu . Bạn có thể sử dụng chúng với các trang thông thường hoặc trang động để tạo danh mục, thẻ, phân trang, v.v. cho trang web của mình.
Cách tạo trang chủ và trang phân trang
Trang chủ dựa trên phân trang và phân trang dựa trên bài đăng. Lume tạo phân trang động.
Trong Lume, tôi đã chọn nunjucks và JavaScript để tạo trang web demo của mình. Nunjucks là công cụ tạo mẫu mặc định. Bạn có thể dễ dàng thay đổi công cụ Nunjucks mặc định bằng một công cụ tạo mẫu khác bằng mã sao chép-dán.
trang chủ
Lume cung cấp một hàm mẫu JavaScript giúp tạo các trang web động. Nếu bạn tạo trang chủ cho trang web, bạn cần tạo một index.tmpl.jstệp trong thư mục gốc hoặc thư mục src. Lume cũng hỗ trợ thư mục src để sắp xếp dự án của bạn. Trong dự án demo của tôi, tôi không sử dụng srcthư mục này.
Đây *.tmpl.jslà phần mở rộng của mẫu JavaScript giúp tạo các trang động cho trang web. Nó được cài đặt sẵn trong Lume với plugin modules .
Ví dụ, đoạn mã sau tạo phân trang cho trang web của bạn. Nhưng bố cục lại đến từ _includesthư mục.
// index.tmpl.js
// title for SEO
export const title = "Minimalist blog"
// description for SEO
export const description = "Minimalist blog theme is liteweight and work with lume."
export default function* ({ search, paginate }) {
// Get all posts of type article.
const posts = search.pages("type=article", "date=desc");
// Configation for pagination
const options = {
// Page 1 is the homepage, set "/" as url
url: (n) => n === 1 ? "/" : `/page/${n}/`,
// par page posts
size: 7,
};
// Yield the pages, but the index needs a different layout
for (const page of paginate(posts, options)) {
// if home page, use diffrent layout "/"
if (page.pagination.page === 1) {
page.menu = {visible: true, order: 1, title:"Home" }
page.title = "Home page"
// comes from _includes folder
page.layout = "layouts/home.njk";
} else {
// Render diffrent layout if it is not home page page "/page/2","/page/3",etc
page.title = "Pagination page"
page.layout = "layouts/home.njk";
}
yield page;
}
}
Lume có một plugin tìm kiếm giúp bạn tìm kiếm các trang. Trong blog demo của tôi, tôi tìm kiếm tất cả các trang dựa trên loại.
Trong thư mục tất cả bài đăng của tôi, tất cả bài đăng được định nghĩa trong type=article, tác giả được mô tả trong type=author, và các trang được định nghĩa trong type=page. Plugin tìm kiếm được cài đặt sẵn với Lume.
Trong index.tmpl.jstệp, bạn có thể lấy tất cả các trang có loại "article" ( type=article) bằng cách sử dụng mã sau: const posts = search.pages("type=article", "date=desc");. search.pages("type=article", "date=desc")Hàm này chỉ trả về những trang có type=article.
Tệp layouts/base.njkbố cục chứa cơ sở HTML và bao gồm phần đầu trang và phần chân trang cho trang web.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title }}</title>
<meta name="description" content="{{ description or site.description }}">
</head>
<body>
{% include "layouts/header.njk" %}
<main class="{{ bodyClass }}">
{{ content | safe }}
</main>
{% include "layouts/footer.njk" %}
</body>
</html>
Bên trong {{ content | safe }}, Lume hiển thị các mã HTML khác như thẻ, bài viết, mẫu trang chủ, trang thẻ và danh mục, v.v.
// rest code ...
for (const page of paginate(posts, options)) {
}
// rest code ...
Tôi đã sử dụng vòng lặp for trên index.tmp.jstệp giúp lấy tất cả các bài đăng và gửi chúng đến layouts/home.njktệp và layouts/home.njktệp. Bạn lấy tất cả các bài đăng từ kết quả, sau đó chuyển chúng đến card.njkmẫu.
---
layout: layouts/base.njk
---
{% for post in results %}
{% include "templates/card.njk" %}
{% else %}
<h2> Posts is empty </h2>
{% endfor %}
{% include "templates/pagnation.njk" %}
Tệp templates/card.njk chạy cho tất cả các blog và tạo HTML cho từng blog. Thẻ của bạn trông như thế này:
thẻ.njk
Trong card.jsmẫu, bạn có thể truy cập bằng {{}}dấu ngoặc nhọn. Lấy tiêu đề bằng {{post.data.title}}và {{post.data.description}}.
Trong blog demo của tôi, tôi chỉ nhận được danh mục đầu tiên hiển thị bên trong thẻ. Vì vậy, tôi sử dụng bộ lọc được xác định _config.tsvà sử dụng nó với |các ký hiệu. Bên trong, card.njkchúng ta nhận được chỉ mục bằng không hoặc giá trị đầu tiên trong các danh mục với mã sau: {{ post.data.category | category }}.
Để biết được tác giả, card.njktôi sẽ xác định mối quan hệ giữa bài viết và loại tác giả, bạn có thể tìm hiểu về điều này trong tài liệu.
<div class="container px-6 py-10 mx-auto">
<div class="mt-8 lg:-mx-6 lg:flex lg:items-center">
<img class="object-cover border-none w-full lg:mx-6 lg:w-1/2 rounded-xl h-72 lg:h-96" src="{{ post.data.image }}" alt="{{ post.data.title }}">
<div class="mt-6 lg:w-1/2 lg:mt-0 lg:mx-6 ">
<a class="text-sm text-blue-500 uppercase" href="/category/{{ post.data.category | category }}" >
{{ post.data.category | category }}
</a>
<a href="{{ post.data.url }}" class="block mt-4 text-2xl font-semibold text-gray-800 hover:text-gray-500 dark:text-white md:text-3xl">{{ post.data.title }}</a>
<p class="mt-3 text-sm text-gray-500 dark:text-gray-300 md:text-sm">
{{ post.data.description }}
</p>
<a href="{{ post.data.url }}" class="inline-block p-2 bg-blue-700 mt-4 text-white hover:bg-blue-500">Read more</a>
<div class="flex items-center mt-6">
{% if post.data.author.length <= 2 %}
{% for author in post.data.author %}
<img class="border-none object-cover object-center w-10 h-10 rounded-full" src="{{ author.image}}" alt="{{ author.author_name}}">
<div class="mx-4">
<a href="{{author.url}}" class="text-sm text-gray-700 dark:text-gray-200">
{{ author.author_name}}</a>
<p class="text-sm text-gray-500 dark:text-gray-400">
{{author.job}}
</p>
</div>
{% endfor %}
{% else %}
<img class="border-none object-cover object-center w-10 h-10 rounded-full" src="{{ post.data.author.image}}" alt="{{ post.data.author.name}}">
<div class="mx-4">
<a href="{{ post.data.author.url}}" class="text-sm text-gray-700 dark:text-gray-200">
{{ post.data.author.author_name}}</a>
<p class="text-sm text-gray-500 dark:text-gray-400">
{{post.data.author.job}}
</p>
</div>
{% endif %}
</div>
</div>
</div>
</div>
Cả {{ title }}hai {{description}}đều hiển thị tiêu đề và mô tả tệp đánh dấu. Để hiển thị danh mục, tôi đã sử dụng bộ lọc để hiển thị một danh mục duy nhất trên trang bài viết và xác định bộ lọc trên _config.tstệp. Tôi cũng hiển thị tác giả đơn lẻ và nhiều tác giả với vòng lặp For. Mỗi thẻ có post.data.urlthuộc tính riêng, sau khi người dùng nhấp vào nút đọc thêm, người dùng trước đó đã tôn trọng trang đọc bài viết. Để hiển thị hình ảnh, tôi đã sử dụng {{ post.data.image }}thuộc tính. Tôi cũng hiển thị tác giả đơn lẻ và nhiều tác giả với vòng lặp For trên card.njktệp.
Cách xây dựng một trang bài viết
Tôi biết trang chứa nội dung bài viết là một trong những trang quan trọng nhất đối v ới một blog. Đó là nơi người đọc nên dành nhiều thời gian hơn là trang chủ của trang web.
---
category:
- Blog
date: 2022-03-20T13:09:24Z
description: Dolor excepteur ad ad fugiat Lorem consectetur velit excepteur duis qui.
image: /images/dice.jpg
tags:
- npm
- npm cli
- npm install command
title: Random blog Title for markdown.
draft: false
author_id: 1
type: article
layout: templates/article.njk
---
Laboris consequat elit ad excepteur. Ipsum duis amet dolore voluptate dolore consequat ullamco incididunt ullamco. Dolore laborum cupidatat dolor ipsum reprehenderit excepteur cupidatat dolore.
## First
Cupidatat non amet irure esse quis aute qui enim. Est qui ullamco proident consequat aute reprehenderit eiusmod nisi. Laboris ullamco fugiat sint occaecat.
## Second
Irure fugiat officia non esse esse irure eu sint commodo quis amet. Dolor culpa non amet elit adipisicing exercitation ex anim velit ipsum.
## conclusion
Culpa irure eiusmod labore ut proident sit enim laborum nulla voluptate eu. Id tempor velit cillum pariatur est laboris ipsum ad. Sint nostrud nostrud laboris Lorem consequat tempor voluptate dolore velit. Commodo elit nulla commodo pariatur. Deserunt ipsum fugiat id ipsum pariatur cupidatat magna ex. Fugiat aliquip nisi laboris aliquip velit velit id quis eu reprehenderit excepteur fugiat.
Tôi đã tạo một bài viết trong thư mục bài viết tại type=article. author_idXác định mối quan hệ giữa tác giả và bài viết.
Tôi sử dụng templates/article.njknó làm bố cục cho trang bài viết của mình. Bạn có thể thiết kế theo yêu cầu của mình. Bạn cũng có thể thiết kế tiêu đề bài viết, mô tả, thẻ tác giả và thẻ tag.
---
layout: layouts/base.njk
---
<article class="container mx-auto p-2">
<div class="flex flex-col">
<h1 class="text-2xl text-black mt-3">{{ title }}</h1>
<p class="text-xl mt-1 text-gray-600">{{ description }}</p>
{% if author %}
<div class="flex flex-row mt-4">
{% if author.length <= 2 %}
{% for author in author %}
<img class="border-none object-cover object-center w-10 h-10 rounded-full" src="{{ author.image}}" alt="{{ author.author_name}}">
<div class="mx-4">
<a href="{{author.url}}" class="text-sm text-gray-700 dark:text-gray-200">
{{ author.author_name}}</a>
<p class="text-sm text-gray-500 dark:text-gray-400">
{{author.job}}
</p>
</div>
{% endfor %}
{% else %}
<img class="border-none object-cover object-center w-10 h-10 rounded-full" src="{{ author.image}}" alt="{{ author.name}}">
<div class="mx-4">
<a href="{{ author.url}}" class="text-sm text-gray-700 dark:text-gray-200">
{{ author.author_name}}</a>
<p class="text-sm text-gray-500 dark:text-gray-400">
{{ author.job}}
</p>
</div>
{% endif %}
</div>
{% endif %}
<nav class="flex flex-row my-5">
{% for tag in tags %}
<a href="/tag/{{ tag.trim().toLowerCase().split(' ').join("-") }}/" class=" bg-blue-500 text-black p-2 mx-1">{{ tag }}</a>
{% endfor %}
</nav>
<time class="mt-2" datetime="{{ date | date('DATETIME') }}">
{{ date | date('HUMAN_DATE') }}
</time>
</div>
<div class="mt-4">
{{ content | safe }}
</div>
</article>
{%- set previousPost = search.previousPage(url, "type=article") %}
{% if previousPost %}
<ul class="flex flex-row w-full mt-10 justify-between p-4">
{%- if previousPost %}
<li class="w-6/12 text-left">
← Previous: <a href="{{ previousPost.data.url }}" rel="prev">{{ previousPost.data.title }}</a>
</li>
{% endif %}
{%- set nextPost = search.nextPage(url, "type=article") %}
{%- if nextPost %}
<li class="w-6/12 text-right">
<strong>Next: <a href="{{ nextPost.data.url }}" rel="next">{{ nextPost.data.title }}</a> →</strong>
</li>
{% endif %}
</ul>
{% endif %}
<div class="container p-2 mx-auto mt-6">
{# ==== #}
{# Addding the utteranc Commenting script #}
{# ==== #}
<h1 class="text-center text-2xl my-3"> Comment </h1>
<script src="https://utteranc.es/client.js"
repo="officialrajdeepsingh/Minimalist-blog"
issue-term="pathname"
theme="github-light"
crossorigin="anonymous"
async>
</script>
</div>
Tệp này layouts/base.njklà tệp cơ sở cho blog của chúng tôi (mà tôi đã giải thích). Cả {{ title }}hai {{description}}đều hiển thị tiêu đề và mô tả tệp markdown.
Để hiển thị thẻ trên trang bài viết, tôi đã sử dụng vòng lặp for. Tôi cũng hiển thị tác giả đơn lẻ và nhiều tác giả bằng vòng lặp for.
Để chuyển đổi ngày tháng sang định dạng dễ đọc, tôi đã sử dụng plugin ngày tháng Lume và gói nó bằng bộ lọc ngày tháng trông như thế này: {{ date | date('HUMAN_DATE') }}. Để hiển thị tất cả các đoạn văn markdown, tôi đã sử dụng {{ content | safe }}.
Đối với phân trang, tôi đã sử dụng plugin phân trang Lume và với search.previousPage(url, "type=article")chức năng này, tôi đã hiển thị các bài đăng tiếp theo và trước đó trên trang bài viết. Đối với bình luận, tôi đã sử dụng utteranc.es .
Cách tạo trang danh mục
Trong Lume, bạn tạo một danh mục động dựa trên loại bài viết. Lume cũng cung cấp chức năng tích hợp được gọi là công cụ mẫu JavaScript giúp bạn tạo trang động. Nó tương tự như việc tạo chức năng phân trang.
Trong Lume, có một tệp đặc biệt có tên .tmpl.jslà giúp bạn tạo một danh mục động.
export const layout = "layouts/category.njk";
export default function* (props) {
const { search }= props
for (const category of search.values("category") ) {
yield {
url: `/category/${category}/`,
title: `Categoryed ${category}`,
type:"category",
category,
};
}
}
Trong lume search.values()có một hàm giúp bạn tìm một danh mục bằng cách sử dụng thẻ meta markdown và gửi dữ liệu vào tệp layout/category.njk. Nó sẽ tạo ra tất cả các danh mục với các URL sau như /category/android/, /category/android-phone/, /category/human/v.v.
Cách tạo trang thẻ
Tạo trang thẻ động tương tự như tạo danh mục. Lume cung cấp search.tags()chức năng đặc biệt để tạo thẻ:
export const layout = "layouts/tag.njk";
export default function* ({ search }) {
for (const tag of search.tags()) {
yield {
url: `/tag/${tag}/`,
title: `Tagged ${tag}`,
type: "tag",
tag,
};
}
}
Đoạn mã sau đây tạo ra tất cả các thẻ có URL như sau /tag/android/, /tag/android-phone/, /tag/human/v.v.
Cách bật chức năng tìm kiếm
Lume có nhiều plugin tích hợp cung cấp trải nghiệm phát triển tuyệt vời. Bạn có thể giải quyết nhiều vấn đề với plugin Lume và chúng cho phép bạn thêm và xóa các tính năng dễ dàng.
Lume cung cấp chức năng tìm kiếm tích hợp cho trang web. Bạn kích hoạt chức năng này bằng plugin tìm kiếm trang lume.
Thêm thanh tìm kiếm trong lume
Cách cài đặt Page Find
Plugin tìm kiếm trang Lume cung cấp cho bạn thanh tìm kiếm. Chỉ cần sao chép mã sau và dán vào tệp _config.tsvà khởi động lại máy chủ của bạn.
import pagefind from "lume/plugins/pagefind.ts";
Cách cấu hình plugin tìm trang
Bạn cấu hình plugin trong _config.tsfile. Bạn cũng có thể thay đổi cấu hình mặc định.
// rest of code ...
import lume from "lume/mod.ts";
import pagefind from "lume/plugins/pagefind.ts";
const site = lume();
// config the pagefind plugin with default config
site.use(pagefind());
// or
// change the default config in pagefind plugin
site.use(pagefind({
ui: {
containerId: "search",
showImages: false,
showEmptyFilters: true,
resetStyles: true,
},
}));
export default site;
SEO của Lume
Lume có một plugin hỗ trợ SEO có tên là metas. Với plugin này, bạn có thể dễ dàng thêm nhiều cấu hình thân thiện với SEO.
Cách cài đặt metas
Bạn cài đặt tất cả các plugin trong config.tsfile. Sao chép mã sau và dán vào config.tsfile, sau đó khởi động lại máy chủ.
import metas from "lume/plugins/metas.ts";
Cách cấu hình metas
Bạn có thể cấu hình metas theo nhiều cách khác nhau trong _config.tstệp. Xem các bình luận bên dưới:
import lume from "lume/mod.ts";
// install metas plugin for SEO
import metas from "lume/plugins/metas.ts";
const site = lume();
// config the metas plugin with default config
site.use(metas());
or
// add custom config
site.use(metas({
defaultPageData: {
title: "title", // Use the `title` value as fallback.
},
}));
export default site;
Cách sử dụng Metas SEO Plugin trong Lume
Để sử dụng plugin SEO metas, bạn sẽ cần tạo một _data.ymltệp trong thư mục gốc của dự án và dán đoạn mã sau vào đó:
metas:
site: Minimalist blog
twitter: "@Official_R_deep"
icon: /images/icon.png
lang: en
generator: true
mergedKeys:
metas: object
Đoạn mã sau đây giúp bạn tạo tất cả các thẻ SEO khác nhau cho trang web của mình và bạn có thể dễ dàng mở rộng nó bằng plugin metas trong Lume.
Sơ đồ trang web Lume
Lume có một plugin gọi là sitemap . Plugin này giúp bạn tạo sitemap cho blog của mình. Với Lume 13, bạn không cần phải tạo sitemap theo cách thủ công.
Cách cài đặt plugin sitemap
Bạn cài đặt tất cả các plugin trong config.tsfile. Sao chép mã sau và dán vào config.tsfile, sau đó khởi động lại máy chủ.
import sitemap from "lume/plugins/sitemap.ts";
Cách cấu hình plugin sitemap
Bạn có thể cấu hình plugin sitemap theo nhiều cách khác nhau trong _config.tstệp. Xem các bình luận bên dưới:
import lume from "lume/mod.ts";
import sitemap from "lume/plugins/sitemap.ts";
const site = lume();
site.use(sitemap());
// or
// add custom config
site.use(sitemap({
filename: "my-sitemap.xml", // to change the sitemap filename
query: "indexable=true", // Select only pages with the indexable attribute as true
sort: "date=desc", // To sort by data in ascendent order
}));
export default site;
Cách sử dụng plugin sitemap trong Lume
Bạn không cần bất kỳ tệp đặc biệt nào để sử dụng plugin site map. Chỉ cần thêm plugin sau khi gọi plugin vào config.tsvà nó sẽ bắt đầu hoạt động trên trang web của bạn. Thao tác này sẽ tạo sitemap.xmltệp và bạn có thể thay đổi tên tệp bằng cấu hình tùy chỉnh trong _config.tstệp.
Cách truy cập vào sitemap trên trang web
Bạn có thể truy cập sơ đồ trang web bằng tên tệp, ví dụ theo mặc định là trong localhost [http://localhost:3000/sitemap.xml](http://localhost:3000/sitemap.xml)và production [http://my-domain-name/sitemap.xml](http://localhost:3000/sitemap.xml).
Plugin Lume
Lume đi kèm với các plugin tích hợp , nhưng bạn có thể dễ dàng thêm hoặc xóa các tính năng theo yêu cầu của mình. Bạn không cần tất cả mọi thứ trên trang web của mình – bạn có thể cấu hình mọi thứ theo ý muốn.
Bạn có thể thêm nhiều công cụ tạo mẫu hơn, thu nhỏ HTML, CSS và JavaScript bằng plugin, bật tính năng tô sáng mã, thao tác ngày tháng, thao tác hình ảnh, hỗ trợ SVG, v.v.
Bạn cũng có thể dễ dàng tạo plugin của riêng mình bằng lume. Lume cũng cung cấp tài liệu tuyệt vời để bạn có thể tìm hiểu thêm.
Cách bật bình luận
Để thêm bình luận vào trang Lume của bạn, tôi nghĩ rằng utteranc.es là lựa chọn tốt nhất cho tất cả các trình tạo trang tĩnh. Ettore.es là một hệ thống bình luận mã nguồn mở dựa trên GitHub. Nó trông như thế này:
Bật bình luận
Nếu bạn muốn bật bình luận trên trang web, bước đầu tiên là cài đặt ứng dụng phát biểu trên GitHub. Sau đó, sao chép và dán mã sau vào tệp đọc bài viết hoặc nơi bạn hiển thị bình luận trên trang web.
<script src="https://utteranc.es/client.js"
repo="officialrajdeepsingh/Minimalist-blog"
issue-term="pathname"
theme="github-light"
crossorigin="anonymous"
async>
</script>
Tiếp theo, bạn sẽ cần thay đổi tập lệnh chú thích phát ngôn. Thay đổi đầu tiên trong repo="your-github-repo"tên kho lưu trữ là bắt buộc. Những thay đổi khác thì không. Bạn có thể điều chỉnh theo yêu cầu của mình – ví dụ, thay đổi chủ đề, thuật ngữ vấn đề, v.v.
Để đọc thêm về cách phát ngôn, đây là một bài viết tuyệt vời của Josh Collinsworth .
Cách tốt nhất là thêm chú thích câu nói vào lume rồi đọc thảo luận trên GitHub .
Cách sử dụng Netlify CMS với Lume
Netlify CMS là một hệ thống quản lý nội dung mã nguồn mở. Bạn có thể dễ dàng tích hợp Netlify với Lume bằng cách sử dụng plugin netllify_cms . Plugin này do Lume cung cấp và bạn chỉ cần cài đặt và sao chép/dán mã.
Cách cài đặt Netlify Plugin
Nhập plugin Netlify vào _config.tstệp của bạn để sử dụng như sau:
import lume from "lume/mod.ts";
import netlifyCMS from "lume/plugins/netlify_cms.ts";
const site = lume();
site.use(netlifyCMS());
export default site;
Để cấu hình, bạn sẽ cần tạo một /_data/netlify_cms.ymltệp ở cấp gốc và sau đó dán đoạn mã sau vào sau khi khởi động lại máy chủ:
backend:
name: git-gateway
branch: master
media_folder: statics
collections:
- label: Posts
name: posts
description: List of posts
folder: posts
extension: md
create: true
fields:
- label: Title
name: title
widget: string
- label: Content
name: body
widget: markdown
Netlify sẽ yêu cầu bạn cấp quyền cho proxy CMS. Nhập npx netlify-cms-proxy-server vào terminal, nhấn enter hoặc type y, và Netlify CMS của bạn sẽ bắt đầu chạy cục bộ trên URL http://localhost:3000/admin . Bây giờ blog Lume của bạn đã sẵn sàng để triển khai trên Netlify.
Cách triển khai blog của bạn với Deno Deploy
Bạn có thể triển khai Lume trên nhiều nền tảng khác nhau như Deno Deploy, GitHub Pages, Gitlab Pages, Netlify, Vercel, Fleek, AWS Amplify và Cloudflare Pages. Lume cũng cung cấp tài liệu tuyệt vời về triển khai .
Trong bài viết này, tôi sẽ triển khai blog Lume của mình bằng Deno Deploy (và chúng ta cũng sẽ xem cách thực hiện bằng các trang GitHub). Deno Deploy là một nền tảng chính thức do nhóm Deno xây dựng để triển khai các ứng dụng dựa trên Deno.
Trước khi triển khai blog Lume của bạn trên Deno Deploy, hãy đảm bảo bạn tạo một server.tstệp ở cấp gốc.
import Server from "lume/core/server.ts";
const server = new Server({
port: 8000,
root: `${Deno.cwd()}/_site`,
});
server.start();
console.log("Listening on http://localhost:8000");
Các bước triển khai:
- Tạo tài khoản trên Deno Deploy.
- Đẩy mã cục bộ của bạn lên GitHub rồi chọn
server.tstệp. Deno Deploy sẽ tự động tạo một trang web dựa trênserver.tstệp đó. - Trước tiên hãy đảm bảo tạo một
server.tstệp tùy chỉnh. Sau đó chuyển sang bước tiếp theo. - Cách dễ nhất để triển khai trang web của bạn là sử dụng GitHub Actions. Tạo một
.github/workflows/deno.ymltệp mới ở cấp gốc của dự án và dán mã sau vào đó:
name: Deploy
on: [push]
jobs:
deploy:
name: Deploy
runs-on: ubuntu-latest
permissions:
id-token: write # Needed for auth with Deno Deploy
contents: read # Needed to clone the repository
steps:
- name: Clone repository
uses: actions/checkout@v3
# TODO: add a build step here
- name: Upload to Deno Deploy
uses: denoland/deployctl@v1
with:
project: "minimalist-blog"
entrypoint: "./serve.ts"
Cách triển khai blog của bạn với Github Pages
GitHub Pages là các trang web tĩnh miễn phí mà bạn có thể sử dụng để lưu trữ các trang. Bạn cũng có thể triển khai blog Lume của mình. Quá trình triển khai khá dễ dàng.
Để triển khai Lume trên các trang GitHub, bạn cần thiết lập GitHub Actions.
Các bước triển khai
- Tốt nhất là bạn nên có kho lưu trữ GitHub để có thể chuyển đổi trang web cục bộ của mình sang GitHub Pages.
- Tạo một repo mới và đẩy toàn bộ mã cục bộ của bạn vào đó.
- Tạo một cái mới
.github/workflows/deno.ymlở cấp gốc dự án của bạn, sau đó dán mã sau vào đó và đẩy nó vào kho GitHub. Hành động GitHub chạy dựa trêngithub.ymlhành động và nó tạo ra một trang GitHub.
name: Publish on GitHub Pages
on:
push:
branches: [ main ]
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Clone repository
uses: actions/checkout@v3
- name: Setup Deno environment
uses: denoland/setup-deno@v1
with:
deno-version: v1.x
- name: Build site
run: deno task build
- name: Deploy
uses: crazy-max/ghaction-github-pages@v3
with:
build_dir: _site
env:
GITHUB_TOKEN: ${{ secrets.MY_GITHUB_TOKEN_PAGE }}
Bạn cần một GitHub token để triển khai trang web Lume của mình lên các trang GitHub. Đây là một phần bắt buộc của quá trình thiết lập. Tôi đã tìm thấy một bài viết tuyệt vời do Davide viết có thể giúp bạn tìm hiểu thêm về GitHub Actions và cách tạo một GitHub Actions.
GitHub Actions mất khoảng hai hoặc ba phút để hoàn tất việc lưu trữ trang web của bạn trên GitHub Pages.
Hãy xem kho lưu trữ GitHub để tìm hiểu cách cấu hình quy trình làm việc GitHub cho các trang GitHub. Bạn cũng có thể xem trang web demo trực tiếp trên trang GitHub .
Lưu ý nhanh: nếu bạn triển khai trang Lume của mình trên các trang GitHub và hình ảnh của bạn không hiển thị trên trang web, có hai lý do có thể xảy ra:
- Nếu tất cả tên hình ảnh không phải là chữ thường, bạn có thể gặp lỗi. Để giải quyết lỗi, hãy chuyển đổi tên hình ảnh của bạn thành chữ thường bằng lệnh này:
your.github.com/your-reponame/images/my-image.png - Nếu bạn đang sử dụng plugin Lume
base_pathvàrelative_urlsLume trong dự án của mình vàrelative_urlsbị trùng lặp, thì bạn sẽ cần phải xóarelative_urlsplugin trong dự án của mình. Hình ảnh của bạn bây giờ sẽ hoạt động tốt.
Phần kết luận
Lume là trình tạo trang web tĩnh dễ học và giàu tính năng. Bạn có thể làm bất cứ điều gì bạn tưởng tượng với nó. Lume cung cấp cho bạn rất nhiều sự tự do với mã.
Cộng đồng Lume không lớn bằng Hugo, 11ty, Jekyll và các công cụ khác. Nhưng những người bảo trì Lume tích cực trả lời mọi người bình luận trong cuộc thảo luận GitHub. Nếu không có cộng đồng mạnh, công cụ này sẽ có thể tạo ra tác động mạnh mẽ.
Một thách thức với Lume là nó khó để bắt đầu cho người mới bắt đầu và phù hợp hơn với các nhà phát triển trung cấp và nâng cao. Nếu bạn đang bắt đầu sử dụng Lume ngay với tư cách là người mới bắt đầu, bạn có thể gặp khó khăn vì thiếu kiến thức cơ bản về cách hoạt động của trình tạo trang web tĩnh.
Vì vậy, sẽ rất hữu ích nếu bạn có một chút kiến thức về Nuckjunks, JSX và các công cụ mẫu khác hoạt động dựa trên markdown. Khi bạn có được kinh nghiệm này, bạn sẽ dễ dàng có thể sử dụng Lume để thiết kế blog dựa trên markdown của mình.
Tôi khuyên bạn nên sử dụng plugin lume MDX cho markdown. Bạn có thể sử dụng các thành phần dựa trên JSX bên trong tệp markdown và bạn có thể tạo các khối mã đẹp, khối mẹo, v.v.
Tôi thực sự khuyến khích tất cả các nhà phát triển dùng thử Lume. Nếu bạn gặp vấn đề với Lume, bạn có thể liên hệ với người tạo ra nó trên GitHub Discussion và Discord Server .
Nếu khóa học của bạn là về Khoa học máy tính, Tin sinh học và Công nghệ sinh học. Bạn có thể tham gia bản tin miễn phí của tôi .