chore: 初始化 Hugo 博客项目
Hextra 主题，8 篇文章，支持全文搜索/暗色模式
This commit is contained in:
claw
@@ -0,0 +1,23 @@
|
||||
---
|
||||
title: راهنما
|
||||
weight: 2
|
||||
prev: /docs/getting-started
|
||||
next: /docs/guide/organize-files
|
||||
sidebar:
|
||||
open: true
|
||||
---
|
||||
|
||||
برای یادگیری نحوه استفاده از Hextra، بخش‌های زیر را بررسی کنید:
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="organize-files" title="سازماندهی فایل‌ها" icon="document-duplicate" >}}
|
||||
{{< card link="configuration" title="پیکربندی" icon="adjustments" >}}
|
||||
{{< card link="markdown" title="Markdown" icon="markdown" >}}
|
||||
{{< card link="syntax-highlighting" title="رنگ‌آمیزی نحوه" icon="sparkles" >}}
|
||||
{{< card link="latex" title="LaTeX" icon="variable" >}}
|
||||
{{< card link="diagrams" title="نمودارها" icon="chart-square-bar" >}}
|
||||
{{< card link="shortcodes" title="کدهای کوتاه" icon="template" >}}
|
||||
{{< card link="deploy-site" title="استقرار سایت" icon="server" >}}
|
||||
{{< /cards >}}
|
||||
@@ -0,0 +1,23 @@
|
||||
---
|
||||
title: ガイド
|
||||
weight: 2
|
||||
prev: /docs/getting-started
|
||||
next: /docs/guide/organize-files
|
||||
sidebar:
|
||||
open: true
|
||||
---
|
||||
|
||||
Hextra の使い方を学ぶには、以下のセクションを参照してください:
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="organize-files" title="ファイルの整理" icon="document-duplicate" >}}
|
||||
{{< card link="configuration" title="設定" icon="adjustments" >}}
|
||||
{{< card link="markdown" title="Markdown" icon="markdown" >}}
|
||||
{{< card link="syntax-highlighting" title="シンタックスハイライト" icon="sparkles" >}}
|
||||
{{< card link="latex" title="LaTeX" icon="variable" >}}
|
||||
{{< card link="diagrams" title="ダイアグラム" icon="chart-square-bar" >}}
|
||||
{{< card link="shortcodes" title="ショートコード" icon="template" >}}
|
||||
{{< card link="deploy-site" title="サイトのデプロイ" icon="server" >}}
|
||||
{{< /cards >}}
|
||||
@@ -0,0 +1,23 @@
|
||||
---
|
||||
title: Guide
|
||||
weight: 2
|
||||
prev: /docs/getting-started
|
||||
next: /docs/guide/organize-files
|
||||
sidebar:
|
||||
open: true
|
||||
---
|
||||
|
||||
Explore the following sections to learn how to use Hextra:
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="organize-files" title="Organize Files" icon="document-duplicate" >}}
|
||||
{{< card link="configuration" title="Configuration" icon="adjustments" >}}
|
||||
{{< card link="markdown" title="Markdown" icon="markdown" >}}
|
||||
{{< card link="syntax-highlighting" title="Syntax Highlighting" icon="sparkles" >}}
|
||||
{{< card link="latex" title="LaTeX" icon="variable" >}}
|
||||
{{< card link="diagrams" title="Diagrams" icon="chart-square-bar" >}}
|
||||
{{< card link="shortcodes" title="Shortcodes" icon="template" >}}
|
||||
{{< card link="deploy-site" title="Deploy Site" icon="server" >}}
|
||||
{{< /cards >}}
|
||||
@@ -0,0 +1,23 @@
|
||||
---
|
||||
title: 指南
|
||||
weight: 2
|
||||
prev: /docs/getting-started
|
||||
next: /docs/guide/organize-files
|
||||
sidebar:
|
||||
open: true
|
||||
---
|
||||
|
||||
通过以下章节了解如何使用 Hextra：
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="organize-files" title="文件组织" icon="document-duplicate" >}}
|
||||
{{< card link="configuration" title="配置" icon="adjustments" >}}
|
||||
{{< card link="markdown" title="Markdown" icon="markdown" >}}
|
||||
{{< card link="syntax-highlighting" title="语法高亮" icon="sparkles" >}}
|
||||
{{< card link="latex" title="LaTeX" icon="variable" >}}
|
||||
{{< card link="diagrams" title="图表" icon="chart-square-bar" >}}
|
||||
{{< card link="shortcodes" title="短代码" icon="template" >}}
|
||||
{{< card link="deploy-site" title="部署站点" icon="server" >}}
|
||||
{{< /cards >}}
|
||||
@@ -0,0 +1,629 @@
|
||||
---
|
||||
title: پیکربندی
|
||||
weight: 2
|
||||
tags:
|
||||
- پیکربندی
|
||||
---
|
||||
|
||||
Hugo تنظیمات خود را از فایل `hugo.yaml` در ریشه سایت شما می‌خواند.
|
||||
فایل پیکربندی جایی است که می‌توانید تمام جنبه‌های سایت خود را تنظیم کنید.
|
||||
برای آشنایی جامع با تنظیمات موجود و بهترین روش‌ها، فایل پیکربندی این سایت [`docs/hugo.yaml`](https://github.com/imfing/hextra/blob/main/docs/hugo.yaml) را در GitHub بررسی کنید.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## ناوبری
|
||||
|
||||
### منو
|
||||
|
||||
منوی بالای صفحه در بخش `menu.main` در فایل پیکربندی تعریف می‌شود:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
menu:
|
||||
main:
|
||||
- name: مستندات
|
||||
pageRef: /docs
|
||||
weight: 1
|
||||
- name: وبلاگ
|
||||
pageRef: /blog
|
||||
weight: 2
|
||||
- name: درباره
|
||||
pageRef: /about
|
||||
weight: 3
|
||||
- name: جستجو
|
||||
weight: 4
|
||||
params:
|
||||
type: search
|
||||
- name: GitHub
|
||||
weight: 5
|
||||
url: "https://github.com/imfing/hextra"
|
||||
params:
|
||||
icon: github
|
||||
```
|
||||
|
||||
انواع مختلفی از آیتم‌های منو وجود دارد:
|
||||
|
||||
1. لینک به یک صفحه در سایت با `pageRef`
|
||||
```yaml
|
||||
- name: مستندات
|
||||
pageRef: /docs
|
||||
```
|
||||
2. لینک به یک URL خارجی با `url`
|
||||
```yaml
|
||||
- name: GitHub
|
||||
url: "https://github.com"
|
||||
```
|
||||
3. نوار جستجو با `type: search`
|
||||
```yaml
|
||||
- name: جستجو
|
||||
params:
|
||||
type: search
|
||||
```
|
||||
4. آیکون
|
||||
```yaml
|
||||
- name: GitHub
|
||||
params:
|
||||
icon: github
|
||||
```
|
||||
5. تبديل السمة
|
||||
```yaml
|
||||
- name: Theme Toggle
|
||||
params:
|
||||
type: theme-toggle
|
||||
label: true # optional, default is false
|
||||
```
|
||||
6. مُبدِّل اللغة
|
||||
```yaml
|
||||
- name: مُبدِّل اللغة
|
||||
params:
|
||||
type: language-switch
|
||||
label: true # optional, default is false
|
||||
icon: "globe-alt" # optional, default is "translate"
|
||||
```
|
||||
|
||||
این آیتم‌های منو را می‌توان با تنظیم پارامتر `weight` مرتب کرد.
|
||||
|
||||
### منوهای تو در تو
|
||||
|
||||
با تعریف آیتم‌های منوی فرزند می‌توانید منوهای کشویی ایجاد کنید. منوهای فرزند با کلیک روی آیتم منوی والد نمایش داده می‌شوند.
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
menu:
|
||||
main:
|
||||
- identifier: sdk
|
||||
name: SDK
|
||||
- identifier: python
|
||||
name: Python ↗
|
||||
url: https://python.org
|
||||
parent: sdk
|
||||
- identifier: go
|
||||
name: Go
|
||||
url: https://go.dev
|
||||
parent: sdk
|
||||
```
|
||||
|
||||
آیتم‌های منوی فرزند باید پارامتر `parent` را با مقدار `identifier` والد مشخص کنند.
|
||||
|
||||
### لوگو و عنوان
|
||||
|
||||
برای تغییر لوگوی پیش‌فرض، فایل `hugo.yaml` را ویرایش کرده و مسیر فایل لوگوی خود را در دایرکتوری `static` اضافه کنید.
|
||||
همچنین می‌توانید لینکی که کاربران با کلیک روی لوگو به آن هدایت می‌شوند را تغییر دهید و عرض و ارتفاع لوگو را بر حسب پیکسل تنظیم کنید.
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
navbar:
|
||||
displayTitle: true
|
||||
displayLogo: true
|
||||
logo:
|
||||
path: images/logo.svg
|
||||
dark: images/logo-dark.svg
|
||||
link: /
|
||||
width: 40
|
||||
height: 20
|
||||
```
|
||||
|
||||
### صفحه‌بندی
|
||||
|
||||
برای غیرفعال کردن ناوبری قبلی/بعدی در پایین صفحات مستندات یا مقالات وبلاگ:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
page:
|
||||
displayPagination: false # برای صفحات مستندات
|
||||
blog:
|
||||
article:
|
||||
displayPagination: false # برای مقالات وبلاگ
|
||||
```
|
||||
|
||||
## نوار کناری
|
||||
|
||||
### نوار کناری اصلی
|
||||
|
||||
برای نوار کناری اصلی، به طور خودکار از ساختار دایرکتوری محتوا ایجاد می‌شود.
|
||||
برای جزئیات بیشتر به صفحه [سازماندهی فایل‌ها](/docs/guide/organize-files) مراجعه کنید.
|
||||
|
||||
برای حذف یک صفحه از نوار کناری چپ، پارامتر `sidebar.exclude` را در front matter صفحه تنظیم کنید:
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
title: پیکربندی
|
||||
sidebar:
|
||||
exclude: true
|
||||
---
|
||||
```
|
||||
|
||||
### لینک‌های اضافی
|
||||
|
||||
لینک‌های اضافی نوار کناری در بخش `menu.sidebar` در فایل پیکربندی تعریف می‌شوند:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
menu:
|
||||
sidebar:
|
||||
- name: بیشتر
|
||||
params:
|
||||
type: separator
|
||||
weight: 1
|
||||
- name: "درباره"
|
||||
pageRef: "/about"
|
||||
weight: 2
|
||||
- name: "مستندات Hugo ↗"
|
||||
url: "https://gohugo.io/documentation/"
|
||||
weight: 3
|
||||
```
|
||||
|
||||
## نوار کناری راست
|
||||
|
||||
### فهرست مطالب
|
||||
|
||||
فهرست مطالب به طور خودکار از عناوین موجود در فایل محتوا ایجاد می‌شود. می‌توانید آن را با تنظیم `toc: false` در front matter صفحه غیرفعال کنید.
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
title: پیکربندی
|
||||
toc: false
|
||||
---
|
||||
```
|
||||
|
||||
### لینک ویرایش صفحه
|
||||
|
||||
برای پیکربندی لینک ویرایش صفحه، می‌توانیم پارامتر `params.editURL.base` را در فایل پیکربندی تنظیم کنیم:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
editURL:
|
||||
enable: true
|
||||
base: "https://github.com/your-username/your-repo/edit/main"
|
||||
```
|
||||
|
||||
لینک‌های ویرایش به طور خودکار برای هر صفحه بر اساس URL ارائه شده به عنوان دایرکتوری ریشه ایجاد می‌شوند.
|
||||
اگر می‌خواهید لینک ویرایش را برای یک صفحه خاص تنظیم کنید، می‌توانید پارامتر `editURL` را در front matter صفحه تنظیم کنید:
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
title: پیکربندی
|
||||
editURL: "https://example.com/edit/this/page"
|
||||
---
|
||||
```
|
||||
|
||||
## پاورقی
|
||||
|
||||
### کپی رایت
|
||||
|
||||
برای تغییر متن کپی رایت نمایش داده شده در پاورقی سایت، باید یک فایل به نام `i18n/en.yaml` ایجاد کنید.
|
||||
در این فایل، متن جدید کپی رایت را به صورت زیر مشخص کنید:
|
||||
|
||||
```yaml {filename="i18n/en.yaml"}
|
||||
copyright: "© 2024 متن دلخواه شما"
|
||||
```
|
||||
|
||||
برای مرجع، یک فایل نمونه [`i18n/en.yaml`](https://github.com/imfing/hextra/blob/main/i18n/en.yaml) در مخزن GitHub موجود است. همچنین می‌توانید از قالب Markdown در متن کپی رایت استفاده کنید.
|
||||
|
||||
## سایر موارد
|
||||
|
||||
### فاوآیکون
|
||||
|
||||
برای سفارشی کردن [فاوآیکون](https://fa.wikipedia.org/wiki/فاوآیکون) سایت، فایل‌های آیکون را در پوشه `static` قرار دهید تا [فاوآیکون‌های پیش‌فرض قالب](https://github.com/imfing/hextra/tree/main/static) را جایگزین کنید:
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="static" >}}
|
||||
{{< filetree/file name="android-chrome-192x192.png" >}}
|
||||
{{< filetree/file name="android-chrome-512x512.png" >}}
|
||||
{{< filetree/file name="apple-touch-icon.png" >}}
|
||||
{{< filetree/file name="favicon-16x16.png" >}}
|
||||
{{< filetree/file name="favicon-32x32.png" >}}
|
||||
{{< filetree/file name="favicon-dark.svg" >}}
|
||||
{{< filetree/file name="favicon.ico" >}}
|
||||
{{< filetree/file name="favicon.svg" >}}
|
||||
{{< filetree/file name="site.webmanifest" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
#### تنظیمات پایه
|
||||
|
||||
حداقل، فایل `favicon.svg` را در پوشه `static` قرار دهید. این فایل به عنوان فاوآیکون پیش‌فرض سایت استفاده می‌شود.
|
||||
|
||||
می‌توانید یک فاوآیکون SVG تطبیقی ایجاد کنید که به ترجیحات تم سیستم پاسخ دهد با استفاده از media queryهای CSS درون خود SVG، با پیروی از روش توضیح داده شده در [ساخت یک فاوآیکون تطبیقی](https://web.dev/articles/building/an-adaptive-favicon).
|
||||
|
||||
#### پشتیبانی از حالت تاریک
|
||||
|
||||
برای پشتیبانی بهتر از حالت تاریک، فایل `favicon-dark.svg` را در کنار `favicon.svg` در پوشه `static` قرار دهید. وقتی هر دو فایل موجود باشند، Hextra به طور خودکار:
|
||||
|
||||
- از `favicon.svg` برای حالت روشن یا زمانی که ترجیح تمی مشخص نشده استفاده می‌کند
|
||||
- به `favicon-dark.svg` تغییر می‌کند وقتی سیستم کاربر در حالت تاریک تنظیم شده است
|
||||
- تنظیمات `prefers-color-scheme` سیستم را برای تغییر خودکار رعایت می‌کند
|
||||
|
||||
تغییر فاوآیکون حالت تاریک در تمام مرورگرهای مدرن، از جمله Firefox، کار می‌کند و تجربه‌ای یکپارچه که با تم سایت شما مطابقت دارد ارائه می‌دهد.
|
||||
|
||||
#### فرمت‌های اضافی
|
||||
|
||||
در حالی که `favicon.ico` عمدتاً برای مرورگرهای قدیمی است، مرورگرهای مدرن از فاوآیکون‌های SVG پشتیبانی می‌کنند که به دلیل مقیاس‌پذیری و حجم کم فایل ترجیح داده می‌شوند.
|
||||
در صورت نیاز از ابزارهایی مانند [favicon.io](https://favicon.io/) یا [favycon](https://github.com/ruisaraiva19/favycon) برای تولید فرمت‌های اضافی فاوآیکون استفاده کنید.
|
||||
|
||||
### پیکربندی تم
|
||||
|
||||
از تنظیم `theme` برای پیکربندی حالت پیش‌فرض تم و دکمه تغییر تم استفاده کنید، که به بازدیدکنندگان امکان تغییر بین حالت روشن یا تاریک را می‌دهد.
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
theme:
|
||||
# light | dark | system
|
||||
default: system
|
||||
displayToggle: true
|
||||
```
|
||||
|
||||
گزینه‌های `theme.default`:
|
||||
|
||||
- `light` - همیشه از حالت روشن استفاده کنید
|
||||
- `dark` - همیشه از حالت تاریک استفاده کنید
|
||||
- `system` - همگام با تنظیمات سیستم عامل (پیش‌فرض)
|
||||
|
||||
پارامتر `theme.displayToggle` به شما امکان می‌دهد دکمه‌ای برای تغییر تم نمایش دهید.
|
||||
وقتی روی `true` تنظیم شود، بازدیدکنندگان می‌توانند بین حالت روشن یا تاریک تغییر دهند و تنظیم پیش‌فرض را لغو کنند.
|
||||
|
||||
### آخرین تغییر صفحه
|
||||
|
||||
تاریخ آخرین تغییر صفحه را می‌توان با فعال کردن پرچم `params.displayUpdatedDate` نمایش داد. برای استفاده از تاریخ commit Git به عنوان منبع، پرچم `enableGitInfo` را نیز فعال کنید.
|
||||
|
||||
برای سفارشی کردن فرمت تاریخ، پارامتر `params.dateFormat` را تنظیم کنید. چیدمان آن با [`time.Format`](https://gohugo.io/functions/time/format/) Hugo مطابقت دارد.
|
||||
|
||||
علاوه بر این، می‌توانید با فعال کردن پرچم `params.displayUpdatedAuthor` نویسنده آخرین تغییر را نمایش دهید. این نیاز به تنظیم `enableGitInfo: true` دارد.
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
# تجزیه commit Git
|
||||
enableGitInfo: true
|
||||
|
||||
params:
|
||||
# نمایش تاریخ آخرین تغییر
|
||||
displayUpdatedDate: true
|
||||
dateFormat: "January 2, 2006"
|
||||
# نمایش نویسنده آخرین تغییر
|
||||
displayUpdatedAuthor: true
|
||||
```
|
||||
|
||||
### برچسب‌ها
|
||||
|
||||
برای نمایش برچسب‌های صفحه، پرچم‌های زیر را در فایل پیکربندی تنظیم کنید:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
blog:
|
||||
list:
|
||||
displayTags: true
|
||||
toc:
|
||||
displayTags: true
|
||||
```
|
||||
|
||||
Hugo به‌صورت پیش‌فرض برای `tags` و `categories` صفحه‌های taxonomy می‌سازد. اگر سایت شما از صفحه‌های taxonomy استفاده نمی‌کند و می‌خواهید پوشه‌های تولیدشده `public/tags/` و `public/categories/` حذف شوند، نوع صفحه‌های `taxonomy` و `term` را غیرفعال کنید:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
disableKinds:
|
||||
- taxonomy
|
||||
- term
|
||||
```
|
||||
|
||||
فقط زمانی این نوع‌ها را غیرفعال کنید که به صفحه‌های آرشیو برچسب یا دسته‌بندی وابسته نیستید.
|
||||
|
||||
### بزرگنمایی تصویر
|
||||
|
||||
بزرگنمایی تصویر به طور پیش‌فرض غیرفعال است. وقتی فعال شود، کلیک روی تصویر Markdown یک نمای بزرگنمایی شده باز می‌کند.
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
imageZoom:
|
||||
enable: true
|
||||
```
|
||||
|
||||
برای غیرفعال کردن بزرگنمایی در یک صفحه خاص، این را به front matter صفحه اضافه کنید:
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
imageZoom: false
|
||||
---
|
||||
```
|
||||
|
||||
اگر می‌خواهید asset Medium Zoom را پین کنید یا از assetهای محلی بارگذاری کنید:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
imageZoom:
|
||||
enable: true
|
||||
base: "https://cdn.jsdelivr.net/npm/medium-zoom@1.1.0/dist"
|
||||
# js: "js/medium-zoom.min.js" # اختیاری، نسبت به base یا assetهای محلی
|
||||
```
|
||||
|
||||
### اسکریپت‌های محلی و آینه‌شده
|
||||
|
||||
Hextra می‌تواند وابستگی‌های اختیاری فرانت‌اند را از منابع مختلف بارگیری کند:
|
||||
|
||||
- تنظیمات پیش‌فرض قالب (CDN)
|
||||
- URLهای آینه داخلی از طریق `base`
|
||||
- assetهای محلی Hugo از طریق `js` / `css`
|
||||
|
||||
برای assetهای محلی، فایل‌های vendor را در پوشه `assets/` سایت خود قرار دهید و مقادیر پیکربندی را به همان مسیرهای asset اشاره دهید:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
imageZoom:
|
||||
enable: true
|
||||
js: "js/vendor/medium-zoom.min.js"
|
||||
|
||||
mermaid:
|
||||
js: "js/vendor/mermaid.min.js"
|
||||
|
||||
asciinema:
|
||||
js: "js/vendor/asciinema-player.min.js"
|
||||
css: "css/vendor/asciinema-player.css"
|
||||
|
||||
math:
|
||||
engine: katex
|
||||
katex:
|
||||
css: "css/vendor/katex.min.css"
|
||||
assets:
|
||||
- "fonts/KaTeX_Main-Regular.woff2"
|
||||
- "fonts/KaTeX_Math-Italic.woff2"
|
||||
|
||||
search:
|
||||
type: flexsearch
|
||||
flexsearch:
|
||||
js: "js/vendor/flexsearch.bundle.min.js"
|
||||
```
|
||||
|
||||
`imageZoom.enable: true` فقط به این دلیل لازم است که بزرگنمایی تصویر به‌صورت پیش‌فرض غیرفعال است.
|
||||
برای KaTeX، مطمئن شوید همه فایل‌های فونتی که فایل CSS انتخابی شما به آنها ارجاع می‌دهد منتشر می‌شوند، نه فقط دو موردی که در این مثال آمده‌اند.
|
||||
|
||||
برای استفاده از یک آینه داخلی، `base` را تنظیم کنید (و در صورت تفاوت نام فایل، در صورت نیاز `js` / `css` را نیز مشخص کنید):
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
imageZoom:
|
||||
base: "https://mirror.example.com/medium-zoom/dist"
|
||||
|
||||
mermaid:
|
||||
base: "https://mirror.example.com/mermaid/dist"
|
||||
|
||||
asciinema:
|
||||
base: "https://mirror.example.com/asciinema-player/dist/bundle"
|
||||
|
||||
math:
|
||||
engine: katex
|
||||
katex:
|
||||
base: "https://mirror.example.com/katex/dist"
|
||||
|
||||
search:
|
||||
flexsearch:
|
||||
base: "https://mirror.example.com/flexsearch/dist"
|
||||
# js: "flexsearch.bundle.min.js"
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
> برای سفارشی‌سازی منبع بارگذاری MathJax، قالب `layouts/_partials/scripts/mathjax.html` را در پروژه خود بازنویسی کنید.
|
||||
|
||||
### عرض صفحه
|
||||
|
||||
عرض پوستهٔ صفحه را می‌توان با پارامتر `params.page.width` تنظیم کرد:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
page:
|
||||
# full (100%), wide (90rem), normal (1280px)
|
||||
width: wide
|
||||
```
|
||||
|
||||
گزینه‌های `params.page.width`: `full`، `wide`، و `normal`.
|
||||
|
||||
عرض محتوای اصلی به صورت پیش‌فرض روی `72rem` ثابت است.
|
||||
|
||||
برای سفارشی‌سازی عرض محتوا، متغیر CSS را در فایل استایل سفارشی خود بازنویسی کنید:
|
||||
|
||||
```css {filename="assets/css/custom.css"}
|
||||
:root {
|
||||
--hextra-max-content-width: 100%;
|
||||
}
|
||||
```
|
||||
|
||||
به طور مشابه، عرض نوار ناوبری و پاورقی را می‌توان با پارامترهای `params.navbar.width` و `params.footer.width` سفارشی کرد.
|
||||
|
||||
### منوی زمینه صفحه
|
||||
|
||||
منوی زمینه صفحه یک دکمه کشویی ارائه می‌دهد که به کاربران امکان می‌دهد محتوای صفحه را به صورت Markdown کپی کنند یا منبع Markdown خام را مشاهده کنند. این ویژگی برای سایت‌های مستندات که خوانندگان ممکن است بخواهند محتوا را در قالب Markdown به اشتراک بگذارند یا به آن ارجاع دهند، مفید است.
|
||||
|
||||
#### فعال‌سازی منوی زمینه
|
||||
|
||||
برای فعال‌سازی سراسری منوی زمینه، موارد زیر را به فایل پیکربندی خود اضافه کنید:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
page:
|
||||
contextMenu:
|
||||
enable: true
|
||||
```
|
||||
|
||||
همچنین باید فرمت خروجی `markdown` را برای صفحات فعال کنید:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
outputs:
|
||||
page: [html, markdown]
|
||||
section: [html, rss, markdown]
|
||||
```
|
||||
|
||||
#### کنترل هر صفحه
|
||||
|
||||
برای فعال یا غیرفعال کردن منوی زمینه برای یک صفحه خاص، از پارامتر `contextMenu` در front matter استفاده کنید:
|
||||
|
||||
```yaml {filename="content/docs/example.md"}
|
||||
---
|
||||
title: صفحه نمونه
|
||||
contextMenu: false
|
||||
---
|
||||
```
|
||||
|
||||
#### لینک‌های سفارشی
|
||||
|
||||
می‌توانید لینک‌های سفارشی به منوی کشویی زمینه اضافه کنید. این برای یکپارچه‌سازی با سرویس‌های خارجی مفید است. لینک‌ها از جایگزین‌های زیر پشتیبانی می‌کنند:
|
||||
|
||||
- `{url}` - آدرس صفحه (URL-encoded)
|
||||
- `{title}` - عنوان صفحه (URL-encoded)
|
||||
- `{markdown_url}` - آدرس محتوای Markdown خام (URL-encoded)
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
page:
|
||||
contextMenu:
|
||||
enable: true
|
||||
links:
|
||||
- name: باز کردن در ChatGPT
|
||||
icon: chatgpt
|
||||
url: "https://chatgpt.com/?hints=search&q=I%27m+looking+at+this+documentation%3A+{url}%0AHelp+me+understand+how+to+use+it."
|
||||
```
|
||||
|
||||
هر لینک می‌تواند شامل موارد زیر باشد:
|
||||
- `name` - متن نمایشی لینک
|
||||
- `icon` - نام آیکون اختیاری (به [آیکون‌ها]({{% relref "docs/guide/shortcodes/icon" %}}) مراجعه کنید)
|
||||
- `url` - آدرس با جایگزین‌های اختیاری
|
||||
|
||||
### نمایه FlexSearch
|
||||
|
||||
جستجوی تمام متن با قدرت [FlexSearch](https://github.com/nextapps-de/flexsearch) به طور پیش‌فرض فعال است.
|
||||
برای سفارشی کردن نمایه جستجو، پارامتر `params.search.flexsearch.index` را در فایل پیکربندی تنظیم کنید:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
# جستجو
|
||||
search:
|
||||
enable: true
|
||||
type: flexsearch
|
||||
|
||||
flexsearch:
|
||||
# نمایه صفحه بر اساس: content | summary | heading | title
|
||||
index: content
|
||||
```
|
||||
|
||||
همچنین می‌توانید محل بارگیری runtime مربوط به FlexSearch را کنترل کنید:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
search:
|
||||
flexsearch:
|
||||
version: "0.8.143" # نسخه پیش‌فرض CDN
|
||||
# base: "https://mirror.example.com/flexsearch/dist" # آدرس پایهٔ remote اختیاری
|
||||
# js: "js/vendor/flexsearch.bundle.min.js" # مسیر asset محلی یا فایل سفارشی زیر base راه دور
|
||||
```
|
||||
|
||||
گزینه‌های `flexsearch.index`:
|
||||
|
||||
- `content` - محتوای کامل صفحه (پیش‌فرض)
|
||||
- `summary` - خلاصه صفحه، برای جزئیات بیشتر به [خلاصه‌های محتوای Hugo](https://gohugo.io/content-management/summaries/) مراجعه کنید
|
||||
- `heading` - عناوین سطح 1 و سطح 2
|
||||
- `title` - فقط عنوان صفحه را شامل شود
|
||||
|
||||
برای سفارشی کردن tokenize جستجو، پارامتر `params.search.flexsearch.tokenize` را در فایل پیکربندی تنظیم کنید:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
search:
|
||||
# ...
|
||||
flexsearch:
|
||||
# full | forward | reverse | strict
|
||||
tokenize: forward
|
||||
```
|
||||
|
||||
گزینه‌های [`flexsearch.tokenize`](https://github.com/nextapps-de/flexsearch/#tokenizer-prefix-search):
|
||||
|
||||
- `strict` - نمایه‌گذاری کل کلمات
|
||||
- `forward` - نمایه‌گذاری تدریجی کلمات در جهت جلو
|
||||
- `reverse` - نمایه‌گذاری تدریجی کلمات در هر دو جهت
|
||||
- `full` - نمایه‌گذاری هر ترکیب ممکن
|
||||
|
||||
برای حذف یک صفحه از نمایه جستجوی FlexSearch، `excludeSearch: true` را در front matter صفحه تنظیم کنید:
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
title: پیکربندی
|
||||
excludeSearch: true
|
||||
---
|
||||
```
|
||||
|
||||
### Google Analytics
|
||||
|
||||
برای فعال کردن [Google Analytics](https://marketingplatform.google.com/about/analytics/)، پرچم `services.googleAnalytics.ID` را در `hugo.yaml` تنظیم کنید:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
services:
|
||||
googleAnalytics:
|
||||
ID: G-MEASUREMENT_ID
|
||||
```
|
||||
|
||||
### نمایه Google Search
|
||||
|
||||
برای [مسدود کردن Google Search](https://developers.google.com/search/docs/crawling-indexing/block-indexing) از نمایه‌گذاری یک صفحه، `noindex` را در front matter صفحه روی true تنظیم کنید:
|
||||
|
||||
```yaml
|
||||
title: پیکربندی (نسخه آرشیو)
|
||||
params:
|
||||
noindex: true
|
||||
```
|
||||
|
||||
برای حذف یک دایرکتوری کامل، از کلید [`cascade`](https://gohugo.io/configuration/cascade/) در فایل `_index.md` والد استفاده کنید.
|
||||
|
||||
> [!NOTE]
|
||||
> برای مسدود کردن خزنده‌های جستجو، می‌توانید یک [قالب `robots.txt`](https://gohugo.io/templates/robots/) ایجاد کنید.
|
||||
> با این حال، دستورالعمل‌های `robots.txt` لزوماً صفحه را از نتایج جستجوی Google خارج نمی‌کنند.
|
||||
|
||||
### پشتیبانی از LLMS.txt
|
||||
|
||||
برای فعال کردن فرمت خروجی [llms.txt](https://llmstxt.org/) برای سایت شما، که یک طرح متنی ساختاریافته برای [مدل‌های زبانی بزرگ](https://fa.wikipedia.org/wiki/مدل_زبانی_بزرگ) و عامل‌های هوش مصنوعی ارائه می‌دهد، فرمت خروجی `llms` را به `hugo.yaml` سایت خود اضافه کنید:
|
||||
|
||||
```diff {filename="hugo.yaml"}
|
||||
outputs:
|
||||
- home: [html]
|
||||
+ home: [html, llms]
|
||||
page: [html]
|
||||
section: [html, rss]
|
||||
```
|
||||
|
||||
این کار یک فایل `llms.txt` در ریشه سایت شما ایجاد می‌کند که شامل:
|
||||
|
||||
- عنوان و توضیحات سایت
|
||||
- لیست سلسله مراتبی تمام بخش‌ها و صفحات
|
||||
- خلاصه صفحات و تاریخ انتشار
|
||||
- لینک‌های مستقیم به تمام محتوا
|
||||
|
||||
می‌توانید صفحات یا بخش‌های خاصی را با تنظیم `llms: false` در frontmatter آنها حذف کنید:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "یادداشت‌های داخلی"
|
||||
llms: false
|
||||
---
|
||||
```
|
||||
|
||||
فایل llms.txt به طور خودکار از ساختار محتوای شما ایجاد می‌شود و سایت شما را برای ابزارهای هوش مصنوعی و مدل‌های زبانی برای زمینه و مرجع قابل دسترس‌تر می‌کند.
|
||||
|
||||
### Open Graph
|
||||
|
||||
برای افزودن متادیتای [Open Graph](https://ogp.me/) به یک صفحه، مقادیر را در پارامترهای frontmatter اضافه کنید.
|
||||
|
||||
از آنجا که یک صفحه می‌تواند چندین تگ `image` و `video` داشته باشد، مقادیر آنها را در یک آرایه قرار دهید.
|
||||
سایر ویژگی‌های Open Graph می‌توانند فقط یک مقدار داشته باشند.
|
||||
به عنوان مثال، این صفحه یک تگ `og:image` (که تصویری برای پیش‌نمایش در اشتراک‌گذاری‌های اجتماعی پیکربندی می‌کند) و یک تگ `og:audio` دارد.
|
||||
|
||||
```yaml {filename
|
||||
@@ -0,0 +1,635 @@
|
||||
---
|
||||
title: 設定
|
||||
weight: 2
|
||||
tags:
|
||||
- 設定
|
||||
---
|
||||
|
||||
Hugo はサイトのルートにある `hugo.yaml` から設定を読み込みます。
|
||||
この設定ファイルであなたのサイトのあらゆる側面を設定できます。
|
||||
利用可能な設定項目とベストプラクティスを網羅的に理解するには、GitHub 上のこのサイトの設定ファイル [`docs/hugo.yaml`](https://github.com/imfing/hextra/blob/main/docs/hugo.yaml) を参照してください。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## ナビゲーション
|
||||
|
||||
### メニュー
|
||||
|
||||
右上のメニューは設定ファイルの `menu.main` セクションで定義されます：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
menu:
|
||||
main:
|
||||
- name: ドキュメント
|
||||
pageRef: /docs
|
||||
weight: 1
|
||||
- name: ブログ
|
||||
pageRef: /blog
|
||||
weight: 2
|
||||
- name: このサイトについて
|
||||
pageRef: /about
|
||||
weight: 3
|
||||
- name: 検索
|
||||
weight: 4
|
||||
params:
|
||||
type: search
|
||||
- name: GitHub
|
||||
weight: 5
|
||||
url: "https://github.com/imfing/hextra"
|
||||
params:
|
||||
icon: github
|
||||
```
|
||||
|
||||
メニュー項目にはいくつかの種類があります：
|
||||
|
||||
1. `pageRef` でサイト内のページにリンク
|
||||
```yaml
|
||||
- name: ドキュメント
|
||||
pageRef: /docs
|
||||
```
|
||||
2. `url` で外部URLにリンク
|
||||
```yaml
|
||||
- name: GitHub
|
||||
url: "https://github.com"
|
||||
```
|
||||
3. `type: search` で検索バー
|
||||
```yaml
|
||||
- name: 検索
|
||||
params:
|
||||
type: search
|
||||
```
|
||||
4. アイコン
|
||||
```yaml
|
||||
- name: GitHub
|
||||
params:
|
||||
icon: github
|
||||
```
|
||||
5. テーマ切り替え
|
||||
```yaml
|
||||
- name: Theme Toggle
|
||||
params:
|
||||
type: theme-toggle
|
||||
label: true # optional, default is false
|
||||
```
|
||||
6. 言語スイッチャー
|
||||
```yaml
|
||||
- name: 言語スイッチャー
|
||||
params:
|
||||
type: language-switch
|
||||
label: true # optional, default is false
|
||||
icon: "globe-alt" # optional, default is "translate"
|
||||
```
|
||||
|
||||
これらのメニュー項目は `weight` パラメータを設定することで並べ替えられます。
|
||||
|
||||
### ネストされたメニュー
|
||||
|
||||
子メニュー項目を定義することでドロップダウンメニューを作成できます。親メニュー項目をクリックすると子メニューが表示されます。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
menu:
|
||||
main:
|
||||
- identifier: sdk
|
||||
name: SDK
|
||||
- identifier: python
|
||||
name: Python ↗
|
||||
url: https://python.org
|
||||
parent: sdk
|
||||
- identifier: go
|
||||
name: Go
|
||||
url: https://go.dev
|
||||
parent: sdk
|
||||
```
|
||||
|
||||
子メニュー項目は親の `identifier` 値を `parent` パラメータで指定する必要があります。
|
||||
|
||||
### ロゴとタイトル
|
||||
|
||||
デフォルトのロゴを変更するには、`hugo.yaml` を編集し、`static` ディレクトリ下のロゴファイルへのパスを追加します。
|
||||
オプションで、ロゴをクリックした際のリンク先や、ロゴの幅と高さ（ピクセル単位）を設定できます。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
navbar:
|
||||
displayTitle: true
|
||||
displayLogo: true
|
||||
logo:
|
||||
path: images/logo.svg
|
||||
dark: images/logo-dark.svg
|
||||
link: /
|
||||
width: 40
|
||||
height: 20
|
||||
```
|
||||
|
||||
### ページネーション
|
||||
|
||||
ドキュメントページやブログ記事の下部にある前へ/次へナビゲーションを無効にするには：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
page:
|
||||
displayPagination: false # ドキュメントページ用
|
||||
blog:
|
||||
article:
|
||||
displayPagination: false # ブログ記事用
|
||||
```
|
||||
|
||||
## サイドバー
|
||||
|
||||
### メインサイドバー
|
||||
|
||||
メインサイドバーはコンテンツディレクトリの構造から自動生成されます。
|
||||
詳細は [ファイルの整理](/docs/guide/organize-files) ページを参照してください。
|
||||
|
||||
単一ページを左サイドバーから除外するには、ページのフロントマターで `sidebar.exclude` パラメータを設定します：
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
title: 設定
|
||||
sidebar:
|
||||
exclude: true
|
||||
---
|
||||
```
|
||||
|
||||
### 追加リンク
|
||||
|
||||
サイドバーの追加リンクは設定ファイルの `menu.sidebar` セクションで定義されます：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
menu:
|
||||
sidebar:
|
||||
- name: その他
|
||||
params:
|
||||
type: separator
|
||||
weight: 1
|
||||
- name: "このサイトについて"
|
||||
pageRef: "/about"
|
||||
weight: 2
|
||||
- name: "Hugo ドキュメント ↗"
|
||||
url: "https://gohugo.io/documentation/"
|
||||
weight: 3
|
||||
```
|
||||
|
||||
## 右サイドバー
|
||||
|
||||
### 目次
|
||||
|
||||
目次はコンテンツファイルの見出しから自動生成されます。ページのフロントマターで `toc: false` を設定することで無効化できます。
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
title: 設定
|
||||
toc: false
|
||||
---
|
||||
```
|
||||
|
||||
### ページ編集リンク
|
||||
|
||||
ページ編集リンクを設定するには、設定ファイルで `params.editURL.base` パラメータを設定します：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
editURL:
|
||||
enable: true
|
||||
base: "https://github.com/your-username/your-repo/edit/main"
|
||||
```
|
||||
|
||||
編集リンクは提供されたURLをルートディレクトリとして各ページに対して自動生成されます。
|
||||
特定のページに対して編集リンクを設定したい場合は、ページのフロントマターで `editURL` パラメータを設定できます：
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
title: 設定
|
||||
editURL: "https://example.com/edit/this/page"
|
||||
---
|
||||
```
|
||||
|
||||
## フッター
|
||||
|
||||
### 著作権表示
|
||||
|
||||
ウェブサイトのフッターに表示される著作権テキストを変更するには、`i18n/en.yaml` という名前のファイルを作成する必要があります。
|
||||
このファイルで、以下のように新しい著作権テキストを指定します：
|
||||
|
||||
```yaml {filename="i18n/en.yaml"}
|
||||
copyright: "© 2024 ここにあなたのテキスト"
|
||||
```
|
||||
|
||||
参考までに、GitHub リポジトリに [`i18n/en.yaml`](https://github.com/imfing/hextra/blob/main/i18n/en.yaml) ファイルの例があります。また、著作権テキストには Markdown 形式を使用することもできます。
|
||||
|
||||
## その他
|
||||
|
||||
### ファビコン
|
||||
|
||||
サイトの [ファビコン](https://ja.wikipedia.org/wiki/Favicon) をカスタマイズするには、[テーマのデフォルトファビコン](https://github.com/imfing/hextra/tree/main/static) を上書きするために `static` フォルダの下にアイコンファイルを配置します：
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="static" >}}
|
||||
{{< filetree/file name="android-chrome-192x192.png" >}}
|
||||
{{< filetree/file name="android-chrome-512x512.png" >}}
|
||||
{{< filetree/file name="apple-touch-icon.png" >}}
|
||||
{{< filetree/file name="favicon-16x16.png" >}}
|
||||
{{< filetree/file name="favicon-32x32.png" >}}
|
||||
{{< filetree/file name="favicon-dark.svg" >}}
|
||||
{{< filetree/file name="favicon.ico" >}}
|
||||
{{< filetree/file name="favicon.svg" >}}
|
||||
{{< filetree/file name="site.webmanifest" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
#### 基本設定
|
||||
|
||||
最低限、`static` フォルダに `favicon.svg` を含めてください。これがサイトのデフォルトファビコンとして使用されます。
|
||||
|
||||
SVG 内で CSS メディアクエリを使用することで、システムのテーマ設定に応答する適応型 SVG ファビコンを作成できます。このアプローチは [適応型ファビコンの構築](https://web.dev/articles/building/an-adaptive-favicon) で説明されています。
|
||||
|
||||
#### ダークモード対応
|
||||
|
||||
強化されたダークモードサポートのために、`favicon.svg` と一緒に `favicon-dark.svg` を `static` フォルダに追加してください。両方のファイルが存在する場合、Hextra は自動的に：
|
||||
|
||||
- ライトモードまたはテーマ設定が検出されない場合に `favicon.svg` を使用
|
||||
- ユーザーのシステムがダークモードに設定されている場合に `favicon-dark.svg` に切り替え
|
||||
- 自動切り替えのためにシステムの `prefers-color-scheme` 設定を尊重
|
||||
|
||||
ダークモードファビコンの切り替えは Firefox を含むすべての最新ブラウザで動作し、サイトのテーマにマッチしたシームレスな体験を提供します。
|
||||
|
||||
#### 追加フォーマット
|
||||
|
||||
`favicon.ico` は一般的に古いブラウザ向けですが、最新のブラウザはスケーラビリティとファイルサイズの小ささが好まれる SVG ファビコンをサポートしています。
|
||||
必要に応じて [favicon.io](https://favicon.io/) や [favycon](https://github.com/ruisaraiva19/favycon) などのツールを使用して追加のファビコンフォーマットを生成できます。
|
||||
|
||||
### テーマ設定
|
||||
|
||||
`theme` 設定を使用してデフォルトのテーマモードとトグルボタンを設定し、訪問者がライトモードとダークモードを切り替えられるようにします。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
theme:
|
||||
# light | dark | system
|
||||
default: system
|
||||
displayToggle: true
|
||||
```
|
||||
|
||||
`theme.default` のオプション：
|
||||
|
||||
- `light` - 常にライトモードを使用
|
||||
- `dark` - 常にダークモードを使用
|
||||
- `system` - オペレーティングシステムの設定と同期（デフォルト）
|
||||
|
||||
`theme.displayToggle` パラメータはテーマを変更するためのトグルボタンを表示します。
|
||||
`true` に設定すると、訪問者はデフォルト設定を上書きしてライトモードとダークモードを切り替えられます。
|
||||
|
||||
### ページ最終更新日
|
||||
|
||||
ページの最終更新日を表示するには、`params.displayUpdatedDate` フラグを有効にします。Git コミット日付をソースとして使用するには、`enableGitInfo` フラグも有効にします。
|
||||
|
||||
日付形式をカスタマイズするには、`params.dateFormat` パラメータを設定します。そのレイアウトは Hugo の [`time.Format`](https://gohugo.io/functions/time/format/) に準拠します。
|
||||
|
||||
さらに、`params.displayUpdatedAuthor` フラグを有効にすると、最終更新の作者を表示できます。これには `enableGitInfo: true` の設定が必要です。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
# Git コミットを解析
|
||||
enableGitInfo: true
|
||||
|
||||
params:
|
||||
# 最終更新日を表示
|
||||
displayUpdatedDate: true
|
||||
dateFormat: "2006年1月2日"
|
||||
# 最終更新の作者を表示
|
||||
displayUpdatedAuthor: true
|
||||
```
|
||||
|
||||
### タグ
|
||||
|
||||
ページタグを表示するには、設定ファイルで以下のフラグを設定します：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
blog:
|
||||
list:
|
||||
displayTags: true
|
||||
toc:
|
||||
displayTags: true
|
||||
```
|
||||
|
||||
Hugo はデフォルトで `tags` と `categories` のタクソノミーページを作成します。サイトでタクソノミーページを使わず、生成される `public/tags/` と `public/categories/` ディレクトリを省略したい場合は、`taxonomy` と `term` のページ種別を無効にします：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
disableKinds:
|
||||
- taxonomy
|
||||
- term
|
||||
```
|
||||
|
||||
タグまたはカテゴリのアーカイブページに依存していない場合にのみ、これらの種別を無効にしてください。
|
||||
|
||||
### 画像ズーム
|
||||
|
||||
画像ズームはデフォルトで無効です。有効にすると、Markdown 画像をクリックするとズームビューが開きます。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
imageZoom:
|
||||
enable: true
|
||||
```
|
||||
|
||||
特定のページでズームを無効にするには、ページのフロントマターに以下を追加します：
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
imageZoom: false
|
||||
---
|
||||
```
|
||||
|
||||
Medium Zoom アセットを固定するか、ローカルアセットから読み込む場合：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
imageZoom:
|
||||
enable: true
|
||||
base: "https://cdn.jsdelivr.net/npm/medium-zoom@1.1.0/dist"
|
||||
# js: "js/medium-zoom.min.js" # オプション、base またはローカルアセットからの相対パス
|
||||
```
|
||||
|
||||
### ローカルおよびミラー済みスクリプトアセット
|
||||
|
||||
Hextra はオプションのフロントエンド依存ファイルを複数のソースから読み込めます:
|
||||
|
||||
- テーマのデフォルト設定（CDN）
|
||||
- `base` を使った社内ミラー URL
|
||||
- `js` / `css` を使った Hugo のローカルアセット
|
||||
|
||||
ローカルアセットを使う場合は、vendor ファイルをサイトの `assets/` ディレクトリに配置し、そのアセットパスを設定値に指定します:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
imageZoom:
|
||||
enable: true
|
||||
js: "js/vendor/medium-zoom.min.js"
|
||||
|
||||
mermaid:
|
||||
js: "js/vendor/mermaid.min.js"
|
||||
|
||||
asciinema:
|
||||
js: "js/vendor/asciinema-player.min.js"
|
||||
css: "css/vendor/asciinema-player.css"
|
||||
|
||||
math:
|
||||
engine: katex
|
||||
katex:
|
||||
css: "css/vendor/katex.min.css"
|
||||
assets:
|
||||
- "fonts/KaTeX_Main-Regular.woff2"
|
||||
- "fonts/KaTeX_Math-Italic.woff2"
|
||||
|
||||
search:
|
||||
type: flexsearch
|
||||
flexsearch:
|
||||
js: "js/vendor/flexsearch.bundle.min.js"
|
||||
```
|
||||
|
||||
`imageZoom.enable: true` が必要なのは、画像ズームがデフォルトで無効になっているためです。
|
||||
KaTeX については、この例の 2 つだけでなく、選択した CSS が参照するすべてのフォントファイルを公開してください。
|
||||
|
||||
社内ミラーを使う場合は `base` を設定し、ファイル名が異なる場合のみ `js` / `css` を追加してください:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
imageZoom:
|
||||
base: "https://mirror.example.com/medium-zoom/dist"
|
||||
|
||||
mermaid:
|
||||
base: "https://mirror.example.com/mermaid/dist"
|
||||
|
||||
asciinema:
|
||||
base: "https://mirror.example.com/asciinema-player/dist/bundle"
|
||||
|
||||
math:
|
||||
engine: katex
|
||||
katex:
|
||||
base: "https://mirror.example.com/katex/dist"
|
||||
|
||||
search:
|
||||
flexsearch:
|
||||
base: "https://mirror.example.com/flexsearch/dist"
|
||||
# js: "flexsearch.bundle.min.js"
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
> MathJax の読み込み元をカスタマイズするには、プロジェクト内で `layouts/_partials/scripts/mathjax.html` を上書きしてください。
|
||||
|
||||
### ページ幅
|
||||
|
||||
レイアウト全体の幅は `params.page.width` で設定できます：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
page:
|
||||
# full (100%), wide (90rem), normal (1280px)
|
||||
width: wide
|
||||
```
|
||||
|
||||
`params.page.width` の選択肢は `full`、`wide`、`normal` です。
|
||||
|
||||
本文コンテンツ幅はデフォルトで `72rem` に固定されています。
|
||||
|
||||
コンテンツ幅を変更したい場合は、カスタムスタイルシートで CSS 変数を上書きしてください：
|
||||
|
||||
```css {filename="assets/css/custom.css"}
|
||||
:root {
|
||||
--hextra-max-content-width: 100%;
|
||||
}
|
||||
```
|
||||
|
||||
同様に、ナビゲーションバーとフッターの幅は `params.navbar.width` と `params.footer.width` パラメータでカスタマイズできます。
|
||||
|
||||
### ページコンテキストメニュー
|
||||
|
||||
ページコンテキストメニューは、ページの内容を Markdown としてコピーしたり、生の Markdown ソースを表示したりできるドロップダウンボタンを提供します。この機能は、読者が Markdown 形式でコンテンツを共有または参照したいドキュメントサイトに便利です。
|
||||
|
||||
#### コンテキストメニューの有効化
|
||||
|
||||
コンテキストメニューをグローバルに有効にするには、設定ファイルに以下を追加します：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
page:
|
||||
contextMenu:
|
||||
enable: true
|
||||
```
|
||||
|
||||
また、ページの `markdown` 出力形式を有効にする必要があります：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
outputs:
|
||||
page: [html, markdown]
|
||||
section: [html, rss, markdown]
|
||||
```
|
||||
|
||||
#### ページごとの制御
|
||||
|
||||
特定のページでコンテキストメニューを有効または無効にするには、フロントマターで `contextMenu` パラメータを使用します：
|
||||
|
||||
```yaml {filename="content/docs/example.md"}
|
||||
---
|
||||
title: サンプルページ
|
||||
contextMenu: false
|
||||
---
|
||||
```
|
||||
|
||||
#### カスタムリンク
|
||||
|
||||
コンテキストメニューのドロップダウンにカスタムリンクを追加できます。これは外部サービスとの統合に便利です。リンクは以下のプレースホルダーをサポートしています：
|
||||
|
||||
- `{url}` - ページの URL（URL エンコード済み）
|
||||
- `{title}` - ページのタイトル（URL エンコード済み）
|
||||
- `{markdown_url}` - 生の Markdown コンテンツの URL（URL エンコード済み）
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
page:
|
||||
contextMenu:
|
||||
enable: true
|
||||
links:
|
||||
- name: ChatGPT で開く
|
||||
icon: chatgpt
|
||||
url: "https://chatgpt.com/?hints=search&q=I%27m+looking+at+this+documentation%3A+{url}%0AHelp+me+understand+how+to+use+it."
|
||||
```
|
||||
|
||||
各リンクには以下を設定できます：
|
||||
- `name` - リンクの表示テキスト
|
||||
- `icon` - オプションのアイコン名（[アイコン]({{% relref "docs/guide/shortcodes/icon" %}})を参照）
|
||||
- `url` - オプションのプレースホルダーを含む URL
|
||||
|
||||
### FlexSearch インデックス
|
||||
|
||||
[FlexSearch](https://github.com/nextapps-de/flexsearch) を利用した全文検索はデフォルトで有効です。
|
||||
検索インデックスをカスタマイズするには、設定ファイルで `params.search.flexsearch.index` パラメータを設定します：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
# 検索
|
||||
search:
|
||||
enable: true
|
||||
type: flexsearch
|
||||
|
||||
flexsearch:
|
||||
# インデックス対象: content | summary | heading | title
|
||||
index: content
|
||||
```
|
||||
|
||||
FlexSearch ランタイムの読み込み元も制御できます:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
search:
|
||||
flexsearch:
|
||||
version: "0.8.143" # デフォルトの CDN バージョン
|
||||
# base: "https://mirror.example.com/flexsearch/dist" # オプションのリモート base URL
|
||||
# js: "js/vendor/flexsearch.bundle.min.js" # ローカルアセットのパス、またはリモート base 配下のカスタムファイル
|
||||
```
|
||||
|
||||
`flexsearch.index` のオプション：
|
||||
|
||||
- `content` - ページの全文（デフォルト）
|
||||
- `summary` - ページの要約、詳細は [Hugo コンテンツ要約](https://gohugo.io/content-management/summaries/) を参照
|
||||
- `heading` - レベル1とレベル2の見出し
|
||||
- `title` - ページタイトルのみを含める
|
||||
|
||||
検索トークン化をカスタマイズするには、設定ファイルで `params.search.flexsearch.tokenize` パラメータを設定します：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
search:
|
||||
# ...
|
||||
flexsearch:
|
||||
# full | forward | reverse | strict
|
||||
tokenize: forward
|
||||
```
|
||||
|
||||
[`flexsearch.tokenize`](https://github.com/nextapps-de/flexsearch/#tokenizer-prefix-search) のオプション：
|
||||
|
||||
- `strict` - 単語全体をインデックス
|
||||
- `forward` - 前方方向に単語を増分的にインデックス
|
||||
- `reverse` - 両方向に単語を増分的にインデックス
|
||||
- `full` - すべての可能な組み合わせをインデックス
|
||||
|
||||
FlexSearch 検索インデックスからページを除外するには、ページのフロントマターで `excludeSearch: true` を設定します：
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
title: 設定
|
||||
excludeSearch: true
|
||||
---
|
||||
```
|
||||
|
||||
### Google アナリティクス
|
||||
|
||||
[Google アナリティクス](https://marketingplatform.google.com/about/analytics/) を有効にするには、`hugo.yaml` で `services.googleAnalytics.ID` フラグを設定します：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
services:
|
||||
googleAnalytics:
|
||||
ID: G-MEASUREMENT_ID
|
||||
```
|
||||
|
||||
### Google 検索インデックス
|
||||
|
||||
ページを [Google 検索のインデックスからブロック](https://developers.google.com/search/docs/crawling-indexing/block-indexing) するには、ページのフロントマターで `noindex` を true に設定します：
|
||||
|
||||
```yaml
|
||||
title: 設定（アーカイブ版）
|
||||
params:
|
||||
noindex: true
|
||||
```
|
||||
|
||||
ディレクトリ全体を除外するには、親の `_index.md` ファイルで [`cascade`](https://gohugo.io/configuration/cascade/) キーを使用します。
|
||||
|
||||
> [!NOTE]
|
||||
> 検索クローラーをブロックするには、[`robots.txt` テンプレート](https://gohugo.io/templates/robots/) を作成できます。
|
||||
> ただし、`robots.txt` の指示は必ずしも Google 検索結果からページを除外するわけではありません。
|
||||
|
||||
### LLMS.txt サポート
|
||||
|
||||
サイトの [大規模言語モデル](https://ja.wikipedia.org/wiki/大規模言語モデル) や AI エージェント向けの構造化テキストアウトラインを提供する [llms.txt](https://llmstxt.org/) 出力形式を有効にするには、サイトの `hugo.yaml` に `llms` 出力形式を追加します：
|
||||
|
||||
```diff {filename="hugo.yaml"}
|
||||
outputs:
|
||||
- home: [html]
|
||||
+ home: [html, llms]
|
||||
page: [html]
|
||||
section: [html, rss]
|
||||
```
|
||||
|
||||
これにより、サイトのルートに `llms.txt` ファイルが生成され、以下が含まれます：
|
||||
|
||||
- サイトタイトルと説明
|
||||
- すべてのセクションとページの階層リスト
|
||||
- ページの要約と公開日
|
||||
- すべてのコンテンツへの直接リンク
|
||||
|
||||
フロントマターで `llms: false` を設定することで、特定のページやセクションを除外できます：
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "内部メモ"
|
||||
llms: false
|
||||
---
|
||||
```
|
||||
|
||||
llms.txt ファイルはコンテンツ構造から自動生成され、AI ツールや言語モデルがコンテキストや参照のためにあなたのサイトにアクセスしやすくします。
|
||||
|
||||
### Open Graph
|
||||
|
||||
ページに [Open Graph](https://ogp.me/) メタデータを追加するには、フロントマターの params に値を追加します。
|
||||
|
||||
ページは複数の `image` と `video` タグを持つことができるため、それらの値は配列に配置します。
|
||||
他の Open Graph プロパティは単一の値のみを持つことができます。
|
||||
例えば、このページには `og:image` タグ（ソーシャルシェアでプレビューする画像を設定）と `og:audio` タグがあります。
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
title: "設定"
|
||||
params:
|
||||
images:
|
||||
- "img/config-image.jpg"
|
||||
audio: "config-talk.mp3"
|
||||
```
|
||||
@@ -0,0 +1,780 @@
|
||||
---
|
||||
title: Configuration
|
||||
weight: 2
|
||||
tags:
|
||||
- Config
|
||||
---
|
||||
|
||||
Hugo reads its configuration from `hugo.yaml` in the root of your Hugo site.
|
||||
The config file is where you can configure all aspects of your site.
|
||||
Check out the config file for this site [`docs/hugo.yaml`](https://github.com/imfing/hextra/blob/main/docs/hugo.yaml) on GitHub to get a comprehensive idea of available settings and best practices.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Navigation
|
||||
|
||||
### Menu
|
||||
|
||||
Top right menu is defined under the `menu.main` section in the config file:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
menu:
|
||||
main:
|
||||
- name: Documentation
|
||||
pageRef: /docs
|
||||
weight: 1
|
||||
- name: Blog
|
||||
pageRef: /blog
|
||||
weight: 2
|
||||
- name: About
|
||||
pageRef: /about
|
||||
weight: 3
|
||||
- name: Search
|
||||
weight: 4
|
||||
params:
|
||||
type: search
|
||||
- name: GitHub
|
||||
weight: 5
|
||||
url: "https://github.com/imfing/hextra"
|
||||
params:
|
||||
icon: github
|
||||
```
|
||||
|
||||
There are different types of menu items:
|
||||
|
||||
1. Link to a page in the site with `pageRef`
|
||||
```yaml
|
||||
- name: Documentation
|
||||
pageRef: /docs
|
||||
```
|
||||
2. Link to an external URL with `url`
|
||||
```yaml
|
||||
- name: GitHub
|
||||
url: "https://github.com"
|
||||
```
|
||||
3. Search bar with `type: search`
|
||||
```yaml
|
||||
- name: Search
|
||||
params:
|
||||
type: search
|
||||
```
|
||||
4. Icon Only
|
||||
```yaml
|
||||
- name: GitHub
|
||||
params:
|
||||
icon: github
|
||||
```
|
||||
5. Link with Icon
|
||||
```yaml
|
||||
- name: Blog
|
||||
params:
|
||||
type: link
|
||||
icon: rss
|
||||
```
|
||||
6. Theme Toggle
|
||||
```yaml
|
||||
- name: Theme Toggle
|
||||
params:
|
||||
type: theme-toggle
|
||||
label: true # optional, default is false
|
||||
```
|
||||
7. Language Switcher
|
||||
```yaml
|
||||
- name: Language Switcher
|
||||
params:
|
||||
type: language-switch
|
||||
label: true # optional, default is false
|
||||
icon: "globe-alt" # optional, default is "translate"
|
||||
```
|
||||
|
||||
These menu items can be sorted by setting the `weight` parameter.
|
||||
|
||||
### Nested Menus
|
||||
|
||||
You can create dropdown menus by defining child menu items. Child menus appear when clicking on the parent menu item.
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
menu:
|
||||
main:
|
||||
- identifier: sdk
|
||||
name: SDK
|
||||
- identifier: python
|
||||
name: Python ↗
|
||||
url: https://python.org
|
||||
parent: sdk
|
||||
- identifier: go
|
||||
name: Go
|
||||
url: https://go.dev
|
||||
parent: sdk
|
||||
```
|
||||
|
||||
Child menu items need to specify the `parent` parameter with the parent's `identifier` value.
|
||||
|
||||
### Logo and Title
|
||||
|
||||
To modify the default logo, edit `hugo.yaml` and add the path to your logo file under `static` directory.
|
||||
Optionally, you can change the link that users are redirected to when clicking on your logo, as well as set the width & height of the logo in pixels.
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
navbar:
|
||||
displayTitle: true
|
||||
displayLogo: true
|
||||
logo:
|
||||
path: images/logo.svg
|
||||
dark: images/logo-dark.svg
|
||||
link: /
|
||||
width: 40
|
||||
height: 20
|
||||
```
|
||||
|
||||
### Pagination
|
||||
|
||||
To disable the previous/next navigation at the bottom of docs pages or blog articles:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
page:
|
||||
displayPagination: false # for docs pages
|
||||
blog:
|
||||
article:
|
||||
displayPagination: false # for blog articles
|
||||
```
|
||||
|
||||
## Sidebar
|
||||
|
||||
### Main Sidebar
|
||||
|
||||
For the main sidebar, it is automatically generated from the structure of the content directory.
|
||||
See the [Organize Files](/docs/guide/organize-files) page for more details.
|
||||
|
||||
To exclude a single page from the left sidebar, set the `sidebar.exclude` parameter in the front matter of the page:
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
title: Configuration
|
||||
sidebar:
|
||||
exclude: true
|
||||
---
|
||||
```
|
||||
|
||||
### Extra Links
|
||||
|
||||
Sidebar extra links are defined under the `menu.sidebar` section in the config file:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
menu:
|
||||
sidebar:
|
||||
- name: More
|
||||
params:
|
||||
type: separator
|
||||
weight: 1
|
||||
- name: "About"
|
||||
pageRef: "/about"
|
||||
weight: 2
|
||||
- name: "Hugo Docs ↗"
|
||||
url: "https://gohugo.io/documentation/"
|
||||
weight: 3
|
||||
```
|
||||
|
||||
### Hiding
|
||||
|
||||
Hiding the sidebar can be done using front matter:
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
title: Configuration
|
||||
sidebar:
|
||||
hide: true
|
||||
---
|
||||
```
|
||||
|
||||
This will hide the main sidebar from the page, freeing up space for the main content of the page.
|
||||
|
||||
|
||||
## Right Sidebar
|
||||
|
||||
### Table of Contents
|
||||
|
||||
Table of contents is automatically generated from the headings in the content file. It can be disabled by setting `toc: false` in the front matter of the page.
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
title: Configuration
|
||||
toc: false
|
||||
---
|
||||
```
|
||||
|
||||
### Page Edit Link
|
||||
|
||||
To configure the page edit link, we can set the `params.editURL.base` parameter in the config file:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
editURL:
|
||||
enable: true
|
||||
base: "https://github.com/your-username/your-repo/edit/main"
|
||||
```
|
||||
|
||||
The edit links will be automatically generated for each page based on the provided url as root directory.
|
||||
If you want to set edit link for a specific page, you can set the `editURL` parameter in the front matter of the page:
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
title: Configuration
|
||||
editURL: "https://example.com/edit/this/page"
|
||||
---
|
||||
```
|
||||
|
||||
## Footer
|
||||
|
||||
### Copyright
|
||||
|
||||
To modify the copyright text displayed in your website's footer, you'll need to create a file named `i18n/en.yaml`.
|
||||
In this file, specify your new copyright text as shown below:
|
||||
|
||||
```yaml {filename="i18n/en.yaml"}
|
||||
copyright: "© 2024 YOUR TEXT HERE"
|
||||
```
|
||||
|
||||
For your reference, an example [`i18n/en.yaml`](https://github.com/imfing/hextra/blob/main/i18n/en.yaml) file can be found in the GitHub repository. Additionally, you could use Markdown format in the copyright text.
|
||||
|
||||
## Others
|
||||
|
||||
### Favicon
|
||||
|
||||
To customize the [favicon](https://en.wikipedia.org/wiki/Favicon) for your site, place icon files under the `static` folder to override the [default favicons from the theme](https://github.com/imfing/hextra/tree/main/static):
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="static" >}}
|
||||
{{< filetree/file name="android-chrome-192x192.png" >}}
|
||||
{{< filetree/file name="android-chrome-512x512.png" >}}
|
||||
{{< filetree/file name="apple-touch-icon.png" >}}
|
||||
{{< filetree/file name="favicon-16x16.png" >}}
|
||||
{{< filetree/file name="favicon-32x32.png" >}}
|
||||
{{< filetree/file name="favicon-dark.svg" >}}
|
||||
{{< filetree/file name="favicon.ico" >}}
|
||||
{{< filetree/file name="favicon.svg" >}}
|
||||
{{< filetree/file name="site.webmanifest" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
#### Basic Setup
|
||||
|
||||
At minimum, include `favicon.svg` in your `static` folder. This will be used as the default favicon for your site.
|
||||
|
||||
You can create an adaptive SVG favicon that responds to system theme preferences by using CSS media queries within the SVG itself, following the approach described in [Building an Adaptive Favicon](https://web.dev/articles/building/an-adaptive-favicon).
|
||||
|
||||
#### Dark Mode Support
|
||||
|
||||
For enhanced dark mode support, add `favicon-dark.svg` to your `static` folder alongside `favicon.svg`. When both files are present, Hextra will automatically:
|
||||
|
||||
- Use `favicon.svg` for light mode or when no theme preference is detected
|
||||
- Switch to `favicon-dark.svg` when the user's system is set to dark mode
|
||||
- Respect the system's `prefers-color-scheme` setting for automatic switching
|
||||
|
||||
The dark mode favicon switching works across all modern browsers, including Firefox, and provides a seamless experience that matches your site's theme.
|
||||
|
||||
#### Additional Formats
|
||||
|
||||
While `favicon.ico` is generally for older browsers, modern browsers support SVG favicons which are preferred for their scalability and small file size.
|
||||
Use tools like [favicon.io](https://favicon.io/) or [favycon](https://github.com/ruisaraiva19/favycon) to generate additional favicon formats if needed.
|
||||
|
||||
### Theme Configuration
|
||||
|
||||
Use the `theme` setting to configure the default theme mode and toggle button, allowing visitors to switch between light or dark mode.
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
theme:
|
||||
# light | dark | system
|
||||
default: system
|
||||
displayToggle: true
|
||||
```
|
||||
|
||||
Options for `theme.default`:
|
||||
|
||||
- `light` - always use light mode
|
||||
- `dark` - always use dark mode
|
||||
- `system` - sync with the operating system setting (default)
|
||||
|
||||
The `theme.displayToggle` parameter allows you to display a toggle button for changing themes.
|
||||
When set to `true`, visitors can switch between light or dark mode, overriding the default setting.
|
||||
|
||||
### Page Last Modification
|
||||
|
||||
The date of the page's last modification can be displayed by enabling the `params.displayUpdatedDate` flag. To use Git commit date as the source, enable also the `enableGitInfo` flag.
|
||||
|
||||
To customize the date format, set the `params.dateFormat` parameter. Its layout matches Hugo's [`time.Format`](https://gohugo.io/functions/time/format/).
|
||||
|
||||
Additionally, the author of the last modification can be displayed by enabling the `params.displayUpdatedAuthor` flag. This requires `enableGitInfo: true` to be set.
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
# Parse Git commit
|
||||
enableGitInfo: true
|
||||
|
||||
params:
|
||||
# Display the last modification date
|
||||
displayUpdatedDate: true
|
||||
dateFormat: "January 2, 2006"
|
||||
# Display the author of the last modification
|
||||
displayUpdatedAuthor: true
|
||||
```
|
||||
|
||||
### Tags
|
||||
|
||||
To display page tags, set following flags in the config file:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
blog:
|
||||
list:
|
||||
displayTags: true
|
||||
toc:
|
||||
displayTags: true
|
||||
```
|
||||
|
||||
Hugo creates taxonomy pages for `tags` and `categories` by default. If your site does not use taxonomy pages and you want to omit the generated `public/tags/` and `public/categories/` directories, disable the `taxonomy` and `term` page kinds:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
disableKinds:
|
||||
- taxonomy
|
||||
- term
|
||||
```
|
||||
|
||||
Only disable these kinds when you are not relying on tag or category archive pages.
|
||||
|
||||
### Image Zoom
|
||||
|
||||
Image zoom is disabled by default. When enabled, clicking a Markdown image opens a zoomed view.
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
imageZoom:
|
||||
enable: true
|
||||
```
|
||||
|
||||
To disable zoom on a specific page, add this to the page front matter:
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
imageZoom: false
|
||||
---
|
||||
```
|
||||
|
||||
If you want to pin the Medium Zoom asset or load it from local assets:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
imageZoom:
|
||||
enable: true
|
||||
base: "https://cdn.jsdelivr.net/npm/medium-zoom@1.1.0/dist"
|
||||
# js: "js/medium-zoom.min.js" # optional, relative to the base or local assets
|
||||
```
|
||||
|
||||
### Local and Mirrored Script Assets
|
||||
|
||||
Hextra can load optional frontend dependencies from different sources:
|
||||
|
||||
- Theme defaults (CDN)
|
||||
- Internal mirror URLs via `base`
|
||||
- Local Hugo assets via `js` / `css`
|
||||
|
||||
For local assets, place vendor files under your site's `assets/` directory and point config values to those asset paths:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
imageZoom:
|
||||
enable: true
|
||||
js: "js/vendor/medium-zoom.min.js"
|
||||
|
||||
mermaid:
|
||||
js: "js/vendor/mermaid.min.js"
|
||||
|
||||
asciinema:
|
||||
js: "js/vendor/asciinema-player.min.js"
|
||||
css: "css/vendor/asciinema-player.css"
|
||||
|
||||
math:
|
||||
engine: katex
|
||||
katex:
|
||||
css: "css/vendor/katex.min.css"
|
||||
assets:
|
||||
- "fonts/KaTeX_Main-Regular.woff2"
|
||||
- "fonts/KaTeX_Math-Italic.woff2"
|
||||
|
||||
search:
|
||||
type: flexsearch
|
||||
flexsearch:
|
||||
js: "js/vendor/flexsearch.bundle.min.js"
|
||||
```
|
||||
|
||||
`imageZoom.enable: true` is only needed here because image zoom is disabled by default.
|
||||
For KaTeX, make sure to publish all font files referenced by your chosen CSS file, not just the two shown in this example.
|
||||
|
||||
To use an internal mirror instead, set `base` (and optionally `js` / `css` when the filename differs):
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
imageZoom:
|
||||
base: "https://mirror.example.com/medium-zoom/dist"
|
||||
|
||||
mermaid:
|
||||
base: "https://mirror.example.com/mermaid/dist"
|
||||
|
||||
asciinema:
|
||||
base: "https://mirror.example.com/asciinema-player/dist/bundle"
|
||||
|
||||
math:
|
||||
engine: katex
|
||||
katex:
|
||||
base: "https://mirror.example.com/katex/dist"
|
||||
|
||||
search:
|
||||
flexsearch:
|
||||
base: "https://mirror.example.com/flexsearch/dist"
|
||||
# js: "flexsearch.bundle.min.js"
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
> To customize MathJax source loading, override `layouts/_partials/scripts/mathjax.html` in your site.
|
||||
|
||||
### Page Width
|
||||
|
||||
The layout shell width can be customized by the `params.page.width` parameter in the config file:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
page:
|
||||
# full (100%), wide (90rem), normal (1280px)
|
||||
width: wide
|
||||
```
|
||||
|
||||
Available options for `params.page.width`: `full`, `wide`, `normal`.
|
||||
|
||||
The main reading content width remains fixed at `72rem` by default.
|
||||
|
||||
To customize content width, override the CSS variable in your custom stylesheet:
|
||||
|
||||
```css {filename="assets/css/custom.css"}
|
||||
:root {
|
||||
--hextra-max-content-width: 100%;
|
||||
}
|
||||
```
|
||||
|
||||
Similarly, the width of the navbar and footer can be customized by the `params.navbar.width` and `params.footer.width` parameters.
|
||||
|
||||
### Page Context Menu
|
||||
|
||||
The page context menu provides a dropdown button that allows users to copy the page content as Markdown or view the raw Markdown source. This feature is useful for documentation sites where readers may want to share or reference the content in Markdown format.
|
||||
|
||||
#### Enabling the Context Menu
|
||||
|
||||
To enable the context menu globally, add the following to your config file:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
page:
|
||||
contextMenu:
|
||||
enable: true
|
||||
```
|
||||
|
||||
You also need to enable the `markdown` output format for pages:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
outputs:
|
||||
page: [html, markdown]
|
||||
section: [html, rss, markdown]
|
||||
```
|
||||
|
||||
#### Per-Page Control
|
||||
|
||||
To enable or disable the context menu for a specific page, use the `contextMenu` parameter in the front matter:
|
||||
|
||||
```yaml {filename="content/docs/example.md"}
|
||||
---
|
||||
title: Example Page
|
||||
contextMenu: false
|
||||
---
|
||||
```
|
||||
|
||||
#### Custom Links
|
||||
|
||||
You can add custom links to the context menu dropdown. This is useful for integrating with external services. The links support the following placeholders:
|
||||
|
||||
- `{url}` - The page URL (URL-encoded)
|
||||
- `{title}` - The page title (URL-encoded)
|
||||
- `{markdown_url}` - The URL to the raw Markdown content (URL-encoded)
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
page:
|
||||
contextMenu:
|
||||
enable: true
|
||||
links:
|
||||
- name: Open in ChatGPT
|
||||
icon: chatgpt
|
||||
url: "https://chatgpt.com/?hints=search&q=I%27m+looking+at+this+documentation%3A+{url}%0AHelp+me+understand+how+to+use+it."
|
||||
```
|
||||
|
||||
Each link can have:
|
||||
- `name` - The display text for the link
|
||||
- `icon` - An optional icon name (see [Icons]({{% relref "docs/guide/shortcodes/icon" %}}))
|
||||
- `url` - The URL with optional placeholders
|
||||
|
||||
### FlexSearch Index
|
||||
|
||||
Full-text search powered by [FlexSearch](https://github.com/nextapps-de/flexsearch) is enabled by default.
|
||||
To customize the search index, set the `params.search.flexsearch.index` parameter in the config file:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
# Search
|
||||
search:
|
||||
enable: true
|
||||
type: flexsearch
|
||||
|
||||
flexsearch:
|
||||
# index page by: content | summary | heading | title
|
||||
index: content
|
||||
```
|
||||
|
||||
You can also control where the FlexSearch runtime is loaded from:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
search:
|
||||
flexsearch:
|
||||
version: "0.8.143" # default CDN version
|
||||
# base: "https://mirror.example.com/flexsearch/dist" # optional remote base URL
|
||||
# js: "js/vendor/flexsearch.bundle.min.js" # local asset path, or custom file under remote base
|
||||
```
|
||||
|
||||
Options for `flexsearch.index`:
|
||||
|
||||
- `content` - full content of the page (default)
|
||||
- `summary` - summary of the page, see [Hugo Content Summaries](https://gohugo.io/content-management/summaries/) for more details
|
||||
- `heading` - level 1 and level 2 headings
|
||||
- `title` - only include the page title
|
||||
|
||||
To customize the search tokenize, set the `params.search.flexsearch.tokenize` parameter in the config file:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
search:
|
||||
# ...
|
||||
flexsearch:
|
||||
# full | forward | reverse | strict
|
||||
tokenize: forward
|
||||
```
|
||||
|
||||
Options for [`flexsearch.tokenize`](https://github.com/nextapps-de/flexsearch/#tokenizer-prefix-search):
|
||||
|
||||
- `strict` - index whole words
|
||||
- `forward` - incrementally index words in forward direction
|
||||
- `reverse` - incrementally index words in both directions
|
||||
- `full` - index every possible combination
|
||||
|
||||
To exclude a page from the FlexSearch search index, set the `excludeSearch: true` in the front matter of the page:
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
title: Configuration
|
||||
excludeSearch: true
|
||||
---
|
||||
```
|
||||
|
||||
### Google Search Index
|
||||
|
||||
To [block Google Search](https://developers.google.com/search/docs/crawling-indexing/block-indexing) from indexing a page, set `noindex` to true in your page frontmatter:
|
||||
|
||||
```yaml
|
||||
title: Configuration (archive version)
|
||||
params:
|
||||
noindex: true
|
||||
```
|
||||
|
||||
To exclude an entire directory, use the [`cascade`](https://gohugo.io/configuration/cascade/) key in the parent `_index.md` file.
|
||||
|
||||
> [!NOTE]
|
||||
> To block search crawlers, you can make a [`robots.txt` template](https://gohugo.io/templates/robots/).
|
||||
> However, `robots.txt` instructions do not necessarily keep a page out of Google search results.
|
||||
|
||||
### Analytics
|
||||
|
||||
Hextra has support for several different analytics solutions. Hextra only supports analytics in production environments. This is to ensure that you do not accidentally send analytic events when working locally. If, however, you do want to test analytics locally, you can run a production server using:
|
||||
|
||||
```
|
||||
hugo server --environment production
|
||||
```
|
||||
|
||||
#### Google Analytics
|
||||
|
||||
To enable [Google Analytics](https://marketingplatform.google.com/about/analytics/), set `services.googleAnalytics.ID` flag in `hugo.yaml`:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
services:
|
||||
googleAnalytics:
|
||||
ID: G-MEASUREMENT_ID
|
||||
```
|
||||
|
||||
#### Umami Analytics
|
||||
|
||||
To enable [Umami](https://umami.is/docs/), set `params.analytics.umami.serverURL` and `params.analytics.umami.websiteID` flag in `hugo.yaml`:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
analytics:
|
||||
umami:
|
||||
serverURL: "https://example.com"
|
||||
websiteID: "94db1cb1-74f4-4a40-ad6c-962362670409"
|
||||
# scriptName: "script.js" # optional (default: script.js)
|
||||
# https://umami.is/docs/tracker-configuration#data-host-url
|
||||
# hostURL: "http://stats.example.org" # optional
|
||||
# https://umami.is/docs/tracker-configuration#data-auto-track
|
||||
# autoTrack: "false" # optional
|
||||
# https://umami.is/docs/tracker-configuration#data-tag
|
||||
# domains: "example.net,example.org" # optional
|
||||
# https://umami.is/docs/tracker-configuration#data-exclude-search
|
||||
# tag: "umami-eu" # optional
|
||||
# https://umami.is/docs/tracker-configuration#data-exclude-hash
|
||||
# excludeSearch: "true" # optional
|
||||
# https://umami.is/docs/tracker-configuration#data-do-not-track
|
||||
# excludeHash: "true" # optional
|
||||
# https://umami.is/docs/tracker-configuration#data-domains
|
||||
# doNotTrack: "true" # optional
|
||||
```
|
||||
|
||||
#### Matomo Analytics
|
||||
|
||||
To enable [Matomo](https://matomo.org/), set `params.analytics.matomo.URL` and `params.analytics.matomo.ID` flag in `hugo.yaml`:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
analytics:
|
||||
matomo:
|
||||
serverURL: "https://example.com"
|
||||
websiteID: "94db1cb1-74f4-4a40-ad6c-962362670409"
|
||||
```
|
||||
|
||||
#### GoatCounter Analytics
|
||||
|
||||
To enable [GoatCounter](https://www.goatcounter.com/), set `params.analytics.goatCounter.code` in `hugo.yaml`
|
||||
All settings available here are mirrors of the settings described in GoatCounter [settings](https://www.goatcounter.com/help/js#settings-44186)
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
analytics:
|
||||
goatCounter:
|
||||
code: "ABCDE"
|
||||
|
||||
# Optional Settings
|
||||
#------------------
|
||||
# disables automatic collection of data
|
||||
# noOnload: true
|
||||
|
||||
# disables event binding. See more here https://www.goatcounter.com/help/events
|
||||
# noEvents: true
|
||||
|
||||
# allows data collection from local addresses. Use this with a production environment to test locally
|
||||
# allowLocal: true
|
||||
|
||||
# Allow data collection when a page is loaded in a frame or iframe
|
||||
# allowFrame: true
|
||||
```
|
||||
|
||||
### LLMS.txt Support
|
||||
|
||||
To enable [llms.txt](https://llmstxt.org/) output format for your site, which provides a structured text outline for [large language models](https://en.wikipedia.org/wiki/Large_language_model) and AI agents, add the `llms` output format to your site's `hugo.yaml`:
|
||||
|
||||
```diff {filename="hugo.yaml"}
|
||||
outputs:
|
||||
- home: [html]
|
||||
+ home: [html, llms]
|
||||
page: [html]
|
||||
section: [html, rss]
|
||||
```
|
||||
|
||||
This will generate an `llms.txt` file at your site's root containing:
|
||||
|
||||
- Site title and description
|
||||
- Hierarchical listing of all sections and pages
|
||||
- Page summaries and publication dates
|
||||
- Direct links to all content
|
||||
|
||||
You can exclude specific pages or sections by setting `llms: false` in their front matter:
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "Internal Notes"
|
||||
llms: false
|
||||
---
|
||||
```
|
||||
|
||||
The llms.txt file is automatically generated from your content structure and makes your site more accessible to AI tools and language models for context and reference.
|
||||
|
||||
### Open Graph
|
||||
|
||||
To add [Open Graph](https://ogp.me/) metadata, you can:
|
||||
- add values in the front-matter params of a page
|
||||
- or add values in the Hugo configuration file
|
||||
|
||||
As a page can have multiple `image` and `video` tags, place their values in an array.
|
||||
Other Open Graph properties can have only one value.
|
||||
|
||||
{{< tabs >}}
|
||||
{{< tab name="Page Level" >}}
|
||||
|
||||
```md {filename="mypage.md"}
|
||||
---
|
||||
title: "My Page"
|
||||
params:
|
||||
images:
|
||||
- "images/image01.jpg"
|
||||
audio: "podcast02.mp3"
|
||||
videos:
|
||||
- "video01.mp4"
|
||||
---
|
||||
|
||||
Page content.
|
||||
```
|
||||
{{< /tab >}}
|
||||
{{< tab name="Global Level" >}}
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
images:
|
||||
- "images/image01.jpg"
|
||||
audio: "podcast02.mp3"
|
||||
videos:
|
||||
- "video01.mp4"
|
||||
```
|
||||
{{< /tab >}}
|
||||
{{< /tabs >}}
|
||||
|
||||
### Banner
|
||||
|
||||
To add a banner to your site, add the following to your `hugo.yaml`:
|
||||
|
||||
```yaml
|
||||
params:
|
||||
banner:
|
||||
key: 'announcement-xxx'
|
||||
message: |
|
||||
🎉 Welcome! [Hextra](https://github.com/hextra/hextra) is a static site generator that helps you build modern websites.
|
||||
```
|
||||
|
||||
The banner will be displayed on all pages.
|
||||
|
||||
The field `message` supports Markdown syntax.
|
||||
|
||||
If you want to use template syntax, you can define the partial in `layouts/_partials/custom/banner.html`.
|
||||
In this case, the field `message` will be ignored.
|
||||
|
||||
### External Link Decoration
|
||||
|
||||
Adds an arrow icon to external links (default: false) when rendering links from Markdown.
|
||||
|
||||
```yaml
|
||||
params:
|
||||
externalLinkDecoration: true
|
||||
```
|
||||
@@ -0,0 +1,635 @@
|
||||
---
|
||||
title: 配置
|
||||
weight: 2
|
||||
tags:
|
||||
- 配置
|
||||
---
|
||||
|
||||
Hugo 从站点根目录的 `hugo.yaml` 读取配置。
|
||||
配置文件可用来调整站点的所有方面。
|
||||
查看本网站的示例配置文件 [`docs/hugo.yaml`](https://github.com/imfing/hextra/blob/main/docs/hugo.yaml) 以全面了解可用设置和最佳实践。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 导航
|
||||
|
||||
### 菜单
|
||||
|
||||
右上角菜单在配置文件的 `menu.main` 部分定义：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
menu:
|
||||
main:
|
||||
- name: 文档
|
||||
pageRef: /docs
|
||||
weight: 1
|
||||
- name: 博客
|
||||
pageRef: /blog
|
||||
weight: 2
|
||||
- name: 关于
|
||||
pageRef: /about
|
||||
weight: 3
|
||||
- name: 搜索
|
||||
weight: 4
|
||||
params:
|
||||
type: search
|
||||
- name: GitHub
|
||||
weight: 5
|
||||
url: "https://github.com/imfing/hextra"
|
||||
params:
|
||||
icon: github
|
||||
```
|
||||
|
||||
菜单项有以下几种类型：
|
||||
|
||||
1. 通过 `pageRef` 链接到站内页面
|
||||
```yaml
|
||||
- name: 文档
|
||||
pageRef: /docs
|
||||
```
|
||||
2. 通过 `url` 链接到外部网址
|
||||
```yaml
|
||||
- name: GitHub
|
||||
url: "https://github.com"
|
||||
```
|
||||
3. 搜索栏，使用 `type: search`
|
||||
```yaml
|
||||
- name: 搜索
|
||||
params:
|
||||
type: search
|
||||
```
|
||||
4. 图标
|
||||
```yaml
|
||||
- name: GitHub
|
||||
params:
|
||||
icon: github
|
||||
```
|
||||
5. 主题切换
|
||||
```yaml
|
||||
- name: Theme Toggle
|
||||
params:
|
||||
type: theme-toggle
|
||||
label: true # optional, default is false
|
||||
```
|
||||
6. 语言切换器
|
||||
```yaml
|
||||
- name: 语言切换器
|
||||
params:
|
||||
type: language-switch
|
||||
label: true # optional, default is false
|
||||
icon: "globe-alt" # optional, default is "translate"
|
||||
```
|
||||
|
||||
通过设置 `weight` 参数可以调整菜单项的排序。
|
||||
|
||||
### 嵌套菜单
|
||||
|
||||
通过定义子菜单项可以创建下拉菜单。点击父菜单项时会显示子菜单。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
menu:
|
||||
main:
|
||||
- identifier: sdk
|
||||
name: SDK
|
||||
- identifier: python
|
||||
name: Python ↗
|
||||
url: https://python.org
|
||||
parent: sdk
|
||||
- identifier: go
|
||||
name: Go
|
||||
url: https://go.dev
|
||||
parent: sdk
|
||||
```
|
||||
|
||||
子菜单项需要通过 `parent` 参数指定父菜单的 `identifier` 值。
|
||||
|
||||
### 徽标与标题
|
||||
|
||||
要修改默认徽标，编辑 `hugo.yaml` 并在 `static` 目录下添加徽标文件路径。
|
||||
可选地，可以更改点击徽标时的跳转链接，以及设置徽标的像素宽度和高度。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
navbar:
|
||||
displayTitle: true
|
||||
displayLogo: true
|
||||
logo:
|
||||
path: images/logo.svg
|
||||
dark: images/logo-dark.svg
|
||||
link: /
|
||||
width: 40
|
||||
height: 20
|
||||
```
|
||||
|
||||
### 分页导航
|
||||
|
||||
禁用文档页面或博客文章底部的上一篇/下一篇导航：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
page:
|
||||
displayPagination: false # 文档页面
|
||||
blog:
|
||||
article:
|
||||
displayPagination: false # 博客文章
|
||||
```
|
||||
|
||||
## 侧边栏
|
||||
|
||||
### 主侧边栏
|
||||
|
||||
主侧边栏会根据内容目录结构自动生成。
|
||||
详情参见[文件组织](/docs/guide/organize-files)页面。
|
||||
|
||||
要从左侧边栏排除单个页面，在页面的 front matter 中设置 `sidebar.exclude` 参数：
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
title: 配置
|
||||
sidebar:
|
||||
exclude: true
|
||||
---
|
||||
```
|
||||
|
||||
### 额外链接
|
||||
|
||||
侧边栏额外链接在配置文件的 `menu.sidebar` 部分定义：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
menu:
|
||||
sidebar:
|
||||
- name: 更多
|
||||
params:
|
||||
type: separator
|
||||
weight: 1
|
||||
- name: "关于"
|
||||
pageRef: "/about"
|
||||
weight: 2
|
||||
- name: "Hugo 文档 ↗"
|
||||
url: "https://gohugo.io/documentation/"
|
||||
weight: 3
|
||||
```
|
||||
|
||||
## 右侧边栏
|
||||
|
||||
### 目录
|
||||
|
||||
目录会根据内容文件中的标题自动生成。可以通过在页面的 front matter 中设置 `toc: false` 来禁用。
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
title: 配置
|
||||
toc: false
|
||||
---
|
||||
```
|
||||
|
||||
### 页面编辑链接
|
||||
|
||||
要配置页面编辑链接，可以在配置文件中设置 `params.editURL.base` 参数：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
editURL:
|
||||
enable: true
|
||||
base: "https://github.com/your-username/your-repo/edit/main"
|
||||
```
|
||||
|
||||
编辑链接将基于提供的 URL 作为根目录自动为每个页面生成。
|
||||
如果想为特定页面设置编辑链接，可以在页面的 front matter 中设置 `editURL` 参数：
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
title: 配置
|
||||
editURL: "https://example.com/edit/this/page"
|
||||
---
|
||||
```
|
||||
|
||||
## 页脚
|
||||
|
||||
### 版权信息
|
||||
|
||||
要修改网站页脚显示的版权文本，需要创建一个名为 `i18n/en.yaml` 的文件。
|
||||
在该文件中指定新的版权文本，如下所示：
|
||||
|
||||
```yaml {filename="i18n/en.yaml"}
|
||||
copyright: "© 2024 你的文本内容"
|
||||
```
|
||||
|
||||
可以参考 GitHub 仓库中的示例 [`i18n/en.yaml`](https://github.com/imfing/hextra/blob/main/i18n/en.yaml) 文件。此外，可以在版权文本中使用 Markdown 格式。
|
||||
|
||||
## 其他
|
||||
|
||||
### 网站图标
|
||||
|
||||
要自定义网站的 [favicon](https://en.wikipedia.org/wiki/Favicon)，将图标文件放在 `static` 文件夹下以覆盖[主题默认的网站图标](https://github.com/imfing/hextra/tree/main/static)：
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="static" >}}
|
||||
{{< filetree/file name="android-chrome-192x192.png" >}}
|
||||
{{< filetree/file name="android-chrome-512x512.png" >}}
|
||||
{{< filetree/file name="apple-touch-icon.png" >}}
|
||||
{{< filetree/file name="favicon-16x16.png" >}}
|
||||
{{< filetree/file name="favicon-32x32.png" >}}
|
||||
{{< filetree/file name="favicon-dark.svg" >}}
|
||||
{{< filetree/file name="favicon.ico" >}}
|
||||
{{< filetree/file name="favicon.svg" >}}
|
||||
{{< filetree/file name="site.webmanifest" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
#### 基本设置
|
||||
|
||||
至少需要在 `static` 文件夹中包含 `favicon.svg`。这将作为网站的默认图标。
|
||||
|
||||
可以通过在 SVG 文件中使用 CSS 媒体查询来创建自适应图标，响应系统主题偏好，具体方法参考[构建自适应网站图标](https://web.dev/articles/building/an-adaptive-favicon)。
|
||||
|
||||
#### 暗色模式支持
|
||||
|
||||
为了增强暗色模式支持，在 `static` 文件夹中添加 `favicon-dark.svg` 与 `favicon.svg` 一起。当两个文件都存在时，Hextra 会自动：
|
||||
|
||||
- 在亮色模式或未检测到主题偏好时使用 `favicon.svg`
|
||||
- 当用户系统设置为暗色模式时切换到 `favicon-dark.svg`
|
||||
- 尊重系统的 `prefers-color-scheme` 设置实现自动切换
|
||||
|
||||
暗色模式图标切换在所有现代浏览器中都有效，包括 Firefox，提供与网站主题一致的无缝体验。
|
||||
|
||||
#### 其他格式
|
||||
|
||||
虽然 `favicon.ico` 通常用于旧版浏览器，现代浏览器支持 SVG 图标，因其可缩放性和小文件大小而更受青睐。
|
||||
如果需要，可以使用 [favicon.io](https://favicon.io/) 或 [favycon](https://github.com/ruisaraiva19/favycon) 等工具生成其他格式的图标。
|
||||
|
||||
### 主题配置
|
||||
|
||||
使用 `theme` 设置来配置默认主题模式和切换按钮，允许访问者在亮色或暗色模式之间切换。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
theme:
|
||||
# light | dark | system
|
||||
default: system
|
||||
displayToggle: true
|
||||
```
|
||||
|
||||
`theme.default` 的选项：
|
||||
|
||||
- `light` - 始终使用亮色模式
|
||||
- `dark` - 始终使用暗色模式
|
||||
- `system` - 与操作系统设置同步（默认）
|
||||
|
||||
`theme.displayToggle` 参数允许显示主题切换按钮。
|
||||
当设置为 `true` 时，访问者可以切换亮色或暗色模式，覆盖默认设置。
|
||||
|
||||
### 页面最后修改时间
|
||||
|
||||
可以通过启用 `params.displayUpdatedDate` 标志来显示页面的最后修改日期。要使用 Git 提交日期作为来源，还需启用 `enableGitInfo` 标志。
|
||||
|
||||
要自定义日期格式，设置 `params.dateFormat` 参数。其布局与 Hugo 的 [`time.Format`](https://gohugo.io/functions/time/format/) 匹配。
|
||||
|
||||
此外，可以通过启用 `params.displayUpdatedAuthor` 标志来显示最后修改的作者。这需要设置 `enableGitInfo: true`。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
# 解析 Git 提交
|
||||
enableGitInfo: true
|
||||
|
||||
params:
|
||||
# 显示最后修改日期
|
||||
displayUpdatedDate: true
|
||||
dateFormat: "2006年1月2日"
|
||||
# 显示最后修改的作者
|
||||
displayUpdatedAuthor: true
|
||||
```
|
||||
|
||||
### 标签
|
||||
|
||||
要显示页面标签，在配置文件中设置以下标志：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
blog:
|
||||
list:
|
||||
displayTags: true
|
||||
toc:
|
||||
displayTags: true
|
||||
```
|
||||
|
||||
Hugo 默认会为 `tags` 和 `categories` 创建分类页面。如果你的网站不使用分类页面，并且想省略生成的 `public/tags/` 和 `public/categories/` 目录，请禁用 `taxonomy` 和 `term` 页面类型：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
disableKinds:
|
||||
- taxonomy
|
||||
- term
|
||||
```
|
||||
|
||||
只有在不依赖标签或分类归档页面时，才禁用这些类型。
|
||||
|
||||
### 图片缩放
|
||||
|
||||
图片缩放默认禁用。启用后，点击 Markdown 图片会打开放大视图。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
imageZoom:
|
||||
enable: true
|
||||
```
|
||||
|
||||
要在特定页面禁用缩放，在页面的 front matter 中添加：
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
imageZoom: false
|
||||
---
|
||||
```
|
||||
|
||||
如果想固定 Medium Zoom 资源或从本地资源加载：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
imageZoom:
|
||||
enable: true
|
||||
base: "https://cdn.jsdelivr.net/npm/medium-zoom@1.1.0/dist"
|
||||
# js: "js/medium-zoom.min.js" # 可选，相对于 base 或本地资源
|
||||
```
|
||||
|
||||
### 本地与镜像脚本资源
|
||||
|
||||
Hextra 可以从多种来源加载可选的前端依赖：
|
||||
|
||||
- 主题默认配置（CDN）
|
||||
- 通过 `base` 指定的内部镜像 URL
|
||||
- 通过 `js` / `css` 指定的 Hugo 本地资源
|
||||
|
||||
对于本地资源，请将 vendor 文件放在站点的 `assets/` 目录下，并在配置中引用这些资源路径：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
imageZoom:
|
||||
enable: true
|
||||
js: "js/vendor/medium-zoom.min.js"
|
||||
|
||||
mermaid:
|
||||
js: "js/vendor/mermaid.min.js"
|
||||
|
||||
asciinema:
|
||||
js: "js/vendor/asciinema-player.min.js"
|
||||
css: "css/vendor/asciinema-player.css"
|
||||
|
||||
math:
|
||||
engine: katex
|
||||
katex:
|
||||
css: "css/vendor/katex.min.css"
|
||||
assets:
|
||||
- "fonts/KaTeX_Main-Regular.woff2"
|
||||
- "fonts/KaTeX_Math-Italic.woff2"
|
||||
|
||||
search:
|
||||
type: flexsearch
|
||||
flexsearch:
|
||||
js: "js/vendor/flexsearch.bundle.min.js"
|
||||
```
|
||||
|
||||
这里只有因为图片缩放默认关闭，才需要设置 `imageZoom.enable: true`。
|
||||
对于 KaTeX，请确保发布你所选 CSS 文件引用的全部字体文件，而不仅仅是此示例中的两个。
|
||||
|
||||
如果要使用内部镜像，请设置 `base`；只有当文件名不同时，才需要额外设置 `js` / `css`：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
imageZoom:
|
||||
base: "https://mirror.example.com/medium-zoom/dist"
|
||||
|
||||
mermaid:
|
||||
base: "https://mirror.example.com/mermaid/dist"
|
||||
|
||||
asciinema:
|
||||
base: "https://mirror.example.com/asciinema-player/dist/bundle"
|
||||
|
||||
math:
|
||||
engine: katex
|
||||
katex:
|
||||
base: "https://mirror.example.com/katex/dist"
|
||||
|
||||
search:
|
||||
flexsearch:
|
||||
base: "https://mirror.example.com/flexsearch/dist"
|
||||
# js: "flexsearch.bundle.min.js"
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
> 如需自定义 MathJax 的加载来源，请在项目中覆盖 `layouts/_partials/scripts/mathjax.html`。
|
||||
|
||||
### 页面宽度
|
||||
|
||||
页面整体布局宽度可通过 `params.page.width` 配置：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
page:
|
||||
# full (100%), wide (90rem), normal (1280px)
|
||||
width: wide
|
||||
```
|
||||
|
||||
`params.page.width` 可用选项：`full`、`wide`、`normal`。
|
||||
|
||||
正文内容宽度默认固定为 `72rem`。
|
||||
|
||||
如需自定义内容宽度，请在自定义样式表中覆盖 CSS 变量：
|
||||
|
||||
```css {filename="assets/css/custom.css"}
|
||||
:root {
|
||||
--hextra-max-content-width: 100%;
|
||||
}
|
||||
```
|
||||
|
||||
类似地，导航栏和页脚的宽度可以通过 `params.navbar.width` 和 `params.footer.width` 参数自定义。
|
||||
|
||||
### 页面上下文菜单
|
||||
|
||||
页面上下文菜单提供一个下拉按钮，允许用户将页面内容复制为 Markdown 或查看原始 Markdown 源码。此功能对于读者可能希望以 Markdown 格式共享或引用内容的文档站点非常有用。
|
||||
|
||||
#### 启用上下文菜单
|
||||
|
||||
要全局启用上下文菜单，请在配置文件中添加以下内容：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
page:
|
||||
contextMenu:
|
||||
enable: true
|
||||
```
|
||||
|
||||
您还需要为页面启用 `markdown` 输出格式：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
outputs:
|
||||
page: [html, markdown]
|
||||
section: [html, rss, markdown]
|
||||
```
|
||||
|
||||
#### 单页控制
|
||||
|
||||
要为特定页面启用或禁用上下文菜单，请在 front matter 中使用 `contextMenu` 参数：
|
||||
|
||||
```yaml {filename="content/docs/example.md"}
|
||||
---
|
||||
title: 示例页面
|
||||
contextMenu: false
|
||||
---
|
||||
```
|
||||
|
||||
#### 自定义链接
|
||||
|
||||
您可以向上下文菜单下拉列表添加自定义链接。这对于与外部服务集成非常有用。链接支持以下占位符：
|
||||
|
||||
- `{url}` - 页面 URL（URL 编码）
|
||||
- `{title}` - 页面标题（URL 编码）
|
||||
- `{markdown_url}` - 原始 Markdown 内容的 URL（URL 编码）
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
page:
|
||||
contextMenu:
|
||||
enable: true
|
||||
links:
|
||||
- name: 在 ChatGPT 中打开
|
||||
icon: chatgpt
|
||||
url: "https://chatgpt.com/?hints=search&q=I%27m+looking+at+this+documentation%3A+{url}%0AHelp+me+understand+how+to+use+it."
|
||||
```
|
||||
|
||||
每个链接可以包含：
|
||||
- `name` - 链接的显示文本
|
||||
- `icon` - 可选的图标名称（参见[图标]({{% relref "docs/guide/shortcodes/icon" %}})）
|
||||
- `url` - 包含可选占位符的 URL
|
||||
|
||||
### FlexSearch 索引
|
||||
|
||||
默认启用由 [FlexSearch](https://github.com/nextapps-de/flexsearch) 提供的全文搜索。
|
||||
要自定义搜索索引，在配置文件中设置 `params.search.flexsearch.index` 参数：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
# 搜索
|
||||
search:
|
||||
enable: true
|
||||
type: flexsearch
|
||||
|
||||
flexsearch:
|
||||
# 索引页面方式: content | summary | heading | title
|
||||
index: content
|
||||
```
|
||||
|
||||
你也可以控制 FlexSearch runtime 的加载来源：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
search:
|
||||
flexsearch:
|
||||
version: "0.8.143" # 默认 CDN 版本
|
||||
# base: "https://mirror.example.com/flexsearch/dist" # 可选的远程 base URL
|
||||
# js: "js/vendor/flexsearch.bundle.min.js" # 本地资源路径，或远程 base 下的自定义文件
|
||||
```
|
||||
|
||||
`flexsearch.index` 的选项：
|
||||
|
||||
- `content` - 页面的完整内容（默认）
|
||||
- `summary` - 页面摘要，详见 [Hugo 内容摘要](https://gohugo.io/content-management/summaries/)
|
||||
- `heading` - 一级和二级标题
|
||||
- `title` - 仅包含页面标题
|
||||
|
||||
要自定义搜索分词方式，在配置文件中设置 `params.search.flexsearch.tokenize` 参数：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
search:
|
||||
# ...
|
||||
flexsearch:
|
||||
# full | forward | reverse | strict
|
||||
tokenize: forward
|
||||
```
|
||||
|
||||
[`flexsearch.tokenize`](https://github.com/nextapps-de/flexsearch/#tokenizer-prefix-search) 的选项：
|
||||
|
||||
- `strict` - 索引完整单词
|
||||
- `forward` - 正向逐步索引单词
|
||||
- `reverse` - 双向逐步索引单词
|
||||
- `full` - 索引所有可能的组合
|
||||
|
||||
要从 FlexSearch 搜索索引中排除页面，在页面的 front matter 中设置 `excludeSearch: true`：
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
title: 配置
|
||||
excludeSearch: true
|
||||
---
|
||||
```
|
||||
|
||||
### Google 分析
|
||||
|
||||
要启用 [Google Analytics](https://marketingplatform.google.com/about/analytics/)，在 `hugo.yaml` 中设置 `services.googleAnalytics.ID` 标志：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
services:
|
||||
googleAnalytics:
|
||||
ID: G-MEASUREMENT_ID
|
||||
```
|
||||
|
||||
### Google 搜索索引
|
||||
|
||||
要[阻止 Google 搜索](https://developers.google.com/search/docs/crawling-indexing/block-indexing)索引页面，在页面的 frontmatter 中设置 `noindex` 为 true：
|
||||
|
||||
```yaml
|
||||
title: 配置（存档版本）
|
||||
params:
|
||||
noindex: true
|
||||
```
|
||||
|
||||
要排除整个目录，在父级 `_index.md` 文件中使用 [`cascade`](https://gohugo.io/configuration/cascade/) 键。
|
||||
|
||||
> [!注意]
|
||||
> 要阻止搜索引擎爬虫，可以制作 [`robots.txt` 模板](https://gohugo.io/templates/robots/)。
|
||||
> 但是，`robots.txt` 指令不一定能阻止页面出现在 Google 搜索结果中。
|
||||
|
||||
### LLMS.txt 支持
|
||||
|
||||
要为网站启用 [llms.txt](https://llmstxt.org/) 输出格式，为[大型语言模型](https://en.wikipedia.org/wiki/Large_language_model)和 AI 代理提供结构化文本大纲，在站点的 `hugo.yaml` 中添加 `llms` 输出格式：
|
||||
|
||||
```diff {filename="hugo.yaml"}
|
||||
outputs:
|
||||
- home: [html]
|
||||
+ home: [html, llms]
|
||||
page: [html]
|
||||
section: [html, rss]
|
||||
```
|
||||
|
||||
这将在站点根目录生成一个 `llms.txt` 文件，包含：
|
||||
|
||||
- 站点标题和描述
|
||||
- 所有章节和页面的层次结构列表
|
||||
- 页面摘要和发布日期
|
||||
- 所有内容的直接链接
|
||||
|
||||
您可以通过在 front matter 中设置 `llms: false` 来排除特定页面或章节：
|
||||
|
||||
```yaml
|
||||
---
|
||||
title: "内部笔记"
|
||||
llms: false
|
||||
---
|
||||
```
|
||||
|
||||
llms.txt 文件根据内容结构自动生成，使 AI 工具和语言模型更容易获取上下文和参考。
|
||||
|
||||
### Open Graph
|
||||
|
||||
要在页面中添加 [Open Graph](https://ogp.me/) 元数据，在 frontmatter 的 params 中添加值。
|
||||
|
||||
由于一个页面可以有多个 `image` 和 `video` 标签，将它们的值放在数组中。
|
||||
其他 Open Graph 属性只能有一个值。
|
||||
例如，此页面有一个 `og:image` 标签（配置社交分享时的预览图片）和一个 `og:audio` 标签。
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
title: "配置"
|
||||
params:
|
||||
images:
|
||||
- "img/config-image.jpg"
|
||||
audio: "config-talk.mp3"
|
||||
```
|
||||
@@ -0,0 +1,164 @@
|
||||
---
|
||||
title: استقرار سایت
|
||||
prev: /docs/guide/shortcodes
|
||||
next: /docs/advanced
|
||||
---
|
||||
|
||||
Hugo وبسایت‌های استاتیک تولید می‌کند که امکان میزبانی انعطاف‌پذیر را فراهم می‌سازد.
|
||||
این صفحه راهنماهایی برای استقرار سایت Hextra شما روی پلتفرم‌های مختلف ارائه می‌دهد.
|
||||
|
||||
<!--more-->
|
||||
|
||||
|
||||
## GitHub Pages
|
||||
|
||||
[GitHub Pages](https://docs.github.com/pages) روش توصیه‌شده برای استقرار و میزبانی رایگان وبسایت شماست.
|
||||
|
||||
اگر سایت را با استفاده از [hextra-starter-template](https://github.com/imfing/hextra-starter-template) راه‌اندازی کرده‌اید، این قالب از پیش یک گردش کار GitHub Actions برای استقرار خودکار در GitHub Pages ارائه می‌دهد.
|
||||
|
||||
{{% details title="پیکربندی GitHub Actions" closed="true" %}}
|
||||
|
||||
در زیر یک نمونه پیکربندی از [hextra-starter-template](https://github.com/imfing/hextra-starter-template) آمده است:
|
||||
|
||||
```yaml {filename=".github/workflows/pages.yaml"}
|
||||
# نمونه گردش کار برای ساخت و استقرار یک سایت Hugo در GitHub Pages
|
||||
name: استقرار سایت Hugo در Pages
|
||||
|
||||
on:
|
||||
# در push به شاخه پیش‌فرض اجرا می‌شود
|
||||
push:
|
||||
branches: ["main"]
|
||||
|
||||
# امکان اجرای دستی این گردش کار از تب Actions
|
||||
workflow_dispatch:
|
||||
|
||||
# تنظیم مجوزهای GITHUB_TOKEN برای امکان استقرار در GitHub Pages
|
||||
permissions:
|
||||
contents: read
|
||||
pages: write
|
||||
id-token: write
|
||||
|
||||
# اجازه فقط یک استقرار همزمان، رد کردن اجراهای در صف بین اجرای در حال انجام و آخرین صف
|
||||
# با این حال، اجراهای در حال انجام را لغو نکنید زیرا می‌خواهیم این استقرارها کامل شوند.
|
||||
concurrency:
|
||||
group: "pages"
|
||||
cancel-in-progress: false
|
||||
|
||||
# پیش‌فرض bash
|
||||
defaults:
|
||||
run:
|
||||
shell: bash
|
||||
|
||||
jobs:
|
||||
# کار ساخت
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
HUGO_VERSION: 0.147.7
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0 # دریافت تمام تاریخچه برای .GitInfo و .Lastmod
|
||||
submodules: recursive
|
||||
- name: راه‌اندازی Go
|
||||
uses: actions/setup-go@v5
|
||||
with:
|
||||
go-version: '1.22'
|
||||
- name: راه‌اندازی Pages
|
||||
id: pages
|
||||
uses: actions/configure-pages@v4
|
||||
- name: راه‌اندازی Hugo
|
||||
run: |
|
||||
wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
|
||||
&& sudo dpkg -i ${{ runner.temp }}/hugo.deb
|
||||
- name: ساخت با Hugo
|
||||
env:
|
||||
# برای حداکثر سازگاری با ماژول‌های Hugo
|
||||
HUGO_ENVIRONMENT: production
|
||||
HUGO_ENV: production
|
||||
run: |
|
||||
hugo \
|
||||
--gc --minify \
|
||||
--baseURL "${{ steps.pages.outputs.base_url }}/"
|
||||
- name: آپلود آرتیفکت
|
||||
uses: actions/upload-pages-artifact@v3
|
||||
with:
|
||||
path: ./public
|
||||
|
||||
# کار استقرار
|
||||
deploy:
|
||||
environment:
|
||||
name: github-pages
|
||||
url: ${{ steps.deployment.outputs.page_url }}
|
||||
runs-on: ubuntu-latest
|
||||
needs: build
|
||||
steps:
|
||||
- name: استقرار در GitHub Pages
|
||||
id: deployment
|
||||
uses: actions/deploy-pages@v4
|
||||
```
|
||||
|
||||
{{% /details %}}
|
||||
|
||||
|
||||
{{< callout >}}
|
||||
در تنظیمات مخزن، بخش **Pages** > **Build and deployment** > **Source** را روی **GitHub Actions** تنظیم کنید:
|
||||
|
||||
{{< /callout >}}
|
||||
|
||||
به طور پیش‌فرض، گردش کار GitHub Actions فوق `.github/workflows/pages.yaml` فرض می‌کند که سایت در `https://<USERNAME>.github.io/<REPO>/` مستقر می‌شود.
|
||||
|
||||
اگر در `https://<USERNAME>.github.io/` مستقر می‌کنید، `--baseURL` را اصلاح کنید:
|
||||
|
||||
```yaml {filename=".github/workflows/pages.yaml",linenos=table,linenostart=54,hl_lines=[4]}
|
||||
run: |
|
||||
hugo \
|
||||
--gc --minify \
|
||||
--baseURL "https://${{ github.repository_owner }}.github.io/"
|
||||
```
|
||||
|
||||
اگر در دامنه خود مستقر می‌کنید، لطفاً مقدار `--baseURL` را متناسب با آن تغییر دهید.
|
||||
|
||||
|
||||
## Cloudflare Pages
|
||||
|
||||
1. کد منبع سایت را در یک مخزن Git (مثلاً GitHub) قرار دهید.
|
||||
2. به [داشبورد Cloudflare](https://dash.cloudflare.com/) وارد شوید و حساب خود را انتخاب کنید.
|
||||
3. در صفحه اصلی حساب، **Workers & Pages** > **Create application** > **Pages** > **Connect to Git** را انتخاب کنید.
|
||||
4. مخزن را انتخاب کنید و در بخش **Set up builds and deployments** اطلاعات زیر را ارائه دهید:
|
||||
|
||||
| تنظیمات | مقدار |
|
||||
| ---------------- | -------------------- |
|
||||
| شاخه تولید | `main` |
|
||||
| دستور ساخت | `hugo --gc --minify` |
|
||||
| دایرکتوری ساخت | `public` |
|
||||
|
||||
برای جزئیات بیشتر، بررسی کنید:
|
||||
- [استقرار یک سایت Hugo](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/#deploy-with-cloudflare-pages).
|
||||
- [پشتیبانی زبان و ابزارها](https://developers.cloudflare.com/pages/platform/language-support-and-tools/).
|
||||
|
||||
|
||||
## Netlify
|
||||
|
||||
1. کد خود را به مخزن Git (GitHub, GitLab و غیره) push کنید.
|
||||
2. [پروژه را به Netlify وارد کنید](https://app.netlify.com/start).
|
||||
3. اگر از [hextra-starter-template][hextra-starter-template] استفاده نمی‌کنید، موارد زیر را به صورت دستی پیکربندی کنید:
|
||||
- دستور ساخت را روی `hugo --gc --minify` تنظیم کنید.
|
||||
- دایرکتوری انتشار را روی `public` مشخص کنید.
|
||||
- متغیر محیطی `HUGO_VERSION` را اضافه کرده و روی `0.147.7` تنظیم کنید، یا آن را در فایل `netlify.toml` مشخص کنید.
|
||||
4. استقرار دهید!
|
||||
|
||||
برای جزئیات بیشتر، [Hugo در Netlify](https://docs.netlify.com/integrations/frameworks/hugo/) را بررسی کنید.
|
||||
|
||||
|
||||
## Vercel
|
||||
|
||||
1. کد خود را به مخزن Git (GitHub, GitLab و غیره) push کنید.
|
||||
2. به [داشبورد Vercel](https://vercel.com/dashboard) بروید و پروژه Hugo خود را وارد کنید.
|
||||
3. پروژه را پیکربندی کنید، Hugo را به عنوان پیش‌تنظیم فریمورک انتخاب کنید.
|
||||
4. دستور ساخت و دستور نصب را بازنویسی کنید:
|
||||
1. دستور ساخت را روی `hugo --gc --minify` تنظیم کنید.
|
||||
2. دستور نصب را روی `yum install golang` تنظیم کنید.
|
||||
|
||||
|
||||
@@ -0,0 +1,163 @@
|
||||
---
|
||||
title: サイトのデプロイ
|
||||
prev: /docs/guide/shortcodes
|
||||
next: /docs/advanced
|
||||
---
|
||||
|
||||
Hugo は静的サイトを生成するため、柔軟なホスティングオプションが利用可能です。
|
||||
このページでは、Hextra サイトを様々なプラットフォームにデプロイする方法を解説します。
|
||||
|
||||
<!--more-->
|
||||
|
||||
|
||||
## GitHub Pages
|
||||
|
||||
[GitHub Pages](https://docs.github.com/pages) は無料でサイトをデプロイ・ホストするための推奨方法です。
|
||||
|
||||
[hextra-starter-template](https://github.com/imfing/hextra-starter-template) を使用してサイトを構築した場合、GitHub Pages への自動デプロイを支援する GitHub Actions ワークフローが最初から用意されています。
|
||||
|
||||
{{% details title="GitHub Actions 設定" closed="true" %}}
|
||||
|
||||
以下は [hextra-starter-template](https://github.com/imfing/hextra-starter-template) の設定例です:
|
||||
|
||||
```yaml {filename=".github/workflows/pages.yaml"}
|
||||
# Hugo サイトをビルドし GitHub Pages にデプロイするサンプルワークフロー
|
||||
name: Deploy Hugo site to Pages
|
||||
|
||||
on:
|
||||
# デフォルトブランチへのプッシュ時に実行
|
||||
push:
|
||||
branches: ["main"]
|
||||
|
||||
# Actions タブから手動で実行可能
|
||||
workflow_dispatch:
|
||||
|
||||
# GITHUB_TOKEN の権限を設定（GitHub Pages へのデプロイを許可）
|
||||
permissions:
|
||||
contents: read
|
||||
pages: write
|
||||
id-token: write
|
||||
|
||||
# 同時実行を1つに制限（進行中の実行はキャンセルしない）
|
||||
concurrency:
|
||||
group: "pages"
|
||||
cancel-in-progress: false
|
||||
|
||||
# デフォルトシェルを bash に設定
|
||||
defaults:
|
||||
run:
|
||||
shell: bash
|
||||
|
||||
jobs:
|
||||
# ビルドジョブ
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
HUGO_VERSION: 0.147.7
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0 # .GitInfo と .Lastmod 用に全履歴を取得
|
||||
submodules: recursive
|
||||
- name: Setup Go
|
||||
uses: actions/setup-go@v5
|
||||
with:
|
||||
go-version: '1.22'
|
||||
- name: Setup Pages
|
||||
id: pages
|
||||
uses: actions/configure-pages@v4
|
||||
- name: Setup Hugo
|
||||
run: |
|
||||
wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
|
||||
&& sudo dpkg -i ${{ runner.temp }}/hugo.deb
|
||||
- name: Build with Hugo
|
||||
env:
|
||||
# Hugo モジュールとの最大互換性のため
|
||||
HUGO_ENVIRONMENT: production
|
||||
HUGO_ENV: production
|
||||
run: |
|
||||
hugo \
|
||||
--gc --minify \
|
||||
--baseURL "${{ steps.pages.outputs.base_url }}/"
|
||||
- name: Upload artifact
|
||||
uses: actions/upload-pages-artifact@v3
|
||||
with:
|
||||
path: ./public
|
||||
|
||||
# デプロイジョブ
|
||||
deploy:
|
||||
environment:
|
||||
name: github-pages
|
||||
url: ${{ steps.deployment.outputs.page_url }}
|
||||
runs-on: ubuntu-latest
|
||||
needs: build
|
||||
steps:
|
||||
- name: Deploy to GitHub Pages
|
||||
id: deployment
|
||||
uses: actions/deploy-pages@v4
|
||||
```
|
||||
|
||||
{{% /details %}}
|
||||
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
リポジトリ設定で、**Pages** > **Build and deployment** > **Source** を **GitHub Actions** に設定してください:
|
||||
|
||||
{{< /callout >}}
|
||||
|
||||
デフォルトでは、上記の GitHub Actions ワークフロー `.github/workflows/pages.yaml` は `https://<USERNAME>.github.io/<REPO>/` へのデプロイを想定しています。
|
||||
|
||||
`https://<USERNAME>.github.io/` にデプロイする場合は `--baseURL` を修正してください:
|
||||
|
||||
```yaml {filename=".github/workflows/pages.yaml",linenos=table,linenostart=54,hl_lines=[4]}
|
||||
run: |
|
||||
hugo \
|
||||
--gc --minify \
|
||||
--baseURL "https://${{ github.repository_owner }}.github.io/"
|
||||
```
|
||||
|
||||
独自ドメインを使用する場合は、`--baseURL` の値を適宜変更してください。
|
||||
|
||||
|
||||
## Cloudflare Pages
|
||||
|
||||
1. サイトのソースコードを Git リポジトリ（GitHub など）に配置
|
||||
2. [Cloudflare ダッシュボード](https://dash.cloudflare.com/) にログインしアカウントを選択
|
||||
3. Account Home で **Workers & Pages** > **Create application** > **Pages** > **Connect to Git** を選択
|
||||
4. リポジトリを選択し、**Set up builds and deployments** セクションで以下を設定:
|
||||
|
||||
| 設定項目 | 値 |
|
||||
| ----------------- | -------------------- |
|
||||
| Production branch | `main` |
|
||||
| Build command | `hugo --gc --minify` |
|
||||
| Build directory | `public` |
|
||||
|
||||
詳細は以下を参照:
|
||||
- [Deploy a Hugo site](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/#deploy-with-cloudflare-pages)
|
||||
- [Language support and tools](https://developers.cloudflare.com/pages/platform/language-support-and-tools/)
|
||||
|
||||
|
||||
## Netlify
|
||||
|
||||
1. コードを Git リポジトリ（GitHub, GitLab など）にプッシュ
|
||||
2. Netlify に [プロジェクトをインポート](https://app.netlify.com/start)
|
||||
3. [hextra-starter-template][hextra-starter-template] を使用していない場合、以下を手動設定:
|
||||
- Build command を `hugo --gc --minify` に設定
|
||||
- Publish directory を `public` に指定
|
||||
- 環境変数 `HUGO_VERSION` を追加し `0.147.7` を設定、または `netlify.toml` ファイルで設定
|
||||
4. デプロイ！
|
||||
|
||||
詳細は [Hugo on Netlify](https://docs.netlify.com/integrations/frameworks/hugo/) を参照
|
||||
|
||||
|
||||
## Vercel
|
||||
|
||||
1. コードを Git リポジトリ（GitHub, GitLab など）にプッシュ
|
||||
2. [Vercel ダッシュボード](https://vercel.com/dashboard) に移動し Hugo プロジェクトをインポート
|
||||
3. プロジェクトを設定、Framework Preset で Hugo を選択
|
||||
4. Build Command と Install command を上書き:
|
||||
1. Build Command を `hugo --gc --minify` に設定
|
||||
2. Install Command を `yum install golang` に設定
|
||||
|
||||
|
||||
@@ -0,0 +1,164 @@
|
||||
---
|
||||
title: Deploy Site
|
||||
prev: /docs/guide/shortcodes
|
||||
next: /docs/advanced
|
||||
---
|
||||
|
||||
Hugo generates static websites, allowing for flexible hosting options.
|
||||
This page provides guides for deploying your Hextra site on various platforms.
|
||||
|
||||
<!--more-->
|
||||
|
||||
|
||||
## GitHub Pages
|
||||
|
||||
[GitHub Pages](https://docs.github.com/pages) is the recommended way to deploy and host your website for free.
|
||||
|
||||
If you bootstrap the site using [hextra-starter-template](https://github.com/imfing/hextra-starter-template), it has provided GitHub Actions workflow out-of-the-box that helps automatically deploy to GitHub Pages.
|
||||
|
||||
{{% details title="GitHub Actions Configuration" closed="true" %}}
|
||||
|
||||
Below is an example configuration from [hextra-starter-template](https://github.com/imfing/hextra-starter-template):
|
||||
|
||||
```yaml {filename=".github/workflows/pages.yaml"}
|
||||
# Sample workflow for building and deploying a Hugo site to GitHub Pages
|
||||
name: Deploy Hugo site to Pages
|
||||
|
||||
on:
|
||||
# Runs on pushes targeting the default branch
|
||||
push:
|
||||
branches: ["main"]
|
||||
|
||||
# Allows you to run this workflow manually from the Actions tab
|
||||
workflow_dispatch:
|
||||
|
||||
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
|
||||
permissions:
|
||||
contents: read
|
||||
pages: write
|
||||
id-token: write
|
||||
|
||||
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
|
||||
# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
|
||||
concurrency:
|
||||
group: "pages"
|
||||
cancel-in-progress: false
|
||||
|
||||
# Default to bash
|
||||
defaults:
|
||||
run:
|
||||
shell: bash
|
||||
|
||||
jobs:
|
||||
# Build job
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
HUGO_VERSION: 0.147.7
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0 # fetch all history for .GitInfo and .Lastmod
|
||||
submodules: recursive
|
||||
- name: Setup Go
|
||||
uses: actions/setup-go@v5
|
||||
with:
|
||||
go-version: '1.22'
|
||||
- name: Setup Pages
|
||||
id: pages
|
||||
uses: actions/configure-pages@v4
|
||||
- name: Setup Hugo
|
||||
run: |
|
||||
wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
|
||||
&& sudo dpkg -i ${{ runner.temp }}/hugo.deb
|
||||
- name: Build with Hugo
|
||||
env:
|
||||
# For maximum backward compatibility with Hugo modules
|
||||
HUGO_ENVIRONMENT: production
|
||||
HUGO_ENV: production
|
||||
run: |
|
||||
hugo \
|
||||
--gc --minify \
|
||||
--baseURL "${{ steps.pages.outputs.base_url }}/"
|
||||
- name: Upload artifact
|
||||
uses: actions/upload-pages-artifact@v3
|
||||
with:
|
||||
path: ./public
|
||||
|
||||
# Deployment job
|
||||
deploy:
|
||||
environment:
|
||||
name: github-pages
|
||||
url: ${{ steps.deployment.outputs.page_url }}
|
||||
runs-on: ubuntu-latest
|
||||
needs: build
|
||||
steps:
|
||||
- name: Deploy to GitHub Pages
|
||||
id: deployment
|
||||
uses: actions/deploy-pages@v4
|
||||
```
|
||||
|
||||
{{% /details %}}
|
||||
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
In your repository settings, set the **Pages** > **Build and deployment** > **Source** to **GitHub Actions**:
|
||||
|
||||
{{< /callout >}}
|
||||
|
||||
By default, the above GitHub Actions workflow `.github/workflows/pages.yaml` assumes that the site is deploying to `https://<USERNAME>.github.io/<REPO>/`.
|
||||
|
||||
If you are deploying to `https://<USERNAME>.github.io/` then modify the `--baseURL`:
|
||||
|
||||
```yaml {filename=".github/workflows/pages.yaml",linenos=table,linenostart=54,hl_lines=[4]}
|
||||
run: |
|
||||
hugo \
|
||||
--gc --minify \
|
||||
--baseURL "https://${{ github.repository_owner }}.github.io/"
|
||||
```
|
||||
|
||||
If you are deploying to your own domain, please change the `--baseURL` value accordingly.
|
||||
|
||||
|
||||
## Cloudflare Pages
|
||||
|
||||
1. Put your site source code in a Git repository (e.g. GitHub)
|
||||
2. Log in to the [Cloudflare dashboard](https://dash.cloudflare.com/) and select your account
|
||||
3. In Account Home, select **Workers & Pages** > **Create application** > **Pages** > **Connect to Git**
|
||||
4. Select the repository, and in the **Set up builds and deployments** section, provide the following information:
|
||||
|
||||
| Configuration | Value |
|
||||
| ----------------- | -------------------- |
|
||||
| Production branch | `main` |
|
||||
| Build command | `hugo --gc --minify` |
|
||||
| Build directory | `public` |
|
||||
|
||||
For more details, check out:
|
||||
- [Deploy a Hugo site](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/#deploy-with-cloudflare-pages).
|
||||
- [Language support and tools](https://developers.cloudflare.com/pages/platform/language-support-and-tools/).
|
||||
|
||||
|
||||
## Netlify
|
||||
|
||||
1. Push your code to your Git repository (GitHub, GitLab, etc.)
|
||||
2. [Import the project](https://app.netlify.com/start) to Netlify
|
||||
3. If you are not using [hextra-starter-template][hextra-starter-template], configure the following manually:
|
||||
- Configure the Build command to `hugo --gc --minify`
|
||||
- Specify the Publish directory to `public`
|
||||
- Add Environment variable `HUGO_VERSION` and set to `0.147.7`, or alternatively, set it in `netlify.toml` file
|
||||
4. Deploy!
|
||||
|
||||
Check [Hugo on Netlify](https://docs.netlify.com/integrations/frameworks/hugo/) for more details.
|
||||
|
||||
|
||||
## Vercel
|
||||
|
||||
1. Push your code to your Git repository (GitHub, GitLab, etc.)
|
||||
2. Go to [Vercel Dashboard](https://vercel.com/dashboard) and import your Hugo project
|
||||
3. Configure the project, select Hugo as Framework Preset
|
||||
4. Override the Build Command and Install command:
|
||||
1. Set Build Command to `hugo --gc --minify`
|
||||
2. Set Install Command to `yum install golang`
|
||||
|
||||
|
||||
@@ -0,0 +1,164 @@
|
||||
---
|
||||
title: 部署站点
|
||||
prev: /docs/guide/shortcodes
|
||||
next: /docs/advanced
|
||||
---
|
||||
|
||||
Hugo 生成静态网站，支持灵活的托管方案。
|
||||
本页提供在各类平台上部署 Hextra 站点的指南。
|
||||
|
||||
<!--more-->
|
||||
|
||||
|
||||
## GitHub Pages
|
||||
|
||||
[GitHub Pages](https://docs.github.com/pages) 是推荐的免费部署托管方案。
|
||||
|
||||
若使用 [hextra-starter-template](https://github.com/imfing/hextra-starter-template) 初始化项目，已内置 GitHub Actions 工作流，可自动部署至 GitHub Pages。
|
||||
|
||||
{{% details title="GitHub Actions 配置" closed="true" %}}
|
||||
|
||||
以下是 [hextra-starter-template](https://github.com/imfing/hextra-starter-template) 的示例配置：
|
||||
|
||||
```yaml {filename=".github/workflows/pages.yaml"}
|
||||
# 构建并部署 Hugo 站点到 GitHub Pages 的示例工作流
|
||||
name: 部署 Hugo 站点到 Pages
|
||||
|
||||
on:
|
||||
# 针对默认分支的推送触发
|
||||
push:
|
||||
branches: ["main"]
|
||||
|
||||
# 允许从 Actions 标签手动运行
|
||||
workflow_dispatch:
|
||||
|
||||
# 设置 GITHUB_TOKEN 权限以允许部署到 GitHub Pages
|
||||
permissions:
|
||||
contents: read
|
||||
pages: write
|
||||
id-token: write
|
||||
|
||||
# 仅允许一个并发部署，跳过正在运行与最新排队之间的运行
|
||||
# 但不会取消进行中的运行，以确保生产部署完成
|
||||
concurrency:
|
||||
group: "pages"
|
||||
cancel-in-progress: false
|
||||
|
||||
# 默认使用 bash
|
||||
defaults:
|
||||
run:
|
||||
shell: bash
|
||||
|
||||
jobs:
|
||||
# 构建任务
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
HUGO_VERSION: 0.147.7
|
||||
steps:
|
||||
- name: 检出代码
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0 # 获取完整历史记录以支持 .GitInfo 和 .Lastmod
|
||||
submodules: recursive
|
||||
- name: 设置 Go 环境
|
||||
uses: actions/setup-go@v5
|
||||
with:
|
||||
go-version: '1.22'
|
||||
- name: 配置 Pages
|
||||
id: pages
|
||||
uses: actions/configure-pages@v4
|
||||
- name: 安装 Hugo
|
||||
run: |
|
||||
wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
|
||||
&& sudo dpkg -i ${{ runner.temp }}/hugo.deb
|
||||
- name: 使用 Hugo 构建
|
||||
env:
|
||||
# 为 Hugo 模块提供最大兼容性
|
||||
HUGO_ENVIRONMENT: production
|
||||
HUGO_ENV: production
|
||||
run: |
|
||||
hugo \
|
||||
--gc --minify \
|
||||
--baseURL "${{ steps.pages.outputs.base_url }}/"
|
||||
- name: 上传产物
|
||||
uses: actions/upload-pages-artifact@v3
|
||||
with:
|
||||
path: ./public
|
||||
|
||||
# 部署任务
|
||||
deploy:
|
||||
environment:
|
||||
name: github-pages
|
||||
url: ${{ steps.deployment.outputs.page_url }}
|
||||
runs-on: ubuntu-latest
|
||||
needs: build
|
||||
steps:
|
||||
- name: 部署到 GitHub Pages
|
||||
id: deployment
|
||||
uses: actions/deploy-pages@v4
|
||||
```
|
||||
|
||||
{{% /details %}}
|
||||
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
在仓库设置中，将 **Pages** > **构建与部署** > **源** 设为 **GitHub Actions**：
|
||||
|
||||
{{< /callout >}}
|
||||
|
||||
默认配置中，GitHub Actions 工作流 `.github/workflows/pages.yaml` 假设站点部署在 `https://<用户名>.github.io/<仓库名>/`。
|
||||
|
||||
若需部署到 `https://<用户名>.github.io/`，请修改 `--baseURL`：
|
||||
|
||||
```yaml {filename=".github/workflows/pages.yaml",linenos=table,linenostart=54,hl_lines=[4]}
|
||||
run: |
|
||||
hugo \
|
||||
--gc --minify \
|
||||
--baseURL "https://${{ github.repository_owner }}.github.io/"
|
||||
```
|
||||
|
||||
若使用自定义域名，请相应调整 `--baseURL` 值。
|
||||
|
||||
|
||||
## Cloudflare Pages
|
||||
|
||||
1. 将站点源码存入 Git 仓库（如 GitHub）
|
||||
2. 登录 [Cloudflare 控制台](https://dash.cloudflare.com/) 并选择账户
|
||||
3. 在账户首页选择 **Workers & Pages** > **创建应用** > **Pages** > **连接 Git**
|
||||
4. 选择仓库后，在 **设置构建与部署** 部分填写：
|
||||
|
||||
| 配置项 | 值 |
|
||||
| ---------------- | -------------------- |
|
||||
| 生产分支 | `main` |
|
||||
| 构建命令 | `hugo --gc --minify` |
|
||||
| 构建输出目录 | `public` |
|
||||
|
||||
更多细节请参阅：
|
||||
- [部署 Hugo 站点](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/#deploy-with-cloudflare-pages)
|
||||
- [语言支持与工具](https://developers.cloudflare.com/pages/platform/language-support-and-tools/)
|
||||
|
||||
|
||||
## Netlify
|
||||
|
||||
1. 将代码推送到 Git 仓库（GitHub/GitLab 等）
|
||||
2. 在 Netlify 中[导入项目](https://app.netlify.com/start)
|
||||
3. 若未使用 [hextra-starter-template][hextra-starter-template]，需手动配置：
|
||||
- 构建命令设为 `hugo --gc --minify`
|
||||
- 发布目录设为 `public`
|
||||
- 添加环境变量 `HUGO_VERSION` 并设为 `0.147.7`，或在 `netlify.toml` 中配置
|
||||
4. 开始部署！
|
||||
|
||||
详见 [Netlify 上的 Hugo](https://docs.netlify.com/integrations/frameworks/hugo/)
|
||||
|
||||
|
||||
## Vercel
|
||||
|
||||
1. 将代码推送到 Git 仓库（GitHub/GitLab 等）
|
||||
2. 进入 [Vercel 控制台](https://vercel.com/dashboard) 导入 Hugo 项目
|
||||
3. 配置项目时选择 Hugo 作为框架预设
|
||||
4. 覆盖构建命令与安装命令：
|
||||
1. 构建命令设为 `hugo --gc --minify`
|
||||
2. 安装命令设为 `yum install golang`
|
||||
|
||||
|
||||
@@ -0,0 +1,53 @@
|
||||
---
|
||||
title: نمودارها
|
||||
weight: 6
|
||||
next: /docs/guide/shortcodes
|
||||
---
|
||||
|
||||
در حال حاضر، Hextra از [Mermaid](#mermaid) برای نمودارها پشتیبانی می‌کند.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Mermaid
|
||||
|
||||
[Mermaid](https://github.com/mermaid-js/mermaid#readme) یک ابزار نمودار و چارت مبتنی بر جاوااسکریپت است که تعاریف متنی الهام‌گرفته از Markdown را گرفته و به صورت پویا در مرورگر نمودارها را ایجاد می‌کند. به عنوان مثال، Mermaid می‌تواند فلوچارت‌ها، نمودارهای توالی، نمودارهای دایره‌ای و موارد دیگر را رندر کند.
|
||||
|
||||
استفاده از Mermaid در Hextra به سادگی نوشتن یک بلوک کد با زبان تنظیم شده `mermaid` است:
|
||||
|
||||
````markdown
|
||||
```mermaid
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```
|
||||
````
|
||||
|
||||
به صورت زیر رندر می‌شود:
|
||||
|
||||
```mermaid
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```
|
||||
|
||||
نمودار توالی:
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts <br/>prevail!
|
||||
John-->>Alice: Great!
|
||||
John->>Bob: How about you?
|
||||
Bob-->>John: Jolly good!
|
||||
```
|
||||
|
||||
برای اطلاعات بیشتر، لطفاً به [مستندات Mermaid](https://mermaid-js.github.io/mermaid/#/) مراجعه کنید.
|
||||
@@ -0,0 +1,53 @@
|
||||
---
|
||||
title: ダイアグラム
|
||||
weight: 6
|
||||
next: /docs/guide/shortcodes
|
||||
---
|
||||
|
||||
現在、Hextra は [Mermaid](#mermaid) によるダイアグラム作成をサポートしています。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Mermaid
|
||||
|
||||
[Mermaid](https://github.com/mermaid-js/mermaid#readme) は、JavaScript ベースのダイアグラムおよびチャート作成ツールで、Markdown 風のテキスト定義をブラウザ上で動的にダイアグラムに変換します。例えば、Mermaid はフローチャート、シーケンス図、円グラフなどをレンダリングできます。
|
||||
|
||||
Hextra で Mermaid を使用するには、言語を `mermaid` に設定したコードブロックを記述するだけです:
|
||||
|
||||
````markdown
|
||||
```mermaid
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```
|
||||
````
|
||||
|
||||
これは以下のようにレンダリングされます:
|
||||
|
||||
```mermaid
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```
|
||||
|
||||
シーケンス図の例:
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts <br/>prevail!
|
||||
John-->>Alice: Great!
|
||||
John->>Bob: How about you?
|
||||
Bob-->>John: Jolly good!
|
||||
```
|
||||
|
||||
詳細については、[Mermaid ドキュメント](https://mermaid-js.github.io/mermaid/#/)を参照してください。
|
||||
@@ -0,0 +1,53 @@
|
||||
---
|
||||
title: Diagrams
|
||||
weight: 6
|
||||
next: /docs/guide/shortcodes
|
||||
---
|
||||
|
||||
Currently, Hextra supports [Mermaid](#mermaid) for diagrams.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Mermaid
|
||||
|
||||
[Mermaid](https://github.com/mermaid-js/mermaid#readme) is a JavaScript based diagramming and charting tool that takes Markdown-inspired text definitions and creates diagrams dynamically in the browser. For example, Mermaid can render flow charts, sequence diagrams, pie charts and more.
|
||||
|
||||
Using Mermaid in Hextra is as simple as writing a code block with language set `mermaid`:
|
||||
|
||||
````markdown
|
||||
```mermaid
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```
|
||||
````
|
||||
|
||||
will be rendered as:
|
||||
|
||||
```mermaid
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```
|
||||
|
||||
Sequence diagram:
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: Rational thoughts <br/>prevail!
|
||||
John-->>Alice: Great!
|
||||
John->>Bob: How about you?
|
||||
Bob-->>John: Jolly good!
|
||||
```
|
||||
|
||||
For more information, please refer to [Mermaid Documentation](https://mermaid-js.github.io/mermaid/#/).
|
||||
@@ -0,0 +1,53 @@
|
||||
---
|
||||
title: 图表
|
||||
weight: 6
|
||||
next: /docs/guide/shortcodes
|
||||
---
|
||||
|
||||
目前，Hextra 支持通过 [Mermaid](#mermaid) 绘制图表。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Mermaid
|
||||
|
||||
[Mermaid](https://github.com/mermaid-js/mermaid#readme) 是一个基于 JavaScript 的图表绘制工具，它能将类 Markdown 的文本定义动态转换为浏览器中渲染的图表。例如，Mermaid 可以绘制流程图、时序图、饼图等多种图表。
|
||||
|
||||
在 Hextra 中使用 Mermaid 非常简单，只需编写一个语言设置为 `mermaid` 的代码块：
|
||||
|
||||
````markdown
|
||||
```mermaid
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```
|
||||
````
|
||||
|
||||
上述代码将渲染为：
|
||||
|
||||
```mermaid
|
||||
graph TD;
|
||||
A-->B;
|
||||
A-->C;
|
||||
B-->D;
|
||||
C-->D;
|
||||
```
|
||||
|
||||
时序图示例：
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: 你好 John，最近怎么样？
|
||||
loop 健康检查
|
||||
John->>John: 与疑病症斗争
|
||||
end
|
||||
Note right of John: 理性思考 <br/>占据上风！
|
||||
John-->>Alice: 好极了！
|
||||
John->>Bob: 你怎么样？
|
||||
Bob-->>John: 非常好！
|
||||
```
|
||||
|
||||
更多信息请参阅 [Mermaid 官方文档](https://mermaid-js.github.io/mermaid/#/)。
|
||||
@@ -0,0 +1,146 @@
|
||||
---
|
||||
title: "LaTeX"
|
||||
weight: 4
|
||||
---
|
||||
|
||||
عبارات ریاضی LaTeX به طور پیش‌فرض با استفاده از \(\KaTeX\) ([katex.org](https://katex.org/)) نمایش داده می‌شوند. کافی است آنها را در محتوای Markdown خود قرار دهید بدون نیاز به هیچ پیکربندی دستی.
|
||||
|
||||
## نحوه استفاده
|
||||
|
||||
می‌توانید از LaTeX هم برای عبارات درون خطی و هم برای بلوک‌های بزرگتر متن استفاده کنید.
|
||||
|
||||
### ریاضی درون خطی
|
||||
|
||||
برای قرار دادن یک عبارت درون یک خط متن، آن را بین `\(` و `\)` قرار دهید.
|
||||
|
||||
```markdown {filename="page.md"}
|
||||
این \(\sigma(z) = \frac{1}{1 + e^{-z}}\) یک عبارت درون خطی است.
|
||||
```
|
||||
|
||||
این \( \sigma(z) = \frac{1}{1 + e^{-z}} \) یک عبارت درون خطی است.
|
||||
|
||||
### ریاضی نمایشی
|
||||
|
||||
برای عباراتی که می‌خواهید به صورت مستقل در یک پاراگراف جداگانه نمایش داده شوند، از `$$` استفاده کنید.
|
||||
|
||||
```markdown {filename="page.md"}
|
||||
$$F(\omega) = \int_{-\infty}^{\infty} f(t)\, e^{-j \omega t} \, dt$$
|
||||
```
|
||||
|
||||
به این صورت نمایش داده می‌شود:
|
||||
|
||||
$$F(\omega) = \int_{-\infty}^{\infty} f(t)\, e^{-j \omega t} \, dt$$
|
||||
|
||||
همچنین می‌توانید از محیط‌های LaTeX مانند `aligned` برای عبارات چندخطی استفاده کنید.
|
||||
|
||||
```latex {filename="page.md"}
|
||||
$$
|
||||
\begin{aligned}
|
||||
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
|
||||
\nabla \cdot \mathbf{B} &= 0 \\
|
||||
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
|
||||
\nabla \times \mathbf{B} &= \mu_0 \left( \mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \right)
|
||||
\end{aligned}
|
||||
$$
|
||||
```
|
||||
|
||||
به این صورت نمایش داده می‌شود:
|
||||
|
||||
$$
|
||||
\begin{aligned}
|
||||
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
|
||||
\nabla \cdot \mathbf{B} &= 0 \\
|
||||
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
|
||||
\nabla \times \mathbf{B} &= \mu_0 \left( \mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \right)
|
||||
\end{aligned}
|
||||
$$
|
||||
|
||||
برای مشاهده لیست توابع پشتیبانی شده، به [توابع پشتیبانی شده توسط KaTeX](https://katex.org/docs/supported.html) مراجعه کنید.
|
||||
|
||||
### عبارات شیمیایی
|
||||
|
||||
افزونه [mhchem][mhchem] به طور پیش‌فرض فعال است و به شما امکان می‌دهد معادلات و فرمول‌های شیمیایی را به راحتی نمایش دهید.
|
||||
|
||||
درون خطی: \(\ce{H2O}\) آب است.
|
||||
|
||||
پاراگراف جداگانه:
|
||||
|
||||
```markdown {filename="page.md"}
|
||||
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
|
||||
```
|
||||
|
||||
به این صورت نمایش داده می‌شود:
|
||||
|
||||
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
|
||||
|
||||
## پیکربندی
|
||||
|
||||
> [!IMPORTANT]
|
||||
> لطفاً افزونه [passthrough](https://gohugo.io/content-management/mathematics/) را در فایل پیکربندی Hugo فعال و پیکربندی کنید تا Hugo بتواند عبارات ریاضی LaTeX را در محتوای Markdown شما تشخیص دهد.
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
markup:
|
||||
goldmark:
|
||||
extensions:
|
||||
passthrough:
|
||||
delimiters:
|
||||
block: [['\[', '\]'], ["$$", "$$"]]
|
||||
inline: [['\(', '\)']]
|
||||
enable: true
|
||||
```
|
||||
|
||||
### موتور ریاضی
|
||||
|
||||
[KaTeX][katex] موتور پیش‌فرضی است که برای نمایش عبارات ریاضی LaTeX در فرآیند ساخت توسط [Hugo][hugo-transform-tomath] استفاده می‌شود.
|
||||
|
||||
پیش‌فرض KaTeX است، اما در صورت نیاز به ویژگی‌هایی که فقط در [MathJax][mathjax] موجود است، می‌توانید به MathJax سوئیچ کنید.
|
||||
|
||||
#### KaTeX
|
||||
|
||||
پیکربندی پیش‌فرض نیاز به هیچ تنظیمی ندارد. Hugo فایل CSS مربوط به KaTeX را از CDN دریافت می‌کند.
|
||||
اگر نیاز به استفاده از نسخه خاصی از KaTeX یا استفاده از فایل‌های محلی دارید، می‌توانید این کار را در فایل `hugo.yaml` انجام دهید.
|
||||
|
||||
##### تغییر آدرس پایه CDN
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
math:
|
||||
engine: katex
|
||||
katex:
|
||||
base: "https://cdn.jsdelivr.net/npm/katex@0.16.22/dist"
|
||||
```
|
||||
|
||||
##### استفاده از فایل‌های محلی
|
||||
|
||||
همچنین می‌توانید فایل css را در پوشه `assets` قرار دهید و فایل‌های فونت مورد نیاز KaTeX را منتشر کنید.
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
math:
|
||||
engine: katex
|
||||
katex:
|
||||
css: "css/katex.min.css"
|
||||
assets:
|
||||
- "fonts/KaTeX_Main-Regular.woff2"
|
||||
# سایر فایل‌های فونت را اینجا اضافه کنید
|
||||
```
|
||||
|
||||
این تنظیمات باعث می‌شود فایل CSS مربوط به KaTeX از `assets/css/katex.min.css` بارگیری شود به جای دانلود از CDN.
|
||||
|
||||
#### MathJax
|
||||
|
||||
به عنوان جایگزین، می‌توانید از [MathJax][mathjax] برای نمایش عبارات ریاضی استفاده کنید:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
math:
|
||||
engine: mathjax
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
> می‌توانید MathJax را بیشتر سفارشی کنید (مثلاً تنظیمات لودر را تغییر دهید یا CDN/منبع را عوض کنید) با بازنویسی قالب در `layouts/_partials/scripts/mathjax.html` در پروژه خود. Hugo به جای نسخه پیش‌فرض قالب، از نسخه شما استفاده خواهد کرد.
|
||||
|
||||
[katex]: https://katex.org/
|
||||
[mathjax]: https://www.mathjax.org/
|
||||
[mhchem]: https://mhchem.github.io/MathJax-mhchem/
|
||||
[hugo-transform-tomath]: https://gohugo.io/functions/transform/tomath/
|
||||
@@ -0,0 +1,146 @@
|
||||
---
|
||||
title: "LaTeX"
|
||||
weight: 4
|
||||
---
|
||||
|
||||
LaTeX の数式表現はデフォルトで \(\KaTeX\) ([katex.org](https://katex.org/)) を使用してレンダリングされます。特別な設定なしで、Markdown コンテンツ内に直接記述できます。
|
||||
|
||||
## 使用方法
|
||||
|
||||
LaTeX はインライン式とブロック式の両方で使用できます。
|
||||
|
||||
### インライン数式
|
||||
|
||||
文中に数式を含めるには、`\(` と `\)` で囲みます。
|
||||
|
||||
```markdown {filename="page.md"}
|
||||
この \(\sigma(z) = \frac{1}{1 + e^{-z}}\) はインライン式です。
|
||||
```
|
||||
|
||||
この \( \sigma(z) = \frac{1}{1 + e^{-z}} \) はインライン式です。
|
||||
|
||||
### ディスプレイ数式
|
||||
|
||||
独立した段落として表示する数式には、`$$` で囲みます。
|
||||
|
||||
```markdown {filename="page.md"}
|
||||
$$F(\omega) = \int_{-\infty}^{\infty} f(t)\, e^{-j \omega t} \, dt$$
|
||||
```
|
||||
|
||||
次のようにレンダリングされます:
|
||||
|
||||
$$F(\omega) = \int_{-\infty}^{\infty} f(t)\, e^{-j \omega t} \, dt$$
|
||||
|
||||
複数行の数式には `aligned` などの LaTeX 環境も使用できます。
|
||||
|
||||
```latex {filename="page.md"}
|
||||
$$
|
||||
\begin{aligned}
|
||||
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
|
||||
\nabla \cdot \mathbf{B} &= 0 \\
|
||||
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
|
||||
\nabla \times \mathbf{B} &= \mu_0 \left( \mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \right)
|
||||
\end{aligned}
|
||||
$$
|
||||
```
|
||||
|
||||
次のようにレンダリングされます:
|
||||
|
||||
$$
|
||||
\begin{aligned}
|
||||
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
|
||||
\nabla \cdot \mathbf{B} &= 0 \\
|
||||
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
|
||||
\nabla \times \mathbf{B} &= \mu_0 \left( \mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \right)
|
||||
\end{aligned}
|
||||
$$
|
||||
|
||||
サポートされている関数の一覧は [KaTeX サポート関数](https://katex.org/docs/supported.html) を参照してください。
|
||||
|
||||
### 化学式
|
||||
|
||||
[mhchem][mhchem] 拡張がデフォルトで有効になっており、化学式を簡単に記述できます。
|
||||
|
||||
インライン: \(\ce{H2O}\) は水です。
|
||||
|
||||
独立段落:
|
||||
|
||||
```markdown {filename="page.md"}
|
||||
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
|
||||
```
|
||||
|
||||
次のようにレンダリングされます:
|
||||
|
||||
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
|
||||
|
||||
## 設定
|
||||
|
||||
> [!IMPORTANT]
|
||||
> Hugo が Markdown コンテンツ内の LaTeX 数式を認識できるよう、[パススルー拡張](https://gohugo.io/content-management/mathematics/) を Hugo 設定ファイルで有効にしてください。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
markup:
|
||||
goldmark:
|
||||
extensions:
|
||||
passthrough:
|
||||
delimiters:
|
||||
block: [['\[', '\]'], ["$$", "$$"]]
|
||||
inline: [['\(', '\)']]
|
||||
enable: true
|
||||
```
|
||||
|
||||
### 数式エンジン
|
||||
|
||||
[KaTeX][katex] はビルド時に LaTeX 数式をレンダリングするデフォルトエンジンで、[Hugo][hugo-transform-tomath] でサポートされています。
|
||||
|
||||
デフォルトは KaTeX ですが、MathJax のみの機能が必要な場合は [MathJax][mathjax] に切り替えられます。
|
||||
|
||||
#### KaTeX
|
||||
|
||||
デフォルト設定では追加の設定は不要です。Hugo は KaTeX の CSS を CDN から取得します。
|
||||
特定のバージョンを固定したりローカルアセットを使用する場合は、`hugo.yaml` ファイルで設定できます。
|
||||
|
||||
##### CDN ベース URL の上書き
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
math:
|
||||
engine: katex
|
||||
katex:
|
||||
base: "https://cdn.jsdelivr.net/npm/katex@0.16.22/dist"
|
||||
```
|
||||
|
||||
##### ローカルアセットの使用
|
||||
|
||||
CSS ファイルを `assets` ディレクトリに配置し、KaTeX に必要なフォントファイルを追加できます。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
math:
|
||||
engine: katex
|
||||
katex:
|
||||
css: "css/katex.min.css"
|
||||
assets:
|
||||
- "fonts/KaTeX_Main-Regular.woff2"
|
||||
# 他のフォントファイルをここに追加
|
||||
```
|
||||
|
||||
これにより、CDN ではなく `assets/css/katex.min.css` から KaTeX CSS ファイルが読み込まれます。
|
||||
|
||||
#### MathJax
|
||||
|
||||
代わりに [MathJax][mathjax] を使用して数式をレンダリングすることもできます:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
math:
|
||||
engine: mathjax
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
> MathJax をさらにカスタマイズするには（ローダーオプションの調整や CDN/ソースの変更など）、プロジェクトの `layouts/_partials/scripts/mathjax.html` でテンプレートを上書きしてください。Hugo はテーマのデフォルトではなく、あなたのバージョンを使用します。
|
||||
|
||||
[katex]: https://katex.org/
|
||||
[mathjax]: https://www.mathjax.org/
|
||||
[mhchem]: https://mhchem.github.io/MathJax-mhchem/
|
||||
[hugo-transform-tomath]: https://gohugo.io/functions/transform/tomath/
|
||||
@@ -0,0 +1,146 @@
|
||||
---
|
||||
title: "LaTeX"
|
||||
weight: 4
|
||||
---
|
||||
|
||||
LaTeX math expressions are rendered using \(\KaTeX\) ([katex.org](https://katex.org/)) by default. Simply start including them in your Markdown content without any manual configurations.
|
||||
|
||||
## Usage
|
||||
|
||||
You can use LaTeX for both inline expressions and for larger blocks of text.
|
||||
|
||||
### Inline Math
|
||||
|
||||
To include an expression within a line of text, wrap it in `\(` and `\)` delimiters.
|
||||
|
||||
```markdown {filename="page.md"}
|
||||
This \(\sigma(z) = \frac{1}{1 + e^{-z}}\) is an inline expression.
|
||||
```
|
||||
|
||||
This \( \sigma(z) = \frac{1}{1 + e^{-z}} \) is an inline expression.
|
||||
|
||||
### Display Math
|
||||
|
||||
For expressions that you want to stand on their own in a separate paragraph, use `$$` delimiters.
|
||||
|
||||
```markdown {filename="page.md"}
|
||||
$$F(\omega) = \int_{-\infty}^{\infty} f(t)\, e^{-j \omega t} \, dt$$
|
||||
```
|
||||
|
||||
will be rendered as:
|
||||
|
||||
$$F(\omega) = \int_{-\infty}^{\infty} f(t)\, e^{-j \omega t} \, dt$$
|
||||
|
||||
You can also use LaTeX environments like `aligned` for multi-line expressions.
|
||||
|
||||
```latex {filename="page.md"}
|
||||
$$
|
||||
\begin{aligned}
|
||||
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
|
||||
\nabla \cdot \mathbf{B} &= 0 \\
|
||||
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
|
||||
\nabla \times \mathbf{B} &= \mu_0 \left( \mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \right)
|
||||
\end{aligned}
|
||||
$$
|
||||
```
|
||||
|
||||
will be rendered as:
|
||||
|
||||
$$
|
||||
\begin{aligned}
|
||||
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
|
||||
\nabla \cdot \mathbf{B} &= 0 \\
|
||||
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
|
||||
\nabla \times \mathbf{B} &= \mu_0 \left( \mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \right)
|
||||
\end{aligned}
|
||||
$$
|
||||
|
||||
For a list of supported functions, see [KaTeX supported functions](https://katex.org/docs/supported.html).
|
||||
|
||||
### Chemistry Expressions
|
||||
|
||||
The [mhchem][mhchem] extension is enabled by default, allowing you to easily render chemistry equations and formulas.
|
||||
|
||||
Inline: \(\ce{H2O}\) is water.
|
||||
|
||||
Separate paragraph:
|
||||
|
||||
```markdown {filename="page.md"}
|
||||
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
|
||||
```
|
||||
|
||||
will be rendered as:
|
||||
|
||||
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
|
||||
|
||||
## Configuration
|
||||
|
||||
> [!IMPORTANT]
|
||||
> Please enable and configure the [passthrough extension](https://gohugo.io/content-management/mathematics/) in the Hugo configuration file, so that Hugo can detect LaTeX math expressions in your Markdown content.
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
markup:
|
||||
goldmark:
|
||||
extensions:
|
||||
passthrough:
|
||||
delimiters:
|
||||
block: [['\[', '\]'], ["$$", "$$"]]
|
||||
inline: [['\(', '\)']]
|
||||
enable: true
|
||||
```
|
||||
|
||||
### Math Engine
|
||||
|
||||
[KaTeX][katex] is the default engine used to render LaTeX math expressions during the build process supported by [Hugo][hugo-transform-tomath].
|
||||
|
||||
The default is KaTeX, but you can also switch to [MathJax][mathjax] if you need features only available in MathJax.
|
||||
|
||||
#### KaTeX
|
||||
|
||||
The default setup requires no configuration. Hugo fetches the KaTeX CSS from the CDN.
|
||||
If you need to pin a specific version of KaTeX or use local assets, you can do so in your `hugo.yaml` file.
|
||||
|
||||
##### Override CDN base URL
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
math:
|
||||
engine: katex
|
||||
katex:
|
||||
base: "https://cdn.jsdelivr.net/npm/katex@0.16.22/dist"
|
||||
```
|
||||
|
||||
##### Use local assets
|
||||
|
||||
You can also place the css file under `assets` and publish additional font files required by KaTeX.
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
math:
|
||||
engine: katex
|
||||
katex:
|
||||
css: "css/katex.min.css"
|
||||
assets:
|
||||
- "fonts/KaTeX_Main-Regular.woff2"
|
||||
# Add other font files here
|
||||
```
|
||||
|
||||
It will load the KaTeX CSS file from `assets/css/katex.min.css` instead of downloading from CDN.
|
||||
|
||||
#### MathJax
|
||||
|
||||
Alternatively, you can use [MathJax][mathjax] to render math expressions:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
math:
|
||||
engine: mathjax
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
> You can further customize MathJax (for example, adjust loader options, or change the CDN/source) by overriding the template at `layouts/_partials/scripts/mathjax.html` in your project. Hugo will use your version instead of the theme's default.
|
||||
|
||||
[katex]: https://katex.org/
|
||||
[mathjax]: https://www.mathjax.org/
|
||||
[mhchem]: https://mhchem.github.io/MathJax-mhchem/
|
||||
[hugo-transform-tomath]: https://gohugo.io/functions/transform/tomath/
|
||||
@@ -0,0 +1,145 @@
|
||||
---
|
||||
title: "数学公式"
|
||||
weight: 4
|
||||
---
|
||||
|
||||
LaTeX 数学表达式默认使用 \(\KaTeX\) 渲染。直接在 Markdown 内容中使用即可，无需手动配置。
|
||||
|
||||
## 使用方法
|
||||
|
||||
LaTeX 既可用于行内表达式，也可用于大段文本。
|
||||
|
||||
### 行内公式
|
||||
|
||||
要在文本行内插入表达式，用 `\(` 和 `\)` 包裹。
|
||||
|
||||
```markdown {filename="page.md"}
|
||||
这个 \(\sigma(z) = \frac{1}{1 + e^{-z}}\) 是行内表达式。
|
||||
```
|
||||
|
||||
这个 \( \sigma(z) = \frac{1}{1 + e^{-z}} \) 是行内表达式。
|
||||
|
||||
### 独立公式
|
||||
|
||||
对于需要单独成段的表达式，使用 `$$` 包裹。
|
||||
|
||||
```markdown {filename="page.md"}
|
||||
$$F(\omega) = \int_{-\infty}^{\infty} f(t)\, e^{-j \omega t} \, dt$$
|
||||
```
|
||||
|
||||
将渲染为：
|
||||
|
||||
$$F(\omega) = \int_{-\infty}^{\infty} f(t)\, e^{-j \omega t} \, dt$$
|
||||
|
||||
还可以使用 LaTeX 环境如 `aligned` 处理多行公式。
|
||||
|
||||
```latex {filename="page.md"}
|
||||
$$
|
||||
\begin{aligned}
|
||||
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
|
||||
\nabla \cdot \mathbf{B} &= 0 \\
|
||||
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
|
||||
\nabla \times \mathbf{B} &= \mu_0 \left( \mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \right)
|
||||
\end{aligned}
|
||||
$$
|
||||
```
|
||||
|
||||
将渲染为：
|
||||
|
||||
$$
|
||||
\begin{aligned}
|
||||
\nabla \cdot \mathbf{E} &= \frac{\rho}{\varepsilon_0} \\
|
||||
\nabla \cdot \mathbf{B} &= 0 \\
|
||||
\nabla \times \mathbf{E} &= -\frac{\partial \mathbf{B}}{\partial t} \\
|
||||
\nabla \times \mathbf{B} &= \mu_0 \left( \mathbf{J} + \varepsilon_0 \frac{\partial \mathbf{E}}{\partial t} \right)
|
||||
\end{aligned}
|
||||
$$
|
||||
|
||||
支持的函数列表见 [KaTeX 支持函数](https://katex.org/docs/supported.html)。
|
||||
|
||||
### 化学表达式
|
||||
|
||||
默认启用了 [mhchem][mhchem] 扩展，可轻松渲染化学方程式和分子式。
|
||||
|
||||
行内示例：\(\ce{H2O}\) 是水。
|
||||
|
||||
独立段落：
|
||||
|
||||
```markdown {filename="page.md"}
|
||||
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
|
||||
```
|
||||
|
||||
将渲染为：
|
||||
|
||||
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
|
||||
|
||||
## 配置
|
||||
|
||||
> [!IMPORTANT]
|
||||
> 请在 Hugo 配置文件中启用并配置 [passthrough 扩展](https://gohugo.io/content-management/mathematics/)，以便 Hugo 能识别 Markdown 中的 LaTeX 数学表达式。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
markup:
|
||||
goldmark:
|
||||
extensions:
|
||||
passthrough:
|
||||
delimiters:
|
||||
block: [['\[', '\]'], ["$$", "$$"]]
|
||||
inline: [['\(', '\)']]
|
||||
enable: true
|
||||
```
|
||||
|
||||
### 数学引擎
|
||||
|
||||
构建过程中默认使用 [KaTeX][katex] 渲染 LaTeX 数学表达式，由 [Hugo][hugo-transform-tomath] 支持。
|
||||
|
||||
默认引擎是 KaTeX，但也可切换至 [MathJax][mathjax] 以使用其特有功能。
|
||||
|
||||
#### KaTeX
|
||||
|
||||
默认设置无需配置。Hugo 会从 CDN 获取 KaTeX CSS。如需指定 KaTeX 版本或使用本地资源，可在 `hugo.yaml` 中配置。
|
||||
|
||||
##### 覆盖 CDN 基础 URL
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
math:
|
||||
engine: katex
|
||||
katex:
|
||||
base: "https://cdn.jsdelivr.net/npm/katex@0.16.22/dist"
|
||||
```
|
||||
|
||||
##### 使用本地资源
|
||||
|
||||
可将 CSS 文件置于 `assets` 目录，并发布 KaTeX 所需的字体文件。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
math:
|
||||
engine: katex
|
||||
katex:
|
||||
css: "css/katex.min.css"
|
||||
assets:
|
||||
- "fonts/KaTeX_Main-Regular.woff2"
|
||||
# 在此添加其他字体文件
|
||||
```
|
||||
|
||||
此时将从 `assets/css/katex.min.css` 加载 KaTeX CSS 文件，而非从 CDN 下载。
|
||||
|
||||
#### MathJax
|
||||
|
||||
也可使用 [MathJax][mathjax] 渲染数学表达式：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
math:
|
||||
engine: mathjax
|
||||
```
|
||||
|
||||
> [!NOTE]
|
||||
> 可通过在项目中覆盖 `layouts/_partials/scripts/mathjax.html` 模板进一步定制 MathJax（如调整加载器选项或更改 CDN/源）。Hugo 将优先使用你的版本而非主题默认配置。
|
||||
|
||||
[katex]: https://katex.org/
|
||||
[mathjax]: https://www.mathjax.org/
|
||||
[mhchem]: https://mhchem.github.io/MathJax-mhchem/
|
||||
[hugo-transform-tomath]: https://gohugo.io/functions/transform/tomath/
|
||||
@@ -0,0 +1,210 @@
|
||||
---
|
||||
title: Markdown
|
||||
weight: 2
|
||||
---
|
||||
|
||||
Hugo از [Markdown](https://en.wikipedia.org/wiki/Markdown) برای قالب‌بندی متن، ایجاد لیست‌ها و موارد دیگر پشتیبانی می‌کند. این صفحه برخی از رایج‌ترین نمونه‌های نحوه استفاده از Markdown را به شما نشان می‌دهد.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## نمونه‌های Markdown
|
||||
|
||||
### استایل‌دهی متن
|
||||
|
||||
| استایل | نحو | مثال | خروجی |
|
||||
| :------------ | :----------------------- | :-------------------------------------- | :------------------------------------ |
|
||||
| پررنگ | `**متن پررنگ**` | `**متن پررنگ**` | **متن پررنگ** |
|
||||
| مورب | `*متن مورب*` | `*متن مورب*` | _متن مورب_ |
|
||||
| خط‌خورده | `~~متن خط‌خورده~~` | `~~متن خط‌خورده~~` | ~~متن خط‌خورده~~ |
|
||||
| زیرنویس | `<sub></sub>` | `این یک <sub>زیرنویس</sub> است` | این یک <sub>زیرنویس</sub> است |
|
||||
| بالانویس | `<sup></sup>` | `این یک <sup>بالانویس</sup> است` | این یک <sup>بالانویس</sup> است |
|
||||
|
||||
### نقل‌قول‌ها
|
||||
|
||||
نقل‌قول با ذکر منبع
|
||||
|
||||
> با اشتراک‌گذاری حافظه ارتباط برقرار نکنید، بلکه با ارتباط، حافظه را اشتراک بگذارید.<br>
|
||||
> — <cite>Rob Pike[^1]</cite>
|
||||
|
||||
[^1]: این نقل‌قول از [سخنرانی](https://www.youtube.com/watch?v=PAAkCSZUG1c) Rob Pike در Gopherfest در ۱۸ نوامبر ۲۰۱۵ گرفته شده است.
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
> با اشتراک‌گذاری حافظه ارتباط برقرار نکنید، بلکه با ارتباط، حافظه را اشتراک بگذارید.<br>
|
||||
> — <cite>Rob Pike[^1]</cite>
|
||||
|
||||
[^1]: این نقل‌قول از [سخنرانی](https://www.youtube.com/watch?v=PAAkCSZUG1c) Rob Pike در Gopherfest در ۱۸ نوامبر ۲۰۱۵ گرفته شده است.
|
||||
```
|
||||
|
||||
### هشدارها
|
||||
|
||||
{{< new-feature version="v0.9.0" >}}
|
||||
|
||||
هشدارها یک افزونه Markdown بر اساس نحو نقل‌قول هستند که می‌توانید برای تأکید بر اطلاعات مهم از آنها استفاده کنید.
|
||||
[هشدارهای به سبک GitHub](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts) پشتیبانی می‌شوند.
|
||||
لطفاً مطمئن شوید که از آخرین نسخه Hextra و [Hugo v0.146.0](https://github.com/gohugoio/hugo/releases/tag/v0.146.0) یا بالاتر استفاده می‌کنید.
|
||||
|
||||
> [!NOTE]
|
||||
> اطلاعات مفیدی که کاربران باید بدانند، حتی هنگام مرور سریع محتوا.
|
||||
|
||||
> [!TIP]
|
||||
> توصیه‌های مفید برای انجام بهتر یا آسان‌تر کارها.
|
||||
|
||||
> [!IMPORTANT]
|
||||
> اطلاعات کلیدی که کاربران برای رسیدن به هدف خود نیاز دارند.
|
||||
|
||||
> [!WARNING]
|
||||
> اطلاعات فوری که نیاز به توجه فوری کاربر دارد تا از مشکلات جلوگیری شود.
|
||||
|
||||
> [!CAUTION]
|
||||
> هشدار درباره خطرات یا نتایج منفی برخی اقدامات.
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
> [!NOTE]
|
||||
> اطلاعات مفیدی که کاربران باید بدانند، حتی هنگام مرور سریع محتوا.
|
||||
|
||||
> [!TIP]
|
||||
> توصیه‌های مفید برای انجام بهتر یا آسان‌تر کارها.
|
||||
|
||||
> [!IMPORTANT]
|
||||
> اطلاعات کلیدی که کاربران برای رسیدن به هدف خود نیاز دارند.
|
||||
|
||||
> [!WARNING]
|
||||
> اطلاعات فوری که نیاز به توجه فوری کاربر دارد تا از مشکلات جلوگیری شود.
|
||||
|
||||
> [!CAUTION]
|
||||
> هشدار درباره خطرات یا نتایج منفی برخی اقدامات.
|
||||
```
|
||||
|
||||
### جداول
|
||||
|
||||
جداول بخشی از مشخصه اصلی Markdown نیستند، اما Hugo به صورت پیش‌فرض از آنها پشتیبانی می‌کند.
|
||||
|
||||
| نام | سن |
|
||||
| :---- | :-- |
|
||||
| باب | ۲۷ |
|
||||
| آلیس | ۲۳ |
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
| نام | سن |
|
||||
| :---- | :-- |
|
||||
| باب | ۲۷ |
|
||||
| آلیس | ۲۳ |
|
||||
```
|
||||
|
||||
#### Markdown درون‌خطی در جداول
|
||||
|
||||
| مورب | پررنگ | کد |
|
||||
| :-------- | :------- | :----- |
|
||||
| _مورب_ | **پررنگ** | `کد` |
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
| مورب | پررنگ | کد |
|
||||
| :-------- | :------- | :----- |
|
||||
| _مورب_ | **پررنگ** | `کد` |
|
||||
```
|
||||
|
||||
### بلوک‌های کد
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="../../guide/syntax-highlighting" title="رنگ‌آمیزی نحوی" icon="sparkles" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
### لیست‌ها
|
||||
|
||||
#### لیست مرتب
|
||||
|
||||
۱. مورد اول
|
||||
۲. مورد دوم
|
||||
۳. مورد سوم
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
۱. مورد اول
|
||||
۲. مورد دوم
|
||||
۳. مورد سوم
|
||||
```
|
||||
|
||||
#### لیست نامرتب
|
||||
|
||||
* مورد لیست
|
||||
* مورد دیگر
|
||||
* و یک مورد دیگر
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
* مورد لیست
|
||||
* مورد دیگر
|
||||
* و یک مورد دیگر
|
||||
```
|
||||
|
||||
#### لیست تو در تو
|
||||
|
||||
- میوه
|
||||
- سیب
|
||||
- پرتقال
|
||||
- موز
|
||||
- لبنیات
|
||||
- شیر
|
||||
- پنیر
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
- میوه
|
||||
- سیب
|
||||
- پرتقال
|
||||
- موز
|
||||
- لبنیات
|
||||
- شیر
|
||||
- پنیر
|
||||
```
|
||||
|
||||
#### لیست وظایف
|
||||
|
||||
- [x] نوشتن مستندات
|
||||
- [ ] بازبینی کد
|
||||
- [ ] استقرار تغییرات
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
- [x] نوشتن مستندات
|
||||
- [ ] بازبینی کد
|
||||
- [ ] استقرار تغییرات
|
||||
```
|
||||
|
||||
### تصاویر
|
||||
|
||||
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
|
||||
```
|
||||
|
||||
با عنوان:
|
||||
|
||||
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
|
||||
```
|
||||
|
||||
برای عملکرد پیشرفته‌تر، از [shortcode Figure](https://gohugo.io/shortcodes/figure/) داخلی Hugo استفاده کنید.
|
||||
|
||||
## پیکربندی
|
||||
|
||||
Hugo از [Goldmark](https://github.com/yuin/goldmark) برای تجزیه Markdown استفاده می‌کند.
|
||||
رندر Markdown را می‌توان در `hugo.yaml` تحت `markup.goldmark` پیکربندی کرد.
|
||||
در زیر پیکربندی پیش‌فرض Hextra آمده است:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
markup:
|
||||
goldmark:
|
||||
renderer:
|
||||
unsafe: true
|
||||
highlight:
|
||||
noClasses: false
|
||||
```
|
||||
|
||||
برای گزینه‌های پیکربندی بیشتر، مستندات Hugo در مورد [پیکربندی Markup](https://gohugo.io/getting-started/configuration-markup/) را ببینید.
|
||||
|
||||
## منابع یادگیری
|
||||
|
||||
- [راهنمای Markdown](https://www.markdownguide.org/)
|
||||
- [راهنمای سریع Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
|
||||
- [آموزش Markdown](https://www.markdowntutorial.com/)
|
||||
- [مرجع Markdown](https://commonmark.org/help/)
|
||||
@@ -0,0 +1,210 @@
|
||||
---
|
||||
title: Markdown
|
||||
weight: 2
|
||||
---
|
||||
|
||||
Hugo はテキストの書式設定やリスト作成などに [Markdown](https://en.wikipedia.org/wiki/Markdown) 構文をサポートしています。このページでは、最も一般的な Markdown 構文の例を紹介します。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Markdown の例
|
||||
|
||||
### テキストのスタイリング
|
||||
|
||||
| スタイル | 構文 | 例 | 出力 |
|
||||
| :------------ | :----------------------- | :------------------------------------ | :------------------------------------ |
|
||||
| 太字 | `**太字テキスト**` | `**太字テキスト**` | **太字テキスト** |
|
||||
| 斜体 | `*斜体テキスト*` | `*斜体テキスト*` | _斜体テキスト_ |
|
||||
| 打ち消し線 | `~~打ち消し線テキスト~~` | `~~打ち消し線テキスト~~` | ~~打ち消し線テキスト~~ |
|
||||
| 下付き文字 | `<sub></sub>` | `これは<sub>下付き文字</sub>です` | これは<sub>下付き文字</sub>です |
|
||||
| 上付き文字 | `<sup></sup>` | `これは<sup>上付き文字</sup>です` | これは<sup>上付き文字</sup>です |
|
||||
|
||||
### ブロッククォート
|
||||
|
||||
引用元付きのブロッククォート
|
||||
|
||||
> メモリを共有することで通信するのではなく、通信することでメモリを共有しなさい。<br>
|
||||
> — <cite>Rob Pike[^1]</cite>
|
||||
|
||||
[^1]: 上記の引用は、2015年11月18日のGopherfestでのRob Pikeの[講演](https://www.youtube.com/watch?v=PAAkCSZUG1c)から抜粋したものです。
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
> メモリを共有することで通信するのではなく、通信することでメモリを共有しなさい。<br>
|
||||
> — <cite>Rob Pike[^1]</cite>
|
||||
|
||||
[^1]: 上記の引用は、2015年11月18日のGopherfestでのRob Pikeの[講演](https://www.youtube.com/watch?v=PAAkCSZUG1c)から抜粋したものです。
|
||||
```
|
||||
|
||||
### アラート
|
||||
|
||||
{{< new-feature version="v0.9.0" >}}
|
||||
|
||||
アラートは、重要な情報を強調するために使用できるブロッククォート構文を基にしたMarkdown拡張機能です。
|
||||
[GitHubスタイルのアラート](https://docs.github.com/ja/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts)がサポートされています。
|
||||
最新バージョンのHextraと[Hugo v0.146.0](https://github.com/gohugoio/hugo/releases/tag/v0.146.0)以降を使用していることを確認してください。
|
||||
|
||||
> [!NOTE]
|
||||
> コンテンツをざっと見る際にもユーザーが知っておくべき有用な情報。
|
||||
|
||||
> [!TIP]
|
||||
> 物事をより良く、または簡単に行うための役立つアドバイス。
|
||||
|
||||
> [!IMPORTANT]
|
||||
> ユーザーが目標を達成するために知っておく必要がある重要な情報。
|
||||
|
||||
> [!WARNING]
|
||||
> 問題を回避するためにユーザーがすぐに対処する必要がある緊急情報。
|
||||
|
||||
> [!CAUTION]
|
||||
> 特定のアクションによるリスクやネガティブな結果についての警告。
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
> [!NOTE]
|
||||
> コンテンツをざっと見る際にもユーザーが知っておくべき有用な情報。
|
||||
|
||||
> [!TIP]
|
||||
> 物事をより良く、または簡単に行うための役立つアドバイス。
|
||||
|
||||
> [!IMPORTANT]
|
||||
> ユーザーが目標を達成するために知っておく必要がある重要な情報。
|
||||
|
||||
> [!WARNING]
|
||||
> 問題を回避するためにユーザーがすぐに対処する必要がある緊急情報。
|
||||
|
||||
> [!CAUTION]
|
||||
> 特定のアクションによるリスクやネガティブな結果についての警告。
|
||||
```
|
||||
|
||||
### テーブル
|
||||
|
||||
テーブルはコアMarkdown仕様の一部ではありませんが、Hugoはデフォルトでサポートしています。
|
||||
|
||||
| 名前 | 年齢 |
|
||||
| :---- | :-- |
|
||||
| Bob | 27 |
|
||||
| Alice | 23 |
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
| 名前 | 年齢 |
|
||||
| :---- | :-- |
|
||||
| Bob | 27 |
|
||||
| Alice | 23 |
|
||||
```
|
||||
|
||||
#### テーブル内のインラインMarkdown
|
||||
|
||||
| 斜体 | 太字 | コード |
|
||||
| :-------- | :-------- | :-------- |
|
||||
| _斜体_ | **太字** | `コード` |
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
| 斜体 | 太字 | コード |
|
||||
| :-------- | :-------- | :-------- |
|
||||
| _斜体_ | **太字** | `コード` |
|
||||
```
|
||||
|
||||
### コードブロック
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="../../guide/syntax-highlighting" title="シンタックスハイライト" icon="sparkles" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
### リスト
|
||||
|
||||
#### 順序付きリスト
|
||||
|
||||
1. 最初の項目
|
||||
2. 2番目の項目
|
||||
3. 3番目の項目
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
1. 最初の項目
|
||||
2. 2番目の項目
|
||||
3. 3番目の項目
|
||||
```
|
||||
|
||||
#### 順序なしリスト
|
||||
|
||||
* リスト項目
|
||||
* 別の項目
|
||||
* さらに別の項目
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
* リスト項目
|
||||
* 別の項目
|
||||
* さらに別の項目
|
||||
```
|
||||
|
||||
#### ネストされたリスト
|
||||
|
||||
- 果物
|
||||
- りんご
|
||||
- オレンジ
|
||||
- バナナ
|
||||
- 乳製品
|
||||
- 牛乳
|
||||
- チーズ
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
- 果物
|
||||
- りんご
|
||||
- オレンジ
|
||||
- バナナ
|
||||
- 乳製品
|
||||
- 牛乳
|
||||
- チーズ
|
||||
```
|
||||
|
||||
#### タスクリスト
|
||||
|
||||
- [x] ドキュメント作成
|
||||
- [ ] コードレビュー
|
||||
- [ ] 変更のデプロイ
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
- [x] ドキュメント作成
|
||||
- [ ] コードレビュー
|
||||
- [ ] 変更のデプロイ
|
||||
```
|
||||
|
||||
### 画像
|
||||
|
||||
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
|
||||
```
|
||||
|
||||
キャプション付き:
|
||||
|
||||
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
|
||||
```
|
||||
|
||||
より高度な機能が必要な場合は、Hugoの組み込み[Figureショートコード](https://gohugo.io/shortcodes/figure/)を使用してください。
|
||||
|
||||
## 設定
|
||||
|
||||
HugoはMarkdown解析に[Goldmark](https://github.com/yuin/goldmark)を使用しています。
|
||||
Markdownのレンダリング設定は`hugo.yaml`の`markup.goldmark`で行えます。
|
||||
以下はHextraのデフォルト設定です:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
markup:
|
||||
goldmark:
|
||||
renderer:
|
||||
unsafe: true
|
||||
highlight:
|
||||
noClasses: false
|
||||
```
|
||||
|
||||
その他の設定オプションについては、Hugoドキュメントの[マークアップ設定](https://gohugo.io/getting-started/configuration-markup/)を参照してください。
|
||||
|
||||
## 学習リソース
|
||||
|
||||
- [Markdownガイド](https://www.markdownguide.org/)
|
||||
- [Markdownチートシート](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
|
||||
- [Markdownチュートリアル](https://www.markdowntutorial.com/)
|
||||
- [Markdownリファレンス](https://commonmark.org/help/)
|
||||
@@ -0,0 +1,210 @@
|
||||
---
|
||||
title: Markdown
|
||||
weight: 2
|
||||
---
|
||||
|
||||
Hugo supports [Markdown](https://en.wikipedia.org/wiki/Markdown) syntax for formatting text, creating lists, and more. This page will show you some of the most common Markdown syntax examples.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Markdown Examples
|
||||
|
||||
### Styling Text
|
||||
|
||||
| Style | Syntax | Example | Output |
|
||||
| :------------ | :----------------------- | :-------------------------------------- | :------------------------------------ |
|
||||
| Bold | `**bold text**` | `**bold text**` | **bold text** |
|
||||
| Italic | `*italicized text*` | `*italicized text*` | _italicized text_ |
|
||||
| Strikethrough | `~~strikethrough text~~` | `~~strikethrough text~~` | ~~strikethrough text~~ |
|
||||
| Subscript | `<sub></sub>` | `This is a <sub>subscript</sub> text` | This is a <sub>subscript</sub> text |
|
||||
| Superscript | `<sup></sup>` | `This is a <sup>superscript</sup> text` | This is a <sup>superscript</sup> text |
|
||||
|
||||
### Blockquotes
|
||||
|
||||
Blockquote with attribution
|
||||
|
||||
> Don't communicate by sharing memory, share memory by communicating.<br>
|
||||
> — <cite>Rob Pike[^1]</cite>
|
||||
|
||||
[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
> Don't communicate by sharing memory, share memory by communicating.<br>
|
||||
> — <cite>Rob Pike[^1]</cite>
|
||||
|
||||
[^1]: The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015.
|
||||
```
|
||||
|
||||
### Alerts
|
||||
|
||||
{{< new-feature version="v0.9.0" >}}
|
||||
|
||||
Alerts are a Markdown extension based on the blockquote syntax that you can use to emphasize critical information.
|
||||
[GitHub-style alerts](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts) are supported.
|
||||
Please make sure you are using the latest version of Hextra and [Hugo v0.146.0](https://github.com/gohugoio/hugo/releases/tag/v0.146.0) or later.
|
||||
|
||||
> [!NOTE]
|
||||
> Useful information that users should know, even when skimming content.
|
||||
|
||||
> [!TIP]
|
||||
> Helpful advice for doing things better or more easily.
|
||||
|
||||
> [!IMPORTANT]
|
||||
> Key information users need to know to achieve their goal.
|
||||
|
||||
> [!WARNING]
|
||||
> Urgent info that needs immediate user attention to avoid problems.
|
||||
|
||||
> [!CAUTION]
|
||||
> Advises about risks or negative outcomes of certain actions.
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
> [!NOTE]
|
||||
> Useful information that users should know, even when skimming content.
|
||||
|
||||
> [!TIP]
|
||||
> Helpful advice for doing things better or more easily.
|
||||
|
||||
> [!IMPORTANT]
|
||||
> Key information users need to know to achieve their goal.
|
||||
|
||||
> [!WARNING]
|
||||
> Urgent info that needs immediate user attention to avoid problems.
|
||||
|
||||
> [!CAUTION]
|
||||
> Advises about risks or negative outcomes of certain actions.
|
||||
```
|
||||
|
||||
### Tables
|
||||
|
||||
Tables aren't part of the core Markdown spec, but Hugo supports them out-of-the-box.
|
||||
|
||||
| Name | Age |
|
||||
| :---- | :-- |
|
||||
| Bob | 27 |
|
||||
| Alice | 23 |
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
| Name | Age |
|
||||
| :---- | :-- |
|
||||
| Bob | 27 |
|
||||
| Alice | 23 |
|
||||
```
|
||||
|
||||
#### Inline Markdown within tables
|
||||
|
||||
| Italics | Bold | Code |
|
||||
| :-------- | :------- | :----- |
|
||||
| _italics_ | **bold** | `code` |
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
| Italics | Bold | Code |
|
||||
| :-------- | :------- | :----- |
|
||||
| _italics_ | **bold** | `code` |
|
||||
```
|
||||
|
||||
### Code Blocks
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="../../guide/syntax-highlighting" title="Syntax Highlighting" icon="sparkles" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
### Lists
|
||||
|
||||
#### Ordered List
|
||||
|
||||
1. First item
|
||||
2. Second item
|
||||
3. Third item
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
1. First item
|
||||
2. Second item
|
||||
3. Third item
|
||||
```
|
||||
|
||||
#### Unordered List
|
||||
|
||||
* List item
|
||||
* Another item
|
||||
* And another item
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
* List item
|
||||
* Another item
|
||||
* And another item
|
||||
```
|
||||
|
||||
#### Nested list
|
||||
|
||||
- Fruit
|
||||
- Apple
|
||||
- Orange
|
||||
- Banana
|
||||
- Dairy
|
||||
- Milk
|
||||
- Cheese
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
- Fruit
|
||||
- Apple
|
||||
- Orange
|
||||
- Banana
|
||||
- Dairy
|
||||
- Milk
|
||||
- Cheese
|
||||
```
|
||||
|
||||
#### Task list
|
||||
|
||||
- [x] Write documentation
|
||||
- [ ] Review code
|
||||
- [ ] Deploy changes
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
- [x] Write documentation
|
||||
- [ ] Review code
|
||||
- [ ] Deploy changes
|
||||
```
|
||||
|
||||
### Images
|
||||
|
||||
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
|
||||
```
|
||||
|
||||
With caption:
|
||||
|
||||
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
|
||||
```
|
||||
|
||||
For more advanced functionality, use Hugo's built-in [Figure shortcode](https://gohugo.io/shortcodes/figure/).
|
||||
|
||||
## Configuration
|
||||
|
||||
Hugo uses [Goldmark](https://github.com/yuin/goldmark) for Markdown parsing.
|
||||
Markdown rendering can be configured in `hugo.yaml` under `markup.goldmark`.
|
||||
Below is the default configuration for Hextra:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
markup:
|
||||
goldmark:
|
||||
renderer:
|
||||
unsafe: true
|
||||
highlight:
|
||||
noClasses: false
|
||||
```
|
||||
|
||||
For more configuration options, see Hugo documentation on [Configure Markup](https://gohugo.io/getting-started/configuration-markup/).
|
||||
|
||||
## Learning Resources
|
||||
|
||||
- [Markdown Guide](https://www.markdownguide.org/)
|
||||
- [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
|
||||
- [Markdown Tutorial](https://www.markdowntutorial.com/)
|
||||
- [Markdown Reference](https://commonmark.org/help/)
|
||||
@@ -0,0 +1,210 @@
|
||||
---
|
||||
title: Markdown
|
||||
weight: 2
|
||||
---
|
||||
|
||||
Hugo 支持使用 [Markdown](https://en.wikipedia.org/wiki/Markdown) 语法来格式化文本、创建列表等。本页将展示一些最常用的 Markdown 语法示例。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Markdown 示例
|
||||
|
||||
### 文本样式
|
||||
|
||||
| 样式 | 语法 | 示例 | 输出 |
|
||||
| :----- | :--------------- | :------------------------ | :---------------------- |
|
||||
| 粗体 | `**粗体文本**` | `**粗体文本**` | **粗体文本** |
|
||||
| 斜体 | `*斜体文本*` | `*斜体文本*` | _斜体文本_ |
|
||||
| 删除线 | `~~删除线文本~~` | `~~删除线文本~~` | ~~删除线文本~~ |
|
||||
| 下标 | `<sub></sub>` | `这是<sub>下标</sub>文本` | 这是<sub>下标</sub>文本 |
|
||||
| 上标 | `<sup></sup>` | `这是<sup>上标</sup>文本` | 这是<sup>上标</sup>文本 |
|
||||
|
||||
### 引用块
|
||||
|
||||
带出处的引用
|
||||
|
||||
> 不要通过共享内存来通信，而要通过通信来共享内存。<br>
|
||||
> — <cite>Rob Pike[^1]</cite>
|
||||
|
||||
[^1]: 上述引用摘自 Rob Pike 在 2015 年 11 月 18 日 Gopherfest 上的[演讲](https://www.youtube.com/watch?v=PAAkCSZUG1c)。
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
> 不要通过共享内存来通信，而要通过通信来共享内存。<br>
|
||||
> — <cite>Rob Pike[^1]</cite>
|
||||
|
||||
[^1]: 上述引用摘自 Rob Pike 在 2015 年 11 月 18 日 Gopherfest 上的[演讲](https://www.youtube.com/watch?v=PAAkCSZUG1c)。
|
||||
```
|
||||
|
||||
### 提示框
|
||||
|
||||
{{< new-feature version="v0.9.0" >}}
|
||||
|
||||
提示框是基于引用块语法的 Markdown 扩展，可用于强调关键信息。
|
||||
支持 [GitHub 风格的提示框](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#alerts)。
|
||||
请确保您使用的是最新版本的 Hextra 和 [Hugo v0.146.0](https://github.com/gohugoio/hugo/releases/tag/v0.146.0) 或更高版本。
|
||||
|
||||
> [!NOTE]
|
||||
> 即使用户只是浏览内容，也应该知道的有用信息。
|
||||
|
||||
> [!TIP]
|
||||
> 帮助用户更高效或更轻松完成任务的建议。
|
||||
|
||||
> [!IMPORTANT]
|
||||
> 用户需要了解的关键信息，以实现他们的目标。
|
||||
|
||||
> [!WARNING]
|
||||
> 需要用户立即关注的紧急信息，以避免出现问题。
|
||||
|
||||
> [!CAUTION]
|
||||
> 关于某些操作可能带来风险或负面结果的警告。
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
> [!NOTE]
|
||||
> 即使用户只是浏览内容，也应该知道的有用信息。
|
||||
|
||||
> [!TIP]
|
||||
> 帮助用户更高效或更轻松完成任务的建议。
|
||||
|
||||
> [!IMPORTANT]
|
||||
> 用户需要了解的关键信息，以实现他们的目标。
|
||||
|
||||
> [!WARNING]
|
||||
> 需要用户立即关注的紧急信息，以避免出现问题。
|
||||
|
||||
> [!CAUTION]
|
||||
> 关于某些操作可能带来风险或负面结果的警告。
|
||||
```
|
||||
|
||||
### 表格
|
||||
|
||||
表格不是 Markdown 核心规范的一部分，但 Hugo 原生支持它们。
|
||||
|
||||
| 姓名 | 年龄 |
|
||||
| :--- | :--- |
|
||||
| 张三 | 27 |
|
||||
| 李四 | 23 |
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
| 姓名 | 年龄 |
|
||||
| :--- | :--- |
|
||||
| 张三 | 27 |
|
||||
| 李四 | 23 |
|
||||
```
|
||||
|
||||
#### 表格内的行内 Markdown
|
||||
|
||||
| 斜体 | 粗体 | 代码 |
|
||||
| :----- | :------- | :----- |
|
||||
| _斜体_ | **粗体** | `代码` |
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
| 斜体 | 粗体 | 代码 |
|
||||
| :----- | :------- | :----- |
|
||||
| _斜体_ | **粗体** | `代码` |
|
||||
```
|
||||
|
||||
### 代码块
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="../../guide/syntax-highlighting" title="语法高亮" icon="sparkles" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
### 列表
|
||||
|
||||
#### 有序列表
|
||||
|
||||
1. 第一项
|
||||
2. 第二项
|
||||
3. 第三项
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
1. 第一项
|
||||
2. 第二项
|
||||
3. 第三项
|
||||
```
|
||||
|
||||
#### 无序列表
|
||||
|
||||
- 列表项
|
||||
- 另一个项
|
||||
- 再一个项
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
- 列表项
|
||||
- 另一个项
|
||||
- 再一个项
|
||||
```
|
||||
|
||||
#### 嵌套列表
|
||||
|
||||
- 水果
|
||||
- 苹果
|
||||
- 橙子
|
||||
- 香蕉
|
||||
- 乳制品
|
||||
- 牛奶
|
||||
- 奶酪
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
- 水果
|
||||
- 苹果
|
||||
- 橙子
|
||||
- 香蕉
|
||||
- 乳制品
|
||||
- 牛奶
|
||||
- 奶酪
|
||||
```
|
||||
|
||||
#### 任务列表
|
||||
|
||||
- [x] 编写文档
|
||||
- [ ] 代码审查
|
||||
- [ ] 部署更改
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
- [x] 编写文档
|
||||
- [ ] 代码审查
|
||||
- [ ] 部署更改
|
||||
```
|
||||
|
||||
### 图片
|
||||
|
||||
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
|
||||
```
|
||||
|
||||
带标题：
|
||||
|
||||
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
|
||||
```
|
||||
|
||||
如需更高级的功能，请使用 Hugo 内置的 [Figure 短代码](https://gohugo.io/shortcodes/figure/)。
|
||||
|
||||
## 配置
|
||||
|
||||
Hugo 使用 [Goldmark](https://github.com/yuin/goldmark) 进行 Markdown 解析。
|
||||
Markdown 渲染可以在 `hugo.yaml` 中的 `markup.goldmark` 下配置。
|
||||
以下是 Hextra 的默认配置：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
markup:
|
||||
goldmark:
|
||||
renderer:
|
||||
unsafe: true
|
||||
highlight:
|
||||
noClasses: false
|
||||
```
|
||||
|
||||
更多配置选项，请参阅 Hugo 文档中的 [配置 Markup](https://gohugo.io/getting-started/configuration-markup/)。
|
||||
|
||||
## 学习资源
|
||||
|
||||
- [Markdown 指南](https://www.markdownguide.org/)
|
||||
- [Markdown 速查表](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
|
||||
- [Markdown 教程](https://www.markdowntutorial.com/)
|
||||
- [Markdown 参考](https://commonmark.org/help/)
|
||||
@@ -0,0 +1,256 @@
|
||||
---
|
||||
title: سازماندهی فایل‌ها
|
||||
weight: 1
|
||||
prev: /docs/guide
|
||||
---
|
||||
|
||||
## ساختار دایرکتوری
|
||||
|
||||
به‌طور پیش‌فرض، Hugo فایل‌های Markdown را در دایرکتوری `content` جستجو می‌کند و ساختار این دایرکتوری تعیین‌کننده ساختار نهایی خروجی وبسایت شماست.
|
||||
این سایت را به عنوان مثال در نظر بگیرید:
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/folder name="docs" state="open" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/file name="getting-started.md" >}}
|
||||
{{< filetree/folder name="guide" state="open" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/file name="organize-files.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/folder name="blog" state="open" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/file name="post-1.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
هر یک از فایل‌های `_index.md` صفحه اصلی مربوط به بخش خود هستند. سایر فایل‌های Markdown صفحات معمولی هستند.
|
||||
|
||||
```
|
||||
content
|
||||
├── _index.md // <- /
|
||||
├── docs
|
||||
│ ├── _index.md // <- /docs/
|
||||
│ ├── getting-started.md // <- /docs/getting-started/
|
||||
│ └── guide
|
||||
│ ├── _index.md // <- /docs/guide/
|
||||
│ └── organize-files.md // <- /docs/guide/organize-files/
|
||||
└── blog
|
||||
├── _index.md // <- /blog/
|
||||
└── post-1.md // <- /blog/post-1/
|
||||
```
|
||||
|
||||
## طرح‌بندی‌ها
|
||||
|
||||
Hextra سه طرح‌بندی برای انواع مختلف محتوا ارائه می‌دهد:
|
||||
|
||||
| طرح‌بندی | دایرکتوری | ویژگی‌ها |
|
||||
| :-------- | :----------------- | :----------------------------------------------------------- |
|
||||
| `docs` | `content/docs/` | مناسب برای مستندات ساختاریافته، مشابه این بخش. |
|
||||
| `blog` | `content/blog/` | برای پست‌های وبلاگ، با نمایش لیست و مقاله‌های تفصیلی. |
|
||||
| `default` | سایر دایرکتوری‌ها | نمایش تک‌صفحه‌ای مقاله بدون نوار کناری. |
|
||||
|
||||
برای سفارشی‌سازی یک بخش به منظور تقلید رفتار یک طرح‌بندی داخلی، نوع مورد نظر را در front matter فایل `_index.md` بخش مشخص کنید.
|
||||
|
||||
```yaml {filename="content/my-docs/_index.md"}
|
||||
---
|
||||
title: مستندات من
|
||||
cascade:
|
||||
type: docs
|
||||
---
|
||||
```
|
||||
|
||||
مثال پیکربندی بالا تضمین می‌کند که فایل‌های محتوا در `content/my-docs/` به‌طور پیش‌فرض به عنوان مستندات (نوع `docs`) در نظر گرفته می‌شوند.
|
||||
|
||||
## ناوبری نوار کناری
|
||||
|
||||
ناوبری نوار کناری به‌طور خودکار بر اساس سازماندهی محتوا به ترتیب الفبایی ایجاد می‌شود. برای پیکربندی دستی ترتیب نوار کناری، می‌توانیم از پارامتر `weight` در front matter فایل‌های Markdown استفاده کنیم.
|
||||
|
||||
```yaml {filename="content/docs/guide/_index.md"}
|
||||
---
|
||||
title: راهنما
|
||||
weight: 2
|
||||
---
|
||||
```
|
||||
|
||||
{{< callout type="info" >}}
|
||||
توصیه می‌شود نوار کناری را خیلی عمیق نگه ندارید. اگر محتوای زیادی دارید، **آنها را به چند بخش تقسیم کنید**.
|
||||
{{< /callout >}}
|
||||
|
||||
## ناوبری بخش
|
||||
|
||||
### ترتیب صفحه‌بندی بخش
|
||||
|
||||
ترتیب صفحات، که از طریق [`PAGE.PrevInSection`](https://gohugo.io/methods/page/previnsection/) و [`PAGE.NextInSection`](https://gohugo.io/methods/page/nextinsection/) در یک [مجموعه صفحه](https://gohugo.io/quick-reference/glossary/#page-collection) قابل دسترسی هستند، به‌طور پیش‌فرض معکوس شده است.
|
||||
|
||||
برای غیرفعال کردن این ترتیب معکوس، می‌توانید پارامتر سفارشی `reversePagination` را در front matter صفحه به `false` تنظیم کنید. به‌طور پیش‌فرض `reversePagination` روی `true` تنظیم شده است.
|
||||
|
||||
#### مثال
|
||||
|
||||
با توجه به ساختار دایرکتوری زیر:
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/folder name="blog" state="open" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/folder name="my-blog-series" state="open" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/folder name="post-a" state="open" >}}
|
||||
{{< filetree/file name="index.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/folder name="post-b" state="open" >}}
|
||||
{{< filetree/file name="index.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/folder name="post-c" state="open" >}}
|
||||
{{< filetree/file name="index.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
و front matter زیر در پست‌ها:
|
||||
|
||||
```yaml {filename="content/blog/my-blog-series/post-a/index.md"}
|
||||
---
|
||||
title: پست A
|
||||
weight: 1
|
||||
---
|
||||
```
|
||||
```yaml {filename="content/blog/my-blog-series/post-b/index.md"}
|
||||
---
|
||||
title: پست B
|
||||
weight: 2
|
||||
---
|
||||
```
|
||||
```yaml {filename="content/blog/my-blog-series/post-c/index.md"}
|
||||
---
|
||||
title: پست C
|
||||
weight: 3
|
||||
---
|
||||
```
|
||||
|
||||
اگر خواننده در انتهای `post-b/index.md` باشد، می‌بیند که صفحه بعدی `post-a` و صفحه قبلی `post-c` است. این به دلیل تنظیم `reversePagination` روی `true` به‌طور پیش‌فرض است. این زمانی مناسب است که بخواهیم پست‌ها به ترتیب زمانی از جدیدترین به قدیمی‌ترین نمایش داده شوند. اما در مورد یک سری وبلاگ که چندین بخش دارد، معمولاً می‌خواهیم افراد ابتدا پست اول را بخوانند، سپس به پست دوم و غیره بروند. بنابراین می‌خواهیم ترتیب معکوس را غیرفعال کنیم.
|
||||
|
||||
می‌توانیم `reversePagination` را در هر پست وبلاگ در این سری با اضافه کردن front matter زیر به `my-blog-series/_index.md` خاموش کنیم:
|
||||
|
||||
```yaml {filename="content/blog/my-blog-series/_index.md"}
|
||||
---
|
||||
title: سری وبلاگ من
|
||||
cascade:
|
||||
params:
|
||||
reversePagination: false
|
||||
---
|
||||
```
|
||||
|
||||
در اینجا از [`cascade`](https://gohugo.io/content-management/front-matter/#cascade-1) استفاده می‌کنیم تا این تنظیم به تمام پست‌های `my-blog-series` منتقل شود و `reversePagination` برای تمام فرزندان روی `false` تنظیم شود. این اکنون تضمین می‌کند که وقتی خواننده در `post-b/index.md` است، صفحه بعدی `post-c` و صفحه قبلی `post-a` خواهد بود.
|
||||
|
||||
## ناوبری مسیر راهنما
|
||||
|
||||
مسیرهای راهنما به‌طور خودکار بر اساس ساختار دایرکتوری `/content` ایجاد می‌شوند.
|
||||
|
||||
به عنوان مثال، ساختار فایل [نمایش داده شده در بالا](#directory-structure) را در نظر بگیرید. با توجه به آن ساختار، مسیرهای راهنمای بالای صفحه در `/docs/guide/organize-files/` به‌صورت خودکار به این شکل نمایش داده می‌شوند:
|
||||
|
||||
```
|
||||
مستندات > راهنما > سازماندهی فایل‌ها
|
||||
```
|
||||
|
||||
### سفارشی‌سازی عنوان لینک‌های مسیر راهنما
|
||||
|
||||
به‌طور پیش‌فرض، هر لینک مسیر راهنما بر اساس پارامتر `title` آن صفحه ایجاد می‌شود. می‌توانید این را با مشخص کردن `linkTitle` سفارشی کنید.
|
||||
|
||||
به عنوان مثال، اگر به جای `Organize Files` می‌خواستیم مسیر راهنما `Foo Bar` باشد:
|
||||
|
||||
```yaml {filename="content/docs/guide/organize-files.md"}
|
||||
---
|
||||
linkTitle: Foo Bar
|
||||
title: سازماندهی فایل‌ها
|
||||
---
|
||||
```
|
||||
|
||||
این اکنون مسیرهای راهنمای زیر را ایجاد می‌کند:
|
||||
```
|
||||
مستندات > راهنما > Foo Bar
|
||||
```
|
||||
|
||||
### مخفی کردن مسیرهای راهنما
|
||||
|
||||
می‌توانید مسیرهای راهنما را به‌طور کامل از یک صفحه با مشخص کردن `breadcrumbs: false` در front matter آن مخفی کنید:
|
||||
|
||||
```yaml {filename="content/docs/guide/organize-files.md"}
|
||||
---
|
||||
breadcrumbs: false
|
||||
title: سازماندهی فایل‌ها
|
||||
---
|
||||
```
|
||||
|
||||
## پیکربندی دایرکتوری محتوا
|
||||
|
||||
به‌طور پیش‌فرض، دایرکتوری ریشه `content/` توسط Hugo برای ساخت سایت استفاده می‌شود.
|
||||
اگر نیاز به استفاده از دایرکتوری دیگری برای محتوا دارید، مثلاً `docs/`، این کار را می‌توان با تنظیم پارامتر [`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir) در پیکربندی سایت `hugo.yaml` انجام داد.
|
||||
|
||||
## اضافه کردن تصاویر
|
||||
|
||||
برای اضافه کردن تصاویر، ساده‌ترین راه این است که فایل‌های تصویر را در همان دایرکتوری فایل Markdown قرار دهید.
|
||||
به عنوان مثال، یک فایل تصویر `image.png` را در کنار فایل `my-page.md` اضافه کنید:
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/file name="my-page.md" >}}
|
||||
{{< filetree/file name="image.png" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
سپس می‌توانیم از سینتکس Markdown زیر برای اضافه کردن تصویر به محتوا استفاده کنیم:
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||
|
||||
```
|
||||
|
||||
همچنین می‌توانیم از ویژگی [page bundles][page-bundles] Hugo استفاده کنیم تا فایل‌های تصویر را همراه با فایل Markdown سازماندهی کنیم. برای این کار، فایل `my-page.md` را به یک دایرکتوری `my-page` تبدیل کنید و محتوا را در یک فایل به نام `index.md` قرار دهید و فایل‌های تصویر را داخل دایرکتوری `my-page` قرار دهید:
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/folder name="my-page" >}}
|
||||
{{< filetree/file name="index.md" >}}
|
||||
{{< filetree/file name="image.png" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
```markdown {filename="content/docs/my-page/index.md"}
|
||||
|
||||
```
|
||||
|
||||
به‌عنوان جایگزین، می‌توانیم فایل‌های تصویر را در دایرکتوری `static` قرار دهیم، که تصاویر را برای تمام صفحات قابل دسترس می‌کند:
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="static" >}}
|
||||
{{< filetree/folder name="images" >}}
|
||||
{{< filetree/file name="image.png" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/file name="my-page.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
توجه کنید که مسیر تصویر با یک اسلش `/` شروع می‌شود و نسبت به دایرکتوری static است:
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||
|
||||
```
|
||||
|
||||
[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles
|
||||
@@ -0,0 +1,256 @@
|
||||
---
|
||||
title: ファイルの整理
|
||||
weight: 1
|
||||
prev: /docs/guide
|
||||
---
|
||||
|
||||
## ディレクトリ構造
|
||||
|
||||
デフォルトでは、Hugo は `content` ディレクトリ内の Markdown ファイルを検索し、ディレクトリの構造がウェブサイトの最終的な出力構造を決定します。
|
||||
このサイトを例に挙げます：
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/folder name="docs" state="open" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/file name="getting-started.md" >}}
|
||||
{{< filetree/folder name="guide" state="open" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/file name="organize-files.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/folder name="blog" state="open" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/file name="post-1.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
各 `_index.md` ファイルは、対応するセクションのインデックスページです。他の Markdown ファイルは通常のページです。
|
||||
|
||||
```
|
||||
content
|
||||
├── _index.md // <- /
|
||||
├── docs
|
||||
│ ├── _index.md // <- /docs/
|
||||
│ ├── getting-started.md // <- /docs/getting-started/
|
||||
│ └── guide
|
||||
│ ├── _index.md // <- /docs/guide/
|
||||
│ └── organize-files.md // <- /docs/guide/organize-files/
|
||||
└── blog
|
||||
├── _index.md // <- /blog/
|
||||
└── post-1.md // <- /blog/post-1/
|
||||
```
|
||||
|
||||
## レイアウト
|
||||
|
||||
Hextra は、異なるコンテンツタイプに対して3つのレイアウトを提供します：
|
||||
|
||||
| レイアウト | ディレクトリ | 特徴 |
|
||||
| :-------- | :------------------- | :------------------------------------------------------------------- |
|
||||
| `docs` | `content/docs/` | 構造化されたドキュメントに最適。このセクションと同じです。 |
|
||||
| `blog` | `content/blog/` | ブログ投稿用。リスト表示と詳細記事ビューの両方があります。 |
|
||||
| `default` | その他のディレクトリ | サイドバーなしの単一ページ記事ビュー。 |
|
||||
|
||||
セクションの動作を組み込みレイアウトと同じにするには、セクションの `_index.md` のフロントマターで希望するタイプを指定します。
|
||||
|
||||
```yaml {filename="content/my-docs/_index.md"}
|
||||
---
|
||||
title: My Docs
|
||||
cascade:
|
||||
type: docs
|
||||
---
|
||||
```
|
||||
|
||||
上記の設定例により、`content/my-docs/` 内のコンテンツファイルはデフォルトでドキュメント（`docs` タイプ）として扱われます。
|
||||
|
||||
## サイドバーナビゲーション
|
||||
|
||||
サイドバーナビゲーションは、コンテンツのアルファベット順に基づいて自動的に生成されます。サイドバーの順序を手動で設定するには、Markdown ファイルのフロントマターで `weight` パラメータを使用します。
|
||||
|
||||
```yaml {filename="content/docs/guide/_index.md"}
|
||||
---
|
||||
title: Guide
|
||||
weight: 2
|
||||
---
|
||||
```
|
||||
|
||||
{{< callout type="info" >}}
|
||||
サイドバーを深くしすぎないことをお勧めします。多くのコンテンツがある場合は、**複数のセクションに分割する**ことを検討してください。
|
||||
{{< /callout >}}
|
||||
|
||||
## セクションナビゲーション
|
||||
|
||||
### セクションページネーションの順序
|
||||
|
||||
[`PAGE.PrevInSection`](https://gohugo.io/methods/page/previnsection/) や [`PAGE.NextInSection`](https://gohugo.io/methods/page/nextinsection/) でアクセスされるページの順序は、デフォルトで逆順になっています。
|
||||
|
||||
この逆順を無効にするには、ページのフロントマターで `reversePagination` カスタムパラメータを `false` に設定します。デフォルトでは `reversePagination` は `true` に設定されています。
|
||||
|
||||
#### 例
|
||||
|
||||
次のディレクトリ構造を考えます：
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/folder name="blog" state="open" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/folder name="my-blog-series" state="open" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/folder name="post-a" state="open" >}}
|
||||
{{< filetree/file name="index.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/folder name="post-b" state="open" >}}
|
||||
{{< filetree/file name="index.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/folder name="post-c" state="open" >}}
|
||||
{{< filetree/file name="index.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
そして、投稿のフロントマターは次のようになっています：
|
||||
|
||||
```yaml {filename="content/blog/my-blog-series/post-a/index.md"}
|
||||
---
|
||||
title: Post A
|
||||
weight: 1
|
||||
---
|
||||
```
|
||||
```yaml {filename="content/blog/my-blog-series/post-b/index.md"}
|
||||
---
|
||||
title: Post B
|
||||
weight: 2
|
||||
---
|
||||
```
|
||||
```yaml {filename="content/blog/my-blog-series/post-c/index.md"}
|
||||
---
|
||||
title: Post C
|
||||
weight: 3
|
||||
---
|
||||
```
|
||||
|
||||
読者が `post-b/index.md` の下部にいる場合、次のページは `post-a`、前のページは `post-c` と表示されます。これは `reversePagination` がデフォルトで `true` に設定されているためです。これは、投稿を最新から古い順に表示したい場合に適しています。しかし、複数のパートからなるブログシリーズの場合、通常は最初の投稿を読み、次に2番目、という順序で読んでほしいものです。そのため、逆順を無効にします。
|
||||
|
||||
このシリーズのすべてのブログ投稿で `reversePagination` をオフにするには、`my-blog-series/_index.md` に次のフロントマターを追加します：
|
||||
|
||||
```yaml {filename="content/blog/my-blog-series/_index.md"}
|
||||
---
|
||||
title: My Blog Series
|
||||
cascade:
|
||||
params:
|
||||
reversePagination: false
|
||||
---
|
||||
```
|
||||
|
||||
ここでは [`cascade`](https://gohugo.io/content-management/front-matter/#cascade-1) を使用して、`my-blog-series` 内のすべての投稿に設定を伝播させ、すべての子孫で `reversePagination` が `false` に設定されるようにしています。これにより、読者が `post-b/index.md` にいる場合、次のページは `post-c`、前のページは `post-a` と表示されるようになります。
|
||||
|
||||
## パンくずリストナビゲーション
|
||||
|
||||
パンくずリストは、`/content` のディレクトリ構造に基づいて自動生成されます。
|
||||
|
||||
たとえば、[上記のディレクトリ構造](#directory-structure)を考えます。その構造に基づいて、`/docs/guide/organize-files/` のページ上部のパンくずリストは自動的に次のように表示されます：
|
||||
|
||||
```
|
||||
Documentation > Guide > Organize Files
|
||||
```
|
||||
|
||||
### パンくずリストのリンクタイトルのカスタマイズ
|
||||
|
||||
デフォルトでは、各パンくずリストのリンクはそのページの `title` パラメータに基づいて生成されます。これをカスタマイズするには、`linkTitle` を指定します。
|
||||
|
||||
たとえば、`Organize Files` の代わりにパンくずリストを `Foo Bar` にしたい場合：
|
||||
|
||||
```yaml {filename="content/docs/guide/organize-files.md"}
|
||||
---
|
||||
linkTitle: Foo Bar
|
||||
title: Organize Files
|
||||
---
|
||||
```
|
||||
|
||||
これにより、次のパンくずリストが生成されます：
|
||||
```
|
||||
Documentation > Guide > Foo Bar
|
||||
```
|
||||
|
||||
### パンくずリストの非表示
|
||||
|
||||
ページからパンくずリストを完全に非表示にするには、フロントマターで `breadcrumbs: false` を指定します：
|
||||
|
||||
```yaml {filename="content/docs/guide/organize-files.md"}
|
||||
---
|
||||
breadcrumbs: false
|
||||
title: Organize Files
|
||||
---
|
||||
```
|
||||
|
||||
## コンテンツディレクトリの設定
|
||||
|
||||
デフォルトでは、Hugo はサイトを構築するためにルートの `content/` ディレクトリを使用します。
|
||||
別のディレクトリ（例えば `docs/`）をコンテンツ用に使用する必要がある場合は、サイト設定 `hugo.yaml` で [`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir) パラメータを設定することで可能です。
|
||||
|
||||
## 画像の追加
|
||||
|
||||
画像を追加する最も簡単な方法は、画像ファイルを Markdown ファイルと同じディレクトリに置くことです。
|
||||
たとえば、`my-page.md` ファイルと同じディレクトリに `image.png` ファイルを追加します：
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/file name="my-page.md" >}}
|
||||
{{< filetree/file name="image.png" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
そして、次の Markdown 構文を使用してコンテンツに画像を追加できます：
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||
|
||||
```
|
||||
|
||||
また、Hugo の [ページバンドル][page-bundles] 機能を利用して、画像ファイルを Markdown ファイルと一緒に整理することもできます。そのためには、`my-page.md` ファイルを `my-page` ディレクトリに変換し、コンテンツを `index.md` というファイルに置き、画像ファイルを `my-page` ディレクトリ内に配置します：
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/folder name="my-page" >}}
|
||||
{{< filetree/file name="index.md" >}}
|
||||
{{< filetree/file name="image.png" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
```markdown {filename="content/docs/my-page/index.md"}
|
||||
|
||||
```
|
||||
|
||||
あるいは、画像ファイルを `static` ディレクトリに置くこともできます。これにより、画像はすべてのページで利用可能になります：
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="static" >}}
|
||||
{{< filetree/folder name="images" >}}
|
||||
{{< filetree/file name="image.png" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/file name="my-page.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
画像パスはスラッシュ `/` で始まり、static ディレクトリからの相対パスであることに注意してください：
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||
|
||||
```
|
||||
|
||||
[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles
|
||||
@@ -0,0 +1,277 @@
|
||||
---
|
||||
title: Organize Files
|
||||
weight: 1
|
||||
prev: /docs/guide
|
||||
---
|
||||
|
||||
## Directory Structure
|
||||
|
||||
By default, Hugo searches for Markdown files in the `content` directory, and the structure of the directory determines the final output structure of your website.
|
||||
Take this site as an example:
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/folder name="docs" state="open" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/file name="getting-started.md" >}}
|
||||
{{< filetree/folder name="guide" state="open" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/file name="organize-files.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/folder name="blog" state="open" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/file name="post-1.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
Each of the `_index.md` files is the index page for the corresponding section. The other Markdown files are regular pages.
|
||||
|
||||
```
|
||||
content
|
||||
├── _index.md // <- /
|
||||
├── docs
|
||||
│ ├── _index.md // <- /docs/
|
||||
│ ├── getting-started.md // <- /docs/getting-started/
|
||||
│ └── guide
|
||||
│ ├── _index.md // <- /docs/guide/
|
||||
│ └── organize-files.md // <- /docs/guide/organize-files/
|
||||
└── blog
|
||||
├── _index.md // <- /blog/
|
||||
└── post-1.md // <- /blog/post-1/
|
||||
```
|
||||
|
||||
## Layouts
|
||||
|
||||
Hextra offers three layouts for different content types:
|
||||
|
||||
| Layout | Directory | Features |
|
||||
| :-------- | :-------------------- | :--------------------------------------------------------------- |
|
||||
| `docs` | `content/docs/` | Ideal for structured documentation, same as this section. |
|
||||
| `blog` | `content/blog/` | For blog postings, with both listing and detailed article views. |
|
||||
| `default` | All other directories | Single-page article view without sidebar. |
|
||||
|
||||
To customize a section to mirror the behavior of a built-in layout, specify the desired type in the front matter of the section's `_index.md`.
|
||||
|
||||
```yaml {filename="content/my-docs/_index.md"}
|
||||
---
|
||||
title: My Docs
|
||||
cascade:
|
||||
type: docs
|
||||
---
|
||||
```
|
||||
|
||||
The above example configuration ensures that the content files inside `content/my-docs/` will be treated as documentation (`docs` type) by default.
|
||||
|
||||
## Sidebar Navigation
|
||||
|
||||
The sidebar navigation is generated automatically based on the content organization alphabetically. To manually configure the sidebar order, we can use the `weight` parameter in the front matter of the Markdown files.
|
||||
|
||||
```yaml {filename="content/docs/guide/_index.md"}
|
||||
---
|
||||
title: Guide
|
||||
weight: 2
|
||||
---
|
||||
```
|
||||
|
||||
{{< callout type="info" >}}
|
||||
It is recommended to keep the sidebar not too deep. If you have a lot of content, consider **splitting them into multiple sections**.
|
||||
{{< /callout >}}
|
||||
|
||||
## Section Navigation
|
||||
|
||||
|
||||
### Section Pagination Order
|
||||
|
||||
The order in which pages, accessed via [`PAGE.PrevInSection`](https://gohugo.io/methods/page/previnsection/) and [`PAGE.NextInSection`](https://gohugo.io/methods/page/nextinsection/) in a [page collection](https://gohugo.io/quick-reference/glossary/#page-collection), are ordered, is reversed by default.
|
||||
|
||||
To disable this reversed ordering you can set the `reversePagination` custom parameter in the page front matter to `false`. By default `reversePagination` is set to `true`.
|
||||
|
||||
#### Example
|
||||
|
||||
Given the following directory structure:
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/folder name="blog" state="open" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/folder name="my-blog-series" state="open" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/folder name="post-a" state="open" >}}
|
||||
{{< filetree/file name="index.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/folder name="post-b" state="open" >}}
|
||||
{{< filetree/file name="index.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/folder name="post-c" state="open" >}}
|
||||
{{< filetree/file name="index.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
And the following front matter in the posts:
|
||||
|
||||
```yaml {filename="content/blog/my-blog-series/post-a/index.md"}
|
||||
---
|
||||
title: Post A
|
||||
weight: 1
|
||||
---
|
||||
```
|
||||
```yaml {filename="content/blog/my-blog-series/post-b/index.md"}
|
||||
---
|
||||
title: Post B
|
||||
weight: 2
|
||||
---
|
||||
```
|
||||
```yaml {filename="content/blog/my-blog-series/post-c/index.md"}
|
||||
---
|
||||
title: Post C
|
||||
weight: 3
|
||||
---
|
||||
```
|
||||
|
||||
If the reader is at the bottom of `post-b/index.md`, they will see that the next page is `post-a`, and the previous page is `post-c`. This is due to `reversePagination` being set to `true` by default. This is ok when we want our posts to be displayed in chronological order from latest to oldest. However, in the case of a blog series where there are multiple parts, we typically want people to read the first post, and then move to the second and so on. So we want to disable the reversed ordering.
|
||||
|
||||
We can turn off `reversePagination` in every blog post in this series by adding the following front matter to `my-blog-series/_index.md`
|
||||
|
||||
```yaml {filename="content/blog/my-blog-series/_index.md"}
|
||||
---
|
||||
title: My Blog Series
|
||||
cascade:
|
||||
params:
|
||||
reversePagination: false
|
||||
---
|
||||
```
|
||||
|
||||
We are using [`cascade`](https://gohugo.io/content-management/front-matter/#cascade-1) here to propagate the setting to all posts in the `my-blog-series` so that `reversePagination` is set to `false` for all descendents. This will now ensure that when the reader is on `post-b/index.md` they will see that the next page is `post-c` and the previous page is `post-a`.
|
||||
|
||||
## Breadcrumb Navigation
|
||||
|
||||
Breadcrumbs are auto-generated based on the directory structure of `/content`.
|
||||
|
||||
For example, consider the file structure [demonstrated above](#directory-structure). Given that structure, the breadcrumbs atop the page at `/docs/guide/organize-files/` would appear automatically as follows:
|
||||
|
||||
```
|
||||
Documentation > Guide > Organize Files
|
||||
```
|
||||
|
||||
### Customizing Breadcrumb Link Titles
|
||||
|
||||
By default, each breadcrumb link is generated based on that page's `title` parameter. You can customize this by specifying a `linkTitle`.
|
||||
|
||||
For example, if instead of `Organize Files` we wanted the breadcrumb to be `Foo Bar`:
|
||||
|
||||
```yaml {filename="content/docs/guide/organize-files.md"}
|
||||
---
|
||||
linkTitle: Foo Bar
|
||||
title: Organize Files
|
||||
---
|
||||
```
|
||||
|
||||
This would now generate the following breadcrumbs:
|
||||
```
|
||||
Documentation > Guide > Foo Bar
|
||||
```
|
||||
|
||||
### Enabling and Disabling Breadcrumbs
|
||||
|
||||
Whether breadcrumbs are enabled, or disabled, by default for a page, is determined by its [content type](https://gohugo.io/quick-reference/glossary/#content-type) and [page kind](https://gohugo.io/quick-reference/glossary/#page-kind):
|
||||
|
||||
| Content Type | Section | Page |
|
||||
|:----------------|:--------:|:----------|
|
||||
| `docs` | Enabled | Enabled |
|
||||
| `blog` | Disabled | Enabled |
|
||||
| Any other type | Disabled | Disabled |
|
||||
|
||||
You can override these defaults on a page by setting `breadcrumbs` in its front matter:
|
||||
|
||||
```yaml {filename="content/docs/guide/organize-files.md"}
|
||||
---
|
||||
breadcrumbs: false
|
||||
title: Organize Files
|
||||
---
|
||||
```
|
||||
|
||||
Similarly you can use [cascade](https://gohugo.io/content-management/front-matter/#cascade-1) to override the defaults on a page and its decendents:
|
||||
|
||||
```yaml {filename="content/portfolio/_index.md"}
|
||||
---
|
||||
title: "Portfolio"
|
||||
|
||||
cascade:
|
||||
params:
|
||||
breadcrumbs: true
|
||||
---
|
||||
```
|
||||
|
||||
## Configure Content Directory
|
||||
|
||||
By default, the root `content/` directory is used by Hugo to build the site.
|
||||
If you need to use a different directory for content, for example `docs/`, this can be done by setting the [`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir) parameter in the site configuration `hugo.yaml`.
|
||||
|
||||
## Add Images
|
||||
|
||||
To add images, the easiest way is to put the image files in the same directory as the Markdown file.
|
||||
For example, add an image file `image.png` alongside the `my-page.md` file:
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/file name="my-page.md" >}}
|
||||
{{< filetree/file name="image.png" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
Then, we can use the following Markdown syntax to add the image to the content:
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||
|
||||
```
|
||||
|
||||
We can also utilize the [page bundles][page-bundles] feature of Hugo to organize the image files together with the Markdown file. To achieve that, turn the `my-page.md` file into a directory `my-page` and put the content into a file named `index.md`, and put the image files inside the `my-page` directory:
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/folder name="my-page" >}}
|
||||
{{< filetree/file name="index.md" >}}
|
||||
{{< filetree/file name="image.png" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
```markdown {filename="content/docs/my-page/index.md"}
|
||||
|
||||
```
|
||||
|
||||
Alternatively, we can also put the image files in the `static` directory, which will make the images available for all pages:
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="static" >}}
|
||||
{{< filetree/folder name="images" >}}
|
||||
{{< filetree/file name="image.png" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/file name="my-page.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
Note that the image path begins with a slash `/` and is relative to the static directory:
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||
|
||||
```
|
||||
|
||||
[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles
|
||||
@@ -0,0 +1,256 @@
|
||||
---
|
||||
title: 文件组织
|
||||
weight: 1
|
||||
prev: /docs/guide
|
||||
---
|
||||
|
||||
## 目录结构
|
||||
|
||||
默认情况下，Hugo 会在 `content` 目录中查找 Markdown 文件，目录的结构决定了网站最终的输出结构。
|
||||
以本网站为例：
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/folder name="docs" state="open" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/file name="getting-started.md" >}}
|
||||
{{< filetree/folder name="guide" state="open" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/file name="organize-files.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/folder name="blog" state="open" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/file name="post-1.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
每个 `_index.md` 文件都是对应部分的索引页。其他 Markdown 文件则是常规页面。
|
||||
|
||||
```
|
||||
content
|
||||
├── _index.md // <- /
|
||||
├── docs
|
||||
│ ├── _index.md // <- /docs/
|
||||
│ ├── getting-started.md // <- /docs/getting-started/
|
||||
│ └── guide
|
||||
│ ├── _index.md // <- /docs/guide/
|
||||
│ └── organize-files.md // <- /docs/guide/organize-files/
|
||||
└── blog
|
||||
├── _index.md // <- /blog/
|
||||
└── post-1.md // <- /blog/post-1/
|
||||
```
|
||||
|
||||
## 布局
|
||||
|
||||
Hextra 为不同类型的内容提供了三种布局：
|
||||
|
||||
| 布局 | 目录 | 特点 |
|
||||
| :-------- | :----------------- | :------------------------------------------------------------- |
|
||||
| `docs` | `content/docs/` | 适合结构化文档，与本部分相同。 |
|
||||
| `blog` | `content/blog/` | 用于博客文章，包含列表和详细文章视图。 |
|
||||
| `default` | 其他所有目录 | 单页文章视图，无侧边栏。 |
|
||||
|
||||
要自定义一个部分以模仿内置布局的行为，可以在该部分的 `_index.md` 的 front matter 中指定所需的类型。
|
||||
|
||||
```yaml {filename="content/my-docs/_index.md"}
|
||||
---
|
||||
title: 我的文档
|
||||
cascade:
|
||||
type: docs
|
||||
---
|
||||
```
|
||||
|
||||
上述示例配置确保 `content/my-docs/` 内的内容文件默认会被视为文档（`docs` 类型）。
|
||||
|
||||
## 侧边栏导航
|
||||
|
||||
侧边栏导航会根据内容组织按字母顺序自动生成。要手动配置侧边栏顺序，可以在 Markdown 文件的 front matter 中使用 `weight` 参数。
|
||||
|
||||
```yaml {filename="content/docs/guide/_index.md"}
|
||||
---
|
||||
title: 指南
|
||||
weight: 2
|
||||
---
|
||||
```
|
||||
|
||||
{{< callout type="info" >}}
|
||||
建议不要让侧边栏过深。如果有大量内容，可以考虑**将其拆分为多个部分**。
|
||||
{{< /callout >}}
|
||||
|
||||
## 部分导航
|
||||
|
||||
### 部分分页顺序
|
||||
|
||||
通过 [`PAGE.PrevInSection`](https://gohugo.io/methods/page/previnsection/) 和 [`PAGE.NextInSection`](https://gohugo.io/methods/page/nextinsection/) 访问的页面在[页面集合](https://gohugo.io/quick-reference/glossary/#page-collection)中的顺序默认是反向的。
|
||||
|
||||
要禁用这种反向排序，可以在页面的 front matter 中将 `reversePagination` 自定义参数设置为 `false`。默认情况下，`reversePagination` 设置为 `true`。
|
||||
|
||||
#### 示例
|
||||
|
||||
给定以下目录结构：
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/folder name="blog" state="open" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/folder name="my-blog-series" state="open" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/folder name="post-a" state="open" >}}
|
||||
{{< filetree/file name="index.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/folder name="post-b" state="open" >}}
|
||||
{{< filetree/file name="index.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/folder name="post-c" state="open" >}}
|
||||
{{< filetree/file name="index.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
并在文章的 front matter 中设置：
|
||||
|
||||
```yaml {filename="content/blog/my-blog-series/post-a/index.md"}
|
||||
---
|
||||
title: 文章 A
|
||||
weight: 1
|
||||
---
|
||||
```
|
||||
```yaml {filename="content/blog/my-blog-series/post-b/index.md"}
|
||||
---
|
||||
title: 文章 B
|
||||
weight: 2
|
||||
---
|
||||
```
|
||||
```yaml {filename="content/blog/my-blog-series/post-c/index.md"}
|
||||
---
|
||||
title: 文章 C
|
||||
weight: 3
|
||||
---
|
||||
```
|
||||
|
||||
如果读者位于 `post-b/index.md` 的底部，他们会看到下一页是 `post-a`，上一页是 `post-c`。这是由于 `reversePagination` 默认设置为 `true`。当我们希望文章按从最新到最旧的顺序显示时，这是可以的。然而，对于多部分的博客系列，我们通常希望读者先阅读第一部分，然后依次阅读后续部分。因此，我们希望禁用反向排序。
|
||||
|
||||
我们可以通过在 `my-blog-series/_index.md` 中添加以下 front matter 来关闭该系列中所有博客文章的 `reversePagination`：
|
||||
|
||||
```yaml {filename="content/blog/my-blog-series/_index.md"}
|
||||
---
|
||||
title: 我的博客系列
|
||||
cascade:
|
||||
params:
|
||||
reversePagination: false
|
||||
---
|
||||
```
|
||||
|
||||
这里我们使用 [`cascade`](https://gohugo.io/content-management/front-matter/#cascade-1) 将设置传播到 `my-blog-series` 中的所有文章，以便所有后代都将 `reversePagination` 设置为 `false`。这将确保当读者在 `post-b/index.md` 时，他们会看到下一页是 `post-c`，上一页是 `post-a`。
|
||||
|
||||
## 面包屑导航
|
||||
|
||||
面包屑会根据 `/content` 的目录结构自动生成。
|
||||
|
||||
例如，考虑[上面展示的](#directory-structure)文件结构。给定该结构，位于 `/docs/guide/organize-files/` 的页面顶部的面包屑会自动显示如下：
|
||||
|
||||
```
|
||||
文档 > 指南 > 组织文件
|
||||
```
|
||||
|
||||
### 自定义面包屑链接标题
|
||||
|
||||
默认情况下，每个面包屑链接是根据该页面的 `title` 参数生成的。可以通过指定 `linkTitle` 来自定义。
|
||||
|
||||
例如，如果我们希望面包屑显示为 `Foo Bar` 而不是 `Organize Files`：
|
||||
|
||||
```yaml {filename="content/docs/guide/organize-files.md"}
|
||||
---
|
||||
linkTitle: Foo Bar
|
||||
title: 组织文件
|
||||
---
|
||||
```
|
||||
|
||||
现在会生成以下面包屑：
|
||||
```
|
||||
文档 > 指南 > Foo Bar
|
||||
```
|
||||
|
||||
### 隐藏面包屑
|
||||
|
||||
可以通过在页面的 front matter 中指定 `breadcrumbs: false` 来完全隐藏面包屑：
|
||||
|
||||
```yaml {filename="content/docs/guide/organize-files.md"}
|
||||
---
|
||||
breadcrumbs: false
|
||||
title: 组织文件
|
||||
---
|
||||
```
|
||||
|
||||
## 配置内容目录
|
||||
|
||||
默认情况下，Hugo 使用根目录 `content/` 来构建网站。
|
||||
如果需要使用其他目录作为内容目录，例如 `docs/`，可以在站点配置 `hugo.yaml` 中设置 [`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir) 参数。
|
||||
|
||||
## 添加图片
|
||||
|
||||
添加图片最简单的方法是将图片文件放在与 Markdown 文件相同的目录中。
|
||||
例如，将图片文件 `image.png` 与 `my-page.md` 文件放在一起：
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/file name="my-page.md" >}}
|
||||
{{< filetree/file name="image.png" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
然后，可以使用以下 Markdown 语法将图片添加到内容中：
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||
|
||||
```
|
||||
|
||||
我们还可以利用 Hugo 的[页面包][page-bundles]功能将图片文件与 Markdown 文件组织在一起。为此，将 `my-page.md` 文件转换为目录 `my-page`，并将内容放入名为 `index.md` 的文件中，然后将图片文件放入 `my-page` 目录中：
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/folder name="my-page" >}}
|
||||
{{< filetree/file name="index.md" >}}
|
||||
{{< filetree/file name="image.png" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
```markdown {filename="content/docs/my-page/index.md"}
|
||||
|
||||
```
|
||||
|
||||
或者，我们也可以将图片文件放在 `static` 目录中，这样所有页面都可以访问这些图片：
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="static" >}}
|
||||
{{< filetree/folder name="images" >}}
|
||||
{{< filetree/file name="image.png" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/file name="my-page.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
注意，图片路径以斜杠 `/` 开头，并且相对于 static 目录：
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||
|
||||
```
|
||||
|
||||
[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles
|
||||
@@ -0,0 +1,30 @@
|
||||
---
|
||||
title: شورتکدها
|
||||
weight: 9
|
||||
prev: /docs/guide/diagrams
|
||||
next: /docs/guide/shortcodes/callout
|
||||
---
|
||||
|
||||
[شورتکدهای Hugo](https://gohugo.io/content-management/shortcodes/) قطعه‌کدهای ساده‌ای درون فایل‌های محتوای شما هستند که تمپلیت‌های داخلی یا سفارشی را فراخوانی می‌کنند.
|
||||
|
||||
Hextra مجموعه‌ای از شورتکدهای زیبا را برای بهبود محتوای شما ارائه می‌دهد.
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="callout" title="کالاوت" icon="warning" >}}
|
||||
{{< card link="cards" title="کارت‌ها" icon="card" >}}
|
||||
{{< card link="details" title="جزئیات" icon="chevron-right" >}}
|
||||
{{< card link="filetree" title="درخت فایل" icon="folder-tree" >}}
|
||||
{{< card link="icon" title="آیکون" icon="badge-check" >}}
|
||||
{{< card link="steps" title="مراحل" icon="one" >}}
|
||||
{{< card link="tabs" title="تب‌ها" icon="collection" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
<div style="padding-top:4rem"></div>
|
||||
|
||||
شورتکدهای اضافی ارائه شده توسط Hugo و Hextra:
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="jupyter" title="نوت‌بوک Jupyter" icon="jupyter" tag="alpha" >}}
|
||||
{{< card link="others" title="سایر" icon="view-grid" >}}
|
||||
{{< card link="asciinema" title="Asciinema Player" icon="terminal" >}}
|
||||
{{< /cards >}}
|
||||
@@ -0,0 +1,30 @@
|
||||
---
|
||||
title: ショートコード
|
||||
weight: 9
|
||||
prev: /docs/guide/diagrams
|
||||
next: /docs/guide/shortcodes/callout
|
||||
---
|
||||
|
||||
[Hugo ショートコード](https://gohugo.io/content-management/shortcodes/)は、コンテンツファイル内に記述する簡潔なスニペットで、組み込みまたはカスタムテンプレートを呼び出します。
|
||||
|
||||
Hextra は、コンテンツを強化するための美しいショートコードのコレクションを提供します。
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="callout" title="Callout" icon="warning" >}}
|
||||
{{< card link="cards" title="Cards" icon="card" >}}
|
||||
{{< card link="details" title="Details" icon="chevron-right" >}}
|
||||
{{< card link="filetree" title="FileTree" icon="folder-tree" >}}
|
||||
{{< card link="icon" title="Icon" icon="badge-check" >}}
|
||||
{{< card link="steps" title="Steps" icon="one" >}}
|
||||
{{< card link="tabs" title="Tabs" icon="collection" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
<div style="padding-top:4rem"></div>
|
||||
|
||||
Hugo と Hextra が提供する追加のショートコード:
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="jupyter" title="Jupyter Notebook" icon="jupyter" tag="alpha" >}}
|
||||
{{< card link="others" title="Others" icon="view-grid" >}}
|
||||
{{< card link="asciinema" title="Asciinema Player" icon="terminal" >}}
|
||||
{{< /cards >}}
|
||||
@@ -0,0 +1,32 @@
|
||||
---
|
||||
title: Shortcodes
|
||||
weight: 9
|
||||
prev: /docs/guide/diagrams
|
||||
next: /docs/guide/shortcodes/callout
|
||||
---
|
||||
|
||||
[Hugo Shortcodes](https://gohugo.io/content-management/shortcodes/) are simple snippets inside your content files calling built-in or custom templates.
|
||||
|
||||
Hextra provides a collection of beautiful shortcodes to enhance your content.
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="callout" title="Callout" icon="warning" >}}
|
||||
{{< card link="cards" title="Cards" icon="card" >}}
|
||||
{{< card link="details" title="Details" icon="chevron-right" >}}
|
||||
{{< card link="filetree" title="FileTree" icon="folder-tree" >}}
|
||||
{{< card link="term" title="Term" icon="question-mark-circle" >}}
|
||||
{{< card link="icon" title="Icon" icon="badge-check" >}}
|
||||
{{< card link="steps" title="Steps" icon="one" >}}
|
||||
{{< card link="tabs" title="Tabs" icon="collection" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
<div style="padding-top:4rem"></div>
|
||||
|
||||
Additional shortcodes provided by Hugo and Hextra:
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="jupyter" title="Jupyter Notebook" icon="jupyter" tag="alpha" >}}
|
||||
{{< card link="others" title="Others" icon="view-grid" >}}
|
||||
{{< card link="hextra" title="Hextra" icon="view-grid" >}}
|
||||
{{< card link="asciinema" title="Asciinema Player" icon="terminal" >}}
|
||||
{{< /cards >}}
|
||||
@@ -0,0 +1,30 @@
|
||||
---
|
||||
title: 短代码
|
||||
weight: 9
|
||||
prev: /docs/guide/diagrams
|
||||
next: /docs/guide/shortcodes/callout
|
||||
---
|
||||
|
||||
[Hugo 短代码](https://gohugo.io/content-management/shortcodes/)是内容文件中调用内置或自定义模板的简单片段。
|
||||
|
||||
Hextra 提供了一系列精美的短代码来增强您的内容。
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="callout" title="提示框" icon="warning" >}}
|
||||
{{< card link="cards" title="卡片" icon="card" >}}
|
||||
{{< card link="details" title="详情" icon="chevron-right" >}}
|
||||
{{< card link="filetree" title="文件树" icon="folder-tree" >}}
|
||||
{{< card link="icon" title="图标" icon="badge-check" >}}
|
||||
{{< card link="steps" title="步骤" icon="one" >}}
|
||||
{{< card link="tabs" title="标签页" icon="collection" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
<div style="padding-top:4rem"></div>
|
||||
|
||||
Hugo 和 Hextra 提供的其他短代码：
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="jupyter" title="Jupyter 笔记本" icon="jupyter" tag="alpha" >}}
|
||||
{{< card link="others" title="其他" icon="view-grid" >}}
|
||||
{{< card link="asciinema" title="Asciinema Player" icon="terminal" >}}
|
||||
{{< /cards >}}
|
||||
@@ -0,0 +1,121 @@
|
||||
---
|
||||
title: "Asciinema Player کامپوننت"
|
||||
linktitle: "Asciinema Player"
|
||||
sidebar:
|
||||
exclude: true
|
||||
---
|
||||
|
||||
shortcode asciinema به شما امکان می‌دهد تا ضبط‌های ترمینال ایجاد شده با [asciinema](https://asciinema.org/) را در سایت Hugo خود جاسازی کنید. این یک پخش‌کننده ترمینال غنی با ویژگی‌هایی مانند کنترل پخش، تنظیم سرعت و سفارشی‌سازی تم ارائه می‌دهد.
|
||||
|
||||
## استفاده پایه
|
||||
|
||||
shortcode asciinema از فایل‌های `.cast` محلی و URL های راه دور پشتیبانی می‌کند. روش‌های مختلف استفاده از فایل‌های محلی به شرح زیر است:
|
||||
|
||||
### فایل‌های محلی
|
||||
|
||||
**روش 1: دایرکتوری Assets (توصیه شده)**
|
||||
فایل‌های cast را در دایرکتوری `assets/` سایت Hugo خود قرار دهید:
|
||||
|
||||
```
|
||||
your-site/
|
||||
├── assets/
|
||||
│ └── demo.cast
|
||||
└── content/
|
||||
└── my-page.md
|
||||
```
|
||||
|
||||
در فایل markdown خود:
|
||||
```markdown
|
||||
{{</* asciinema file="demo.cast" */>}}
|
||||
```
|
||||
|
||||
**روش 2: دایرکتوری Static**
|
||||
فایل‌های cast را در دایرکتوری `static/` قرار دهید:
|
||||
|
||||
```
|
||||
your-site/
|
||||
├── static/
|
||||
│ └── demo.cast
|
||||
└── content/
|
||||
└── my-page.md
|
||||
```
|
||||
|
||||
در فایل markdown خود:
|
||||
```markdown
|
||||
{{</* asciinema file="demo.cast" */>}}
|
||||
```
|
||||
|
||||
**روش 3: بسته صفحه**
|
||||
برای بسته‌های صفحه، فایل‌های cast را همراه با فایل markdown قرار دهید:
|
||||
|
||||
```
|
||||
your-site/
|
||||
└── content/
|
||||
└── my-page/
|
||||
├── index.md
|
||||
└── demo.cast
|
||||
```
|
||||
|
||||
در فایل markdown خود:
|
||||
```markdown
|
||||
{{</* asciinema file="demo.cast" */>}}
|
||||
```
|
||||
|
||||
{{< asciinema file="casts/demo.cast" >}}
|
||||
|
||||
### فایل‌های راه دور
|
||||
|
||||
همچنین می‌توانید از فایل‌های cast از هر URL راه دور استفاده کنید:
|
||||
|
||||
```markdown
|
||||
{{</* asciinema file="https://asciinema.org/a/85R4jTtjKVRIYXTcKCNq0vzYH.cast" */>}}
|
||||
{{</* asciinema file="https://example.com/demo.cast" */>}}
|
||||
```
|
||||
|
||||
{{< asciinema file="https://asciinema.org/a/85R4jTtjKVRIYXTcKCNq0vzYH.cast" >}}
|
||||
|
||||
### نحوه کارکرد جستجوی فایل
|
||||
|
||||
shortcode به ترتیب زیر فایل‌های cast شما را به طور خودکار پیدا می‌کند:
|
||||
1. **منابع بسته صفحه** (اگر از بسته صفحه استفاده می‌کنید)
|
||||
2. **دایرکتوری assets جهانی** (`assets/`)
|
||||
3. **دایرکتوری Static** (`static/`)
|
||||
4. **URL های راه دور** (اگر مسیر با `http://` یا `https://` شروع شود)
|
||||
|
||||
اگر فایل پیدا نشود، Hugo پیام خطای مفیدی نمایش می‌دهد که به شما می‌گوید فایل را کجا قرار دهید.
|
||||
|
||||
## نمایش پیشرفته
|
||||
|
||||
این یک مثال پیشرفته است که تمام پارامترهای موجود را نشان می‌دهد:
|
||||
|
||||
```markdown
|
||||
{{</* asciinema
|
||||
file="demo.cast"
|
||||
theme="dracula"
|
||||
speed="2"
|
||||
autoplay="true"
|
||||
loop="true"
|
||||
markers="1.5:Installation,3.2:Configuration,5.8:Testing"
|
||||
*/>}}
|
||||
```
|
||||
|
||||
{{< asciinema
|
||||
file="casts/demo.cast"
|
||||
theme="dracula"
|
||||
speed="2"
|
||||
autoplay="true"
|
||||
loop="true"
|
||||
markers="1.5:Installation,3.2:Configuration,5.8:Testing"
|
||||
>}}
|
||||
|
||||
## پارامترها
|
||||
|
||||
| پارامتر | نوع | پیش‌فرض | توضیحات |
|
||||
|---------|-----|---------|---------|
|
||||
| `file` | string | - | مسیر فایل .cast (ضروری). از فایل‌های محلی، مسیرهای مطلق و URL های راه دور پشتیبانی می‌کند |
|
||||
| `theme` | string | `"asciinema"` | تم پخش‌کننده |
|
||||
| `speed` | number | `1` | ضریب سرعت پخش |
|
||||
| `autoplay` | boolean | `false` | شروع خودکار پخش |
|
||||
| `loop` | boolean | `false` | پخش حلقه‌ای |
|
||||
| `poster` | string | `""` | پوستر (فریم پیش‌نمایش) برای نمایش تا زمان شروع پخش. از نمادگذاری NPT پشتیبانی می‌کند (مثل "npt:1:23") |
|
||||
| `markers` | string | `""` | نشانگرهای زمانی جدا شده با کاما. فرمت: "زمان:برچسب" یا فقط "زمان" (مثل "1.5:Installation,3.2:Configuration,5.8") |
|
||||
@@ -0,0 +1,121 @@
|
||||
---
|
||||
title: "Asciinema Player コンポーネント"
|
||||
linktitle: "Asciinema Player"
|
||||
sidebar:
|
||||
exclude: true
|
||||
---
|
||||
|
||||
asciinema shortcode を使用すると、[asciinema](https://asciinema.org/) で作成されたターミナル録画を Hugo サイトに埋め込むことができます。再生制御、速度調整、テーマカスタマイズなどの機能を備えたリッチなターミナルプレイヤーを提供します。
|
||||
|
||||
## 基本的な使用方法
|
||||
|
||||
asciinema shortcode はローカルの `.cast` ファイルとリモート URL の両方をサポートしています。ローカルファイルを使用する方法は以下の通りです：
|
||||
|
||||
### ローカルファイル
|
||||
|
||||
**方法 1：Assets ディレクトリ（推奨）**
|
||||
cast ファイルを Hugo サイトの `assets/` ディレクトリに配置：
|
||||
|
||||
```
|
||||
your-site/
|
||||
├── assets/
|
||||
│ └── demo.cast
|
||||
└── content/
|
||||
└── my-page.md
|
||||
```
|
||||
|
||||
markdown ファイル内：
|
||||
```markdown
|
||||
{{</* asciinema file="demo.cast" */>}}
|
||||
```
|
||||
|
||||
**方法 2：Static ディレクトリ**
|
||||
cast ファイルを `static/` ディレクトリに配置：
|
||||
|
||||
```
|
||||
your-site/
|
||||
├── static/
|
||||
│ └── demo.cast
|
||||
└── content/
|
||||
└── my-page.md
|
||||
```
|
||||
|
||||
markdown ファイル内：
|
||||
```markdown
|
||||
{{</* asciinema file="demo.cast" */>}}
|
||||
```
|
||||
|
||||
**方法 3：ページバンドル**
|
||||
ページバンドルの場合、cast ファイルを markdown ファイルと一緒に配置：
|
||||
|
||||
```
|
||||
your-site/
|
||||
└── content/
|
||||
└── my-page/
|
||||
├── index.md
|
||||
└── demo.cast
|
||||
```
|
||||
|
||||
markdown ファイル内：
|
||||
```markdown
|
||||
{{</* asciinema file="demo.cast" */>}}
|
||||
```
|
||||
|
||||
{{< asciinema file="casts/demo.cast" >}}
|
||||
|
||||
### リモートファイル
|
||||
|
||||
任意のリモート URL からの cast ファイルも使用できます：
|
||||
|
||||
```markdown
|
||||
{{</* asciinema file="https://asciinema.org/a/85R4jTtjKVRIYXTcKCNq0vzYH.cast" */>}}
|
||||
{{</* asciinema file="https://example.com/demo.cast" */>}}
|
||||
```
|
||||
|
||||
{{< asciinema file="https://asciinema.org/a/85R4jTtjKVRIYXTcKCNq0vzYH.cast" >}}
|
||||
|
||||
### ファイル検索の仕組み
|
||||
|
||||
shortcode は以下の順序で cast ファイルを自動的に検索します：
|
||||
1. **ページバンドルリソース**（ページバンドルを使用している場合）
|
||||
2. **グローバル assets ディレクトリ**（`assets/`）
|
||||
3. **Static ディレクトリ**（`static/`）
|
||||
4. **リモート URL**（パスが `http://` または `https://` で始まる場合）
|
||||
|
||||
ファイルが見つからない場合、Hugo はファイルをどこに配置すべきかを示す有用なエラーメッセージを表示します。
|
||||
|
||||
## 高度なデモ
|
||||
|
||||
利用可能なすべてのパラメータを紹介する高度な例：
|
||||
|
||||
```markdown
|
||||
{{</* asciinema
|
||||
file="demo.cast"
|
||||
theme="dracula"
|
||||
speed="2"
|
||||
autoplay="true"
|
||||
loop="true"
|
||||
markers="1.5:Installation,3.2:Configuration,5.8:Testing"
|
||||
*/>}}
|
||||
```
|
||||
|
||||
{{< asciinema
|
||||
file="casts/demo.cast"
|
||||
theme="dracula"
|
||||
speed="2"
|
||||
autoplay="true"
|
||||
loop="true"
|
||||
markers="1.5:Installation,3.2:Configuration,5.8:Testing"
|
||||
>}}
|
||||
|
||||
## パラメータ
|
||||
|
||||
| パラメータ | 型 | デフォルト | 説明 |
|
||||
|-----------|----|-----------|------|
|
||||
| `file` | string | - | .cast ファイルパス（必須）。ローカルファイル、絶対パス、リモート URL をサポート |
|
||||
| `theme` | string | `"asciinema"` | プレイヤーテーマ |
|
||||
| `speed` | number | `1` | 再生速度倍率 |
|
||||
| `autoplay` | boolean | `false` | 自動再生 |
|
||||
| `loop` | boolean | `false` | ループ再生 |
|
||||
| `poster` | string | `""` | 再生開始前に表示されるポスター（プレビューフレーム）。NPT表記法をサポート（例："npt:1:23"） |
|
||||
| `markers` | string | `""` | カンマ区切りの時間マーカー。形式："時間:ラベル" または "時間"のみ（例："1.5:Installation,3.2:Configuration,5.8"） |
|
||||
@@ -0,0 +1,124 @@
|
||||
---
|
||||
title: "Asciinema Player Component"
|
||||
linktitle: "Asciinema Player"
|
||||
sidebar:
|
||||
exclude: true
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
The asciinema shortcode allows you to embed terminal recordings created with [asciinema](https://asciinema.org/) in your Hugo site. It provides a rich terminal player with features like playback controls, speed adjustment, and theme customization.
|
||||
|
||||
## Basic Usage
|
||||
|
||||
The asciinema shortcode supports both local `.cast` files and remote URLs. Here are the different ways to use local files:
|
||||
|
||||
### Local Files
|
||||
|
||||
**Method 1: Assets directory (recommended)**
|
||||
Place your cast files in the `assets/` directory of your Hugo site:
|
||||
|
||||
```
|
||||
your-site/
|
||||
├── assets/
|
||||
│ └── demo.cast
|
||||
└── content/
|
||||
└── my-page.md
|
||||
```
|
||||
|
||||
In your markdown file:
|
||||
```markdown
|
||||
{{</* asciinema file="demo.cast" */>}}
|
||||
```
|
||||
|
||||
**Method 2: Static directory**
|
||||
Place your cast files in the `static/` directory:
|
||||
|
||||
```
|
||||
your-site/
|
||||
├── static/
|
||||
│ └── demo.cast
|
||||
└── content/
|
||||
└── my-page.md
|
||||
```
|
||||
|
||||
In your markdown file:
|
||||
```markdown
|
||||
{{</* asciinema file="demo.cast" */>}}
|
||||
```
|
||||
|
||||
**Method 3: Page bundle**
|
||||
For page bundles, place cast files alongside your markdown file:
|
||||
|
||||
```
|
||||
your-site/
|
||||
└── content/
|
||||
└── my-page/
|
||||
├── index.md
|
||||
└── demo.cast
|
||||
```
|
||||
|
||||
In your markdown file:
|
||||
```markdown
|
||||
{{</* asciinema file="demo.cast" */>}}
|
||||
```
|
||||
|
||||
{{< asciinema file="casts/demo.cast" >}}
|
||||
|
||||
### Remote Files
|
||||
|
||||
You can also use cast files from any remote URL:
|
||||
|
||||
```markdown
|
||||
{{</* asciinema file="https://asciinema.org/a/85R4jTtjKVRIYXTcKCNq0vzYH.cast" */>}}
|
||||
{{</* asciinema file="https://example.com/demo.cast" */>}}
|
||||
```
|
||||
|
||||
{{< asciinema file="https://asciinema.org/a/85R4jTtjKVRIYXTcKCNq0vzYH.cast" >}}
|
||||
|
||||
### How File Lookup Works
|
||||
|
||||
The shortcode automatically finds your cast files by looking in this order:
|
||||
1. **Page bundle resources** (if using page bundles)
|
||||
2. **Global assets directory** (`assets/`)
|
||||
3. **Static directory** (`static/`)
|
||||
4. **Remote URLs** (if the path starts with `http://` or `https://`)
|
||||
|
||||
If a file is not found, Hugo will show a helpful error message telling you where to place the file.
|
||||
|
||||
## Advanced Demo
|
||||
|
||||
Here's a more advanced example showcasing all available parameters:
|
||||
|
||||
```markdown
|
||||
{{</* asciinema
|
||||
file="demo.cast"
|
||||
theme="dracula"
|
||||
speed="2"
|
||||
autoplay="true"
|
||||
loop="true"
|
||||
markers="1.5:Installation,3.2:Configuration,5.8:Testing"
|
||||
*/>}}
|
||||
```
|
||||
|
||||
{{< asciinema
|
||||
file="casts/demo.cast"
|
||||
theme="dracula"
|
||||
speed="2"
|
||||
autoplay="true"
|
||||
loop="true"
|
||||
markers="1.5:Installation,3.2:Configuration,5.8:Testing"
|
||||
>}}
|
||||
|
||||
## Parameters
|
||||
|
||||
| Parameter | Type | Default | Description |
|
||||
|-----------|------|---------|-------------|
|
||||
| `file` | string | - | Path to the .cast file (required). Supports local files, absolute paths, and remote URLs |
|
||||
| `theme` | string | `"asciinema"` | Player theme |
|
||||
| `speed` | number | `1` | Playback speed multiplier |
|
||||
| `autoplay` | boolean | `false` | Start playing automatically |
|
||||
| `loop` | boolean | `false` | Loop the recording |
|
||||
| `poster` | string | `""` | Poster (a preview frame) to display until the playback is started. Supports NPT notation (e.g., "npt:1:23") |
|
||||
| `markers` | string | `""` | Comma-separated time markers. Format: "time:label" or just "time" (e.g., "1.5:Installation,3.2:Configuration,5.8") |
|
||||
|
||||
@@ -0,0 +1,121 @@
|
||||
---
|
||||
title: "Asciinema Player 组件"
|
||||
linktitle: "Asciinema Player"
|
||||
sidebar:
|
||||
exclude: true
|
||||
---
|
||||
|
||||
asciinema shortcode 允许你在 Hugo 站点中嵌入使用 [asciinema](https://asciinema.org/) 创建的终端录制。它提供了一个功能丰富的终端播放器，具有播放控制、速度调整和主题自定义等功能。
|
||||
|
||||
## 基本用法
|
||||
|
||||
asciinema shortcode 支持本地 `.cast` 文件和远程 URL。以下是使用本地文件的不同方法：
|
||||
|
||||
### 本地文件
|
||||
|
||||
**方法 1：Assets 目录（推荐）**
|
||||
将你的 cast 文件放在 Hugo 站点的 `assets/` 目录中：
|
||||
|
||||
```
|
||||
your-site/
|
||||
├── assets/
|
||||
│ └── demo.cast
|
||||
└── content/
|
||||
└── my-page.md
|
||||
```
|
||||
|
||||
在你的 markdown 文件中：
|
||||
```markdown
|
||||
{{</* asciinema file="demo.cast" */>}}
|
||||
```
|
||||
|
||||
**方法 2：Static 目录**
|
||||
将你的 cast 文件放在 `static/` 目录中：
|
||||
|
||||
```
|
||||
your-site/
|
||||
├── static/
|
||||
│ └── demo.cast
|
||||
└── content/
|
||||
└── my-page.md
|
||||
```
|
||||
|
||||
在你的 markdown 文件中：
|
||||
```markdown
|
||||
{{</* asciinema file="demo.cast" */>}}
|
||||
```
|
||||
|
||||
**方法 3：页面包**
|
||||
对于页面包，将 cast 文件与你的 markdown 文件放在一起：
|
||||
|
||||
```
|
||||
your-site/
|
||||
└── content/
|
||||
└── my-page/
|
||||
├── index.md
|
||||
└── demo.cast
|
||||
```
|
||||
|
||||
在你的 markdown 文件中：
|
||||
```markdown
|
||||
{{</* asciinema file="demo.cast" */>}}
|
||||
```
|
||||
|
||||
{{< asciinema file="casts/demo.cast" >}}
|
||||
|
||||
### 远程文件
|
||||
|
||||
你也可以使用来自任何远程 URL 的 cast 文件：
|
||||
|
||||
```markdown
|
||||
{{</* asciinema file="https://asciinema.org/a/85R4jTtjKVRIYXTcKCNq0vzYH.cast" */>}}
|
||||
{{</* asciinema file="https://example.com/demo.cast" */>}}
|
||||
```
|
||||
|
||||
{{< asciinema file="https://asciinema.org/a/85R4jTtjKVRIYXTcKCNq0vzYH.cast" >}}
|
||||
|
||||
### 文件查找机制
|
||||
|
||||
shortcode 会按以下顺序自动查找你的 cast 文件：
|
||||
1. **页面包资源**（如果使用页面包）
|
||||
2. **全局 assets 目录**（`assets/`）
|
||||
3. **Static 目录**（`static/`）
|
||||
4. **远程 URL**（如果路径以 `http://` 或 `https://` 开头）
|
||||
|
||||
如果找不到文件，Hugo 会显示有用的错误信息，告诉你应该将文件放在哪里。
|
||||
|
||||
## 高级演示
|
||||
|
||||
这是一个展示所有可用参数的高级示例：
|
||||
|
||||
```markdown
|
||||
{{</* asciinema
|
||||
file="demo.cast"
|
||||
theme="dracula"
|
||||
speed="2"
|
||||
autoplay="true"
|
||||
loop="true"
|
||||
markers="1.5:Installation,3.2:Configuration,5.8:Testing"
|
||||
*/>}}
|
||||
```
|
||||
|
||||
{{< asciinema
|
||||
file="casts/demo.cast"
|
||||
theme="dracula"
|
||||
speed="2"
|
||||
autoplay="true"
|
||||
loop="true"
|
||||
markers="1.5:Installation,3.2:Configuration,5.8:Testing"
|
||||
>}}
|
||||
|
||||
## 参数
|
||||
|
||||
| 参数 | 类型 | 默认值 | 描述 |
|
||||
|------|------|--------|------|
|
||||
| `file` | string | - | .cast 文件路径（必需）。支持本地文件、绝对路径和远程 URL |
|
||||
| `theme` | string | `"asciinema"` | 播放器主题 |
|
||||
| `speed` | number | `1` | 播放速度倍数 |
|
||||
| `autoplay` | boolean | `false` | 自动开始播放 |
|
||||
| `loop` | boolean | `false` | 循环播放 |
|
||||
| `poster` | string | `""` | 播放开始前显示的海报（预览帧）。支持 NPT 表示法（如 "npt:1:23"） |
|
||||
| `markers` | string | `""` | 逗号分隔的时间标记。格式："时间:标签" 或仅 "时间"（如 "1.5:Installation,3.2:Configuration,5.8"） |
|
||||
@@ -0,0 +1,149 @@
|
||||
---
|
||||
title: کامپوننت Callout
|
||||
linkTitle: Callout
|
||||
aliases:
|
||||
- callouts
|
||||
prev: /docs/guide/shortcodes
|
||||
---
|
||||
|
||||
یک کامپوننت داخلی برای نمایش اطلاعات مهم به خواننده.
|
||||
|
||||
<!--more-->
|
||||
|
||||
> [!NOTE]
|
||||
> [هشدارهای سبک GitHub](../../markdown#alerts) از [نسخه 0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0) پشتیبانی می‌شوند.
|
||||
> این ویژگی از سینتکس Markdown برای رندر کردن callout استفاده می‌کند که باعث بهبود قابلیت حمل و خوانایی محتوا می‌شود.
|
||||
|
||||
## أمثلة
|
||||
|
||||
{{< callout >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="info" >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="error" >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="important" >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
### تقصير
|
||||
|
||||
{{< callout >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout */>}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Info
|
||||
|
||||
{{< callout type="info" >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="info" */>}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Warning
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="warning" */>}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Error
|
||||
|
||||
{{< callout type="error" >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="error" */>}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Important
|
||||
|
||||
{{< callout type="important" >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="important" */>}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### أيقونة مخصصة
|
||||
|
||||
{{< callout icon="sparkles" >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout icon="sparkles" */>}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
{{< callout type="important" icon="sparkles" >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="important" icon="sparkles" */>}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### الرموز التعبيرية
|
||||
|
||||
{{< callout emoji="🌐" >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout emoji="🌐" */>}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
{{< callout type="info" emoji="ℹ️" >}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="info" emoji="ℹ️" */>}}
|
||||
**الإشارة** عبارة عن جزء قصير من النص يهدف إلى جذب الانتباه.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
## خيارات
|
||||
|
||||
| المعلمة | وصف |
|
||||
|---------|---------------------------------------------------------------------|
|
||||
| `type` | نوع الاستدعاء. (افتراضي، `info`، `warning`، `error`) |
|
||||
| `emoji` | الرمز التعبيري الذي يظهر قبل المكالمة. |
|
||||
| `icon` | رمز تعبيري للنداء (مرتبط بالنوع أو يمكن أن يكون رمز تعبيري مخصصًا). |
|
||||
@@ -0,0 +1,149 @@
|
||||
---
|
||||
title: コールアウトコンポーネント
|
||||
linkTitle: コールアウト
|
||||
aliases:
|
||||
- callouts
|
||||
prev: /docs/guide/shortcodes
|
||||
---
|
||||
|
||||
読者に重要な情報を表示するための組み込みコンポーネントです。
|
||||
|
||||
<!--more-->
|
||||
|
||||
> [!NOTE]
|
||||
> [GitHubスタイルのアラート](../../markdown#alerts)は[v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0)以降でサポートされています。
|
||||
> これはMarkdown構文を活用してコールアウトをレンダリングするため、コンテンツの移植性と可読性が向上します。
|
||||
|
||||
## 例
|
||||
|
||||
{{< callout >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="info" >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="error" >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="important" >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
### デフォルト
|
||||
|
||||
{{< callout >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout */>}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Info
|
||||
|
||||
{{< callout type="info" >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="info" */>}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Warning
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="warning" */>}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Error
|
||||
|
||||
{{< callout type="error" >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="error" */>}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Important
|
||||
|
||||
{{< callout type="important" >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="important" */>}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### カスタムアイコン
|
||||
|
||||
{{< callout icon="sparkles" >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout icon="sparkles" */>}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
{{< callout type="important" icon="sparkles" >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="important" icon="sparkles" */>}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### 絵文字
|
||||
|
||||
{{< callout emoji="🌐" >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout emoji="🌐" */>}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
{{< callout type="info" emoji="ℹ️" >}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="info" emoji="ℹ️" */>}}
|
||||
**コールアウト** は注目を集めることを目的とした短いテキストです。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
## オプション
|
||||
|
||||
| パラメータ | 説明 |
|
||||
|---------|---------------------------------------------|
|
||||
| `type` | コールアウトのタイプ。(デフォルト、`info`、`warning`、`error`) |
|
||||
| `emoji` | コールアウトの前に表示される絵文字。 |
|
||||
| `icon` | コールアウトの絵文字 (タイプに関連、またはカスタム絵文字にすることもできます)。 |
|
||||
@@ -0,0 +1,149 @@
|
||||
---
|
||||
title: Callout Component
|
||||
linkTitle: Callout
|
||||
aliases:
|
||||
- callouts
|
||||
prev: /docs/guide/shortcodes
|
||||
---
|
||||
|
||||
A built-in component to show important information to the reader.
|
||||
|
||||
<!--more-->
|
||||
|
||||
> [!NOTE]
|
||||
> [GitHub-style alerts](../../markdown#alerts) are supported since [v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0).
|
||||
> It leverages Markdown syntax to render the callout which ensures better portability and readability of the content.
|
||||
|
||||
## Examples
|
||||
|
||||
{{< callout >}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="info" >}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="error" >}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="important" >}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{< /callout >}}
|
||||
|
||||
### Default
|
||||
|
||||
{{< callout >}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout */>}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Info
|
||||
|
||||
{{< callout type="info" >}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="info" */>}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Warning
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="warning" */>}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Error
|
||||
|
||||
{{< callout type="error" >}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="error" */>}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Important
|
||||
|
||||
{{< callout type="important" >}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="important" */>}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Custom Icon
|
||||
|
||||
{{< callout icon="sparkles" >}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout icon="sparkles" */>}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
{{< callout type="important" icon="sparkles" >}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="important" icon="sparkles" */>}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Emoji
|
||||
|
||||
{{< callout emoji="🌐" >}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout emoji="🌐" */>}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
{{< callout type="info" emoji="ℹ️" >}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="info" emoji="ℹ️" */>}}
|
||||
A **callout** is a short piece of text intended to attract attention.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|---------------------------------------------------------------------------------|
|
||||
| `type` | The type of callout. (default, `info`, `warning`, `error`, `important`) |
|
||||
| `emoji` | The emoji to show before the callout. |
|
||||
| `icon` | The icon to show before the callout. (related to type or can be a custom icon). |
|
||||
@@ -0,0 +1,149 @@
|
||||
---
|
||||
title: 提示框组件
|
||||
linkTitle: 提示框
|
||||
aliases:
|
||||
- callouts
|
||||
prev: /docs/guide/shortcodes
|
||||
---
|
||||
|
||||
一个内置组件，用于向读者展示重要信息。
|
||||
|
||||
<!--more-->
|
||||
|
||||
> [!NOTE]
|
||||
> 自 [v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0) 起支持 [GitHub风格提示框](../../markdown#alerts)。
|
||||
> 它利用Markdown语法渲染提示框，确保内容具有更好的可移植性和可读性。
|
||||
|
||||
## 示例
|
||||
|
||||
{{< callout >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="info" >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="error" >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="important" >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
### 默认
|
||||
|
||||
{{< callout >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout */>}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Info
|
||||
|
||||
{{< callout type="info" >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="info" */>}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Warning
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="warning" */>}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Error
|
||||
|
||||
{{< callout type="error" >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="error" */>}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### Important
|
||||
|
||||
{{< callout type="important" >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="important" */>}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### 自定义图标
|
||||
|
||||
{{< callout icon="sparkles" >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout icon="sparkles" */>}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
{{< callout type="important" icon="sparkles" >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="important" icon="sparkles" */>}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### 表情符号
|
||||
|
||||
{{< callout emoji="🌐" >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout emoji="🌐" */>}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
{{< callout type="info" emoji="ℹ️" >}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="info" emoji="ℹ️" */>}}
|
||||
**标注** 是一小段旨在吸引注意力的文字。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
## 选项
|
||||
|
||||
| 范围 | 描述 |
|
||||
|---------|----------------------------|
|
||||
| `type` | 标注的类型。（默认、“信息”、“警告”、“错误”） |
|
||||
| `emoji` | 标注前显示的表情符号。 |
|
||||
| `icon` | 标注的表情符号（与类型相关或可以是自定义表情符号）。 |
|
||||
@@ -0,0 +1,116 @@
|
||||
---
|
||||
title: کامپوننت کارت‌ها
|
||||
linkTitle: کارت‌ها
|
||||
---
|
||||
|
||||
## مثال
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="../callout" title="کالاوت" icon="warning" >}}
|
||||
{{< card link="../callout" title="کارت با تگ" icon="tag" tag="تگ سفارشی">}}
|
||||
{{< card link="/" title="بدون آیکون" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="/" title="کارت تصویری" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="تصویر اینترنتی" >}}
|
||||
{{< card link="/" title="تصویر محلی" image="/images/card-image-unprocessed.jpg" subtitle="تصویر خام در دایرکتوری استاتیک." >}}
|
||||
{{< card link="/" title="تصویر محلی" image="images/space.jpg" subtitle="تصویر در دایرکتوری assets، پردازش شده توسط هوگو." method="Resize" options="600x q80 webp" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
## نحوه استفاده
|
||||
|
||||
```
|
||||
{{</* cards */>}}
|
||||
{{</* card link="../callout" title="کالاوت" icon="warning" */>}}
|
||||
{{</* card link="../callout" title="کارت با تگ" icon="tag" tag= "تگ سفارشی" */>}}
|
||||
{{</* card link="/" title="بدون آیکون" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
```
|
||||
{{</* cards */>}}
|
||||
{{</* card link="/" title="کارت تصویری" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="تصویر لنداسکیپ از Unsplash" */>}}
|
||||
{{</* card link="/" title="تصویر محلی" image="/images/card-image-unprocessed.jpg" subtitle="تصویر خام در دایرکتوری استاتیک." */>}}
|
||||
{{</* card link="/" title="تصویر محلی" image="images/space.jpg" subtitle="تصویر در دایرکتوری assets، پردازش شده توسط هوگو." method="Resize" options="600x q80 webp" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
## پارامترهای کارت
|
||||
|
||||
| پارامتر | توضیحات |
|
||||
|------------|-----------------------------------------------------------|
|
||||
| `link` | URL (داخلی یا خارجی). |
|
||||
| `title` | عنوان کارت. |
|
||||
| `subtitle` | زیرعنوان (پشتیبانی از Markdown). |
|
||||
| `icon` | نام آیکون. |
|
||||
| `tag` | متن تگ. |
|
||||
| `tagType` | نوع العلامة: default (رمادي)، `info`، `warning` و`error`. |
|
||||
|
||||
## کارت تصویری
|
||||
|
||||
علاوه بر این، کارت از افزودن تصویر و پردازش آن از طریق این پارامترها پشتیبانی می‌کند:
|
||||
|
||||
| پارامتر | توضیحات |
|
||||
|--------------|---------------------------------------------------|
|
||||
| `image` | آدرس تصویر کارت را مشخص می‌کند. |
|
||||
| `method` | روش پردازش تصویر هوگو را تنظیم می‌کند. |
|
||||
| `options` | تنظیمات پردازش تصویر هوگو را پیکربندی می‌کند. |
|
||||
| `imageStyle` | يتم استخدامه لملء سمة النمط الخاصة بعلامة الصورة. |
|
||||
|
||||
کارت از سه نوع تصویر پشتیبانی می‌کند:
|
||||
|
||||
1. تصویر راه‌دور: URL کامل در پارامتر `image`.
|
||||
2. تصویر استاتیک: از مسیر نسبی در دایرکتوری `static/` هوگو استفاده کنید.
|
||||
3. تصویر پردازش شده: از مسیر نسبی در دایرکتوری `assets/` هوگو استفاده کنید.
|
||||
|
||||
Hextra به صورت خودکار تشخیص می‌دهد که آیا پردازش تصویر در زمان ساخت نیاز است و پارامتر `options` یا تنظیمات پیش‌فرض (Resize، 800x، کیفیت 80، فرمت WebP) را اعمال می‌کند.
|
||||
در حال حاضر از این `method`ها پشتیبانی می‌کند: `Resize`, `Fit`, `Fill` و `Crop`.
|
||||
|
||||
برای اطلاعات بیشتر در مورد دستورات، روش‌ها و تنظیمات پردازش تصویر هوگو، به [مستندات پردازش تصویر](https://gohugo.io/content-management/image-processing/) آنها مراجعه کنید.
|
||||
|
||||
## تگ‌ها
|
||||
|
||||
کارت از افزودن تگ‌ها پشتیبانی می‌کند که می‌تواند برای نمایش اطلاعات وضعیت اضافی مفید باشد.
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="../callout" title="کارت با تگ پیش‌فرض" tag="متن تگ" >}}
|
||||
{{< card link="../callout" title="کارت با تگ خطا" tag="متن تگ" tagType="error" >}}
|
||||
{{< card link="../callout" title="کارت با تگ اطلاعات" tag="متن تگ" tagType="info" >}}
|
||||
{{< card link="../callout" title="کارت با تگ هشدار" tag="متن تگ" tagType="warning" >}}
|
||||
{{< card link="/" title="کارت تصویری" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="تصویر اینترنتی" tag="متن تگ" tagType="error" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
```
|
||||
{{</* cards */>}}
|
||||
{{</* card link="../callout" title="کارت با رنگ تگ پیش‌فرض" tag="متن تگ" */>}}
|
||||
{{</* card link="../callout" title="کارت با تگ قرمز پیش‌فرض" tag="متن تگ" tagType="error" */>}}
|
||||
{{</* card link="../callout" title="کارت با تگ آبی" tag="متن تگ" tagType="info" */>}}
|
||||
{{</* card link="../callout" title="کارت با تگ زرد" tag="متن تگ" tagType="warning" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
## ستون‌ها
|
||||
|
||||
می‌توانید حداکثر تعداد ستون‌هایی که کارت‌ها می‌توانند در آن قرار بگیرند را با ارسال پارامتر `cols` به شورتکد `cards` مشخص کنید. توجه داشته باشید که ستون‌ها در صفحه‌های کوچکتر همچنان جمع می‌شوند.
|
||||
|
||||
{{< cards cols="1" >}}
|
||||
{{< card link="/" title="کارت بالا" >}}
|
||||
{{< card link="/" title="کارت پایین" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
{{< cards cols="2" >}}
|
||||
{{< card link="/" title="کارت چپ" >}}
|
||||
{{< card link="/" title="کارت راست" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
```
|
||||
{{</* cards cols="1" */>}}
|
||||
{{</* card link="/" title="کارت بالا" */>}}
|
||||
{{</* card link="/" title="کارت پایین" */>}}
|
||||
{{</* /cards */>}}
|
||||
|
||||
{{</* cards cols="2" */>}}
|
||||
{{</* card link="/" title="کارت چپ" */>}}
|
||||
{{</* card link="/" title="کارت راست" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
@@ -0,0 +1,116 @@
|
||||
---
|
||||
title: カードコンポーネント
|
||||
linkTitle: カード
|
||||
---
|
||||
|
||||
## 例
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="../callout" title="コールアウト" icon="warning" >}}
|
||||
{{< card link="../callout" title="タグ付きカード" icon="tag" tag="カスタムタグ">}}
|
||||
{{< card link="/" title="アイコンなし" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="/" title="画像カード" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="インターネット画像" >}}
|
||||
{{< card link="/" title="ローカル画像" image="/images/card-image-unprocessed.jpg" subtitle="staticディレクトリ下の未加工画像" >}}
|
||||
{{< card link="/" title="ローカル画像" image="images/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み" method="Resize" options="600x q80 webp" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
## 使用方法
|
||||
|
||||
```
|
||||
{{</* cards */>}}
|
||||
{{</* card link="../callout" title="コールアウト" icon="warning" */>}}
|
||||
{{</* card link="../callout" title="タグ付きカード" icon="tag" tag= "カスタムタグ" */>}}
|
||||
{{</* card link="/" title="アイコンなし" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
```
|
||||
{{</* cards */>}}
|
||||
{{</* card link="/" title="画像カード" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplashの風景画像" */>}}
|
||||
{{</* card link="/" title="ローカル画像" image="/images/card-image-unprocessed.jpg" subtitle="staticディレクトリ下の未加工画像" */>}}
|
||||
{{</* card link="/" title="ローカル画像" image="images/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み" method="Resize" options="600x q80 webp" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
## カードパラメータ
|
||||
|
||||
| パラメータ | 説明 |
|
||||
|------------|-----------------------------------------------|
|
||||
| `link` | URL（内部または外部）。 |
|
||||
| `title` | カードのタイトル見出し。 |
|
||||
| `subtitle` | サブタイトル見出し（Markdown対応）。 |
|
||||
| `icon` | アイコン名。 |
|
||||
| `tag` | タグのテキスト。 |
|
||||
| `tagType` | タグのタイプ: デフォルト (グレー)、`info`、`warning`、`error`。 |
|
||||
|
||||
## 画像カード
|
||||
|
||||
さらに、カードには画像の追加と以下のパラメータを通じた処理がサポートされています:
|
||||
|
||||
| パラメータ | 説明 |
|
||||
|--------------|----------------------------|
|
||||
| `image` | カードの画像URLを指定します。 |
|
||||
| `method` | Hugoの画像処理方法を設定します。 |
|
||||
| `options` | Hugoの画像処理オプションを設定します。 |
|
||||
| `imageStyle` | 画像タグのスタイル属性を入力するために使用されます。 |
|
||||
|
||||
カードは3種類の画像をサポートします:
|
||||
|
||||
1. リモート画像: `image`パラメータに完全なURLを指定。
|
||||
2. 静的画像: Hugoの`static/`ディレクトリ内の相対パスを使用。
|
||||
3. 処理済み画像: Hugoの`assets/`ディレクトリ内の相対パスを使用。
|
||||
|
||||
Hextraはビルド時に画像処理が必要か自動検出し、`options`パラメータまたはデフォルト設定（Resize、800x、品質80、WebP形式）を適用します。
|
||||
現在サポートされている`method`: `Resize`、`Fit`、`Fill`、`Crop`。
|
||||
|
||||
Hugoの組み込み画像処理コマンド、方法、オプションの詳細については、[画像処理ドキュメント](https://gohugo.io/content-management/image-processing/)を参照してください。
|
||||
|
||||
## タグ
|
||||
|
||||
カードはタグの追加をサポートしており、追加のステータス情報を表示するのに便利です。
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="../callout" title="デフォルトタグ付きカード" tag="タグテキスト" >}}
|
||||
{{< card link="../callout" title="エラータグ付きカード" tag="タグテキスト" tagType="error" >}}
|
||||
{{< card link="../callout" title="情報タグ付きカード" tag="タグテキスト" tagType="info" >}}
|
||||
{{< card link="../callout" title="警告タグ付きカード" tag="タグテキスト" tagType="warning" >}}
|
||||
{{< card link="/" title="画像カード" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="インターネット画像" tag="タグテキスト" tagType="error" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
```
|
||||
{{</* cards */>}}
|
||||
{{</* card link="../callout" title="デフォルト色タグ付きカード" tag="タグテキスト" */>}}
|
||||
{{</* card link="../callout" title="赤タグ付きカード" tag="タグテキスト" tagType="error" */>}}
|
||||
{{</* card link="../callout" title="青タグ付きカード" tag="タグテキスト" tagType="info" */>}}
|
||||
{{</* card link="../callout" title="黄タグ付きカード" tag="タグテキスト" tagType="warning" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
## 列
|
||||
|
||||
`cards`ショートコードに`cols`パラメータを渡すことで、カードが広がる最大列数を指定できます。ただし、小さい画面では列は折りたたまれます。
|
||||
|
||||
{{< cards cols="1" >}}
|
||||
{{< card link="/" title="上部カード" >}}
|
||||
{{< card link="/" title="下部カード" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
{{< cards cols="2" >}}
|
||||
{{< card link="/" title="左カード" >}}
|
||||
{{< card link="/" title="右カード" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
```
|
||||
{{</* cards cols="1" */>}}
|
||||
{{</* card link="/" title="上部カード" */>}}
|
||||
{{</* card link="/" title="下部カード" */>}}
|
||||
{{</* /cards */>}}
|
||||
|
||||
{{</* cards cols="2" */>}}
|
||||
{{</* card link="/" title="左カード" */>}}
|
||||
{{</* card link="/" title="右カード" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
@@ -0,0 +1,126 @@
|
||||
---
|
||||
title: Cards Component
|
||||
linkTitle: Cards
|
||||
---
|
||||
|
||||
## Example
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="../callout" title="Callout" icon="warning" >}}
|
||||
{{< card link="../callout" title="Card with tag" icon="tag" tag="custom tag">}}
|
||||
{{< card link="/" title="No Icon" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="/" title="Image Card" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="Internet Image" >}}
|
||||
{{< card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." >}}
|
||||
{{< card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
## Usage
|
||||
|
||||
```
|
||||
{{</* cards */>}}
|
||||
{{</* card link="../callout" title="Callout" icon="warning" */>}}
|
||||
{{</* card link="../callout" title="Card with tag" icon="tag" tag= "A custom tag" */>}}
|
||||
{{</* card link="/" title="No Icon" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
```
|
||||
{{</* cards */>}}
|
||||
{{</* card link="/" title="Image Card" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash Landscape" */>}}
|
||||
{{</* card link="/" title="Local Image" image="/images/card-image-unprocessed.jpg" subtitle="Raw image under static directory." */>}}
|
||||
{{</* card link="/" title="Local Image" image="images/space.jpg" subtitle="Image under assets directory, processed by Hugo." method="Resize" options="600x q80 webp" */>}}
|
||||
{{</* card link="/" title="Custom Alt Text" image="images/space.jpg" alt="A beautiful view of space with stars and galaxies" subtitle="Image with custom alt text for accessibility." */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
## Card Parameters
|
||||
|
||||
| Parameter | Description |
|
||||
| ---------- | -------------------------------------------------------------------------- |
|
||||
| `link` | URL (internal or external). |
|
||||
| `title` | Title heading for the card. |
|
||||
| `subtitle` | Subtitle heading (supports Markdown). |
|
||||
| `icon` | Name of the icon. See [icons]({{% relRef "icon" %}}) for more information. |
|
||||
|
||||
## Image Card
|
||||
|
||||
Additionally, the card supports adding image and processing through these parameters:
|
||||
|
||||
| Parameter | Description |
|
||||
| ------------ | ------------------------------------------------------------------- |
|
||||
| `image` | Specifies the image URL for the card. |
|
||||
| `alt` | Alternative text for the image (defaults to title if not provided). |
|
||||
| `method` | Sets Hugo's image processing method. |
|
||||
| `options` | Configures Hugo's image processing options. |
|
||||
| `imageStyle` | Used to fill the style attribute of the image tag. |
|
||||
|
||||
Card supports three kinds of images:
|
||||
|
||||
1. Remote image: the full URL in the `image` parameter.
|
||||
2. Static image: use the relative path in Hugo's `static/` directory.
|
||||
3. Processed image: use the relative path in Hugo's `assets/` directory.
|
||||
|
||||
Hextra auto-detects if image processing is needed during build and applies the `options` parameter or default settings (Resize, 800x, Quality 80, WebP Format).
|
||||
It currently supports these `method`: `Resize`, `Fit`, `Fill` and `Crop`.
|
||||
|
||||
For more on Hugo's built in image processing commands, methods, and options see their [Image Processing Documentation](https://gohugo.io/content-management/image-processing/).
|
||||
|
||||
## Tags
|
||||
|
||||
Card supports adding tags which could be useful to show extra status information.
|
||||
|
||||
| Parameter | Description |
|
||||
| ----------- | -------------------------------------------------------------------------------------- |
|
||||
| `tag` | Text in tag. |
|
||||
| `tagColor` | Color of the tag. See [badges]({{% relRef "others/#badges" %}}) for more information. |
|
||||
| `tagIcon` | Icon of the tag. See [badges]({{% relRef "others/#badges" %}}) for more information. |
|
||||
| `tagBorder` | Border of the tag. See [badges]({{% relRef "others/#badges" %}}) for more information. |
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="../callout" title="Card with default tag" tag="tag text" >}}
|
||||
{{< card link="../callout" title="Card with red tag" tag="tag text" tagColor="red" >}}
|
||||
{{< card link="../callout" title="Card with blue tag" tag="tag text" tagColor="blue" >}}
|
||||
{{< card link="../callout" title="Card with yellow tag" tag="tag text" tagColor="yellow" tagIcon="sparkles" tagBorder=false >}}
|
||||
{{< card link="/" title="Image Card" image="/images/card-image-unprocessed.jpg" subtitle="Image" tag="tag text" tagColor="green" >}}
|
||||
{{< card link="/" title="Image Card" image="images/space.jpg" subtitle="Image" tag="tag text" tagColor="purple" tagIcon="sparkles" tagBorder=false >}}
|
||||
{{< /cards >}}
|
||||
|
||||
```
|
||||
{{</* cards */>}}
|
||||
{{</* card link="../callout" title="Card with default tag color" tag="tag text" */>}}
|
||||
{{</* card link="../callout" title="Card with red tag" tag="tag text" tagColor="red" */>}}
|
||||
{{</* card link="../callout" title="Card with blue tag" tag="tag text" tagColor="blue" */>}}
|
||||
{{</* card link="../callout" title="Card with yellow tag" tag="tag text" tagColor="yellow" tagIcon="sparkles" tagBorder=false */>}}
|
||||
{{</* card link="/" title="Image Card" image="/images/card-image-unprocessed.jpg" subtitle="Image" tag="tag text" tagColor="green" */>}}
|
||||
{{</* card link="/" title="Image Card" image="images/space.jpg" subtitle="Image" tag="tag text" tagColor="purple" tagIcon="sparkles" tagBorder=false */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
## Columns
|
||||
|
||||
You can specify the maximum number of columns for cards to span by passing the `cols` parameter to the `cards` shortcode. Note that columns will still be collapsed on smaller screens.
|
||||
|
||||
{{< cards cols="1" >}}
|
||||
{{< card link="/" title="Top Card" >}}
|
||||
{{< card link="/" title="Bottom Card" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
{{< cards cols="2" >}}
|
||||
{{< card link="/" title="Left Card" >}}
|
||||
{{< card link="/" title="Right Card" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
```
|
||||
{{</* cards cols="1" */>}}
|
||||
{{</* card link="/" title="Top Card" */>}}
|
||||
{{</* card link="/" title="Bottom Card" */>}}
|
||||
{{</* /cards */>}}
|
||||
|
||||
{{</* cards cols="2" */>}}
|
||||
{{</* card link="/" title="Left Card" */>}}
|
||||
{{</* card link="/" title="Right Card" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
@@ -0,0 +1,116 @@
|
||||
---
|
||||
title: 卡片组件
|
||||
linkTitle: 卡片
|
||||
---
|
||||
|
||||
## 示例
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="../callout" title="提示框" icon="warning" >}}
|
||||
{{< card link="../callout" title="带标签的卡片" icon="tag" tag="自定义标签">}}
|
||||
{{< card link="/" title="无图标" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="/" title="图片卡片" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="网络图片" >}}
|
||||
{{< card link="/" title="本地图片" image="/images/card-image-unprocessed.jpg" subtitle="静态目录下的原始图片。" >}}
|
||||
{{< card link="/" title="本地图片" image="images/space.jpg" subtitle="资源目录下的图片，经过Hugo处理。" method="Resize" options="600x q80 webp" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
## 使用方法
|
||||
|
||||
```
|
||||
{{</* cards */>}}
|
||||
{{</* card link="../callout" title="提示框" icon="warning" */>}}
|
||||
{{</* card link="../callout" title="带标签的卡片" icon="tag" tag= "自定义标签" */>}}
|
||||
{{</* card link="/" title="无图标" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
```
|
||||
{{</* cards */>}}
|
||||
{{</* card link="/" title="图片卡片" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash风景图" */>}}
|
||||
{{</* card link="/" title="本地图片" image="/images/card-image-unprocessed.jpg" subtitle="静态目录下的原始图片。" */>}}
|
||||
{{</* card link="/" title="本地图片" image="images/space.jpg" subtitle="资源目录下的图片，经过Hugo处理。" method="Resize" options="600x q80 webp" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
## 卡片参数
|
||||
|
||||
| 参数 | 描述 |
|
||||
|------------|-----------------------------------------|
|
||||
| `link` | 链接地址（内部或外部）。 |
|
||||
| `title` | 卡片的标题。 |
|
||||
| `subtitle` | 卡片的副标题（支持Markdown）。 |
|
||||
| `icon` | 图标名称。 |
|
||||
| `tag` | 标签文本。 |
|
||||
| `tagType` | 标签类型：默认（灰色）、`info`、`warning` 和 `error`。 |
|
||||
|
||||
## 图片卡片
|
||||
|
||||
此外，卡片还支持通过以下参数添加图片并进行处理：
|
||||
|
||||
| 参数 | 描述 |
|
||||
|--------------|-------------------|
|
||||
| `image` | 指定卡片的图片URL。 |
|
||||
| `method` | 设置Hugo的图片处理方法。 |
|
||||
| `options` | 配置Hugo的图片处理选项。 |
|
||||
| `imageStyle` | 用于填充图片标签的style属性。 |
|
||||
|
||||
卡片支持三种类型的图片：
|
||||
|
||||
1. 远程图片：在`image`参数中填写完整的URL。
|
||||
2. 静态图片：使用Hugo的`static/`目录下的相对路径。
|
||||
3. 处理后的图片：使用Hugo的`assets/`目录下的相对路径。
|
||||
|
||||
Hextra在构建时会自动检测是否需要图片处理，并应用`options`参数或默认设置（Resize，800x，质量80，WebP格式）。
|
||||
目前支持的`method`有：`Resize`、`Fit`、`Fill`和`Crop`。
|
||||
|
||||
有关Hugo内置图片处理命令、方法和选项的更多信息，请参阅其[图片处理文档](https://gohugo.io/content-management/image-processing/)。
|
||||
|
||||
## 标签
|
||||
|
||||
卡片支持添加标签，可用于显示额外的状态信息。
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="../callout" title="带默认标签的卡片" tag="标签文本" >}}
|
||||
{{< card link="../callout" title="带错误标签的卡片" tag="标签文本" tagType="error" >}}
|
||||
{{< card link="../callout" title="带信息标签的卡片" tag="标签文本" tagType="info" >}}
|
||||
{{< card link="../callout" title="带警告标签的卡片" tag="标签文本" tagType="warning" >}}
|
||||
{{< card link="/" title="图片卡片" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="网络图片" tag="标签文本" tagType="error" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
```
|
||||
{{</* cards */>}}
|
||||
{{</* card link="../callout" title="带默认标签颜色的卡片" tag="标签文本" */>}}
|
||||
{{</* card link="../callout" title="带红色标签的卡片" tag="标签文本" tagType="error" */>}}
|
||||
{{</* card link="../callout" title="带蓝色标签的卡片" tag="标签文本" tagType="info" */>}}
|
||||
{{</* card link="../callout" title="带黄色标签的卡片" tag="标签文本" tagType="warning" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
## 列数
|
||||
|
||||
可以通过向`cards`短代码传递`cols`参数来指定卡片的最大列数。请注意，在小屏幕上列数仍会折叠。
|
||||
|
||||
{{< cards cols="1" >}}
|
||||
{{< card link="/" title="顶部卡片" >}}
|
||||
{{< card link="/" title="底部卡片" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
{{< cards cols="2" >}}
|
||||
{{< card link="/" title="左侧卡片" >}}
|
||||
{{< card link="/" title="右侧卡片" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
```
|
||||
{{</* cards cols="1" */>}}
|
||||
{{</* card link="/" title="顶部卡片" */>}}
|
||||
{{</* card link="/" title="底部卡片" */>}}
|
||||
{{</* /cards */>}}
|
||||
|
||||
{{</* cards cols="2" */>}}
|
||||
{{</* card link="/" title="左侧卡片" */>}}
|
||||
{{</* card link="/" title="右侧卡片" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
@@ -0,0 +1,43 @@
|
||||
---
|
||||
title: جزئیات
|
||||
---
|
||||
|
||||
یک کامپوننت داخلی برای نمایش محتوای جمع‌شدنی.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## مثال
|
||||
|
||||
{{< details title="جزئیات" >}}
|
||||
|
||||
این محتوای جزئیات است.
|
||||
|
||||
مارک‌داون **پشتیبانی می‌شود**.
|
||||
|
||||
{{< /details >}}
|
||||
|
||||
{{< details title="برای نمایش کلیک کنید" closed="true" >}}
|
||||
|
||||
این به‌صورت پیش‌فرض مخفی خواهد بود.
|
||||
|
||||
{{< /details >}}
|
||||
|
||||
## نحوه استفاده
|
||||
|
||||
````markdown
|
||||
{{</* details title="جزئیات" */>}}
|
||||
|
||||
این محتوای جزئیات است.
|
||||
|
||||
مارک‌داون **پشتیبانی می‌شود**.
|
||||
|
||||
{{</* /details */>}}
|
||||
````
|
||||
|
||||
````markdown
|
||||
{{</* details title="برای نمایش کلیک کنید" closed="true" */>}}
|
||||
|
||||
این به‌صورت پیش‌فرض مخفی خواهد بود.
|
||||
|
||||
{{</* /details */>}}
|
||||
````
|
||||
@@ -0,0 +1,43 @@
|
||||
---
|
||||
title: 詳細
|
||||
---
|
||||
|
||||
折りたたみ可能なコンテンツを表示するための組み込みコンポーネントです。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 例
|
||||
|
||||
{{< details title="詳細" >}}
|
||||
|
||||
これは詳細のコンテンツです。
|
||||
|
||||
Markdown は **サポートされています**。
|
||||
|
||||
{{< /details >}}
|
||||
|
||||
{{< details title="クリックして表示" closed="true" >}}
|
||||
|
||||
これはデフォルトで非表示になります。
|
||||
|
||||
{{< /details >}}
|
||||
|
||||
## 使用方法
|
||||
|
||||
````markdown
|
||||
{{</* details title="詳細" */>}}
|
||||
|
||||
これは詳細のコンテンツです。
|
||||
|
||||
Markdown は **サポートされています**。
|
||||
|
||||
{{</* /details */>}}
|
||||
````
|
||||
|
||||
````markdown
|
||||
{{</* details title="クリックして表示" closed="true" */>}}
|
||||
|
||||
これはデフォルトで非表示になります。
|
||||
|
||||
{{</* /details */>}}
|
||||
````
|
||||
@@ -0,0 +1,43 @@
|
||||
---
|
||||
title: Details
|
||||
---
|
||||
|
||||
A built-in component to display a collapsible content.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Example
|
||||
|
||||
{{< details title="Details" >}}
|
||||
|
||||
This is the content of the details.
|
||||
|
||||
Markdown is **supported**.
|
||||
|
||||
{{< /details >}}
|
||||
|
||||
{{< details title="Click me to reveal" closed="true" >}}
|
||||
|
||||
This will be hidden by default.
|
||||
|
||||
{{< /details >}}
|
||||
|
||||
## Usage
|
||||
|
||||
````markdown
|
||||
{{</* details title="Details" */>}}
|
||||
|
||||
This is the content of the details.
|
||||
|
||||
Markdown is **supported**.
|
||||
|
||||
{{</* /details */>}}
|
||||
````
|
||||
|
||||
````markdown
|
||||
{{</* details title="Click me to reveal" closed="true" */>}}
|
||||
|
||||
This will be hidden by default.
|
||||
|
||||
{{</* /details */>}}
|
||||
````
|
||||
@@ -0,0 +1,43 @@
|
||||
---
|
||||
title: 详情
|
||||
---
|
||||
|
||||
一个内置组件，用于显示可折叠的内容。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 示例
|
||||
|
||||
{{< details title="详情" >}}
|
||||
|
||||
这是详情的内容。
|
||||
|
||||
支持 **Markdown** 格式。
|
||||
|
||||
{{< /details >}}
|
||||
|
||||
{{< details title="点击我展开" closed="true" >}}
|
||||
|
||||
默认情况下，这部分内容会被隐藏。
|
||||
|
||||
{{< /details >}}
|
||||
|
||||
## 使用方法
|
||||
|
||||
````markdown
|
||||
{{</* details title="详情" */>}}
|
||||
|
||||
这是详情的内容。
|
||||
|
||||
支持 **Markdown** 格式。
|
||||
|
||||
{{</* /details */>}}
|
||||
````
|
||||
|
||||
````markdown
|
||||
{{</* details title="点击我展开" closed="true" */>}}
|
||||
|
||||
默认情况下，这部分内容会被隐藏。
|
||||
|
||||
{{</* /details */>}}
|
||||
````
|
||||
@@ -0,0 +1,49 @@
|
||||
---
|
||||
title: کامپوننت FileTree
|
||||
linkTitle: FileTree
|
||||
---
|
||||
|
||||
## مثال
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/folder name="docs" state="closed" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/file name="introduction.md" >}}
|
||||
{{< filetree/file name="introduction.fr.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/file name="hugo.toml" >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
## نحوه استفاده
|
||||
|
||||
```text {filename="Markdown"}
|
||||
{{</* filetree/container */>}}
|
||||
{{</* filetree/folder name="content" */>}}
|
||||
{{</* filetree/file name="_index.md" */>}}
|
||||
{{</* filetree/folder name="docs" state="closed" */>}}
|
||||
{{</* filetree/file name="_index.md" */>}}
|
||||
{{</* filetree/file name="introduction.md" */>}}
|
||||
{{</* filetree/file name="introduction.fr.md" */>}}
|
||||
{{</* /filetree/folder */>}}
|
||||
{{</* /filetree/folder */>}}
|
||||
{{</* filetree/file name="hugo.toml" */>}}
|
||||
{{</* /filetree/container */>}}
|
||||
```
|
||||
|
||||
## خيارات
|
||||
|
||||
### `filetree/file`
|
||||
|
||||
| المعلمة | وصف |
|
||||
|---------|------------|
|
||||
| `name` | اسم الملف. |
|
||||
|
||||
### `filetree/folder`
|
||||
|
||||
| المعلمة | وصف |
|
||||
|---------|---------------------------------------------------------------------------|
|
||||
| `name` | اسم الملف. |
|
||||
| `state` | حالة الملف. يمكن أن تكون `open` أو `closed`. القيمة الافتراضية هي `open`. |
|
||||
@@ -0,0 +1,49 @@
|
||||
---
|
||||
title: FileTree コンポーネント
|
||||
linkTitle: FileTree
|
||||
---
|
||||
|
||||
## 例
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/folder name="docs" state="closed" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/file name="introduction.md" >}}
|
||||
{{< filetree/file name="introduction.fr.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/file name="hugo.toml" >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
## 使用方法
|
||||
|
||||
```text {filename="Markdown"}
|
||||
{{</* filetree/container */>}}
|
||||
{{</* filetree/folder name="content" */>}}
|
||||
{{</* filetree/file name="_index.md" */>}}
|
||||
{{</* filetree/folder name="docs" state="closed" */>}}
|
||||
{{</* filetree/file name="_index.md" */>}}
|
||||
{{</* filetree/file name="introduction.md" */>}}
|
||||
{{</* filetree/file name="introduction.fr.md" */>}}
|
||||
{{</* /filetree/folder */>}}
|
||||
{{</* /filetree/folder */>}}
|
||||
{{</* filetree/file name="hugo.toml" */>}}
|
||||
{{</* /filetree/container */>}}
|
||||
```
|
||||
|
||||
## オプション
|
||||
|
||||
### `filetree/file`
|
||||
|
||||
| パラメータ | 説明 |
|
||||
|--------|----------|
|
||||
| `name` | ファイルの名前。 |
|
||||
|
||||
### `filetree/folder`
|
||||
|
||||
| パラメータ | 説明 |
|
||||
|---------|----------------------------------------------------------|
|
||||
| `name` | ファイルの名前。 |
|
||||
| `state` | ファイルの状態。`open` または `closed` のいずれかになります。デフォルトは `open` です。 |
|
||||
@@ -0,0 +1,49 @@
|
||||
---
|
||||
title: FileTree Component
|
||||
linkTitle: FileTree
|
||||
---
|
||||
|
||||
## Example
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/folder name="docs" state="closed" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/file name="introduction.md" >}}
|
||||
{{< filetree/file name="introduction.fr.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/file name="hugo.toml" >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
## Usage
|
||||
|
||||
```text {filename="Markdown"}
|
||||
{{</* filetree/container */>}}
|
||||
{{</* filetree/folder name="content" */>}}
|
||||
{{</* filetree/file name="_index.md" */>}}
|
||||
{{</* filetree/folder name="docs" state="closed" */>}}
|
||||
{{</* filetree/file name="_index.md" */>}}
|
||||
{{</* filetree/file name="introduction.md" */>}}
|
||||
{{</* filetree/file name="introduction.fr.md" */>}}
|
||||
{{</* /filetree/folder */>}}
|
||||
{{</* /filetree/folder */>}}
|
||||
{{</* filetree/file name="hugo.toml" */>}}
|
||||
{{</* /filetree/container */>}}
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
### `filetree/file`
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|----------------------------------------------------------------------|
|
||||
| `name` | The name of the file. |
|
||||
|
||||
### `filetree/folder`
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|----------------------------------------------------------------------|
|
||||
| `name` | The name of the file. |
|
||||
| `state` | The state of the file. Can be `open` or `closed`. Default is `open`. |
|
||||
@@ -0,0 +1,49 @@
|
||||
---
|
||||
title: 文件树组件
|
||||
linkTitle: 文件树
|
||||
---
|
||||
|
||||
## 示例
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/folder name="docs" state="closed" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/file name="introduction.md" >}}
|
||||
{{< filetree/file name="introduction.fr.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/file name="hugo.toml" >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
## 使用方法
|
||||
|
||||
```text {filename="Markdown"}
|
||||
{{</* filetree/container */>}}
|
||||
{{</* filetree/folder name="content" */>}}
|
||||
{{</* filetree/file name="_index.md" */>}}
|
||||
{{</* filetree/folder name="docs" state="closed" */>}}
|
||||
{{</* filetree/file name="_index.md" */>}}
|
||||
{{</* filetree/file name="introduction.md" */>}}
|
||||
{{</* filetree/file name="introduction.fr.md" */>}}
|
||||
{{</* /filetree/folder */>}}
|
||||
{{</* /filetree/folder */>}}
|
||||
{{</* filetree/file name="hugo.toml" */>}}
|
||||
{{</* /filetree/container */>}}
|
||||
```
|
||||
|
||||
## 选项
|
||||
|
||||
### `filetree/file`
|
||||
|
||||
| 范围 | 描述 |
|
||||
|--------|--------|
|
||||
| `name` | 文件的名称。 |
|
||||
|
||||
### `filetree/folder`
|
||||
|
||||
| 范围 | 描述 |
|
||||
|---------|-------------------------------------|
|
||||
| `name` | 文件的名称。 |
|
||||
| `state` | 文件的状态。可以是`open`或`closed`。默认为`open`。 |
|
||||
@@ -0,0 +1,175 @@
|
||||
---
|
||||
title: Hextra Shortcodes
|
||||
linkTitle: Hextra
|
||||
sidebar:
|
||||
exclude: true
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
الاستخدام الرئيسي لهذه الرموز المختصرة هو داخل التخطيط `hextra-home`.
|
||||
|
||||
## `hextra/feature-card`
|
||||
|
||||
رمز مختصر لعرض بطاقة مميزة.
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/feature-card title="Title" subtitle="Subtitle" */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|--------------|-------------------------|
|
||||
| `title` | عنوان البطاقة. |
|
||||
| `subtitle` | العنوان الفرعي للبطاقة. |
|
||||
| `class` | فئة البطاقة. |
|
||||
| `image` | صورة البطاقة. |
|
||||
| `imageClass` | فئة الصورة. |
|
||||
| `style` | نمط البطاقة. |
|
||||
| `icon` | أيقونة البطاقة. |
|
||||
| `link` | رابط البطاقة. |
|
||||
|
||||
## `hextra/feature-grid`
|
||||
|
||||
رمز مختصر لعرض شبكة الميزات.
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/feature-grid cols="3" */>}}
|
||||
{{</* hextra/feature-card title="One" */>}}
|
||||
{{</* hextra/feature-card title="Two" */>}}
|
||||
{{</* hextra/feature-card title="Three" */>}}
|
||||
{{</* /hextra/feature-grid */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|--------------|
|
||||
| `cols` | عدد الأعمدة. |
|
||||
| `style` | نمط الشبكة. |
|
||||
|
||||
## `hextra/hero-badge`
|
||||
|
||||
رمز مختصر لعرض شارة تحتوي على رابط.
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/hero-badge */>}}
|
||||
<div class="hx:w-2 hx:h-2 hx:rounded-full hx:bg-primary-400"></div>
|
||||
<span>Free, open source</span>
|
||||
{{</* icon name="arrow-circle-right" attributes="height=14" */>}}
|
||||
{{</* /hextra/hero-badge */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|--------------|
|
||||
| `link` | رابط الشارة. |
|
||||
| `class` | فئة الشارة. |
|
||||
| `style` | شكل الشارة. |
|
||||
|
||||
## `hextra/hero-button`
|
||||
|
||||
رمز مختصر لعرض زر يحتوي على رابط.
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/hero-button text="Get Started" link="/docs" */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|-------------|
|
||||
| `link` | رابط الزر. |
|
||||
| `text` | نص الزر. |
|
||||
| `style` | شكل الزر. |
|
||||
|
||||
## `hextra/hero-container`
|
||||
|
||||
حاوية بطل بسيطة مع صورة على الجانب الأيسر.
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/hero-container image="images/logo.svg" imageTitle="title" */>}}
|
||||
Content
|
||||
{{</* /hextra/hero-container */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|---------------|-----------------------------------------|
|
||||
| `class` | فئة الحاوية. |
|
||||
| `cols` | عدد الأعمدة (الافتراضي: `2`). |
|
||||
| `image` | صورة الحاوية. |
|
||||
| `imageCard` | عرض الصورة كبطاقة (الافتراضي: `false`). |
|
||||
| `imageClass` | فئة الصورة. |
|
||||
| `imageLink` | رابط الصورة. |
|
||||
| `imageStyle` | شكل الصورة. |
|
||||
| `imageTitle` | عنوان الصورة. |
|
||||
| `imageWidth` | عرض الصورة (الافتراضي: `350`). |
|
||||
| `imageHeight` | ارتفاع الصورة (الافتراضي: `350`). |
|
||||
| `style` | شكل الحاوية. |
|
||||
|
||||
## `hextra/hero-headline`
|
||||
|
||||
رمز مختصر لعرض عنوان رئيسي.
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/hero-headline */>}}
|
||||
Build modern websites <br class="hx:sm:block hx:hidden" />with Markdown and Hugo
|
||||
{{</* /hextra/hero-headline */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|----------------|
|
||||
| `style` | أسلوب العنوان. |
|
||||
|
||||
## `hextra/hero-section`
|
||||
|
||||
قسم بطل بسيط مع عنوان ونمط اختياري.
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/hero-section heading="h3" */>}}Title{{</* /hextra/hero-section */>}}>
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|--------------------------------|
|
||||
| `heading` | مستوى العنوان (افتراضي: `h2`). |
|
||||
| `style` | نمط العنوان. |
|
||||
| `content` | محتوى العنوان. |
|
||||
|
||||
## `hextra/hero-subtitle`
|
||||
|
||||
رمز مختصر لعرض عنوان فرعي للبطل.
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/hero-subtitle */>}}
|
||||
Fast, batteries-included Hugo theme <br class="hx:sm:block hx:hidden" />for creating beautiful static websites
|
||||
{{</* /hextra/hero-subtitle */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|----------------|
|
||||
| `style` | أسلوب الترجمة. |
|
||||
@@ -0,0 +1,175 @@
|
||||
---
|
||||
title: Hextra Shortcodes
|
||||
linkTitle: Hextra
|
||||
sidebar:
|
||||
exclude: true
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
これらのショートコードの主な使用場所は、レイアウト `hextra-home` 内です。
|
||||
|
||||
## `hextra/feature-card`
|
||||
|
||||
機能カードを表示するためのショートコード。
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/feature-card title="Title" subtitle="Subtitle" */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|--------------|-------------|
|
||||
| `title` | カードのタイトル。 |
|
||||
| `subtitle` | カードのサブタイトル。 |
|
||||
| `class` | カードのクラス。 |
|
||||
| `image` | カードの画像。 |
|
||||
| `imageClass` | 画像のクラス。 |
|
||||
| `style` | カードのスタイル。 |
|
||||
| `icon` | カードのアイコン。 |
|
||||
| `link` | カードのリンク。 |
|
||||
|
||||
## `hextra/feature-grid`
|
||||
|
||||
機能グリッドを表示するためのショートコード。
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/feature-grid cols="3" */>}}
|
||||
{{</* hextra/feature-card title="One" */>}}
|
||||
{{</* hextra/feature-card title="Two" */>}}
|
||||
{{</* hextra/feature-card title="Three" */>}}
|
||||
{{</* /hextra/feature-grid */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|-------------|
|
||||
| `cols` | 列の数。 |
|
||||
| `style` | グリッドのスタイル。 |
|
||||
|
||||
## `hextra/hero-badge`
|
||||
|
||||
リンク付きのバッジをレンダリングするためのショートコード。
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/hero-badge */>}}
|
||||
<div class="hx:w-2 hx:h-2 hx:rounded-full hx:bg-primary-400"></div>
|
||||
<span>Free, open source</span>
|
||||
{{</* icon name="arrow-circle-right" attributes="height=14" */>}}
|
||||
{{</* /hextra/hero-badge */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|-------------|
|
||||
| `link` | バッジのリンク。 |
|
||||
| `class` | バッジのクラス。 |
|
||||
| `style` | バッジのスタイル。 |
|
||||
|
||||
## `hextra/hero-button`
|
||||
|
||||
リンク付きのボタンをレンダリングするためのショートコード。
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/hero-button text="Get Started" link="/docs" */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|-------------|
|
||||
| `link` | ボタンのリンク。 |
|
||||
| `text` | ボタンのテキスト。 |
|
||||
| `style` | ボタンのスタイル。 |
|
||||
|
||||
## `hextra/hero-container`
|
||||
|
||||
左側に画像があるシンプルなヒーロー コンテナー。
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/hero-container image="images/logo.svg" imageTitle="title" */>}}
|
||||
Content
|
||||
{{</* /hextra/hero-container */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|---------------|-----------------------------------|
|
||||
| `class` | コンテナのクラス。 |
|
||||
| `cols` | 列数（デフォルト：`2`）。 |
|
||||
| `image` | コンテナの画像。 |
|
||||
| `imageCard` | 画像をカードとして表示するかどうか（デフォルト：`false`）。 |
|
||||
| `imageClass` | 画像のクラス。 |
|
||||
| `imageLink` | 画像のリンク。 |
|
||||
| `imageStyle` | 画像のスタイル。 |
|
||||
| `imageTitle` | 画像のタイトル。 |
|
||||
| `imageWidth` | 画像の幅（デフォルト：`350`）。 |
|
||||
| `imageHeight` | 画像の高さ（デフォルト：`350`）。 |
|
||||
| `style` | コンテナのスタイル。 |
|
||||
|
||||
## `hextra/hero-headline`
|
||||
|
||||
ヒーローの見出しを表示するためのショートコード。
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/hero-headline */>}}
|
||||
Build modern websites <br class="hx:sm:block hx:hidden" />with Markdown and Hugo
|
||||
{{</* /hextra/hero-headline */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|-------------|
|
||||
| `style` | 見出しのスタイル。 |
|
||||
|
||||
## `hextra/hero-section`
|
||||
|
||||
見出しとオプションのスタイルを備えたシンプルなヒーロー セクション。
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/hero-section heading="h3" */>}}Title{{</* /hextra/hero-section */>}}>
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|----------------------|
|
||||
| `heading` | 見出しレベル（デフォルト: `h2`）。 |
|
||||
| `style` | 見出しのスタイル。 |
|
||||
| `content` | 見出しの内容。 |
|
||||
|
||||
## `hextra/hero-subtitle`
|
||||
|
||||
ヒーローのサブタイトルを表示するためのショートコード。
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/hero-subtitle */>}}
|
||||
Fast, batteries-included Hugo theme <br class="hx:sm:block hx:hidden" />for creating beautiful static websites
|
||||
{{</* /hextra/hero-subtitle */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|-------------|
|
||||
| `style` | 字幕のスタイル。 |
|
||||
@@ -0,0 +1,175 @@
|
||||
---
|
||||
title: Hextra Shortcodes
|
||||
linkTitle: Hextra
|
||||
sidebar:
|
||||
exclude: true
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
The main usage of these shortcodes are within the layout `hextra-home`.
|
||||
|
||||
## `hextra/feature-card`
|
||||
|
||||
A shortcode for displaying a feature card.
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/feature-card title="Title" subtitle="Subtitle" */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|--------------|---------------------------|
|
||||
| `title` | The title of the card. |
|
||||
| `subtitle` | The subtitle of the card. |
|
||||
| `class` | The class of the card. |
|
||||
| `image` | The image of the card. |
|
||||
| `imageClass` | The class of the image. |
|
||||
| `style` | The style of the card. |
|
||||
| `icon` | The icon of the card. |
|
||||
| `link` | The link of the card. |
|
||||
|
||||
## `hextra/feature-grid`
|
||||
|
||||
A shortcode for displaying a feature grid.
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/feature-grid cols="3" */>}}
|
||||
{{</* hextra/feature-card title="One" */>}}
|
||||
{{</* hextra/feature-card title="Two" */>}}
|
||||
{{</* hextra/feature-card title="Three" */>}}
|
||||
{{</* /hextra/feature-grid */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|------------------------|
|
||||
| `cols` | The number of columns. |
|
||||
| `style` | The style of the grid. |
|
||||
|
||||
## `hextra/hero-badge`
|
||||
|
||||
A shortcode for rendering a badge with a link.
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/hero-badge */>}}
|
||||
<div class="hx:w-2 hx:h-2 hx:rounded-full hx:bg-primary-400"></div>
|
||||
<span>Free, open source</span>
|
||||
{{</* icon name="arrow-circle-right" attributes="height=14" */>}}
|
||||
{{</* /hextra/hero-badge */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|-------------------------|
|
||||
| `link` | The link of the badge. |
|
||||
| `class` | The class of the badge. |
|
||||
| `style` | The style of the badge. |
|
||||
|
||||
## `hextra/hero-button`
|
||||
|
||||
A shortcode for rendering a button with a link.
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/hero-button text="Get Started" link="/docs" */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|--------------------------|
|
||||
| `link` | The link of the button. |
|
||||
| `text` | The text of the button. |
|
||||
| `style` | The style of the button. |
|
||||
|
||||
## `hextra/hero-container`
|
||||
|
||||
A simple hero container with an image on the left side.
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/hero-container image="images/logo.svg" imageTitle="title" */>}}
|
||||
Content
|
||||
{{</* /hextra/hero-container */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|---------------|------------------------------------------------------------|
|
||||
| `class` | The class of the container. |
|
||||
| `cols` | The number of columns (default: `2`). |
|
||||
| `image` | The image of the container. |
|
||||
| `imageCard` | Whether to display the image as a card (default: `false`). |
|
||||
| `imageClass` | The class of the image. |
|
||||
| `imageLink` | The link of the image. |
|
||||
| `imageStyle` | The style of the image. |
|
||||
| `imageTitle` | The title of the image. |
|
||||
| `imageWidth` | The width of the image (default: `350`). |
|
||||
| `imageHeight` | The height of the image (default: `350`). |
|
||||
| `style` | The style of the container. |
|
||||
|
||||
## `hextra/hero-headline`
|
||||
|
||||
A shortcode for displaying a hero headline.
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/hero-headline */>}}
|
||||
Build modern websites <br class="hx:sm:block hx:hidden" />with Markdown and Hugo
|
||||
{{</* /hextra/hero-headline */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|----------------------------|
|
||||
| `style` | The style of the headline. |
|
||||
|
||||
## `hextra/hero-section`
|
||||
|
||||
A simple hero section with a heading and optional style.
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/hero-section heading="h3" */>}}Title{{</* /hextra/hero-section */>}}>
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|------------------------------------|
|
||||
| `heading` | The heading level (default: `h2`). |
|
||||
| `style` | The style of the heading. |
|
||||
| `content` | The content of the heading. |
|
||||
|
||||
## `hextra/hero-subtitle`
|
||||
|
||||
A shortcode for displaying a hero subtitle.
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/hero-subtitle */>}}
|
||||
Fast, batteries-included Hugo theme <br class="hx:sm:block hx:hidden" />for creating beautiful static websites
|
||||
{{</* /hextra/hero-subtitle */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|----------------------------|
|
||||
| `style` | The style of the subtitle. |
|
||||
@@ -0,0 +1,175 @@
|
||||
---
|
||||
title: Hextra Shortcodes
|
||||
linkTitle: Hextra
|
||||
sidebar:
|
||||
exclude: true
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
这些短代码的主要用途是在布局`hextra-home`内。
|
||||
|
||||
## `hextra/feature-card`
|
||||
|
||||
显示功能卡的短代码。
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/feature-card title="Title" subtitle="Subtitle" */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|--------------|-------------|
|
||||
| `title` | 卡片的标题。 |
|
||||
| `subtitle` | 卡片的副标题。 |
|
||||
| `class` | 卡片的类别。 |
|
||||
| `image` | 卡片的图片。 |
|
||||
| `imageClass` | 图片的类别。 |
|
||||
| `style` | 卡片的样式。 |
|
||||
| `icon` | 卡片的图标。 |
|
||||
| `link` | 卡片的链接。 |
|
||||
|
||||
## `hextra/feature-grid`
|
||||
|
||||
用于显示特征网格的短代码。
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/feature-grid cols="3" */>}}
|
||||
{{</* hextra/feature-card title="One" */>}}
|
||||
{{</* hextra/feature-card title="Two" */>}}
|
||||
{{</* hextra/feature-card title="Three" */>}}
|
||||
{{</* /hextra/feature-grid */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|-------------|
|
||||
| `cols` | 列数。 |
|
||||
| `style` | 网格的样式。 |
|
||||
|
||||
## `hextra/hero-badge`
|
||||
|
||||
用于呈现带有链接的徽章的短代码。
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/hero-badge */>}}
|
||||
<div class="hx:w-2 hx:h-2 hx:rounded-full hx:bg-primary-400"></div>
|
||||
<span>Free, open source</span>
|
||||
{{</* icon name="arrow-circle-right" attributes="height=14" */>}}
|
||||
{{</* /hextra/hero-badge */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|-------------|
|
||||
| `link` | 徽章的链接。 |
|
||||
| `class` | 徽章的类别。 |
|
||||
| `style` | 徽章的样式。 |
|
||||
|
||||
## `hextra/hero-button`
|
||||
|
||||
用于呈现带有链接的按钮的短代码。
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/hero-button text="Get Started" link="/docs" */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|-------------|
|
||||
| `link` | 按钮的链接。 |
|
||||
| `text` | 按钮的文本。 |
|
||||
| `style` | 按钮的样式。 |
|
||||
|
||||
## `hextra/hero-container`
|
||||
|
||||
一个简单的英雄容器，左侧有一个图像。
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/hero-container image="images/logo.svg" imageTitle="title" */>}}
|
||||
Content
|
||||
{{</* /hextra/hero-container */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|---------------|--------------------------|
|
||||
| `class` | 容器的类。 |
|
||||
| `cols` | 列数（默认值：`2`）。 |
|
||||
| `image` | 容器的图片。 |
|
||||
| `imageCard` | 是否将图片显示为卡片（默认值：`false`）。 |
|
||||
| `imageClass` | 图片的类。 |
|
||||
| `imageLink` | 图片的链接。 |
|
||||
| `imageStyle` | 图片的样式。 |
|
||||
| `imageTitle` | 图片的标题。 |
|
||||
| `imageWidth` | 图片的宽度（默认值：`350`）。 |
|
||||
| `imageHeight` | 图片的高度（默认值：`350`）。 |
|
||||
| `style` | 容器的样式。 |
|
||||
|
||||
## `hextra/hero-headline`
|
||||
|
||||
显示英雄标题的短代码。
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/hero-headline */>}}
|
||||
Build modern websites <br class="hx:sm:block hx:hidden" />with Markdown and Hugo
|
||||
{{</* /hextra/hero-headline */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|-------------|
|
||||
| `style` | 标题的样式。 |
|
||||
|
||||
## `hextra/hero-section`
|
||||
|
||||
带有标题和可选样式的简单英雄部分。
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/hero-section heading="h3" */>}}Title{{</* /hextra/hero-section */>}}>
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|-----------------|
|
||||
| `heading` | 标题级别（默认值：`h2`）。 |
|
||||
| `style` | 标题的样式。 |
|
||||
| `content` | 标题的内容。 |
|
||||
|
||||
## `hextra/hero-subtitle`
|
||||
|
||||
显示英雄字幕的短代码。
|
||||
|
||||
### Usage
|
||||
|
||||
```
|
||||
{{</* hextra/hero-subtitle */>}}
|
||||
Fast, batteries-included Hugo theme <br class="hx:sm:block hx:hidden" />for creating beautiful static websites
|
||||
{{</* /hextra/hero-subtitle */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Parameter | Description |
|
||||
|-----------|-------------|
|
||||
| `style` | 字幕的样式。 |
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
title: آیکون
|
||||
next: /docs/guide/shortcodes/steps
|
||||
---
|
||||
|
||||
برای استفاده از این شورتکد به صورت درون‌خطی، باید قابلیت شورتکدهای درون‌خطی در تنظیمات فعال شود:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
enableInlineShortcodes: true
|
||||
```
|
||||
|
||||
لیست آیکون‌های موجود را می‌توانید در [`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml) مشاهده کنید.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## مثال
|
||||
|
||||
{{< icon "academic-cap" >}}
|
||||
{{< icon "cake" >}}
|
||||
{{< icon "gift" >}}
|
||||
{{< icon "sparkles" >}}
|
||||
|
||||
## نحوه استفاده
|
||||
|
||||
```
|
||||
{{</* icon "github" */>}}
|
||||
```
|
||||
|
||||
آیکون‌های [Heroicons](https://v1.heroicons.com/) نسخه 1 به صورت پیش‌فرض در دسترس هستند.
|
||||
|
||||
### چگونه آیکون‌های خود را اضافه کنید
|
||||
|
||||
فایل `data/icons.yaml` را ایجاد کنید، سپس آیکون‌های SVG خود را با فرمت زیر اضافه کنید:
|
||||
|
||||
```yaml {filename="data/icons.yaml"}
|
||||
your-icon: <svg>محتوای SVG آیکون شما</svg>
|
||||
```
|
||||
|
||||
سپس می‌توانید از آن در شورتکد به این صورت استفاده کنید:
|
||||
|
||||
```
|
||||
{{</* icon "your-icon" */>}}
|
||||
|
||||
{{</* card icon="your-icon" */>}}
|
||||
```
|
||||
|
||||
نکته: [Iconify Design](https://iconify.design/) منبع خوبی برای یافتن آیکون‌های SVG برای سایت شماست.
|
||||
|
||||
## خيارات
|
||||
|
||||
| المعلمة | وصف |
|
||||
|--------------|----------------|
|
||||
| `name` | اسم الأيقونة |
|
||||
| `attributes` | سمات الأيقونة. |
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
title: アイコン
|
||||
next: /docs/guide/shortcodes/steps
|
||||
---
|
||||
|
||||
このショートコードをインラインで使用するには、設定でインラインショートコードを有効にする必要があります:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
enableInlineShortcodes: true
|
||||
```
|
||||
|
||||
利用可能なアイコンの一覧は [`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml) で確認できます。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 例
|
||||
|
||||
{{< icon "academic-cap" >}}
|
||||
{{< icon "cake" >}}
|
||||
{{< icon "gift" >}}
|
||||
{{< icon "sparkles" >}}
|
||||
|
||||
## 使用方法
|
||||
|
||||
```
|
||||
{{</* icon "github" */>}}
|
||||
```
|
||||
|
||||
[Heroicons](https://v1.heroicons.com/) v1 のアウトラインアイコンがデフォルトで利用可能です。
|
||||
|
||||
### 独自のアイコンを追加する方法
|
||||
|
||||
`data/icons.yaml` ファイルを作成し、以下の形式で独自の SVG アイコンを追加します:
|
||||
|
||||
```yaml {filename="data/icons.yaml"}
|
||||
your-icon: <svg>your icon svg content</svg>
|
||||
```
|
||||
|
||||
追加したアイコンは以下のようにショートコードで使用できます:
|
||||
|
||||
```
|
||||
{{</* icon "your-icon" */>}}
|
||||
|
||||
{{</* card icon="your-icon" */>}}
|
||||
```
|
||||
|
||||
ヒント: [Iconify Design](https://iconify.design/) はサイト用の SVG アイコンを見つけるのに最適な場所です。
|
||||
|
||||
## オプション
|
||||
|
||||
| パラメータ | 説明 |
|
||||
|--------------|----------|
|
||||
| `name` | アイコン名 |
|
||||
| `attributes` | アイコンの属性。 |
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
title: Icon
|
||||
next: /docs/guide/shortcodes/steps
|
||||
---
|
||||
|
||||
To use this shortcode inline, inline shortcode needs to be enabled in the config:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
enableInlineShortcodes: true
|
||||
```
|
||||
|
||||
List of available icons can be found in [`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml).
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Example
|
||||
|
||||
{{< icon "academic-cap" >}}
|
||||
{{< icon "cake" >}}
|
||||
{{< icon "gift" >}}
|
||||
{{< icon "sparkles" >}}
|
||||
|
||||
## Usage
|
||||
|
||||
```
|
||||
{{</* icon "github" */>}}
|
||||
```
|
||||
|
||||
[Heroicons](https://v1.heroicons.com/) v1 outline icons are available out of the box.
|
||||
|
||||
### How to add your own icons
|
||||
|
||||
Create `data/icons.yaml` file, then add your own SVG icons in the following format:
|
||||
|
||||
```yaml {filename="data/icons.yaml"}
|
||||
your-icon: <svg>your icon svg content</svg>
|
||||
```
|
||||
|
||||
It then can be used in the shortcode like this:
|
||||
|
||||
```
|
||||
{{</* icon "your-icon" */>}}
|
||||
|
||||
{{</* card icon="your-icon" */>}}
|
||||
```
|
||||
|
||||
Tip: [Iconify Design](https://iconify.design/) is a great place to find SVG icons for your site.
|
||||
|
||||
## Options
|
||||
|
||||
| Name | Description |
|
||||
|--------------|-----------------------------|
|
||||
| `name` | Icon name |
|
||||
| `attributes` | The attributes of the icon. |
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
title: 图标
|
||||
next: /docs/guide/shortcodes/steps
|
||||
---
|
||||
|
||||
要在行内使用此短代码，需在配置中启用行内短代码功能：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
enableInlineShortcodes: true
|
||||
```
|
||||
|
||||
可用图标列表可在 [`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml) 中找到。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 示例
|
||||
|
||||
{{< icon "academic-cap" >}}
|
||||
{{< icon "cake" >}}
|
||||
{{< icon "gift" >}}
|
||||
{{< icon "sparkles" >}}
|
||||
|
||||
## 使用方法
|
||||
|
||||
```
|
||||
{{</* icon "github" */>}}
|
||||
```
|
||||
|
||||
默认支持 [Heroicons](https://v1.heroicons.com/) v1 轮廓风格图标。
|
||||
|
||||
### 如何添加自定义图标
|
||||
|
||||
创建 `data/icons.yaml` 文件，按以下格式添加您的 SVG 图标：
|
||||
|
||||
```yaml {filename="data/icons.yaml"}
|
||||
your-icon: <svg>您的图标 SVG 内容</svg>
|
||||
```
|
||||
|
||||
随后即可通过短代码调用：
|
||||
|
||||
```
|
||||
{{</* icon "your-icon" */>}}
|
||||
|
||||
{{</* card icon="your-icon" */>}}
|
||||
```
|
||||
|
||||
提示：[Iconify Design](https://iconify.design/) 是寻找网站 SVG 图标的优质资源平台。
|
||||
|
||||
## 选项
|
||||
|
||||
| 范围 | 描述 |
|
||||
|--------------|--------|
|
||||
| `name` | 图标名称 |
|
||||
| `attributes` | 图标的属性。 |
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
title: "کامپوننت Jupyter Notebook"
|
||||
linktitle: "Jupyter Notebook"
|
||||
math: true
|
||||
sidebar:
|
||||
exclude: true
|
||||
---
|
||||
|
||||
{{< callout type="warning" >}}ویژگی آزمایشی برای گنجاندن Jupyter Notebookها از طریق یک شورتکد. توجه داشته باشید که همه انواع سلول‌ها پشتیبانی نمی‌شوند.{{< /callout >}}
|
||||
|
||||
[Jupyter Notebook](https://jupyter.org/) یک برنامه نوت‌بوک HTML مستقل از زبان برای [پروژه Jupyter](https://jupyter.org/) است. این برنامه به شما امکان می‌دهد اسنادی ایجاد و به اشتراک بگذارید که شامل کد زنده، معادلات، تصاویر و متن روایی هستند.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## نحوه استفاده
|
||||
|
||||
### استفاده از یک نوت‌بوک محلی
|
||||
|
||||
برای استفاده از شورتکد Jupyter Notebook، باید یک فایل Jupyter Notebook در پروژه خود داشته باشید. مشابه روشی که برای [افزودن تصاویر](../../organize-files#add-images) به پروژه استفاده می‌کنید، می‌توانید Jupyter Notebookها را به پوشه `assets` اضافه کنید.
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="assets" >}}
|
||||
{{< filetree/file name="notebook.ipynb" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/file name="my-page.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
نوت‌بوک Jupyter را در صفحه با استفاده از شورتکد `jupyter` قرار دهید:
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||
---
|
||||
title: صفحه من
|
||||
math: true
|
||||
---
|
||||
|
||||
{{%/* jupyter "notebook.ipynb" */%}}
|
||||
```
|
||||
|
||||
به‌عنوان جایگزین، می‌توانید از ویژگی [بسته‌های صفحه][page-bundles] هوگو استفاده کنید تا Jupyter Notebookها را همراه با فایل Markdown سازماندهی کنید.
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/folder name="my-page" >}}
|
||||
{{< filetree/file name="index.md" >}}
|
||||
{{< filetree/file name="notebook.ipynb" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
```markdown {filename="content/docs/my-page/index.md"}
|
||||
---
|
||||
title: صفحه من
|
||||
math: true
|
||||
---
|
||||
|
||||
{{%/* jupyter "notebook.ipynb" */%}}
|
||||
```
|
||||
|
||||
### استفاده از یک نوت‌بوک راه‌دور
|
||||
|
||||
همچنین می‌توانید از یک نوت‌بوک راه‌دور با ارائه URL به فایل نوت‌بوک استفاده کنید. به‌عنوان مثال، برای گنجاندن نوت‌بوک [Jupyter Notebook چیست](https://github.com/jupyter/notebook/blob/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb) در صفحه، می‌توانید از شورتکد زیر استفاده کنید:
|
||||
|
||||
```
|
||||
{{%/* jupyter "https://raw.githubusercontent.com/jupyter/notebook/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb" */%}}
|
||||
```
|
||||
|
||||
## نمونه نوت‌بوک
|
||||
|
||||
{{< callout type="info" >}}مثال زیر یک نمونه از فایل نوت‌بوک است که در پوشه assets پروژه گنجانده شده است.{{< /callout >}}
|
||||
|
||||
{{% jupyter "example.ipynb" %}}
|
||||
|
||||
[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
title: "Jupyter Notebook コンポーネント"
|
||||
linktitle: "Jupyter Notebook"
|
||||
math: true
|
||||
sidebar:
|
||||
exclude: true
|
||||
---
|
||||
|
||||
{{< callout type="warning" >}}Jupyter Notebook をショートコード経由で組み込む実験的機能です。すべてのセルタイプがサポートされているわけではありません。{{< /callout >}}
|
||||
|
||||
[Jupyter Notebook](https://jupyter.org/) は [Project Jupyter](https://jupyter.org/) の言語非依存な HTML ノートブックアプリケーションです。ライブコード、数式、可視化、説明文を含むドキュメントを作成・共有できます。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 使用方法
|
||||
|
||||
### ローカルノートブックの使用
|
||||
|
||||
Jupyter Notebook ショートコードを使用するには、プロジェクト内に Jupyter Notebook ファイルが必要です。[画像を追加する](../../organize-files#add-images)方法と同様に、Jupyter Notebook を `assets` フォルダに追加できます。
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="assets" >}}
|
||||
{{< filetree/file name="notebook.ipynb" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/file name="my-page.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
`jupyter` ショートコードを使用してページに Jupyter Notebook を組み込みます:
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||
---
|
||||
title: マイページ
|
||||
math: true
|
||||
---
|
||||
|
||||
{{%/* jupyter "notebook.ipynb" */%}}
|
||||
```
|
||||
|
||||
あるいは、Hugo の [ページバンドル][page-bundles] 機能を利用して、Jupyter Notebook を Markdown ファイルと一緒に整理することもできます。
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/folder name="my-page" >}}
|
||||
{{< filetree/file name="index.md" >}}
|
||||
{{< filetree/file name="notebook.ipynb" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
```markdown {filename="content/docs/my-page/index.md"}
|
||||
---
|
||||
title: マイページ
|
||||
math: true
|
||||
---
|
||||
|
||||
{{%/* jupyter "notebook.ipynb" */%}}
|
||||
```
|
||||
|
||||
### リモートノートブックの使用
|
||||
|
||||
ノートブックファイルの URL を指定することで、リモートノートブックも使用できます。例えば、[What is the Jupyter Notebook](https://github.com/jupyter/notebook/blob/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb) ノートブックをページに組み込むには、以下のショートコードを使用します:
|
||||
|
||||
```
|
||||
{{%/* jupyter "https://raw.githubusercontent.com/jupyter/notebook/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb" */%}}
|
||||
```
|
||||
|
||||
## ノートブックの例
|
||||
|
||||
{{< callout type="info" >}}以下は、プロジェクトの assets フォルダに含まれるノートブックファイルの例です。{{< /callout >}}
|
||||
|
||||
{{% jupyter "example.ipynb" %}}
|
||||
|
||||
[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
title: "Jupyter Notebook Component"
|
||||
linktitle: "Jupyter Notebook"
|
||||
math: true
|
||||
sidebar:
|
||||
exclude: true
|
||||
---
|
||||
|
||||
{{< callout type="warning" >}}Experimental feature to include Jupyter Notebooks via a shortcode. Note that not all cell types are supported.{{< /callout >}}
|
||||
|
||||
[Jupyter Notebook](https://jupyter.org/) is a language-agnostic HTML notebook application for [Project Jupyter](https://jupyter.org/). It allows you to create and share documents that contain live code, equations, visualizations, and narrative text.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## How to use
|
||||
|
||||
### Using a local notebook
|
||||
|
||||
To use the Jupyter Notebook shortcode, you need to have a Jupyter Notebook file in your project. Similar to how you would [add images](../../organize-files#add-images) to the project, you can add Jupyter Notebooks to the `assets` folder.
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="assets" >}}
|
||||
{{< filetree/file name="notebook.ipynb" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/file name="my-page.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
Include the Jupyter Notebook in the page using the `jupyter` shortcode:
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||
---
|
||||
title: My Page
|
||||
math: true
|
||||
---
|
||||
|
||||
{{%/* jupyter "notebook.ipynb" */%}}
|
||||
```
|
||||
|
||||
Alternatively, you can utilize the [page bundles][page-bundles] feature of Hugo to organize the Jupyter Notebooks together with the Markdown file.
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/folder name="my-page" >}}
|
||||
{{< filetree/file name="index.md" >}}
|
||||
{{< filetree/file name="notebook.ipynb" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
```markdown {filename="content/docs/my-page/index.md"}
|
||||
---
|
||||
title: My Page
|
||||
math: true
|
||||
---
|
||||
|
||||
{{%/* jupyter "notebook.ipynb" */%}}
|
||||
```
|
||||
|
||||
### Using a remote notebook
|
||||
|
||||
You can also use a remote notebook by providing the URL to the notebook file. For example, to include [What is the Jupyter Notebook](https://github.com/jupyter/notebook/blob/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb) notebook in the page, you can use the following shortcode:
|
||||
|
||||
```
|
||||
{{%/* jupyter "https://raw.githubusercontent.com/jupyter/notebook/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb" */%}}
|
||||
```
|
||||
|
||||
## Example Notebook
|
||||
|
||||
{{< callout type="info" >}}The following is an example of a notebook file that is included in the project assets folder.{{< /callout >}}
|
||||
|
||||
{{% jupyter "example.ipynb" %}}
|
||||
|
||||
[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles
|
||||
@@ -0,0 +1,79 @@
|
||||
---
|
||||
title: "Jupyter Notebook 组件"
|
||||
linktitle: "Jupyter Notebook"
|
||||
math: true
|
||||
sidebar:
|
||||
exclude: true
|
||||
---
|
||||
|
||||
{{< callout type="warning" >}}实验性功能：通过短代码嵌入 Jupyter Notebook。注意并非所有单元格类型都受支持。{{< /callout >}}
|
||||
|
||||
[Jupyter Notebook](https://jupyter.org/) 是 [Project Jupyter](https://jupyter.org/) 推出的语言无关的 HTML 笔记本应用。它允许你创建和分享包含动态代码、数学公式、可视化图表和叙述性文本的文档。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 使用本地笔记本
|
||||
|
||||
要使用 Jupyter Notebook 短代码，你需要在项目中放置一个 Jupyter Notebook 文件。与[添加图片](../../organize-files#add-images)到项目类似，你可以将 Jupyter Notebook 放入 `assets` 文件夹。
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="assets" >}}
|
||||
{{< filetree/file name="notebook.ipynb" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/file name="my-page.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
使用 `jupyter` 短代码将笔记本嵌入页面：
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||
---
|
||||
title: 我的页面
|
||||
math: true
|
||||
---
|
||||
|
||||
{{%/* jupyter "notebook.ipynb" */%}}
|
||||
```
|
||||
|
||||
或者，你可以利用 Hugo 的[页面包][page-bundles]功能，将 Jupyter Notebook 与 Markdown 文件组织在一起。
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
{{< filetree/folder name="docs" >}}
|
||||
{{< filetree/folder name="my-page" >}}
|
||||
{{< filetree/file name="index.md" >}}
|
||||
{{< filetree/file name="notebook.ipynb" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
```markdown {filename="content/docs/my-page/index.md"}
|
||||
---
|
||||
title: 我的页面
|
||||
math: true
|
||||
---
|
||||
|
||||
{{%/* jupyter "notebook.ipynb" */%}}
|
||||
```
|
||||
|
||||
### 使用远程笔记本
|
||||
|
||||
你也可以通过提供笔记本文件的 URL 来使用远程笔记本。例如，要在页面中嵌入 [什么是 Jupyter Notebook](https://github.com/jupyter/notebook/blob/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb) 笔记本，可以使用以下短代码：
|
||||
|
||||
```
|
||||
{{%/* jupyter "https://raw.githubusercontent.com/jupyter/notebook/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb" */%}}
|
||||
```
|
||||
|
||||
## 示例笔记本
|
||||
|
||||
{{< callout type="info" >}}以下示例展示的是项目 assets 文件夹中包含的笔记本文件。{{< /callout >}}
|
||||
|
||||
{{% jupyter "example.ipynb" %}}
|
||||
|
||||
[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles
|
||||
@@ -0,0 +1,129 @@
|
||||
---
|
||||
title: سایر شورتکدها
|
||||
linkTitle: سایر
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
برخی از این‌ها شورتکدهای داخلی Hugo هستند.
|
||||
این شورتکدها کمتر پایدار در نظر گرفته می‌شوند و ممکن است هر زمان تغییر کنند.
|
||||
{{< /callout >}}
|
||||
|
||||
## نشان
|
||||
|
||||
### أمثلة
|
||||
|
||||
{{< badge "default" >}}
|
||||
{{< badge content="border" border=false >}}
|
||||
{{< badge content="color" color="green" >}}
|
||||
{{< badge content="link" link="https://github.com/imfing/hextra/releases" >}}
|
||||
{{< badge content="icon" icon="sparkles" >}}
|
||||
|
||||
### الاستخدام
|
||||
|
||||
#### تقصير
|
||||
|
||||
{{< badge "Badge" >}}
|
||||
|
||||
```
|
||||
{{</* badge "Badge" */>}}
|
||||
```
|
||||
|
||||
#### الألوان
|
||||
|
||||
{{< badge content="Badge" >}}
|
||||
{{< badge content="Badge" color="purple" >}}
|
||||
{{< badge content="Badge" color="indigo" >}}
|
||||
{{< badge content="Badge" color="blue" >}}
|
||||
{{< badge content="Badge" color="green" >}}
|
||||
{{< badge content="Badge" color="yellow" >}}
|
||||
{{< badge content="Badge" color="amber" >}}
|
||||
{{< badge content="Badge" color="orange" >}}
|
||||
{{< badge content="Badge" color="red" >}}
|
||||
|
||||
```
|
||||
{{</* badge content="Badge" */>}}
|
||||
{{</* badge content="Badge" color="purple" */>}}
|
||||
{{</* badge content="Badge" color="indigo" */>}}
|
||||
{{</* badge content="Badge" color="blue" */>}}
|
||||
{{</* badge content="Badge" color="green" */>}}
|
||||
{{</* badge content="Badge" color="yellow" */>}}
|
||||
{{</* badge content="Badge" color="amber" */>}}
|
||||
{{</* badge content="Badge" color="orange" */>}}
|
||||
{{</* badge content="Badge" color="red" */>}}
|
||||
```
|
||||
|
||||
{{< badge content="Badge" border=false >}}
|
||||
{{< badge content="Badge" color="purple" border=false >}}
|
||||
{{< badge content="Badge" color="indigo" border=false >}}
|
||||
{{< badge content="Badge" color="blue" border=false >}}
|
||||
{{< badge content="Badge" color="green" border=false >}}
|
||||
{{< badge content="Badge" color="yellow" border=false >}}
|
||||
{{< badge content="Badge" color="amber" border=false >}}
|
||||
{{< badge content="Badge" color="orange" border=false >}}
|
||||
{{< badge content="Badge" color="red" border=false >}}
|
||||
|
||||
```
|
||||
{{</* badge content="Badge" border=false */>}}
|
||||
{{</* badge content="Badge" color="purple" border=false */>}}
|
||||
{{</* badge content="Badge" color="indigo" border=false */>}}
|
||||
{{</* badge content="Badge" color="blue" border=false */>}}
|
||||
{{</* badge content="Badge" color="green" border=false */>}}
|
||||
{{</* badge content="Badge" color="yellow" border=false */>}}
|
||||
{{</* badge content="Badge" color="amber" border=false */>}}
|
||||
{{</* badge content="Badge" color="orange" border=false */>}}
|
||||
{{</* badge content="Badge" color="red" border=false */>}}
|
||||
```
|
||||
|
||||
#### المتغيرات
|
||||
|
||||
{{< badge content="Badge" icon="sparkles" >}}
|
||||
{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}}
|
||||
|
||||
```
|
||||
{{</* badge content="Badge" icon="sparkles" */>}}
|
||||
{{</* badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
|
||||
```
|
||||
|
||||
### خيارات
|
||||
|
||||
| المعلمة | وصف |
|
||||
|-----------|-----------------------------------------------------------------------------------------------------------|
|
||||
| `content` | نص الشارة. |
|
||||
| `link` | رابط الشارة. |
|
||||
| `icon` | رمز الشارة. |
|
||||
| `color` | `gray` (تقصير), `purple`, `indigo`, `blue`, `green`, `yellow`, `amber`, `orange`, `red`.<br/> لون الشارة. |
|
||||
| `class` | فئة الشارة. |
|
||||
| `border` | إضافة أو إزالة الحدود (افتراضي: true |
|
||||
|
||||
## یوتیوب
|
||||
|
||||
تعبیه یک ویدیوی یوتیوب.
|
||||
|
||||
```
|
||||
{{</* youtube VIDEO_ID */>}}
|
||||
```
|
||||
|
||||
نتیجه:
|
||||
|
||||
{{< youtube id=dQw4w9WgXcQ loading=lazy >}}
|
||||
|
||||
برای اطلاعات بیشتر، به [شورتکد یوتیوب Hugo](https://gohugo.io/content-management/shortcodes/#youtube) مراجعه کنید.
|
||||
|
||||
## پی‌دی‌اف
|
||||
|
||||
با شورتکد پی‌دی‌اف، می‌توانید یک فایل پی‌دی‌اف را در محتوای خود تعبیه کنید.
|
||||
|
||||
```
|
||||
{{</* pdf "https://example.com/sample.pdf" */>}}
|
||||
```
|
||||
|
||||
همچنین می‌توانید فایل پی‌دی‌اف را در دایرکتوری پروژه خود قرار دهید و از مسیر نسبی استفاده کنید.
|
||||
|
||||
```
|
||||
{{</* pdf "path/to/file.pdf" */>}}
|
||||
```
|
||||
|
||||
مثال:
|
||||
|
||||
{{< pdf "https://upload.wikimedia.org/wikipedia/commons/1/13/Example.pdf" >}}
|
||||
@@ -0,0 +1,129 @@
|
||||
---
|
||||
title: その他のショートコード
|
||||
linkTitle: その他
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
これらの一部は Hugo 組み込みのショートコードです。
|
||||
これらのショートコードは安定性が低く、いつでも変更される可能性があります。
|
||||
{{< /callout >}}
|
||||
|
||||
## バッジ
|
||||
|
||||
### 例
|
||||
|
||||
{{< badge "default" >}}
|
||||
{{< badge content="border" border=false >}}
|
||||
{{< badge content="color" color="green" >}}
|
||||
{{< badge content="link" link="https://github.com/imfing/hextra/releases" >}}
|
||||
{{< badge content="icon" icon="sparkles" >}}
|
||||
|
||||
### 使用法
|
||||
|
||||
#### デフォルト
|
||||
|
||||
{{< badge "Badge" >}}
|
||||
|
||||
```
|
||||
{{</* badge "Badge" */>}}
|
||||
```
|
||||
|
||||
#### 色
|
||||
|
||||
{{< badge content="Badge" >}}
|
||||
{{< badge content="Badge" color="purple" >}}
|
||||
{{< badge content="Badge" color="indigo" >}}
|
||||
{{< badge content="Badge" color="blue" >}}
|
||||
{{< badge content="Badge" color="green" >}}
|
||||
{{< badge content="Badge" color="yellow" >}}
|
||||
{{< badge content="Badge" color="amber" >}}
|
||||
{{< badge content="Badge" color="orange" >}}
|
||||
{{< badge content="Badge" color="red" >}}
|
||||
|
||||
```
|
||||
{{</* badge content="Badge" */>}}
|
||||
{{</* badge content="Badge" color="purple" */>}}
|
||||
{{</* badge content="Badge" color="indigo" */>}}
|
||||
{{</* badge content="Badge" color="blue" */>}}
|
||||
{{</* badge content="Badge" color="green" */>}}
|
||||
{{</* badge content="Badge" color="yellow" */>}}
|
||||
{{</* badge content="Badge" color="amber" */>}}
|
||||
{{</* badge content="Badge" color="orange" */>}}
|
||||
{{</* badge content="Badge" color="red" */>}}
|
||||
```
|
||||
|
||||
{{< badge content="Badge" border=false >}}
|
||||
{{< badge content="Badge" color="purple" border=false >}}
|
||||
{{< badge content="Badge" color="indigo" border=false >}}
|
||||
{{< badge content="Badge" color="blue" border=false >}}
|
||||
{{< badge content="Badge" color="green" border=false >}}
|
||||
{{< badge content="Badge" color="yellow" border=false >}}
|
||||
{{< badge content="Badge" color="amber" border=false >}}
|
||||
{{< badge content="Badge" color="orange" border=false >}}
|
||||
{{< badge content="Badge" color="red" border=false >}}
|
||||
|
||||
```
|
||||
{{</* badge content="Badge" border=false */>}}
|
||||
{{</* badge content="Badge" color="purple" border=false */>}}
|
||||
{{</* badge content="Badge" color="indigo" border=false */>}}
|
||||
{{</* badge content="Badge" color="blue" border=false */>}}
|
||||
{{</* badge content="Badge" color="green" border=false */>}}
|
||||
{{</* badge content="Badge" color="yellow" border=false */>}}
|
||||
{{</* badge content="Badge" color="amber" border=false */>}}
|
||||
{{</* badge content="Badge" color="orange" border=false */>}}
|
||||
{{</* badge content="Badge" color="red" border=false */>}}
|
||||
```
|
||||
|
||||
#### 変種
|
||||
|
||||
{{< badge content="Badge" icon="sparkles" >}}
|
||||
{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}}
|
||||
|
||||
```
|
||||
{{</* badge content="Badge" icon="sparkles" */>}}
|
||||
{{</* badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
|
||||
```
|
||||
|
||||
### オプション
|
||||
|
||||
| パラメータ | 説明 |
|
||||
|-----------|--------------------------------------------------------------------------------------------------------------------------|
|
||||
| `content` | バッジのテキスト。 |
|
||||
| `link` | バッジのリンク。 |
|
||||
| `icon` | バッジのアイコン。 |
|
||||
| `color` | The color of the badge. <br/> `gray` (default), `purple`, `indigo`, `blue`, `green`, `yellow`, `amber`, `orange`, `red`. |
|
||||
| `class` | バッジのクラス。 |
|
||||
| `border` | 境界線を追加または削除します (デフォルト: true)。 |
|
||||
|
||||
## YouTube
|
||||
|
||||
YouTube 動画を埋め込みます。
|
||||
|
||||
```
|
||||
{{</* youtube VIDEO_ID */>}}
|
||||
```
|
||||
|
||||
結果:
|
||||
|
||||
{{< youtube id=dQw4w9WgXcQ loading=lazy >}}
|
||||
|
||||
詳細については、[Hugo の YouTube ショートコード](https://gohugo.io/content-management/shortcodes/#youtube)を参照してください。
|
||||
|
||||
## PDF
|
||||
|
||||
PDF ショートコードを使用すると、コンテンツ内に PDF ファイルを埋め込むことができます。
|
||||
|
||||
```
|
||||
{{</* pdf "https://example.com/sample.pdf" */>}}
|
||||
```
|
||||
|
||||
プロジェクトディレクトリ内に PDF ファイルを配置し、相対パスを使用することもできます。
|
||||
|
||||
```
|
||||
{{</* pdf "path/to/file.pdf" */>}}
|
||||
```
|
||||
|
||||
例:
|
||||
|
||||
{{< pdf "https://upload.wikimedia.org/wikipedia/commons/1/13/Example.pdf" >}}
|
||||
@@ -0,0 +1,129 @@
|
||||
---
|
||||
title: Other Shortcodes
|
||||
linkTitle: Others
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
Some of these are Hugo built-in shortcodes.
|
||||
These shortcodes are considered less stable and may be changed anytime.
|
||||
{{< /callout >}}
|
||||
|
||||
## Badge
|
||||
|
||||
### Examples
|
||||
|
||||
{{< badge "default" >}}
|
||||
{{< badge content="border" border=false >}}
|
||||
{{< badge content="color" color="green" >}}
|
||||
{{< badge content="link" link="https://github.com/imfing/hextra/releases" >}}
|
||||
{{< badge content="icon" icon="sparkles" >}}
|
||||
|
||||
### Usage
|
||||
|
||||
#### Default
|
||||
|
||||
{{< badge "Badge" >}}
|
||||
|
||||
```
|
||||
{{</* badge "Badge" */>}}
|
||||
```
|
||||
|
||||
#### Colors
|
||||
|
||||
{{< badge content="Badge" >}}
|
||||
{{< badge content="Badge" color="purple" >}}
|
||||
{{< badge content="Badge" color="indigo" >}}
|
||||
{{< badge content="Badge" color="blue" >}}
|
||||
{{< badge content="Badge" color="green" >}}
|
||||
{{< badge content="Badge" color="yellow" >}}
|
||||
{{< badge content="Badge" color="amber" >}}
|
||||
{{< badge content="Badge" color="orange" >}}
|
||||
{{< badge content="Badge" color="red" >}}
|
||||
|
||||
```
|
||||
{{</* badge content="Badge" */>}}
|
||||
{{</* badge content="Badge" color="purple" */>}}
|
||||
{{</* badge content="Badge" color="indigo" */>}}
|
||||
{{</* badge content="Badge" color="blue" */>}}
|
||||
{{</* badge content="Badge" color="green" */>}}
|
||||
{{</* badge content="Badge" color="yellow" */>}}
|
||||
{{</* badge content="Badge" color="amber" */>}}
|
||||
{{</* badge content="Badge" color="orange" */>}}
|
||||
{{</* badge content="Badge" color="red" */>}}
|
||||
```
|
||||
|
||||
{{< badge content="Badge" border=false >}}
|
||||
{{< badge content="Badge" color="purple" border=false >}}
|
||||
{{< badge content="Badge" color="indigo" border=false >}}
|
||||
{{< badge content="Badge" color="blue" border=false >}}
|
||||
{{< badge content="Badge" color="green" border=false >}}
|
||||
{{< badge content="Badge" color="yellow" border=false >}}
|
||||
{{< badge content="Badge" color="amber" border=false >}}
|
||||
{{< badge content="Badge" color="orange" border=false >}}
|
||||
{{< badge content="Badge" color="red" border=false >}}
|
||||
|
||||
```
|
||||
{{</* badge content="Badge" border=false */>}}
|
||||
{{</* badge content="Badge" color="purple" border=false */>}}
|
||||
{{</* badge content="Badge" color="indigo" border=false */>}}
|
||||
{{</* badge content="Badge" color="blue" border=false */>}}
|
||||
{{</* badge content="Badge" color="green" border=false */>}}
|
||||
{{</* badge content="Badge" color="yellow" border=false */>}}
|
||||
{{</* badge content="Badge" color="amber" border=false */>}}
|
||||
{{</* badge content="Badge" color="orange" border=false */>}}
|
||||
{{</* badge content="Badge" color="red" border=false */>}}
|
||||
```
|
||||
|
||||
#### Variants
|
||||
|
||||
{{< badge content="Badge" icon="sparkles" >}}
|
||||
{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}}
|
||||
|
||||
```
|
||||
{{</* badge content="Badge" icon="sparkles" */>}}
|
||||
{{</* badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
|
||||
```
|
||||
|
||||
### Options
|
||||
|
||||
| Name | Description |
|
||||
|-----------|--------------------------------------------------------------------------------------------------------------------------|
|
||||
| `content` | The text of the badge. |
|
||||
| `link` | The link of the badge. |
|
||||
| `icon` | The icon of the badge. |
|
||||
| `color` | The color of the badge. <br/> `gray` (default), `purple`, `indigo`, `blue`, `green`, `yellow`, `amber`, `orange`, `red`. |
|
||||
| `class` | The class of the badge. |
|
||||
| `border` | Adds or removes the border (default: true). |
|
||||
|
||||
## YouTube
|
||||
|
||||
Embed a YouTube video.
|
||||
|
||||
```
|
||||
{{</* youtube VIDEO_ID */>}}
|
||||
```
|
||||
|
||||
Result:
|
||||
|
||||
{{< youtube id=dQw4w9WgXcQ loading=lazy >}}
|
||||
|
||||
For more information, see [Hugo's YouTube Shortcode](https://gohugo.io/content-management/shortcodes/#youtube).
|
||||
|
||||
## PDF
|
||||
|
||||
With PDF shortcode, you can embed a PDF file in your content.
|
||||
|
||||
```
|
||||
{{</* pdf "https://example.com/sample.pdf" */>}}
|
||||
```
|
||||
|
||||
You can also place the PDF file in your project directory and use the relative path.
|
||||
|
||||
```
|
||||
{{</* pdf "path/to/file.pdf" */>}}
|
||||
```
|
||||
|
||||
Example:
|
||||
|
||||
{{< pdf "https://upload.wikimedia.org/wikipedia/commons/1/13/Example.pdf" >}}
|
||||
@@ -0,0 +1,129 @@
|
||||
---
|
||||
title: 其他短代码
|
||||
linkTitle: 其他
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
其中部分为Hugo内置短代码。
|
||||
这些短代码稳定性较低，可能随时变更。
|
||||
{{< /callout >}}
|
||||
|
||||
## 徽章
|
||||
|
||||
### 示例
|
||||
|
||||
{{< badge "default" >}}
|
||||
{{< badge content="border" border=false >}}
|
||||
{{< badge content="color" color="green" >}}
|
||||
{{< badge content="link" link="https://github.com/imfing/hextra/releases" >}}
|
||||
{{< badge content="icon" icon="sparkles" >}}
|
||||
|
||||
### 使用
|
||||
|
||||
#### 默认
|
||||
|
||||
{{< badge "徽章" >}}
|
||||
|
||||
```
|
||||
{{</* badge "徽章" */>}}
|
||||
```
|
||||
|
||||
#### 颜色
|
||||
|
||||
{{< badge content="徽章" >}}
|
||||
{{< badge content="徽章" color="purple" >}}
|
||||
{{< badge content="徽章" color="indigo" >}}
|
||||
{{< badge content="徽章" color="blue" >}}
|
||||
{{< badge content="徽章" color="green" >}}
|
||||
{{< badge content="徽章" color="yellow" >}}
|
||||
{{< badge content="徽章" color="amber" >}}
|
||||
{{< badge content="徽章" color="orange" >}}
|
||||
{{< badge content="徽章" color="red" >}}
|
||||
|
||||
```
|
||||
{{</* badge content="徽章" */>}}
|
||||
{{</* badge content="徽章" color="purple" */>}}
|
||||
{{</* badge content="徽章" color="indigo" */>}}
|
||||
{{</* badge content="徽章" color="blue" */>}}
|
||||
{{</* badge content="徽章" color="green" */>}}
|
||||
{{</* badge content="徽章" color="yellow" */>}}
|
||||
{{</* badge content="徽章" color="amber" */>}}
|
||||
{{</* badge content="徽章" color="orange" */>}}
|
||||
{{</* badge content="徽章" color="red" */>}}
|
||||
```
|
||||
|
||||
{{< badge content="徽章" border=false >}}
|
||||
{{< badge content="徽章" color="purple" border=false >}}
|
||||
{{< badge content="徽章" color="indigo" border=false >}}
|
||||
{{< badge content="徽章" color="blue" border=false >}}
|
||||
{{< badge content="徽章" color="green" border=false >}}
|
||||
{{< badge content="徽章" color="yellow" border=false >}}
|
||||
{{< badge content="徽章" color="amber" border=false >}}
|
||||
{{< badge content="徽章" color="orange" border=false >}}
|
||||
{{< badge content="徽章" color="red" border=false >}}
|
||||
|
||||
```
|
||||
{{</* badge content="徽章" border=false */>}}
|
||||
{{</* badge content="徽章" color="purple" border=false */>}}
|
||||
{{</* badge content="徽章" color="indigo" border=false */>}}
|
||||
{{</* badge content="徽章" color="blue" border=false */>}}
|
||||
{{</* badge content="徽章" color="green" border=false */>}}
|
||||
{{</* badge content="徽章" color="yellow" border=false */>}}
|
||||
{{</* badge content="徽章" color="amber" border=false */>}}
|
||||
{{</* badge content="徽章" color="orange" border=false */>}}
|
||||
{{</* badge content="徽章" color="red" border=false */>}}
|
||||
```
|
||||
|
||||
#### 变体
|
||||
|
||||
{{< badge content="徽章" icon="sparkles" >}}
|
||||
{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}}
|
||||
|
||||
```
|
||||
{{</* badge content="徽章" icon="sparkles" */>}}
|
||||
{{</* badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
|
||||
```
|
||||
|
||||
### 选项
|
||||
|
||||
| 姓名 | 描述 |
|
||||
|-----------|----------------------------------------------------------------------------------------------------|
|
||||
| `content` | 徽章的文字。 |
|
||||
| `link` | 徽章的链接。 |
|
||||
| `icon` | 徽章的图标。 |
|
||||
| `color` | 徽章的颜色。 <br/> `gray` (默认), `purple`, `indigo`, `blue`, `green`, `yellow`, `amber`, `orange`, `red`. |
|
||||
| `class` | 徽章的等级。 |
|
||||
| `border` | 添加或删除边框 (默认：true). |
|
||||
|
||||
## YouTube
|
||||
|
||||
嵌入YouTube视频。
|
||||
|
||||
```
|
||||
{{</* youtube 视频ID */>}}
|
||||
```
|
||||
|
||||
效果：
|
||||
|
||||
{{< youtube id=dQw4w9WgXcQ loading=lazy >}}
|
||||
|
||||
更多信息，请参阅 [Hugo 的 YouTube 短代码](https://gohugo.io/content-management/shortcodes/#youtube)。
|
||||
|
||||
## PDF
|
||||
|
||||
通过PDF短代码可在内容中嵌入PDF文件。
|
||||
|
||||
```
|
||||
{{</* pdf "https://example.com/sample.pdf" */>}}
|
||||
```
|
||||
|
||||
也可将PDF文件置于项目目录中并使用相对路径。
|
||||
|
||||
```
|
||||
{{</* pdf "path/to/file.pdf" */>}}
|
||||
```
|
||||
|
||||
示例：
|
||||
|
||||
{{< pdf "https://upload.wikimedia.org/wikipedia/commons/1/13/Example.pdf" >}}
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
title: مراحل
|
||||
---
|
||||
|
||||
یک کامپوننت داخلی برای نمایش یک سری مراحل.
|
||||
|
||||
## مثال
|
||||
|
||||
{{% steps %}}
|
||||
|
||||
### مرحله ۱
|
||||
|
||||
این اولین مرحله است.
|
||||
|
||||
### مرحله ۲
|
||||
|
||||
این دومین مرحله است.
|
||||
|
||||
### مرحله ۳
|
||||
|
||||
این سومین مرحله است.
|
||||
|
||||
{{% /steps %}}
|
||||
|
||||
|
||||
## نحوه استفاده
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
لطفاً توجه داشته باشید که این شورتکد **فقط برای محتوای Markdown** طراحی شده است.
|
||||
اگر محتوای HTML یا شورتکدهای دیگر را به عنوان محتوای مرحله قرار دهید، ممکن است به درستی نمایش داده نشود.
|
||||
{{< /callout >}}
|
||||
|
||||
عنوان h3 مارک‌داون را درون شورتکد `steps` قرار دهید.
|
||||
|
||||
```
|
||||
{{%/* steps */%}}
|
||||
|
||||
### مرحله ۱
|
||||
|
||||
این اولین مرحله است.
|
||||
|
||||
### مرحله ۲
|
||||
|
||||
این دومین مرحله است.
|
||||
|
||||
{{%/* /steps */%}}
|
||||
```
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
title: ステップ
|
||||
---
|
||||
|
||||
一連のステップを表示するための組み込みコンポーネントです。
|
||||
|
||||
## 例
|
||||
|
||||
{{% steps %}}
|
||||
|
||||
### ステップ 1
|
||||
|
||||
これは最初のステップです。
|
||||
|
||||
### ステップ 2
|
||||
|
||||
これは2番目のステップです。
|
||||
|
||||
### ステップ 3
|
||||
|
||||
これは3番目のステップです。
|
||||
|
||||
{{% /steps %}}
|
||||
|
||||
|
||||
## 使い方
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
このショートコードは **Markdown コンテンツ専用** であることに注意してください。
|
||||
HTML コンテンツや他のショートコードをステップの内容として含めると、期待通りにレンダリングされない場合があります。
|
||||
{{< /callout >}}
|
||||
|
||||
`steps` ショートコード内に Markdown の h3 ヘッダーを配置します。
|
||||
|
||||
```
|
||||
{{%/* steps */%}}
|
||||
|
||||
### ステップ 1
|
||||
|
||||
これは最初のステップです。
|
||||
|
||||
### ステップ 2
|
||||
|
||||
これは2番目のステップです。
|
||||
|
||||
{{%/* /steps */%}}
|
||||
```
|
||||
@@ -0,0 +1,57 @@
|
||||
---
|
||||
title: Steps
|
||||
---
|
||||
|
||||
A built-in component to display a series of steps.
|
||||
|
||||
You can use the Markdown attribute `{class="no-step-marker"}` to prevent a heading from being counted as a step.
|
||||
|
||||
## Example
|
||||
|
||||
{{% steps %}}
|
||||
|
||||
### Step 1
|
||||
|
||||
This is the first step.
|
||||
|
||||
### Step 2
|
||||
|
||||
This is the second step.
|
||||
|
||||
#### Step subheading {class="no-step-marker"}
|
||||
|
||||
This will not be counted as a step.
|
||||
|
||||
### Step 3
|
||||
|
||||
This is the third step.
|
||||
|
||||
{{% /steps %}}
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
Please note that this shortcode is intended **only for Markdown content**.
|
||||
If you put HTML content or other shortcodes as step content, it may not render as expected.
|
||||
{{< /callout >}}
|
||||
|
||||
Put Markdown h3 header within `steps` shortcode.
|
||||
|
||||
```
|
||||
{{%/* steps */%}}
|
||||
|
||||
### Step 1
|
||||
|
||||
This is the first step.
|
||||
|
||||
### Step 2
|
||||
|
||||
This is the second step.
|
||||
|
||||
#### Step subheading {class="no-step-marker"}
|
||||
|
||||
This will not be counted as a step.
|
||||
|
||||
{{%/* /steps */%}}
|
||||
```
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
title: 步骤
|
||||
---
|
||||
|
||||
一个内置组件，用于显示一系列步骤。
|
||||
|
||||
## 示例
|
||||
|
||||
{{% steps %}}
|
||||
|
||||
### 第一步
|
||||
|
||||
这是第一步。
|
||||
|
||||
### 第二步
|
||||
|
||||
这是第二步。
|
||||
|
||||
### 第三步
|
||||
|
||||
这是第三步。
|
||||
|
||||
{{% /steps %}}
|
||||
|
||||
|
||||
## 使用方法
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
请注意，此短代码**仅适用于Markdown内容**。
|
||||
如果在步骤内容中放入HTML或其他短代码，可能无法按预期渲染。
|
||||
{{< /callout >}}
|
||||
|
||||
在`steps`短代码内放置Markdown的三级标题。
|
||||
|
||||
```
|
||||
{{%/* steps */%}}
|
||||
|
||||
### 第一步
|
||||
|
||||
这是第一步。
|
||||
|
||||
### 第二步
|
||||
|
||||
这是第二步。
|
||||
|
||||
{{%/* /steps */%}}
|
||||
```
|
||||
@@ -0,0 +1,149 @@
|
||||
---
|
||||
title: تب‌ها
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
## مثال
|
||||
|
||||
{{< tabs >}}
|
||||
|
||||
{{< tab name="macOS" >}}**macOS**: یک سیستم عامل دسکتاپ توسط اپل.{{< /tab >}}
|
||||
{{< tab name="Linux" >}}**Linux**: یک سیستم عامل متن‌باز.{{< /tab >}}
|
||||
{{< tab name="Windows" >}}**Windows**: یک سیستم عامل دسکتاپ توسط مایکروسافت.{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
## نحوه استفاده
|
||||
|
||||
### پیش‌فرض
|
||||
|
||||
```
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab name="JSON" */>}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش داده‌های ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{</* /tab */>}}
|
||||
{{</* tab name="YAML" */>}}**YAML**: YAML یک زبان سریال‌سازی داده‌های قابل خواندن توسط انسان است.{{</* /tab */>}}
|
||||
{{</* tab name="TOML" */>}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
### مشخص کردن ایندکس انتخاب شده
|
||||
|
||||
از ویژگی `selected` برای مشخص کردن تب انتخاب شده استفاده کنید.
|
||||
|
||||
```
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab name="JSON" */>}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش داده‌های ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{</* /tab */>}}
|
||||
{{</* tab name="YAML" selected=true */>}}**YAML**: YAML یک زبان سریال‌سازی داده‌های قابل خواندن توسط انسان است.{{</* /tab */>}}
|
||||
{{</* tab name="TOML" */>}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
تب `YAML` به طور پیش‌فرض انتخاب خواهد شد.
|
||||
|
||||
{{< tabs >}}
|
||||
|
||||
{{< tab name="JSON" >}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش داده‌های ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{< /tab >}}
|
||||
{{< tab name="YAML" selected=true >}}**YAML**: YAML یک زبان سریال‌سازی داده‌های قابل خواندن توسط انسان است.{{< /tab >}}
|
||||
{{< tab name="TOML" >}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
### افزودن آیکون
|
||||
|
||||
با استفاده از پارامتر `icon` برای هر `tab` می‌توانید قبل از عنوان تب آیکون نمایش دهید.
|
||||
برای مشاهده لیست آیکون‌های موجود، صفحه [شورتکد آیکون](../icon) را ببینید.
|
||||
|
||||
```
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab name="Photos" icon="photograph" */>}}مدیریت و سازماندهی کتابخانه عکس‌های شما.{{</* /tab */>}}
|
||||
{{</* tab name="Music" icon="music-note" */>}}مرور و پخش آهنگ‌های مورد علاقه شما.{{</* /tab */>}}
|
||||
{{</* tab name="Videos" icon="film" */>}}تماشا و پخش محتوای ویدیویی.{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
{{< tabs >}}
|
||||
|
||||
{{< tab name="Photos" icon="photograph" >}}مدیریت و سازماندهی کتابخانه عکس‌های شما.{{< /tab >}}
|
||||
{{< tab name="Music" icon="music-note" >}}مرور و پخش آهنگ‌های مورد علاقه شما.{{< /tab >}}
|
||||
{{< tab name="Videos" icon="film" >}}تماشا و پخش محتوای ویدیویی.{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
### استفاده از Markdown
|
||||
|
||||
نحو Markdown شامل بلوک کد نیز پشتیبانی می‌شود:
|
||||
|
||||
````
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab name="JSON" */>}}
|
||||
```json
|
||||
{ "hello": "world" }
|
||||
```
|
||||
{{</* /tab */>}}
|
||||
|
||||
... سایر تب‌ها را به همین ترتیب اضافه کنید
|
||||
|
||||
{{</* /tabs */>}}
|
||||
````
|
||||
|
||||
{{< tabs >}}
|
||||
|
||||
{{< tab name="JSON" >}}
|
||||
```json
|
||||
{ "hello": "world" }
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab name="YAML" >}}
|
||||
```yaml
|
||||
hello: world
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab name="TOML" >}}
|
||||
```toml
|
||||
hello = "world"
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
### همگام‌سازی تب‌ها
|
||||
|
||||
تب‌هایی که لیست `name` یکسانی دارند می‌توانند همگام‌سازی شوند. وقتی فعال باشد، انتخاب یک تب تمام تب‌های دیگر با `name` یکسان را به‌روز می‌کند و انتخاب را در بین صفحات به خاطر می‌سپارد.
|
||||
|
||||
به صورت جهانی در فایل `hugo.yaml` در بخش `page` فعال کنید:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
page:
|
||||
tabs:
|
||||
sync: true
|
||||
```
|
||||
|
||||
با فعال کردن این گزینه، دو بلوک تب زیر همیشه آیتم انتخاب شده یکسانی را نمایش خواهند داد:
|
||||
|
||||
```markdown
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab name="A" */>}}محتوای A{{</* /tab */>}}
|
||||
{{</* tab name="B" */>}}محتوای B{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab name="A" */>}}محتوای دوم A{{</* /tab */>}}
|
||||
{{</* tab name="B" */>}}محتوای دوم B{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
@@ -0,0 +1,149 @@
|
||||
---
|
||||
title: タブ
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
## 例
|
||||
|
||||
{{< tabs >}}
|
||||
|
||||
{{< tab name="macOS" >}}**macOS**: Apple が提供するデスクトップオペレーティングシステム。{{< /tab >}}
|
||||
{{< tab name="Linux" >}}**Linux**: オープンソースのオペレーティングシステム。{{< /tab >}}
|
||||
{{< tab name="Windows" >}}**Windows**: Microsoft が提供するデスクトップオペレーティングシステム。{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
## 使用方法
|
||||
|
||||
### デフォルト
|
||||
|
||||
```
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab name="JSON" */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現する標準のテキストベースフォーマットです。{{</* /tab */>}}
|
||||
{{</* tab name="YAML" */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}}
|
||||
{{</* tab name="TOML" */>}}**TOML**: TOML は、明確なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
### 選択インデックスの指定
|
||||
|
||||
`selected` プロパティを使用して選択するタブを指定します。
|
||||
|
||||
```
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab name="JSON" */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現する標準のテキストベースフォーマットです。{{</* /tab */>}}
|
||||
{{</* tab name="YAML" selected=true */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}}
|
||||
{{</* tab name="TOML" */>}}**TOML**: TOML は、明確なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
`YAML` タブがデフォルトで選択されます。
|
||||
|
||||
{{< tabs >}}
|
||||
|
||||
{{< tab name="JSON" >}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現する標準のテキストベースフォーマットです。{{< /tab >}}
|
||||
{{< tab name="YAML" selected=true >}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{< /tab >}}
|
||||
{{< tab name="TOML" >}}**TOML**: TOML は、明確なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
### アイコンを追加する
|
||||
|
||||
各タブに `icon` を指定すると、ラベルの前にアイコンを表示できます。
|
||||
利用可能なアイコンの一覧は [Icon ショートコード](../icon) ページを参照してください。
|
||||
|
||||
```
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab name="Photos" icon="photograph" */>}}写真ライブラリを管理・整理します。{{</* /tab */>}}
|
||||
{{</* tab name="Music" icon="music-note" */>}}お気に入りの曲を閲覧・再生します。{{</* /tab */>}}
|
||||
{{</* tab name="Videos" icon="film" */>}}動画コンテンツを視聴・ストリーミングします。{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
{{< tabs >}}
|
||||
|
||||
{{< tab name="Photos" icon="photograph" >}}写真ライブラリを管理・整理します。{{< /tab >}}
|
||||
{{< tab name="Music" icon="music-note" >}}お気に入りの曲を閲覧・再生します。{{< /tab >}}
|
||||
{{< tab name="Videos" icon="film" >}}動画コンテンツを視聴・ストリーミングします。{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
### Markdown の使用
|
||||
|
||||
コードブロックを含む Markdown 構文もサポートされています:
|
||||
|
||||
````
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab name="JSON" */>}}
|
||||
```json
|
||||
{ "hello": "world" }
|
||||
```
|
||||
{{</* /tab */>}}
|
||||
|
||||
... 他のタブも同様に追加
|
||||
|
||||
{{</* /tabs */>}}
|
||||
````
|
||||
|
||||
{{< tabs >}}
|
||||
|
||||
{{< tab name="JSON" >}}
|
||||
```json
|
||||
{ "hello": "world" }
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab name="YAML" >}}
|
||||
```yaml
|
||||
hello: world
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab name="TOML" >}}
|
||||
```toml
|
||||
hello = "world"
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
### タブの同期
|
||||
|
||||
同じ `name` リストを持つタブは同期できます。有効にすると、タブを選択すると同じ `name` を持つ他のタブも更新され、ページ間で選択が記憶されます。
|
||||
|
||||
`hugo.yaml` の `page` セクションでグローバルに有効にします:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
page:
|
||||
tabs:
|
||||
sync: true
|
||||
```
|
||||
|
||||
これを有効にすると、以下の 2 つのタブブロックは常に同じ選択項目を表示します:
|
||||
|
||||
```markdown
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab name="A" */>}}A の内容{{</* /tab */>}}
|
||||
{{</* tab name="B" */>}}B の内容{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab name="A" */>}}2 番目の A の内容{{</* /tab */>}}
|
||||
{{</* tab name="B" */>}}2 番目の B の内容{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
@@ -0,0 +1,155 @@
|
||||
---
|
||||
title: Tabs
|
||||
next: /docs/guide/term
|
||||
---
|
||||
|
||||
## Example
|
||||
|
||||
{{< tabs >}}
|
||||
{{< tab name="JSON" >}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{< /tab >}}
|
||||
{{< tab name="YAML" >}}**YAML**: YAML is a human-readable data serialization language.{{< /tab >}}
|
||||
{{< tab name="TOML" >}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{< /tab >}}
|
||||
{{< /tabs >}}
|
||||
|
||||
## Usage
|
||||
|
||||
### Default
|
||||
|
||||
```
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab name="JSON" */>}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{</* /tab */>}}
|
||||
{{</* tab name="YAML" */>}}**YAML**: YAML is a human-readable data serialization language.{{</* /tab */>}}
|
||||
{{</* tab name="TOML" */>}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
### Specify Selected Tab
|
||||
|
||||
Use `selected` property to specify the selected tab.
|
||||
|
||||
```
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab name="JSON" */>}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{</* /tab */>}}
|
||||
{{</* tab name="YAML" selected=true */>}}**YAML**: YAML is a human-readable data serialization language.{{</* /tab */>}}
|
||||
{{</* tab name="TOML" */>}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
The `YAML` tab will be selected by default.
|
||||
|
||||
{{< tabs >}}
|
||||
{{< tab name="JSON" >}}**JSON**: JavaScript Object Notation (JSON) is a standard text-based format for representing structured data based on JavaScript object syntax.{{< /tab >}}
|
||||
{{< tab name="YAML" selected=true >}}**YAML**: YAML is a human-readable data serialization language.{{< /tab >}}
|
||||
{{< tab name="TOML" >}}**TOML**: TOML aims to be a minimal configuration file format that's easy to read due to obvious semantics.{{< /tab >}}
|
||||
{{< /tabs >}}
|
||||
|
||||
### Add Icons
|
||||
|
||||
Use the `icon` property on each `tab` to display an icon before the label.
|
||||
See the [Icon shortcode](../icon) page for the list of available icons.
|
||||
|
||||
```
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab name="Photos" icon="photograph" */>}}Manage and organize your photo library.{{</* /tab */>}}
|
||||
{{</* tab name="Music" icon="music-note" */>}}Browse and play your favorite tracks.{{</* /tab */>}}
|
||||
{{</* tab name="Videos" icon="film" */>}}Watch and stream video content.{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
{{< tabs >}}
|
||||
{{< tab name="Photos" icon="photograph" >}}Manage and organize your photo library.{{< /tab >}}
|
||||
{{< tab name="Music" icon="music-note" >}}Browse and play your favorite tracks.{{< /tab >}}
|
||||
{{< tab name="Videos" icon="film" >}}Watch and stream video content.{{< /tab >}}
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
### Use Markdown
|
||||
|
||||
Markdown syntax including code block is also supported:
|
||||
|
||||
````
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab name="JSON" */>}}
|
||||
```json
|
||||
{ "hello": "world" }
|
||||
```
|
||||
{{</* /tab */>}}
|
||||
|
||||
... add other tabs similarly
|
||||
|
||||
{{</* /tabs */>}}
|
||||
````
|
||||
|
||||
{{< tabs >}}
|
||||
|
||||
{{< tab name="JSON" >}}
|
||||
```json
|
||||
{ "hello": "world" }
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab name="YAML" >}}
|
||||
```yaml
|
||||
hello: world
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab name="TOML" >}}
|
||||
```toml
|
||||
hello = "world"
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
### Sync Tabs
|
||||
|
||||
Tabs with the same list of `items` can be synchronized. When enabled, selecting a tab updates all other tabs with the same `items` and remembers the selection across pages.
|
||||
|
||||
Enable/disable globally in your `hugo.yaml` under the `page` section:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
page:
|
||||
tabs:
|
||||
sync: true
|
||||
```
|
||||
|
||||
Enable/disable per page inside the front matter:
|
||||
|
||||
```yaml {filename="my_page.md"}
|
||||
---
|
||||
title: My page
|
||||
params:
|
||||
tabs:
|
||||
sync: true
|
||||
---
|
||||
|
||||
Example content.
|
||||
```
|
||||
|
||||
With this enabled, the following two tab blocks will always display the same selected item:
|
||||
|
||||
```markdown
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab name="A" */>}}A content{{</* /tab */>}}
|
||||
{{</* tab name="B" */>}}B content{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab name="A" */>}}Second A content{{</* /tab */>}}
|
||||
{{</* tab name="B" */>}}Second B content{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
@@ -0,0 +1,149 @@
|
||||
---
|
||||
title: 标签页
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
## 示例
|
||||
|
||||
{{< tabs >}}
|
||||
|
||||
{{< tab name="macOS" >}}**macOS**: 苹果公司开发的桌面操作系统。{{< /tab >}}
|
||||
{{< tab name="Linux" >}}**Linux**: 一款开源操作系统。{{< /tab >}}
|
||||
{{< tab name="Windows" >}}**Windows**: 微软公司开发的桌面操作系统。{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
## 使用方法
|
||||
|
||||
### 默认
|
||||
|
||||
```
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab name="JSON" */>}}**JSON**: JavaScript对象表示法（JSON）是一种基于JavaScript对象语法的标准文本格式，用于表示结构化数据。{{</* /tab */>}}
|
||||
{{</* tab name="YAML" */>}}**YAML**: YAML是一种人类可读的数据序列化语言。{{</* /tab */>}}
|
||||
{{</* tab name="TOML" */>}}**TOML**: TOML旨在成为一种易于阅读的最小化配置文件格式，因其明显的语义而易于理解。{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
### 指定默认选中项
|
||||
|
||||
使用 `selected` 属性指定默认选中的标签页。
|
||||
|
||||
```
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab name="JSON" */>}}**JSON**: JavaScript对象表示法（JSON）是一种基于JavaScript对象语法的标准文本格式，用于表示结构化数据。{{</* /tab */>}}
|
||||
{{</* tab name="YAML" selected=true */>}}**YAML**: YAML是一种人类可读的数据序列化语言。{{</* /tab */>}}
|
||||
{{</* tab name="TOML" */>}}**TOML**: TOML旨在成为一种易于阅读的最小化配置文件格式，因其明显的语义而易于理解。{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
默认会选中 `YAML` 标签页。
|
||||
|
||||
{{< tabs >}}
|
||||
|
||||
{{< tab name="JSON" >}}**JSON**: JavaScript对象表示法（JSON）是一种基于JavaScript对象语法的标准文本格式，用于表示结构化数据。{{< /tab >}}
|
||||
{{< tab name="YAML" selected=true >}}**YAML**: YAML是一种人类可读的数据序列化语言。{{< /tab >}}
|
||||
{{< tab name="TOML" >}}**TOML**: TOML旨在成为一种易于阅读的最小化配置文件格式，因其明显的语义而易于理解。{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
### 添加图标
|
||||
|
||||
在每个 `tab` 上使用 `icon` 参数，可以在标签文本前显示图标。
|
||||
可用图标列表请参阅 [Icon 短代码](../icon) 页面。
|
||||
|
||||
```
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab name="Photos" icon="photograph" */>}}管理和整理您的照片库。{{</* /tab */>}}
|
||||
{{</* tab name="Music" icon="music-note" */>}}浏览和播放您喜爱的曲目。{{</* /tab */>}}
|
||||
{{</* tab name="Videos" icon="film" */>}}观看和串流视频内容。{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
{{< tabs >}}
|
||||
|
||||
{{< tab name="Photos" icon="photograph" >}}管理和整理您的照片库。{{< /tab >}}
|
||||
{{< tab name="Music" icon="music-note" >}}浏览和播放您喜爱的曲目。{{< /tab >}}
|
||||
{{< tab name="Videos" icon="film" >}}观看和串流视频内容。{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
### 使用Markdown
|
||||
|
||||
支持包括代码块在内的Markdown语法：
|
||||
|
||||
````
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab name="JSON" */>}}
|
||||
```json
|
||||
{ "hello": "world" }
|
||||
```
|
||||
{{</* /tab */>}}
|
||||
|
||||
... 其他标签页类似添加
|
||||
|
||||
{{</* /tabs */>}}
|
||||
````
|
||||
|
||||
{{< tabs >}}
|
||||
|
||||
{{< tab name="JSON" >}}
|
||||
```json
|
||||
{ "hello": "world" }
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab name="YAML" >}}
|
||||
```yaml
|
||||
hello: world
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab name="TOML" >}}
|
||||
```toml
|
||||
hello = "world"
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
### 同步标签页
|
||||
|
||||
具有相同 `name` 列表的标签页可以同步。启用后，选择一个标签页会更新所有具有相同 `name` 的其他标签页，并在页面间记住选择。
|
||||
|
||||
在 `hugo.yaml` 的 `page` 部分全局启用：
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
page:
|
||||
tabs:
|
||||
sync: true
|
||||
```
|
||||
|
||||
启用后，以下两个标签页块将始终显示相同的选中项：
|
||||
|
||||
```markdown
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab name="A" */>}}A内容{{</* /tab */>}}
|
||||
{{</* tab name="B" */>}}B内容{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
|
||||
{{</* tabs */>}}
|
||||
|
||||
{{</* tab name="A" */>}}第二个A内容{{</* /tab */>}}
|
||||
{{</* tab name="B" */>}}第二个B内容{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
@@ -0,0 +1,28 @@
|
||||
---
|
||||
title: اصطلاح
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
یک مؤلفهٔ داخلی برای نمایش تعریف اصطلاحات.
|
||||
|
||||
تعاریف اصطلاحات در یک [فایل دادهٔ YAML](/docs/advanced/additional-pages/#glossary) ساختاریافته نگهداری می‌شوند،
|
||||
و برای هر زبان پشتیبانی‌شده یک فایل جداگانه تعریف می‌گردد.
|
||||
|
||||
## مثال
|
||||
|
||||
* {{< term "سازندهٔ سایت ایستا" >}}
|
||||
* {{< term "SEO" >}}
|
||||
|
||||
## نحوهٔ استفاده
|
||||
|
||||
```
|
||||
{{</* term "SEO" */>}}
|
||||
```
|
||||
|
||||
اگر اصطلاحی در واژه‌نامه یافت نشود، همان‌طور که وارد شده نمایش داده می‌شود.
|
||||
|
||||
## گزینه‌ها
|
||||
|
||||
| نام | توضیح |
|
||||
|---------------|----------------------------|
|
||||
| `entry` | اصطلاح واژه‌نامه |
|
||||
@@ -0,0 +1,28 @@
|
||||
---
|
||||
title: 用語
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
用語の定義を表示するための組み込みコンポーネントです。
|
||||
|
||||
用語の定義は、構造化された YAML [データファイル](/docs/advanced/additional-pages/#glossary)で管理されており、
|
||||
対応する言語ごとに1つのファイルが定義されています。
|
||||
|
||||
## 例
|
||||
|
||||
* {{< term "静的サイトジェネレーター" >}}
|
||||
* {{< term "SEO" >}}
|
||||
|
||||
## 使用方法
|
||||
|
||||
```
|
||||
{{</* term "SEO" */>}}
|
||||
```
|
||||
|
||||
用語が用語集に存在しない場合は、そのまま表示されます。
|
||||
|
||||
## オプション
|
||||
|
||||
| 名前 | 説明 |
|
||||
|--------------|--------------------------|
|
||||
| `entry` | 用語名 |
|
||||
@@ -0,0 +1,29 @@
|
||||
---
|
||||
title: Term
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
A built-in component to display a terminology definition.
|
||||
|
||||
Glossary definition is maintained in a structured YAML [data file](/docs/advanced/additional-pages/#glossary),
|
||||
with one file defined per supported language.
|
||||
|
||||
## Example
|
||||
|
||||
* {{< term "static site generator" >}}
|
||||
* {{< term "SEO" >}}
|
||||
|
||||
## Usage
|
||||
|
||||
```
|
||||
{{</* term "SEO" */>}}
|
||||
```
|
||||
|
||||
If a term is not found in the glossary, it is returned as-is.
|
||||
|
||||
|
||||
## Options
|
||||
|
||||
| Name | Description |
|
||||
|--------------|-----------------------------|
|
||||
| `entry` | Glossary term |
|
||||
@@ -0,0 +1,28 @@
|
||||
---
|
||||
title: 术语
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
一个用于显示术语定义的内置组件。
|
||||
|
||||
术语定义保存在结构化的 YAML [数据文件](/docs/advanced/additional-pages/#glossary)中，
|
||||
每种支持的语言对应一个文件。
|
||||
|
||||
## 示例
|
||||
|
||||
* {{< term "静态网站生成器" >}}
|
||||
* {{< term "SEO" >}}
|
||||
|
||||
## 用法
|
||||
|
||||
```
|
||||
{{</* term "SEO" */>}}
|
||||
```
|
||||
|
||||
如果术语在词汇表中未找到，则会原样返回该术语。
|
||||
|
||||
## 选项
|
||||
|
||||
| 名称 | 描述 |
|
||||
|--------------|------------------|
|
||||
| `entry` | 术语名称 |
|
||||
@@ -0,0 +1,114 @@
|
||||
---
|
||||
title: "رنگ‌آمیزی نحوی"
|
||||
weight: 3
|
||||
---
|
||||
|
||||
Hugo از [Chroma](https://github.com/alecthomas/chroma)، یک رنگ‌آمیزی نحوی همه‌منظوره در Go خالص، برای رنگ‌آمیزی نحوی استفاده می‌کند.
|
||||
توصیه می‌شود برای بلوک‌های کد در محتوای Markdown از بک‌تیک استفاده کنید. به عنوان مثال:
|
||||
|
||||
<!--more-->
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
````
|
||||
|
||||
به صورت زیر نمایش داده می‌شود:
|
||||
|
||||
```python
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
|
||||
## ویژگی‌ها
|
||||
|
||||
### نام فایل
|
||||
|
||||
برای افزودن نام فایل یا عنوان به بلوک کد، ویژگی `filename` را تنظیم کنید:
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python {filename="hello.py"}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
````
|
||||
|
||||
```python {filename="hello.py"}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
|
||||
### پیوند به فایل
|
||||
|
||||
{{< new-feature version="v0.9.2" >}}
|
||||
|
||||
می‌توانید از ویژگی `base_url` برای ارائه یک URL پایه استفاده کنید که با نام فایل ترکیب می‌شود تا یک پیوند ایجاد کند.
|
||||
|
||||
نام فایل می‌تواند شامل یک مسیر نسبی باشد اگر محل فایل را در مسیر پایه مشخص کند.
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="docs/hugo.work"}
|
||||
go 1.20
|
||||
```
|
||||
````
|
||||
|
||||
```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="docs/hugo.work"}
|
||||
go 1.20
|
||||
```
|
||||
|
||||
### شماره خطوط
|
||||
|
||||
برای تنظیم شماره خطوط، ویژگی `linenos` را به `table` تنظیم کنید و اختیاریاً `linenostart` را به شماره خط شروع تنظیم کنید:
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python {linenos=table,linenostart=42}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
````
|
||||
|
||||
```python {linenos=table,linenostart=42}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
|
||||
### برجسته‌سازی خطوط
|
||||
|
||||
برای برجسته‌سازی خطوط، ویژگی `hl_lines` را به لیستی از شماره خطوط تنظیم کنید:
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
|
||||
def main():
|
||||
say_hello()
|
||||
```
|
||||
````
|
||||
|
||||
```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
|
||||
def main():
|
||||
say_hello()
|
||||
```
|
||||
|
||||
### دکمه کپی
|
||||
|
||||
به طور پیش‌فرض، دکمه کپی برای بلوک‌های کد فعال است. رفتار آن را می‌توان با تغییر فایل پیکربندی سایت تغییر داد:
|
||||
|
||||
```yaml {linenos=table,linenostart=42,filename="hugo.yaml"}
|
||||
params:
|
||||
highlight:
|
||||
copy:
|
||||
enable: true
|
||||
# hover | always
|
||||
display: hover
|
||||
```
|
||||
|
||||
## زبان‌های پشتیبانی شده
|
||||
|
||||
برای مشاهده لیست زبان‌های پشتیبانی شده، لطفاً به [مستندات Chroma](https://github.com/alecthomas/chroma#supported-languages) مراجعه کنید.
|
||||
@@ -0,0 +1,114 @@
|
||||
---
|
||||
title: "シンタックスハイライト"
|
||||
weight: 3
|
||||
---
|
||||
|
||||
Hugo は構文強調表示に、純粋な Go で書かれた汎用シンタックスハイライタ [Chroma](https://github.com/alecthomas/chroma) を使用しています。
|
||||
Markdown コンテンツ内のコードブロックにはバッククォートを使用することを推奨します。例えば:
|
||||
|
||||
<!--more-->
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
````
|
||||
|
||||
は次のようにレンダリングされます:
|
||||
|
||||
```python
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
|
||||
## 機能
|
||||
|
||||
### ファイル名
|
||||
|
||||
コードブロックにファイル名やタイトルを追加するには、`filename` 属性を設定します:
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python {filename="hello.py"}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
````
|
||||
|
||||
```python {filename="hello.py"}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
|
||||
### ファイルへのリンク
|
||||
|
||||
{{< new-feature version="v0.9.2" >}}
|
||||
|
||||
`base_url` 属性を使用してベース URL を指定し、ファイル名と組み合わせてリンクを生成できます。
|
||||
|
||||
ファイル名には、ベースパス内のファイルの場所を指定する相対パスを含めることができます。
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="docs/hugo.work"}
|
||||
go 1.20
|
||||
```
|
||||
````
|
||||
|
||||
```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="docs/hugo.work"}
|
||||
go 1.20
|
||||
```
|
||||
|
||||
### 行番号
|
||||
|
||||
行番号を表示するには、`linenos` 属性を `table` に設定し、必要に応じて `linenostart` で開始行番号を指定します:
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python {linenos=table,linenostart=42}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
````
|
||||
|
||||
```python {linenos=table,linenostart=42}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
|
||||
### 行のハイライト
|
||||
|
||||
特定の行をハイライト表示するには、`hl_lines` 属性に行番号のリストを設定します:
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
|
||||
def main():
|
||||
say_hello()
|
||||
```
|
||||
````
|
||||
|
||||
```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
|
||||
def main():
|
||||
say_hello()
|
||||
```
|
||||
|
||||
### コピーボタン
|
||||
|
||||
デフォルトでコードブロックにはコピーボタンが有効になっています。この動作はサイト設定ファイルで変更できます:
|
||||
|
||||
```yaml {linenos=table,linenostart=42,filename="hugo.yaml"}
|
||||
params:
|
||||
highlight:
|
||||
copy:
|
||||
enable: true
|
||||
# hover | always
|
||||
display: hover
|
||||
```
|
||||
|
||||
## 対応言語
|
||||
|
||||
対応言語の一覧については、[Chroma のドキュメント](https://github.com/alecthomas/chroma#supported-languages)を参照してください。
|
||||
@@ -0,0 +1,114 @@
|
||||
---
|
||||
title: "Syntax Highlighting"
|
||||
weight: 3
|
||||
---
|
||||
|
||||
Hugo uses [Chroma](https://github.com/alecthomas/chroma), a general purpose syntax highlighter in pure Go, for syntax highlighting.
|
||||
It is recommended to use backticks for code blocks in Markdown content. For example:
|
||||
|
||||
<!--more-->
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
````
|
||||
|
||||
will be rendered as:
|
||||
|
||||
```python
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
|
||||
## Features
|
||||
|
||||
### Filename
|
||||
|
||||
To add a filename or title to the code block, set attribute `filename`:
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python {filename="hello.py"}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
````
|
||||
|
||||
```python {filename="hello.py"}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
|
||||
### Link to File
|
||||
|
||||
{{< new-feature version="v0.9.2" >}}
|
||||
|
||||
You can use the `base_url` attribute to provide a base URL that will be combined with the file name to generate a link.
|
||||
|
||||
The file name can include a relative path if it specifies the file's location within the base path.
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="docs/hugo.work"}
|
||||
go 1.20
|
||||
```
|
||||
````
|
||||
|
||||
```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="docs/hugo.work"}
|
||||
go 1.20
|
||||
```
|
||||
|
||||
### Line Numbers
|
||||
|
||||
To set line numbers, set attribute `linenos` to `table` and optionally set `linenostart` to the starting line number:
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python {linenos=table,linenostart=42}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
````
|
||||
|
||||
```python {linenos=table,linenostart=42}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
|
||||
### Highlighting Lines
|
||||
|
||||
To highlight lines, set attribute `hl_lines` to a list of line numbers:
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
|
||||
def main():
|
||||
say_hello()
|
||||
```
|
||||
````
|
||||
|
||||
```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
|
||||
def main():
|
||||
say_hello()
|
||||
```
|
||||
|
||||
### Copy Button
|
||||
|
||||
By default, copy button is enabled for code blocks. Its behavior can changed by modifying the site configuration file:
|
||||
|
||||
```yaml {linenos=table,linenostart=42,filename="hugo.yaml"}
|
||||
params:
|
||||
highlight:
|
||||
copy:
|
||||
enable: true
|
||||
# hover | always
|
||||
display: hover
|
||||
```
|
||||
|
||||
## Supported Languages
|
||||
|
||||
For a list of supported languages, please see the [Chroma documentation](https://github.com/alecthomas/chroma#supported-languages).
|
||||
@@ -0,0 +1,111 @@
|
||||
---
|
||||
title: "语法高亮"
|
||||
weight: 3
|
||||
---
|
||||
|
||||
Hugo 使用纯 Go 编写的通用语法高亮工具 [Chroma](https://github.com/alecthomas/chroma) 来实现代码高亮。建议在 Markdown 内容中使用反引号标记代码块，例如：
|
||||
|
||||
<!--more-->
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
````
|
||||
|
||||
将渲染为：
|
||||
|
||||
```python
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
|
||||
## 功能特性
|
||||
|
||||
### 文件名标注
|
||||
|
||||
通过设置 `filename` 属性可为代码块添加文件名或标题：
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python {filename="hello.py"}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
````
|
||||
|
||||
```python {filename="hello.py"}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
|
||||
### 文件链接
|
||||
|
||||
{{< new-feature version="v0.9.2" >}}
|
||||
|
||||
通过 `base_url` 属性可设置基础 URL，该 URL 会与文件名组合生成可点击的链接。文件名可包含相对路径以指定文件在基础路径中的位置。
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="docs/hugo.work"}
|
||||
go 1.20
|
||||
```
|
||||
````
|
||||
|
||||
```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="docs/hugo.work"}
|
||||
go 1.20
|
||||
```
|
||||
|
||||
### 行号显示
|
||||
|
||||
设置 `linenos=table` 可启用行号，并通过 `linenostart` 指定起始行号：
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python {linenos=table,linenostart=42}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
````
|
||||
|
||||
```python {linenos=table,linenostart=42}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
|
||||
### 行高亮
|
||||
|
||||
通过 `hl_lines` 属性可高亮指定行号（支持数组格式）：
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
|
||||
def main():
|
||||
say_hello()
|
||||
```
|
||||
````
|
||||
|
||||
```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
|
||||
def main():
|
||||
say_hello()
|
||||
```
|
||||
|
||||
### 复制按钮
|
||||
|
||||
代码块默认启用复制功能，可通过站点配置文件修改其行为：
|
||||
|
||||
```yaml {linenos=table,linenostart=42,filename="hugo.yaml"}
|
||||
params:
|
||||
highlight:
|
||||
copy:
|
||||
enable: true
|
||||
# hover | always
|
||||
display: hover
|
||||
```
|
||||
|
||||
## 支持语言
|
||||
|
||||
完整支持的语言列表请参阅 [Chroma 文档](https://github.com/alecthomas/chroma#supported-languages)。
|
||||
Reference in New Issue
Block a user