1345 từ
7 phút
Link Cards Example - Ví dụ về thẻ liên kết
2025-02-23
Cùng học
Markdown
/
Blogging
/
Demo

Giới thiệu về thẻ liên kết#

Link Cards are similar to the <LinkCard> component in Starlight, displaying links in a card format.
Thẻ liên kết tương tự như thành phần <LinkCard> trong Starlight, hiển thị liên kết dưới dạng thẻ.

Usage#

Cách sử dụng#

Hiện đã được cập nhật, cách gọi như sau

Tùy chỉnh tiêu đề và mô tả#

::link-card{url="https://tqp.io.vn" title="tqp Blog" description="tqp~"}
tqp.io.vn
tqp Blog
tqp~

Có kèm hình ảnh#

::link-card{url="https://github.com" title="Github" description="Hello World!" icon="https://github.com/github.png"}
github.com
Github
Hello World!

Tất cả các mục dưới đây đều đã hết hiệu lực

Include only a single “bare” link (a link without descriptive text), or something similar, within a paragraph in Markdown, and it will automatically be converted into a Link Card.
Trong một đoạn Markdown, chỉ cần bao gồm một “liên kết trần” (URL thuần túy không có văn bản mô tả) hoặc cấu trúc tương tự, nó sẽ tự động được chuyển thành thẻ liên kết.

**External Links**
**Liên kết bên ngoài**


https://astro.build/


<https://github.com/saicaca/fuwari/>


[https://tqp.io.vn/](https://tqp.io.vn/)


**Internal Links**
**Liên kết nội bộ**


[/archive/](/archive/)


For more details, see the internalLink option section.
Để biết thêm chi tiết, hãy xem phần tùy chọn internalLink.


**IDN (Internationalized Domain Name)**
**IDN (Tên miền quốc tế hóa)**


https://はじめよう.みんな/

https://astro.build/

https://github.com/yCENzh/Fuwari-yCENzh/

https://tqp.io.vn/

/archive/

https://はじめよう.みんな/

NOTE

Lưu ý
Once the cards are displayed, try changing the theme color or enabling dark mode!
Sau khi thẻ được hiển thị, hãy thử thay đổi màu chủ đề hoặc bật chế độ tối!

Options#

Tùy chọn cấu hình#

You can specify the options in the astro.config.mjs file.
Bạn có thể chỉ định các tùy chọn trong tệp astro.config.mjs.

...
import fuwariLinkCard from "./src/plugins/fuwari-link-card.ts"
...
export default defineConfig({
  ...
  integrations: [
    ...
    fuwariLinkCard(), // Plugin here // 在此处添加插件
    ...

If the order of plugins is complex, you can also specify it as a remark plugin.
Nếu thứ tự của các plugin phức tạp, bạn cũng có thể chỉ định nó như một plugin remark.

...
import remarkLinkCard from "./src/plugins/remark-link-card.ts"
...
export default defineConfig({
  ...
  markdown: {
    ...
    remarkPlugins: [
      ...
      remarkLinkCard, // Plugin here // 在此处添加插件
      ...
NameTypeDefaultDescription
devModebooleanimport.meta.env.DEVEnable or disable development mode.
Bật hoặc tắt chế độ phát triển
excludedUrlsArray<string | RegExp>[]A list of strings or regular expressions to exclude specific URLs from processing. This can also help prevent conflicts with other plugins.
Danh sách chuỗi hoặc biểu thức chính quy để loại trừ các URL cụ thể, nhằm ngăn ngừa xung đột với các plugin khác
linkAttributesObject{ target: ”, rel: ” }Set the target and relationship attributes for external links. These attributes can also be left unset to delegate handling to other plugins.
Thiết lập thuộc tính target và rel cho liên kết bên ngoài, để trống có thể giao cho plugin khác xử lý
rewriteRulesArray<Object>[]Rewrite specific metadata attributes fetched from links, such as the title and description.
Ghi đè các thuộc tính siêu dữ liệu (metadata) nhất định lấy từ liên kết (ví dụ: tiêu đề và mô tả)
basestring’/‘Specify the same base path as Astro’s. For details, refer here. When used as an integration, if not specified, this option will be determined automatically.
Chỉ định đường dẫn cơ sở giống như trong Astro (chi tiết). Khi sử dụng như một phần tích hợp, nếu không chỉ định thì sẽ được xác định tự động
defaultThumbnailstring”Path to the default thumbnail image to use when the metadata does not include image data. It should be relative to the public directory. For example, set defaultThumbnail to ‘images/default-thumbnail.jpg’ if the image is located at public/images/default-thumbnail.jpg.
Đường dẫn ảnh thu nhỏ mặc định được sử dụng khi metadata không chứa hình ảnh (tương đối so với thư mục public). Ví dụ: nếu ảnh nằm trong public/images/default-thumbnail.jpg thì đặt là 'images/default-thumbnail.jpg'.
internalLinkObject{ enabled: false, site: ” }Enable internal link processing within your site.
Bật xử lý liên kết nội bộ của trang web
cacheObjectSee detailed options below.Download and cache images during the build process.
Tải xuống và lưu trữ ảnh vào bộ nhớ đệm trong quá trình xây dựng

linkAttributes#

Cấu hình thuộc tính liên kết#

NameTypeDefaultDescription
targetstring”Specify where to open linked documents. The default (empty) does not set a target on links.
Chỉ định vị trí mở tài liệu liên kết (mặc định để trống sẽ không thiết lập thuộc tính target)
relstring”Define the relationship between the current document and the linked document. The default (empty) does not set any relationship.
Xác định mối quan hệ giữa tài liệu hiện tại và tài liệu liên kết (mặc định để trống sẽ không thiết lập thuộc tính rel)

rewriteRules#

Quy tắc ghi đè#

NameTypeDefaultDescription
urlRegExpA regular expression pattern is used to match a specific URL.
Mẫu biểu thức chính quy dùng để khớp với các URL cụ thể
rewriteStepsArray<Object>Defines rewrite rules for specific metadata attributes.
Xác định các quy tắc ghi đè cho các thuộc tính metadata cụ thể.

Below is an example that shows how to rewrite the “title” and “description” for metadata fetched from links pointing to a GitHub repository.
Ví dụ dưới đây minh họa cách ghi đè “title” và “description” cho metadata lấy từ các liên kết trỏ tới kho GitHub.

rewriteRules: [
  {
    url: /^https:\/\/github\.com\/[^\/]+\/[^\/]+\/?$/,
    rewriteSteps: [
      { key: "title", pattern: /:.*/, replacement: "" },
      {
        key: "description",
        pattern: /(?: (?:\. )?Contribute to (?:.+\/.+) .+\.?)|(?: - (?:.+\/.+))$/,
        replacement: "",
      },
      {
        key: "description",
        pattern: /^Contribute to (?:.+\/.+) .+\.?$/,
        replacement: "No description provided.",
      },
    ],
  },
],
NameTypeDefaultDescription
keystringMetadata attribute key to be rewritten.
Tên khóa của thuộc tính metadata cần ghi đè
patternRegExpRegular expression pattern used to match the current value of the metadata attribute. The part of the value that matches this pattern will be replaced.
Biểu thức chính quy dùng để khớp với giá trị hiện tại của thuộc tính metadata; phần khớp sẽ được thay thế
replacementstringString to replace the matched pattern in the metadata attribute.
Chuỗi dùng để thay thế các phần khớp trong thuộc tính metadata

Cấu hình liên kết nội bộ#

NameTypeDefaultDescription
enabledbooleanfalseEnable or disable internal link processing.
Bật hoặc tắt xử lý liên kết nội bộ
sitestring”Specify the same deployed URL as Astro’s. For details, refer here. When used as an integration, if not specified, this option will be determined automatically.
Chỉ định URL triển khai giống như trong Astro (chi tiết). Khi sử dụng như một phần tích hợp, nếu không chỉ định thì sẽ được xác định tự động

cache#

Cấu hình bộ nhớ đệm#

NameTypeDefaultDescription
enabledbooleanfalseEnable or disable caching.
Bật hoặc tắt bộ nhớ đệm
outDirstring’./dist/‘Output directory path. For details, refer here. Aligning with Astro allows you to benefit from features like image optimization.
输出Đường dẫn thư mục (chi tiết). Đồng bộ với Astro để tận dụng các tính năng tối ưu hóa hình ảnh và các chức năng khác
cacheDirstring’./link-card/‘Cache directory path. If devMode is set to true, the final URL to the cached images will be base + outDir + cacheDir. Otherwise, it will be base + cacheDir.
缓存Đường dẫn thư mục. Khi devMode=true, URL cuối cùng sẽ là base + outDir + cacheDir, nếu không sẽ là base + cacheDir
maxFileSizenumber0Maximum file size (in bytes) to cache. Set to 0 for no limit.
单文Kích thước bộ nhớ đệm tối đa (tính bằng byte), 0 có nghĩa là không giới hạn
maxCacheSizenumber0Maximum total cache size (in bytes). Set to 0 for no limit.
缓存Tổng dung lượng tối đa (byte), 0 có nghĩa là không giới hạn
userAgentstring’Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36’Identifier included in HTTP request headers to specify the client.
Định danh (identifier) của client trong header HTTP

Quick and Easy Options Setup#

Cấu hình tùy chọn nhanh và dễ dàng#

This plugin uses @fastify/deepmerge to simplify options setup.
Plugin này sử dụng @fastify/deepmerge để đơn giản hóa việc cấu hình các tùy chọn.

https://www.npmjs.com/package/@fastify/deepmerge

HTML Structure for Styling#

Cấu trúc HTML dùng để định kiểu (styling).#

The styles are specified in src/styles/link-card.css, and the HTML is automatically generated. Below is an example structure to guide you when customizing the styles:
Các kiểu được định nghĩa trong src/styles/link-card.css, HTML sẽ được tạo tự động. Dưới đây là cấu trúc tham khảo khi bạn muốn tùy chỉnh kiểu:

<div class="link-card__container">
  <a href="https://astro.build/" class="link-card">
    <div class="link-card__info">
      <div class="link-card__title">Astro</div>
      <div class="link-card__description">Astro builds fast content sites, powerful web applications, dynamic server APIs, and everything in-between.</div>
      <div class="link-card__metadata">
        <div class="link-card__domain">
          <img alt="favicon" class="link-card__favicon" src="https://www.google.com/s2/favicons?domain=astro.build">
          <span class="link-card__domain-name">astro.build</span>
        </div>
      </div>
    </div>
    <div class="link-card__thumbnail">
      <img alt="Astro - Build the web you want." class="link-card__image" src="https://astro.build/og/astro.jpg">
    </div>
  </a>
</div>
Link Cards Example - Ví dụ về thẻ liên kết
https://tqp.io.vn/posts/cùng-học/link-cards/
Tác giả
tqp
Ngày
2025-02-23
Giấy phép
CC BY-NC-SA 4.0
Khám phá Nam Cát Tiên - Những điểm đến & trải nghiệm không thể bỏ lỡ
Miền Tây & Đất Mũi – Hành trình 2 ngày chinh phục cực Nam Tổ quốc
© 2025 tqp. All Rights Reserved.
Powered by Astro & Fuwari