mirror of
https://github.com/imfing/hextra.git
synced 2025-08-24 14:16:36 -04:00
docs(blog): prepare for v0.10 release post (#746)
* docs(blog): prepare for v0.10 release post * Update v0.10.md * Update v0.10.md to refine upgrade instructions and enhance blog features. Added synchronized tab switching and pagination controls, while improving the search experience and table of contents navigation. * Enhance v0.10 release documentation with detailed upgrade instructions and migration guide. Added Tailwind theme variable customization section and clarified breaking changes. Improved clarity on CSS class prefix changes for better user experience. * Update v0.10.md to enhance upgrade instructions, clarify breaking changes, and improve overall readability. Adjusted formatting for consistency and added details on asset management and user experience improvements. * Add notable new features to v0.10.md, including dropdown menu support, enhanced search experience, and blog list pagination. Updated FlexSearch upgrade details for clarity and improved migration guide by removing redundant breaking change notes. * chore: update zh-cn translation * chore: update ja translation * chore: update fa and ja translations * chore: prepare release
This commit is contained in:
@@ -7,17 +7,17 @@ sidebar:
|
||||
open: true
|
||||
---
|
||||
|
||||
برای یادگیری نحوه استفاده از هگزترا، بخشهای زیر را کاوش کنید:
|
||||
برای یادگیری نحوه استفاده از Hextra، بخشهای زیر را بررسی کنید:
|
||||
|
||||
<!--more-->
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="organize-files" title="سازماندهی پروندهها" icon="document-duplicate" >}}
|
||||
{{< card link="organize-files" title="سازماندهی فایلها" icon="document-duplicate" >}}
|
||||
{{< card link="configuration" title="پیکربندی" icon="adjustments" >}}
|
||||
{{< card link="markdown" title="مارکداون" icon="markdown" >}}
|
||||
{{< card link="syntax-highlighting" title="برجستهکردن سینتکس" icon="sparkles" >}}
|
||||
{{< 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 >}}
|
||||
{{< card link="deploy-site" title="استقرار سایت" icon="server" >}}
|
||||
{{< /cards >}}
|
@@ -7,7 +7,7 @@ sidebar:
|
||||
open: true
|
||||
---
|
||||
|
||||
Hextraの使い方を学ぶために、以下のセクションを探索してください:
|
||||
Hextra の使い方を学ぶには、以下のセクションを参照してください:
|
||||
|
||||
<!--more-->
|
||||
|
||||
|
@@ -7,7 +7,7 @@ sidebar:
|
||||
open: true
|
||||
---
|
||||
|
||||
探索以下部分,了解如何使用 Hextra:
|
||||
通过以下章节了解如何使用 Hextra:
|
||||
|
||||
<!--more-->
|
||||
|
||||
|
@@ -1,11 +1,13 @@
|
||||
---
|
||||
title: پیکربندی
|
||||
weight: 2
|
||||
tags:
|
||||
- پیکربندی
|
||||
---
|
||||
|
||||
Hugo پیکربندی خود را از `hugo.yaml` در ریشه سایت Hugo شما میخواند.
|
||||
پرونده پیکربندی جایی است که میتوانید تمام جنبههای سایت خود را پیکربندی کنید.
|
||||
پرونده پیکربندی این سایت [`exampleSite/hugo.yaml`](https://github.com/imfing/hextra/blob/main/exampleSite/hugo.yaml) را در گیتهاب بررسی کنید تا ایدهای جامع از تنظیمات موجود و بهترین شیوهها بدست آورید.
|
||||
Hugo تنظیمات خود را از فایل `hugo.yaml` در ریشه سایت شما میخواند.
|
||||
فایل پیکربندی جایی است که میتوانید تمام جنبههای سایت خود را تنظیم کنید.
|
||||
برای آشنایی جامع با تنظیمات موجود و بهترین روشها، فایل پیکربندی این سایت [`exampleSite/hugo.yaml`](https://github.com/imfing/hextra/blob/main/exampleSite/hugo.yaml) را در GitHub بررسی کنید.
|
||||
|
||||
<!--more-->
|
||||
|
||||
@@ -13,7 +15,7 @@ Hugo پیکربندی خود را از `hugo.yaml` در ریشه سایت Hugo
|
||||
|
||||
### منو
|
||||
|
||||
منوی سمت چپ بالا در قسمت `menu.main` در پرونده پیکربندی تعریف شده است:
|
||||
منوی بالای صفحه در بخش `menu.main` در فایل پیکربندی تعریف میشود:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
menu:
|
||||
@@ -24,14 +26,14 @@ menu:
|
||||
- name: وبلاگ
|
||||
pageRef: /blog
|
||||
weight: 2
|
||||
- name: درباره ما
|
||||
- name: درباره
|
||||
pageRef: /about
|
||||
weight: 3
|
||||
- name: جستجو
|
||||
weight: 4
|
||||
params:
|
||||
type: search
|
||||
- name: گیتهاب
|
||||
- name: GitHub
|
||||
weight: 5
|
||||
url: "https://github.com/imfing/hextra"
|
||||
params:
|
||||
@@ -40,35 +42,56 @@ menu:
|
||||
|
||||
انواع مختلفی از آیتمهای منو وجود دارد:
|
||||
|
||||
1. پیوند به صفحهای در سایت با `pageRef`
|
||||
```yaml
|
||||
- name: مستندات
|
||||
pageRef: /docs
|
||||
```
|
||||
2. پیوند به یک نشانی اینترنتی با `url`
|
||||
```yaml
|
||||
- name: گیتهاب
|
||||
url: "https://github.com"
|
||||
```
|
||||
1. لینک به یک صفحه در سایت با `pageRef`
|
||||
```yaml
|
||||
- name: مستندات
|
||||
pageRef: /docs
|
||||
```
|
||||
2. لینک به یک URL خارجی با `url`
|
||||
```yaml
|
||||
- name: GitHub
|
||||
url: "https://github.com"
|
||||
```
|
||||
3. نوار جستجو با `type: search`
|
||||
```yaml
|
||||
- name: جستجو
|
||||
params:
|
||||
type: search
|
||||
```
|
||||
```yaml
|
||||
- name: جستجو
|
||||
params:
|
||||
type: search
|
||||
```
|
||||
4. آیکون
|
||||
```yaml
|
||||
- name: گیتهاب
|
||||
params:
|
||||
icon: github
|
||||
```
|
||||
```yaml
|
||||
- name: GitHub
|
||||
params:
|
||||
icon: github
|
||||
```
|
||||
|
||||
این آیتمهای منو را میتوانید با تنظیم پارامتر `weight` مرتب کنید.
|
||||
این آیتمهای منو را میتوان با تنظیم پارامتر `weight` مرتب کرد.
|
||||
|
||||
### آرم و عنوان
|
||||
### منوهای تو در تو
|
||||
|
||||
برای تغییر آرم پیشفرض، `hugo.yaml` را ویرایش کنید و مسیر را به پرونده آرم خود در دایرکتوری `static` اضافه کنید.
|
||||
به صورت اختیاری، میتوانید پیوندی را که کاربران هنگام کلیک کردن روی آرم شما به آن هدایت میشوند، تغییر دهید، همچنین عرض و ارتفاع آرم را به پیکسل تنظیم کنید.
|
||||
با تعریف آیتمهای منوی فرزند میتوانید منوهای کشویی ایجاد کنید. منوهای فرزند با کلیک روی آیتم منوی والد نمایش داده میشوند.
|
||||
|
||||
```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:
|
||||
@@ -87,10 +110,10 @@ params:
|
||||
|
||||
### نوار کناری اصلی
|
||||
|
||||
برای نوار کناری اصلی، به طور خودکار از ساختار دایرکتوری محتوا تولید میشود.
|
||||
برای جزئیات بیشتر به صفحه [سازماندهی پروندهها](/fa/docs/guide/organize-files) مراجعه کنید.
|
||||
برای نوار کناری اصلی، به طور خودکار از ساختار دایرکتوری محتوا ایجاد میشود.
|
||||
برای جزئیات بیشتر به صفحه [سازماندهی فایلها](/docs/guide/organize-files) مراجعه کنید.
|
||||
|
||||
برای حذف یک صفحه از نوار کناری سمت راست، پارامتر`sidebar.exclude` را در قسمت بالایی صفحه تنظیم کنید:
|
||||
برای حذف یک صفحه از نوار کناری چپ، پارامتر `sidebar.exclude` را در front matter صفحه تنظیم کنید:
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
@@ -100,9 +123,9 @@ sidebar:
|
||||
---
|
||||
```
|
||||
|
||||
### پیوندهای اضافی
|
||||
### لینکهای اضافی
|
||||
|
||||
پیوندهای اضافی نوار کناری در زیر بخش `menu.sidebar` در پرونده پیکربندی تعریف شده است:
|
||||
لینکهای اضافی نوار کناری در بخش `menu.sidebar` در فایل پیکربندی تعریف میشوند:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
menu:
|
||||
@@ -111,19 +134,19 @@ menu:
|
||||
params:
|
||||
type: separator
|
||||
weight: 1
|
||||
- name: "درباره ما"
|
||||
- name: "درباره"
|
||||
pageRef: "/about"
|
||||
weight: 2
|
||||
- name: "مستندات هیوگو ↖"
|
||||
- name: "مستندات Hugo ↗"
|
||||
url: "https://gohugo.io/documentation/"
|
||||
weight: 3
|
||||
```
|
||||
|
||||
## نوار کناری سمت چپ
|
||||
## نوار کناری راست
|
||||
|
||||
### فهرست مطالب
|
||||
|
||||
فهرست مطالب به طور خودکار از سرتیرهای موجود در پرونده محتوا تولید میشود. میتوان آن را با تنظیم `toc: false` در قسمت بالایی صفحه غیرفعال کرد.
|
||||
فهرست مطالب به طور خودکار از عناوین موجود در فایل محتوا ایجاد میشود. میتوانید آن را با تنظیم `toc: false` در front matter صفحه غیرفعال کنید.
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
@@ -132,9 +155,9 @@ toc: false
|
||||
---
|
||||
```
|
||||
|
||||
### پیوند ویرایش صفحه
|
||||
### لینک ویرایش صفحه
|
||||
|
||||
برای پیکربندی پیوند ویرایش صفحه، میتوانیم پارامتر `params.editURL.base` را در پرونده پیکربندی تنظیم کنیم:
|
||||
برای پیکربندی لینک ویرایش صفحه، میتوانیم پارامتر `params.editURL.base` را در فایل پیکربندی تنظیم کنیم:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
@@ -143,8 +166,8 @@ params:
|
||||
base: "https://github.com/your-username/your-repo/edit/main"
|
||||
```
|
||||
|
||||
پیوندهای ویرایش به طور خودکار برای هر صفحه براساس نشانی اینترنتی ارائه شده به عنوان دایرکتوری ریشه ایجاد میشود.
|
||||
اگر میخواهید پیوند ویرایش را برای یک صفحه خاص تنظیم کنید، میتوانید پارامتر `editURL` را در قسمت بالای صفحه تنظیم کنید:
|
||||
لینکهای ویرایش به طور خودکار برای هر صفحه بر اساس URL ارائه شده به عنوان دایرکتوری ریشه ایجاد میشوند.
|
||||
اگر میخواهید لینک ویرایش را برای یک صفحه خاص تنظیم کنید، میتوانید پارامتر `editURL` را در front matter صفحه تنظیم کنید:
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
@@ -155,22 +178,22 @@ editURL: "https://example.com/edit/this/page"
|
||||
|
||||
## پاورقی
|
||||
|
||||
### کپیرایت
|
||||
### کپی رایت
|
||||
|
||||
برای تغییر متن کپیرایت نمایش داده شده در پاورقی وبسایت خود، باید پروندهای به نام `i18n/fa.yaml` ایجاد کنید.
|
||||
در این پرونده متن کپیرایت جدید خود را مطابق شکل زیر مشخص کنید:
|
||||
برای تغییر متن کپی رایت نمایش داده شده در پاورقی سایت، باید یک فایل به نام `i18n/en.yaml` ایجاد کنید.
|
||||
در این فایل، متن جدید کپی رایت را به صورت زیر مشخص کنید:
|
||||
|
||||
```yaml {filename="i18n/fa.yaml"}
|
||||
copyright: "© ۲۰۲۴ متن شما در اینجا"
|
||||
```yaml {filename="i18n/en.yaml"}
|
||||
copyright: "© 2024 متن دلخواه شما"
|
||||
```
|
||||
|
||||
برای مرجع شما، یک مثال [`i18n/en.yaml`](https://github.com/imfing/hextra/blob/main/i18n/en.yaml) را میتوانید در مخزن گیتهاب پیدا کنید. علاوه بر این، میتوانید از فرمت مارکداون در متن کپیرایت استفاده کنید.
|
||||
برای مرجع، یک فایل نمونه [`i18n/en.yaml`](https://github.com/imfing/hextra/blob/main/i18n/en.yaml) در مخزن GitHub موجود است. همچنین میتوانید از قالب Markdown در متن کپی رایت استفاده کنید.
|
||||
|
||||
## سایر موارد
|
||||
|
||||
### Favicon
|
||||
### فاوآیکون
|
||||
|
||||
برای سفارشی کردن [favicon](https://en.wikipedia.org/wiki/Favicon) برای سایت خود، پروندههای آیکون را درون پوشه `static` قرار دهید تا [faviconهای پیشفرض در تم](https://github.com/imfing/hextra/tree/main/static) جایگزین شود:
|
||||
برای سفارشی کردن [فاوآیکون](https://fa.wikipedia.org/wiki/فاوآیکون) سایت، فایلهای آیکون را در پوشه `static` قرار دهید تا [فاوآیکونهای پیشفرض قالب](https://github.com/imfing/hextra/tree/main/static) را جایگزین کنید:
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="static" >}}
|
||||
@@ -186,14 +209,30 @@ copyright: "© ۲۰۲۴ متن شما در اینجا"
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
هر دو پرونده `favicon.ico` و `favicon.svg` را در پروژه خود قرار دهید، تا از نمایش صحیح faviconهای سایت خود مطمئن شوید.
|
||||
#### تنظیمات پایه
|
||||
|
||||
در حالی که `favicon.ico` به طور کلی برای مرورگرهای قدیمیتر است، `favicon.svg` توسط مرورگرهای مدرن پشتیبانی میشود. favicon`favicon-dark.svg` اختیاری را میتوانید برای یک تجربه سفارشی در حالت تیره اضافه کرد.
|
||||
با خیال راحت از ابزارهایی مانند [favicon.io](https://favicon.io/) یا [favycon](https://github.com/ruisaraiva19/favycon) برای تولید این آیکونها استفاده کنید.
|
||||
حداقل، فایل `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` برای پیکربندی حالت پیشفرض تم و دکمه جابهجایی استفاده کنید و به بازدیدکنندگان اجازه دهید بین حالت روشن یا تیره جابجا شوند.
|
||||
از تنظیم `theme` برای پیکربندی حالت پیشفرض تم و دکمه تغییر تم استفاده کنید، که به بازدیدکنندگان امکان تغییر بین حالت روشن یا تاریک را میدهد.
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
@@ -205,16 +244,32 @@ params:
|
||||
|
||||
گزینههای `theme.default`:
|
||||
|
||||
- `light` - همیشه از حالت روشن استفاده شود
|
||||
- `dark` - همیشه از حالت تیره استفاده شود
|
||||
- `system` - همگامسازی با تنظیمات سیستمعامل (پیشفرض)
|
||||
- `light` - همیشه از حالت روشن استفاده کنید
|
||||
- `dark` - همیشه از حالت تاریک استفاده کنید
|
||||
- `system` - همگام با تنظیمات سیستم عامل (پیشفرض)
|
||||
|
||||
پارامتر `theme.displayToggle` به شما این امکان را میدهد که یک دکمه جابجایی برای تغییر حالت تمها نمایش دهید.
|
||||
وقتی روی `true` تنظیم شود، بازدیدکنندگان میتوانند بین حالت روشن یا تیره جابهجا شوند و تنظیمات پیشفرض را نادیده بگیرند.
|
||||
پارامتر `theme.displayToggle` به شما امکان میدهد دکمهای برای تغییر تم نمایش دهید.
|
||||
وقتی روی `true` تنظیم شود، بازدیدکنندگان میتوانند بین حالت روشن یا تاریک تغییر دهند و تنظیم پیشفرض را لغو کنند.
|
||||
|
||||
### آخرین تغییر صفحه
|
||||
|
||||
تاریخ آخرین تغییر صفحه را میتوان با فعال کردن پرچم `params.displayUpdatedDate` نمایش داد. برای استفاده از تاریخ commit Git به عنوان منبع، پرچم `enableGitInfo` را نیز فعال کنید.
|
||||
|
||||
برای سفارشی کردن فرمت تاریخ، پارامتر `params.dateFormat` را تنظیم کنید. چیدمان آن با [`time.Format`](https://gohugo.io/functions/time/format/) Hugo مطابقت دارد.
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
# تجزیه commit Git
|
||||
enableGitInfo: true
|
||||
|
||||
params:
|
||||
# نمایش تاریخ آخرین تغییر
|
||||
displayUpdatedDate: true
|
||||
dateFormat: "January 2, 2006"
|
||||
```
|
||||
|
||||
### برچسبها
|
||||
|
||||
برای نمایش برچسبهای صفحه، گزینههای زیر را در فایل پیکربندی تنظیم کنید:
|
||||
برای نمایش برچسبهای صفحه، پرچمهای زیر را در فایل پیکربندی تنظیم کنید:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
@@ -227,7 +282,7 @@ params:
|
||||
|
||||
### عرض صفحه
|
||||
|
||||
عرض صفحه را میتوان با پارامتر `params.page.width` در پرونده پیکربندی سفارشی کرد:
|
||||
عرض صفحه را میتوان با پارامتر `params.page.width` در فایل پیکربندی سفارشی کرد:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
@@ -236,35 +291,53 @@ params:
|
||||
width: wide
|
||||
```
|
||||
|
||||
سه گزینه در دسترس وجود دارد: `full`، `wide` و normal`. به طور پیشفرض، عرض صفحه روی normal` تنظیم شده است.
|
||||
سه گزینه موجود است: `full`, `wide`, و `normal`. به طور پیشفرض، عرض صفحه روی `normal` تنظیم شده است.
|
||||
|
||||
به طور مشابه، عرض نوار ناوبری و پاورقی را میتوان با پارامترهای `params.navbar.width` و `params.footer.width` سفارشی کرد.
|
||||
|
||||
### فهرست جستجو
|
||||
### نمایه FlexSearch
|
||||
|
||||
جستجوی متن کامل توسط [FlexSearch](https://github.com/nextapps-de/flexsearch) پیادهسازی شده و به طور پیشفرض فعال است.
|
||||
برای سفارشی کردن فهرست جستجو، پارامتر `params.search.flexsearch.index` را در پرونده پیکربندی تنظیم کنید:
|
||||
جستجوی تمام متن با قدرت [FlexSearch](https://github.com/nextapps-de/flexsearch) به طور پیشفرض فعال است.
|
||||
برای سفارشی کردن نمایه جستجو، پارامتر `params.search.flexsearch.index` را در فایل پیکربندی تنظیم کنید:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
# Search
|
||||
# جستجو
|
||||
search:
|
||||
enable: true
|
||||
type: flexsearch
|
||||
|
||||
flexsearch:
|
||||
# index page by: content | summary | heading | title
|
||||
# نمایه صفحه بر اساس: content | summary | heading | title
|
||||
index: content
|
||||
```
|
||||
|
||||
گزینههای `flexsearch.index`:
|
||||
|
||||
- `content` - محتوای کامل صفحه (پیشفرض)
|
||||
- `summary` - خلاصه صفحه، برای جزئیات بیشتر به [خلاصه مطالب Hugo](https://gohugo.io/content-management/summaries/) مراجعه کنید
|
||||
- `heading` - سرتیترهای سطح ۱ و سطح ۲
|
||||
- `title` - فقط شامل عنوان صفحه است
|
||||
- `summary` - خلاصه صفحه، برای جزئیات بیشتر به [خلاصههای محتوای Hugo](https://gohugo.io/content-management/summaries/) مراجعه کنید
|
||||
- `heading` - عناوین سطح 1 و سطح 2
|
||||
- `title` - فقط عنوان صفحه را شامل شود
|
||||
|
||||
برای حذف یک صفحه از فهرست جستجو، `excludeSearch: true` را در قسمت بالای صفحه تنظیم کنید:
|
||||
برای سفارشی کردن 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"}
|
||||
---
|
||||
@@ -273,12 +346,59 @@ excludeSearch: true
|
||||
---
|
||||
```
|
||||
|
||||
### گوگل آنالیتیکس
|
||||
### Google Analytics
|
||||
|
||||
برای فعال کردن [گوگل آنالیتیکس](https://marketingplatform.google.com/about/analytics/)، پرچم `services.googleAnalytics.ID` را در `hugo.yaml` تنظیم کنید:
|
||||
برای فعال کردن [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.txt به طور خودکار از ساختار محتوای شما ایجاد میشود و سایت شما را برای ابزارهای هوش مصنوعی و مدلهای زبانی برای زمینه و مرجع قابل دسترستر میکند.
|
||||
|
||||
### Open Graph
|
||||
|
||||
برای افزودن متادیتای [Open Graph](https://ogp.me/) به یک صفحه، مقادیر را در پارامترهای frontmatter اضافه کنید.
|
||||
|
||||
از آنجا که یک صفحه میتواند چندین تگ `image` و `video` داشته باشد، مقادیر آنها را در یک آرایه قرار دهید.
|
||||
سایر ویژگیهای Open Graph میتوانند فقط یک مقدار داشته باشند.
|
||||
به عنوان مثال، این صفحه یک تگ `og:image` (که تصویری برای پیشنمایش در اشتراکگذاریهای اجتماعی پیکربندی میکند) و یک تگ `og:audio` دارد.
|
||||
|
||||
```yaml {filename
|
@@ -1,11 +1,13 @@
|
||||
---
|
||||
title: 設定
|
||||
weight: 2
|
||||
tags:
|
||||
- 設定
|
||||
---
|
||||
|
||||
Hugoは、Hugoサイトのルートにある`hugo.yaml`から設定を読み取ります。
|
||||
この設定ファイルでは、サイトのすべての側面を設定できます。
|
||||
利用可能な設定とベストプラクティスの包括的な理解を得るために、GitHub上のこのサイトの設定ファイル[`exampleSite/hugo.yaml`](https://github.com/imfing/hextra/blob/main/exampleSite/hugo.yaml)をチェックしてください。
|
||||
Hugo はサイトのルートにある `hugo.yaml` から設定を読み込みます。
|
||||
この設定ファイルであなたのサイトのあらゆる側面を設定できます。
|
||||
利用可能な設定項目とベストプラクティスを網羅的に理解するには、GitHub 上のこのサイトの設定ファイル [`exampleSite/hugo.yaml`](https://github.com/imfing/hextra/blob/main/exampleSite/hugo.yaml) を参照してください。
|
||||
|
||||
<!--more-->
|
||||
|
||||
@@ -13,7 +15,7 @@ Hugoは、Hugoサイトのルートにある`hugo.yaml`から設定を読み取
|
||||
|
||||
### メニュー
|
||||
|
||||
右上のメニューは、設定ファイルの`menu.main`セクションで定義されます:
|
||||
右上のメニューは設定ファイルの `menu.main` セクションで定義されます:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
menu:
|
||||
@@ -24,7 +26,7 @@ menu:
|
||||
- name: ブログ
|
||||
pageRef: /blog
|
||||
weight: 2
|
||||
- name: について
|
||||
- name: このサイトについて
|
||||
pageRef: /about
|
||||
weight: 3
|
||||
- name: 検索
|
||||
@@ -38,37 +40,58 @@ menu:
|
||||
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
|
||||
```
|
||||
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
|
||||
```
|
||||
```yaml
|
||||
- name: GitHub
|
||||
params:
|
||||
icon: github
|
||||
```
|
||||
|
||||
これらのメニュー項目は、`weight`パラメータを設定して並べ替えることができます。
|
||||
これらのメニュー項目は `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`ディレクトリ下のロゴファイルへのパスを追加します。
|
||||
オプションで、ロゴをクリックしたときにユーザーがリダイレクトされるリンクや、ロゴの幅と高さをピクセル単位で設定できます。
|
||||
デフォルトのロゴを変更するには、`hugo.yaml` を編集し、`static` ディレクトリ下のロゴファイルへのパスを追加します。
|
||||
オプションで、ロゴをクリックした際のリンク先や、ロゴの幅と高さ(ピクセル単位)を設定できます。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
@@ -87,10 +110,10 @@ params:
|
||||
|
||||
### メインサイドバー
|
||||
|
||||
メインサイドバーは、コンテンツディレクトリの構造から自動的に生成されます。
|
||||
詳細については、[ファイルの整理](/docs/guide/organize-files)ページを参照してください。
|
||||
メインサイドバーはコンテンツディレクトリの構造から自動生成されます。
|
||||
詳細は [ファイルの整理](/docs/guide/organize-files) ページを参照してください。
|
||||
|
||||
左サイドバーから単一のページを除外するには、ページのフロントマターで`sidebar.exclude`パラメータを設定します:
|
||||
単一ページを左サイドバーから除外するには、ページのフロントマターで `sidebar.exclude` パラメータを設定します:
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
@@ -102,7 +125,7 @@ sidebar:
|
||||
|
||||
### 追加リンク
|
||||
|
||||
サイドバーの追加リンクは、設定ファイルの`menu.sidebar`セクションで定義されます:
|
||||
サイドバーの追加リンクは設定ファイルの `menu.sidebar` セクションで定義されます:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
menu:
|
||||
@@ -111,10 +134,10 @@ menu:
|
||||
params:
|
||||
type: separator
|
||||
weight: 1
|
||||
- name: "について"
|
||||
- name: "このサイトについて"
|
||||
pageRef: "/about"
|
||||
weight: 2
|
||||
- name: "Hugo Docs ↗"
|
||||
- name: "Hugo ドキュメント ↗"
|
||||
url: "https://gohugo.io/documentation/"
|
||||
weight: 3
|
||||
```
|
||||
@@ -123,7 +146,7 @@ menu:
|
||||
|
||||
### 目次
|
||||
|
||||
目次は、コンテンツファイルの見出しから自動的に生成されます。ページのフロントマターで`toc: false`を設定することで無効にできます。
|
||||
目次はコンテンツファイルの見出しから自動生成されます。ページのフロントマターで `toc: false` を設定することで無効化できます。
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
@@ -134,7 +157,7 @@ toc: false
|
||||
|
||||
### ページ編集リンク
|
||||
|
||||
ページ編集リンクを設定するには、設定ファイルで`params.editURL.base`パラメータを設定します:
|
||||
ページ編集リンクを設定するには、設定ファイルで `params.editURL.base` パラメータを設定します:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
@@ -143,8 +166,8 @@ params:
|
||||
base: "https://github.com/your-username/your-repo/edit/main"
|
||||
```
|
||||
|
||||
提供されたURLをルートディレクトリとして、各ページの編集リンクが自動的に生成されます。
|
||||
特定のページの編集リンクを設定したい場合は、ページのフロントマターで`editURL`パラメータを設定します:
|
||||
編集リンクは提供されたURLをルートディレクトリとして各ページに対して自動生成されます。
|
||||
特定のページに対して編集リンクを設定したい場合は、ページのフロントマターで `editURL` パラメータを設定できます:
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
@@ -155,22 +178,22 @@ editURL: "https://example.com/edit/this/page"
|
||||
|
||||
## フッター
|
||||
|
||||
### 著作権
|
||||
### 著作権表示
|
||||
|
||||
ウェブサイトのフッターに表示される著作権テキストを変更するには、`i18n/en.yaml`という名前のファイルを作成します。
|
||||
このファイルに、以下のように新しい著作権テキストを指定します:
|
||||
ウェブサイトのフッターに表示される著作権テキストを変更するには、`i18n/en.yaml` という名前のファイルを作成する必要があります。
|
||||
このファイルで、以下のように新しい著作権テキストを指定します:
|
||||
|
||||
```yaml {filename="i18n/en.yaml"}
|
||||
copyright: "© 2024 YOUR TEXT HERE"
|
||||
copyright: "© 2024 ここにあなたのテキスト"
|
||||
```
|
||||
|
||||
参考として、GitHubリポジトリに[`i18n/en.yaml`](https://github.com/imfing/hextra/blob/main/i18n/en.yaml)ファイルの例があります。また、著作権テキストにMarkdown形式を使用することもできます。
|
||||
参考までに、GitHub リポジトリに [`i18n/en.yaml`](https://github.com/imfing/hextra/blob/main/i18n/en.yaml) ファイルの例があります。また、著作権テキストには Markdown 形式を使用することもできます。
|
||||
|
||||
## その他
|
||||
|
||||
### ファビコン
|
||||
|
||||
サイトの[ファビコン](https://ja.wikipedia.org/wiki/Favicon)をカスタマイズするには、`static`フォルダ下にアイコンファイルを配置して、[テーマのデフォルトのファビコン](https://github.com/imfing/hextra/tree/main/static)を上書きします:
|
||||
サイトの [ファビコン](https://ja.wikipedia.org/wiki/Favicon) をカスタマイズするには、[テーマのデフォルトファビコン](https://github.com/imfing/hextra/tree/main/static) を上書きするために `static` フォルダの下にアイコンファイルを配置します:
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="static" >}}
|
||||
@@ -186,14 +209,30 @@ copyright: "© 2024 YOUR TEXT HERE"
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
プロジェクトに`favicon.ico`、`favicon.svg`、`favicon-dark.svg`ファイルを含めて、サイトのファビコンが正しく表示されるようにします。
|
||||
#### 基本設定
|
||||
|
||||
`favicon.ico`は一般的に古いブラウザ用ですが、`favicon.svg`と`favicon-dark.svg`は現代のブラウザでサポートされています。
|
||||
[favicon.io](https://favicon.io/)や[favycon](https://github.com/ruisaraiva19/favycon)などのツールを使用して、このようなアイコンを生成できます。
|
||||
最低限、`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`設定を使用して、デフォルトのテーマモードとトグルボタンを設定し、訪問者がライトモードとダークモードを切り替えられるようにします。
|
||||
`theme` 設定を使用してデフォルトのテーマモードとトグルボタンを設定し、訪問者がライトモードとダークモードを切り替えられるようにします。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
@@ -203,18 +242,34 @@ params:
|
||||
displayToggle: true
|
||||
```
|
||||
|
||||
`theme.default`のオプション:
|
||||
`theme.default` のオプション:
|
||||
|
||||
- `light` - 常にライトモードを使用
|
||||
- `dark` - 常にダークモードを使用
|
||||
- `system` - オペレーティングシステムの設定と同期(デフォルト)
|
||||
|
||||
`theme.displayToggle`パラメータを使用して、テーマを変更するためのトグルボタンを表示できます。
|
||||
`true`に設定すると、訪問者はデフォルト設定を上書きしてライトモードとダークモードを切り替えることができます。
|
||||
`theme.displayToggle` パラメータはテーマを変更するためのトグルボタンを表示します。
|
||||
`true` に設定すると、訪問者はデフォルト設定を上書きしてライトモードとダークモードを切り替えられます。
|
||||
|
||||
### ページ最終更新日
|
||||
|
||||
ページの最終更新日を表示するには、`params.displayUpdatedDate` フラグを有効にします。Git コミット日付をソースとして使用するには、`enableGitInfo` フラグも有効にします。
|
||||
|
||||
日付形式をカスタマイズするには、`params.dateFormat` パラメータを設定します。そのレイアウトは Hugo の [`time.Format`](https://gohugo.io/functions/time/format/) に準拠します。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
# Git コミットを解析
|
||||
enableGitInfo: true
|
||||
|
||||
params:
|
||||
# 最終更新日を表示
|
||||
displayUpdatedDate: true
|
||||
dateFormat: "2006年1月2日"
|
||||
```
|
||||
|
||||
### タグ
|
||||
|
||||
ページのタグを表示するには、設定ファイルで次のフラグを設定してください:
|
||||
ページタグを表示するには、設定ファイルで以下のフラグを設定します:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
@@ -227,7 +282,7 @@ params:
|
||||
|
||||
### ページ幅
|
||||
|
||||
ページの幅は、設定ファイルの`params.page.width`パラメータでカスタマイズできます:
|
||||
ページの幅は設定ファイルの `params.page.width` パラメータでカスタマイズできます:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
@@ -236,14 +291,14 @@ params:
|
||||
width: wide
|
||||
```
|
||||
|
||||
利用可能なオプションは`full`、`wide`、`normal`です。デフォルトでは、ページ幅は`normal`に設定されています。
|
||||
利用可能なオプションは `full`、`wide`、`normal` の3つです。デフォルトではページ幅は `normal` に設定されています。
|
||||
|
||||
同様に、ナビゲーションバーとフッターの幅は、`params.navbar.width`と`params.footer.width`パラメータでカスタマイズできます。
|
||||
同様に、ナビゲーションバーとフッターの幅は `params.navbar.width` と `params.footer.width` パラメータでカスタマイズできます。
|
||||
|
||||
### 検索インデックス
|
||||
### FlexSearch インデックス
|
||||
|
||||
[FlexSearch](https://github.com/nextapps-de/flexsearch)による全文検索はデフォルトで有効です。
|
||||
検索インデックスをカスタマイズするには、設定ファイルで`params.search.flexsearch.index`パラメータを設定します:
|
||||
[FlexSearch](https://github.com/nextapps-de/flexsearch) を利用した全文検索はデフォルトで有効です。
|
||||
検索インデックスをカスタマイズするには、設定ファイルで `params.search.flexsearch.index` パラメータを設定します:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
@@ -253,35 +308,36 @@ params:
|
||||
type: flexsearch
|
||||
|
||||
flexsearch:
|
||||
# ページをインデックスする方法: content | summary | heading | title
|
||||
# インデックス対象: content | summary | heading | title
|
||||
index: content
|
||||
```
|
||||
|
||||
`flexsearch.index`のオプション:
|
||||
`flexsearch.index` のオプション:
|
||||
|
||||
- `content` - ページの全内容(デフォルト)
|
||||
- `summary` - ページの要約、詳細は[Hugoコンテンツ要約](https://gohugo.io/content-management/summaries/)を参照
|
||||
- `content` - ページの全文(デフォルト)
|
||||
- `summary` - ページの要約、詳細は [Hugo コンテンツ要約](https://gohugo.io/content-management/summaries/) を参照
|
||||
- `heading` - レベル1とレベル2の見出し
|
||||
- `title` - ページタイトルのみを含める
|
||||
|
||||
検索トークン化をカスタマイズするには、設定ファイルで`params.search.flexsearch.tokenize`パラメータを設定します:
|
||||
検索トークン化をカスタマイズするには、設定ファイルで `params.search.flexsearch.tokenize` パラメータを設定します:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
search:
|
||||
# ...
|
||||
flexsearch:
|
||||
# full | forward | reverse | strict
|
||||
# full | forward | reverse | strict
|
||||
tokenize: forward
|
||||
```
|
||||
|
||||
[`flexsearch.tokenize`](https://github.com/nextapps-de/flexsearch/#tokenizer-prefix-search)のオプション:
|
||||
[`flexsearch.tokenize`](https://github.com/nextapps-de/flexsearch/#tokenizer-prefix-search) のオプション:
|
||||
|
||||
- `strict` - 単語全体をインデックス
|
||||
- `forward` - 前方方向に単語を増分的にインデックス
|
||||
- `reverse` - 両方向に単語を増分的にインデックス
|
||||
- `full` - すべての可能な組み合わせをインデックス
|
||||
|
||||
検索インデックスからページを除外するには、ページのフロントマターで`excludeSearch: true`を設定します:
|
||||
FlexSearch 検索インデックスからページを除外するには、ページのフロントマターで `excludeSearch: true` を設定します:
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
@@ -290,12 +346,65 @@ excludeSearch: true
|
||||
---
|
||||
```
|
||||
|
||||
### Googleアナリティクス
|
||||
### Google アナリティクス
|
||||
|
||||
[Googleアナリティクス](https://marketingplatform.google.com/about/analytics/)を有効にするには、`hugo.yaml`で`services.googleAnalytics.ID`フラグを設定します:
|
||||
[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.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"
|
||||
```
|
@@ -1,11 +1,13 @@
|
||||
---
|
||||
title: 配置
|
||||
weight: 2
|
||||
tags:
|
||||
- 配置
|
||||
---
|
||||
|
||||
Hugo 从您 Hugo 站点根目录下的 `hugo.yaml` 文件中读取配置。
|
||||
配置文件是您可以配置站点所有方面的地方。
|
||||
查看此站点的配置文件 [`exampleSite/hugo.yaml`](https://github.com/imfing/hextra/blob/main/exampleSite/hugo.yaml) 在 GitHub 上,以全面了解可用的设置和最佳实践。
|
||||
Hugo 从站点根目录的 `hugo.yaml` 读取配置。
|
||||
配置文件可用来调整站点的所有方面。
|
||||
查看本网站的示例配置文件 [`exampleSite/hugo.yaml`](https://github.com/imfing/hextra/blob/main/exampleSite/hugo.yaml) 以全面了解可用设置和最佳实践。
|
||||
|
||||
<!--more-->
|
||||
|
||||
@@ -13,7 +15,7 @@ Hugo 从您 Hugo 站点根目录下的 `hugo.yaml` 文件中读取配置。
|
||||
|
||||
### 菜单
|
||||
|
||||
右上角的菜单在配置文件的 `menu.main` 部分中定义:
|
||||
右上角菜单在配置文件的 `menu.main` 部分定义:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
menu:
|
||||
@@ -38,37 +40,58 @@ menu:
|
||||
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
|
||||
```
|
||||
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
|
||||
```
|
||||
```yaml
|
||||
- name: GitHub
|
||||
params:
|
||||
icon: github
|
||||
```
|
||||
|
||||
这些菜单项可以通过设置 `weight` 参数进行排序。
|
||||
通过设置 `weight` 参数可以调整菜单项的排序。
|
||||
|
||||
### 徽标和标题
|
||||
### 嵌套菜单
|
||||
|
||||
要修改默认徽标,编辑 `hugo.yaml` 并在 `static` 目录下添加徽标文件的路径。
|
||||
您还可以更改用户点击徽标时重定向的链接,以及设置徽标的宽度和高度(以像素为单位)。
|
||||
通过定义子菜单项可以创建下拉菜单。点击父菜单项时会显示子菜单。
|
||||
|
||||
```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:
|
||||
@@ -87,10 +110,10 @@ params:
|
||||
|
||||
### 主侧边栏
|
||||
|
||||
主侧边栏是根据内容目录的结构自动生成的。
|
||||
有关更多详细信息,请参阅 [组织文件](/docs/guide/organize-files) 页面。
|
||||
主侧边栏会根据内容目录结构自动生成。
|
||||
详情参见[文件组织](/docs/guide/organize-files)页面。
|
||||
|
||||
要从左侧边栏中排除单个页面,请在页面的 front matter 中设置 `sidebar.exclude` 参数:
|
||||
要从左侧边栏排除单个页面,在页面的 front matter 中设置 `sidebar.exclude` 参数:
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
@@ -102,7 +125,7 @@ sidebar:
|
||||
|
||||
### 额外链接
|
||||
|
||||
侧边栏的额外链接在配置文件的 `menu.sidebar` 部分中定义:
|
||||
侧边栏额外链接在配置文件的 `menu.sidebar` 部分定义:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
menu:
|
||||
@@ -123,7 +146,7 @@ menu:
|
||||
|
||||
### 目录
|
||||
|
||||
目录是根据内容文件中的标题自动生成的。可以通过在页面的 front matter 中设置 `toc: false` 来禁用它。
|
||||
目录会根据内容文件中的标题自动生成。可以通过在页面的 front matter 中设置 `toc: false` 来禁用。
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
@@ -134,7 +157,7 @@ toc: false
|
||||
|
||||
### 页面编辑链接
|
||||
|
||||
要配置页面编辑链接,我们可以在配置文件中设置 `params.editURL.base` 参数:
|
||||
要配置页面编辑链接,可以在配置文件中设置 `params.editURL.base` 参数:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
@@ -143,8 +166,8 @@ params:
|
||||
base: "https://github.com/your-username/your-repo/edit/main"
|
||||
```
|
||||
|
||||
编辑链接将根据提供的 URL 作为根目录自动为每个页面生成。
|
||||
如果要为特定页面设置编辑链接,可以在页面的 front matter 中设置 `editURL` 参数:
|
||||
编辑链接将基于提供的 URL 作为根目录自动为每个页面生成。
|
||||
如果想为特定页面设置编辑链接,可以在页面的 front matter 中设置 `editURL` 参数:
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
@@ -155,22 +178,22 @@ editURL: "https://example.com/edit/this/page"
|
||||
|
||||
## 页脚
|
||||
|
||||
### 版权
|
||||
### 版权信息
|
||||
|
||||
要修改网站页脚中显示的版权文本,您需要创建一个名为 `i18n/en.yaml` 的文件。
|
||||
在此文件中,指定您的新版权文本,如下所示:
|
||||
要修改网站页脚显示的版权文本,需要创建一个名为 `i18n/en.yaml` 的文件。
|
||||
在该文件中指定新的版权文本,如下所示:
|
||||
|
||||
```yaml {filename="i18n/en.yaml"}
|
||||
copyright: "© 2024 您的文本"
|
||||
copyright: "© 2024 你的文本内容"
|
||||
```
|
||||
|
||||
作为参考,可以在 GitHub 仓库中找到示例 [`i18n/en.yaml`](https://github.com/imfing/hextra/blob/main/i18n/en.yaml) 文件。此外,您可以在版权文本中使用 Markdown 格式。
|
||||
可以参考 GitHub 仓库中的示例 [`i18n/en.yaml`](https://github.com/imfing/hextra/blob/main/i18n/en.yaml) 文件。此外,可以在版权文本中使用 Markdown 格式。
|
||||
|
||||
## 其他
|
||||
|
||||
### 网站图标
|
||||
|
||||
要为您的站点自定义 [网站图标](https://en.wikipedia.org/wiki/Favicon),请将图标文件放在 `static` 文件夹下,以覆盖 [主题的默认网站图标](https://github.com/imfing/hextra/tree/main/static):
|
||||
要自定义网站的 [favicon](https://en.wikipedia.org/wiki/Favicon),将图标文件放在 `static` 文件夹下以覆盖[主题默认的网站图标](https://github.com/imfing/hextra/tree/main/static):
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="static" >}}
|
||||
@@ -186,14 +209,30 @@ copyright: "© 2024 您的文本"
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
在您的项目中包含 `favicon.ico`、`favicon.svg` 和 `favicon-dark.svg` 文件,以确保您的站点图标正确显示。
|
||||
#### 基本设置
|
||||
|
||||
虽然 `favicon.ico` 通常用于旧版浏览器,但 `favicon.svg` 和 `favicon-dark.svg` 受现代浏览器支持。
|
||||
使用 [favicon.io](https://favicon.io/) 或 [favycon](https://github.com/ruisaraiva19/favycon) 等工具生成此类图标。
|
||||
至少需要在 `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` 设置来配置默认主题模式和切换按钮,允许访问者在浅色或深色模式之间切换。
|
||||
使用 `theme` 设置来配置默认主题模式和切换按钮,允许访问者在亮色或暗色模式之间切换。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
@@ -205,16 +244,32 @@ params:
|
||||
|
||||
`theme.default` 的选项:
|
||||
|
||||
- `light` - 始终使用浅色模式
|
||||
- `dark` - 始终使用深色模式
|
||||
- `light` - 始终使用亮色模式
|
||||
- `dark` - 始终使用暗色模式
|
||||
- `system` - 与操作系统设置同步(默认)
|
||||
|
||||
`theme.displayToggle` 参数允许您显示一个切换按钮以更改主题。
|
||||
当设置为 `true` 时,访问者可以在浅色或深色模式之间切换,覆盖默认设置。
|
||||
`theme.displayToggle` 参数允许显示主题切换按钮。
|
||||
当设置为 `true` 时,访问者可以切换亮色或暗色模式,覆盖默认设置。
|
||||
|
||||
### 页面最后修改时间
|
||||
|
||||
可以通过启用 `params.displayUpdatedDate` 标志来显示页面的最后修改日期。要使用 Git 提交日期作为来源,还需启用 `enableGitInfo` 标志。
|
||||
|
||||
要自定义日期格式,设置 `params.dateFormat` 参数。其布局与 Hugo 的 [`time.Format`](https://gohugo.io/functions/time/format/) 匹配。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
# 解析 Git 提交
|
||||
enableGitInfo: true
|
||||
|
||||
params:
|
||||
# 显示最后修改日期
|
||||
displayUpdatedDate: true
|
||||
dateFormat: "2006年1月2日"
|
||||
```
|
||||
|
||||
### 标签
|
||||
|
||||
要显示页面标签,请在配置文件中设置以下标志:
|
||||
要显示页面标签,在配置文件中设置以下标志:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
@@ -227,7 +282,7 @@ params:
|
||||
|
||||
### 页面宽度
|
||||
|
||||
页面的宽度可以通过配置文件中的 `params.page.width` 参数进行自定义:
|
||||
页面宽度可以通过配置文件中的 `params.page.width` 参数自定义:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
@@ -236,14 +291,14 @@ params:
|
||||
width: wide
|
||||
```
|
||||
|
||||
有三个可用选项:`full`、`wide` 和 `normal`。默认情况下,页面宽度设置为 `normal`。
|
||||
有三个可用选项:`full`、`wide` 和 `normal`。默认页面宽度为 `normal`。
|
||||
|
||||
同样,导航栏和页脚的宽度可以通过 `params.navbar.width` 和 `params.footer.width` 参数进行自定义。
|
||||
类似地,导航栏和页脚的宽度可以通过 `params.navbar.width` 和 `params.footer.width` 参数自定义。
|
||||
|
||||
### 搜索索引
|
||||
### FlexSearch 索引
|
||||
|
||||
默认启用由 [FlexSearch](https://github.com/nextapps-de/flexsearch) 提供的全文搜索。
|
||||
要自定义搜索索引,请在配置文件中设置 `params.search.flexsearch.index` 参数:
|
||||
要自定义搜索索引,在配置文件中设置 `params.search.flexsearch.index` 参数:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
@@ -253,35 +308,36 @@ params:
|
||||
type: flexsearch
|
||||
|
||||
flexsearch:
|
||||
# 按以下内容索引页面:content | summary | heading | title
|
||||
# 索引页面方式: content | summary | heading | title
|
||||
index: content
|
||||
```
|
||||
|
||||
`flexsearch.index` 的选项:
|
||||
|
||||
- `content` - 页面的完整内容(默认)
|
||||
- `summary` - 页面的摘要,请参阅 [Hugo 内容摘要](https://gohugo.io/content-management/summaries/) 了解更多详细信息
|
||||
- `summary` - 页面摘要,详见 [Hugo 内容摘要](https://gohugo.io/content-management/summaries/)
|
||||
- `heading` - 一级和二级标题
|
||||
- `title` - 仅包括页面标题
|
||||
- `title` - 仅包含页面标题
|
||||
|
||||
要自定义搜索分词,请在配置文件中设置 `params.search.flexsearch.tokenize` 参数:
|
||||
要自定义搜索分词方式,在配置文件中设置 `params.search.flexsearch.tokenize` 参数:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
search:
|
||||
# ...
|
||||
flexsearch:
|
||||
# full | forward | reverse | strict
|
||||
# full | forward | reverse | strict
|
||||
tokenize: forward
|
||||
```
|
||||
|
||||
[`flexsearch.tokenize`](https://github.com/nextapps-de/flexsearch/#tokenizer-prefix-search) 的选项:
|
||||
|
||||
- `strict` - 索引整个单词
|
||||
- `forward` - 向前方向逐步索引单词
|
||||
- `strict` - 索引完整单词
|
||||
- `forward` - 正向逐步索引单词
|
||||
- `reverse` - 双向逐步索引单词
|
||||
- `full` - 索引所有可能的组合
|
||||
|
||||
要从搜索索引中排除页面,请在页面的 front matter 中设置 `excludeSearch: true`:
|
||||
要从 FlexSearch 搜索索引中排除页面,在页面的 front matter 中设置 `excludeSearch: true`:
|
||||
|
||||
```yaml {filename="content/docs/guide/configuration.md"}
|
||||
---
|
||||
@@ -290,12 +346,65 @@ excludeSearch: true
|
||||
---
|
||||
```
|
||||
|
||||
### Google Analytics
|
||||
### Google 分析
|
||||
|
||||
要启用 [Google Analytics](https://marketingplatform.google.com/about/analytics/),请在 `hugo.yaml` 中设置 `services.googleAnalytics.ID` 标志:
|
||||
要启用 [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` 文件,包含:
|
||||
|
||||
- 站点标题和描述
|
||||
- 所有章节和页面的层次结构列表
|
||||
- 页面摘要和发布日期
|
||||
- 所有内容的直接链接
|
||||
|
||||
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"
|
||||
```
|
@@ -1,90 +1,92 @@
|
||||
---
|
||||
title: بهکاراندازی سایت
|
||||
title: استقرار سایت
|
||||
prev: /docs/guide/shortcodes
|
||||
next: /docs/advanced
|
||||
---
|
||||
|
||||
Hugo وبسایتهای استاتیک را ایجاد میکند و امکان گزینههای میزبانی انعطافپذیر را فراهم میکند.
|
||||
این صفحه راهنماهایی برای بهکاراندازی سایت هگزترا شما در پلتفرمهای مختلف ارائه میکند.
|
||||
|
||||
Hugo وبسایتهای استاتیک تولید میکند که امکان میزبانی انعطافپذیر را فراهم میسازد.
|
||||
این صفحه راهنماهایی برای استقرار سایت Hextra شما روی پلتفرمهای مختلف ارائه میدهد.
|
||||
|
||||
<!--more-->
|
||||
|
||||
|
||||
## گیتهاب Pages
|
||||
## GitHub Pages
|
||||
|
||||
[گیتهاب Pages](https://docs.github.com/pages) روشی توصیه شده برای بهکاراندازی و میزبانی وبسایت شما به صورت رایگان است.
|
||||
[GitHub Pages](https://docs.github.com/pages) روش توصیهشده برای استقرار و میزبانی رایگان وبسایت شماست.
|
||||
|
||||
اگر سایت را با استفاده از [hextra-starter-template](https://github.com/imfing/hextra-starter-template) راهاندازی سریع پیادهسازی میکنید، گردش کار گیتهاب Actions را به صورت خارج از جعبه ارائه کردهایم که بهکاراندازی خودکار در گیتهاب Pages به شما کمک میکند.
|
||||
اگر سایت را با استفاده از [hextra-starter-template](https://github.com/imfing/hextra-starter-template) راهاندازی کردهاید، این قالب از پیش یک گردش کار GitHub Actions برای استقرار خودکار در GitHub Pages ارائه میدهد.
|
||||
|
||||
{{% details title="پیکربندی گیتهاب Actions" closed="true" %}}
|
||||
{{% details title="پیکربندی GitHub Actions" closed="true" %}}
|
||||
|
||||
در زیر یک پیکربندی مثال از [hextra-starter-template](https://github.com/imfing/hextra-starter-template) آورده شده است:
|
||||
در زیر یک نمونه پیکربندی از [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
|
||||
# نمونه گردش کار برای ساخت و استقرار یک سایت Hugo در GitHub Pages
|
||||
name: استقرار سایت Hugo در Pages
|
||||
|
||||
on:
|
||||
# Runs on pushes targeting the default branch
|
||||
# در push به شاخه پیشفرض اجرا میشود
|
||||
push:
|
||||
branches: ["main"]
|
||||
|
||||
# Allows you to run this workflow manually from the Actions tab
|
||||
# امکان اجرای دستی این گردش کار از تب Actions
|
||||
workflow_dispatch:
|
||||
|
||||
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
|
||||
# تنظیم مجوزهای GITHUB_TOKEN برای امکان استقرار در 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
|
||||
# پیشفرض bash
|
||||
defaults:
|
||||
run:
|
||||
shell: bash
|
||||
|
||||
jobs:
|
||||
# Build job
|
||||
# کار ساخت
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
env:
|
||||
HUGO_VERSION: 0.117.0
|
||||
HUGO_VERSION: 0.147.7
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod
|
||||
- name: Setup Go
|
||||
uses: actions/setup-go@v4
|
||||
fetch-depth: 0 # دریافت تمام تاریخچه برای .GitInfo و .Lastmod
|
||||
submodules: recursive
|
||||
- name: راهاندازی Go
|
||||
uses: actions/setup-go@v5
|
||||
with:
|
||||
go-version: '1.21'
|
||||
- name: Setup Hugo
|
||||
uses: peaceiris/actions-hugo@v2
|
||||
with:
|
||||
hugo-version: '0.117.0'
|
||||
extended: true
|
||||
- name: Build with Hugo
|
||||
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:
|
||||
# For maximum backward compatibility with Hugo modules
|
||||
# برای حداکثر سازگاری با ماژولهای Hugo
|
||||
HUGO_ENVIRONMENT: production
|
||||
HUGO_ENV: production
|
||||
run: |
|
||||
hugo \
|
||||
--gc --minify \
|
||||
--baseURL "https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/"
|
||||
- name: Upload artifact
|
||||
uses: actions/upload-pages-artifact@v2
|
||||
--baseURL "${{ steps.pages.outputs.base_url }}/"
|
||||
- name: آپلود آرتیفکت
|
||||
uses: actions/upload-pages-artifact@v3
|
||||
with:
|
||||
path: ./public
|
||||
|
||||
# Deployment job
|
||||
# کار استقرار
|
||||
deploy:
|
||||
environment:
|
||||
name: github-pages
|
||||
@@ -92,22 +94,22 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
needs: build
|
||||
steps:
|
||||
- name: Deploy to GitHub Pages
|
||||
- name: استقرار در GitHub Pages
|
||||
id: deployment
|
||||
uses: actions/deploy-pages@v2
|
||||
uses: actions/deploy-pages@v4
|
||||
```
|
||||
|
||||
{{% /details %}}
|
||||
|
||||
|
||||
{{< callout >}}
|
||||
در تنظیمات مخزن خود، **Pages** > **Build and deployment** > **Source** را روی **GitHub Actions** تنظیم کنید:
|
||||
در تنظیمات مخزن، بخش **Pages** > **Build and deployment** > **Source** را روی **GitHub Actions** تنظیم کنید:
|
||||

|
||||
{{< /callout >}}
|
||||
|
||||
بهطور پیشفرض، گردش کار گیتهاب Actions بالا `.github/workflows/pages.yaml` فرض میکند که سایت در حال بهکاراندازی در `https://<USERNAME>.github.io/<REPO>/` است.
|
||||
به طور پیشفرض، گردش کار GitHub Actions فوق `.github/workflows/pages.yaml` فرض میکند که سایت در `https://<USERNAME>.github.io/<REPO>/` مستقر میشود.
|
||||
|
||||
اگر در حال استفاده از `https://<USERNAME>.github.io/` هستید، سپس `--baseURL` را تغییر دهید:
|
||||
اگر در `https://<USERNAME>.github.io/` مستقر میکنید، `--baseURL` را اصلاح کنید:
|
||||
|
||||
```yaml {filename=".github/workflows/pages.yaml",linenos=table,linenostart=54,hl_lines=[4]}
|
||||
run: |
|
||||
@@ -116,47 +118,47 @@ run: |
|
||||
--baseURL "https://${{ github.repository_owner }}.github.io/"
|
||||
```
|
||||
|
||||
اگر میخواهید روی دامنه شخصی خود استقرار پیدا کند، لطفا مقدار `--baseURL` را بر این اساس تغییر دهید.
|
||||
اگر در دامنه خود مستقر میکنید، لطفاً مقدار `--baseURL` را متناسب با آن تغییر دهید.
|
||||
|
||||
|
||||
## کلودفلر Pages
|
||||
## Cloudflare Pages
|
||||
|
||||
1. کد منبع سایت خود را در یک مخزن Git (به عنوان مثال گیتهاب) قرار دهید
|
||||
2. وارد [پیشخوان کلودفلر](https://dash.cloudflare.com/) شوید و حساب خود را انتخاب کنید
|
||||
3. در صفحه اصلی حسابکاربری، **Workers & Pages** > **Create application** > **Pages** > **Connect to Git** را انتخاب کنید
|
||||
4. مخزن را انتخاب کنید و در بخش Set up builds and Deployments اطلاعات زیر را وارد کنید:
|
||||
1. کد منبع سایت را در یک مخزن Git (مثلاً GitHub) قرار دهید.
|
||||
2. به [داشبورد Cloudflare](https://dash.cloudflare.com/) وارد شوید و حساب خود را انتخاب کنید.
|
||||
3. در صفحه اصلی حساب، **Workers & Pages** > **Create application** > **Pages** > **Connect to Git** را انتخاب کنید.
|
||||
4. مخزن را انتخاب کنید و در بخش **Set up builds and deployments** اطلاعات زیر را ارائه دهید:
|
||||
|
||||
| Configuration | Value |
|
||||
| ----------------- | -------------------- |
|
||||
| Production branch | `main` |
|
||||
| Build command | `hugo --gc --minify` |
|
||||
| Build directory | `public` |
|
||||
| تنظیمات | مقدار |
|
||||
| ---------------- | -------------------- |
|
||||
| شاخه تولید | `main` |
|
||||
| دستور ساخت | `hugo --gc --minify` |
|
||||
| دایرکتوری ساخت | `public` |
|
||||
|
||||
برای جزئیات بیشتر، بررسی کنید:
|
||||
- [یک سایت هیوگو راهاندازی کنید.](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/).
|
||||
- [استقرار یک سایت 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 خود (گیتهاب، گیتلب و غیره) ارسال کنید.
|
||||
2. [وارد کردن پروژه](https://app.netlify.com/start) به Netlify
|
||||
1. کد خود را به مخزن Git (GitHub, GitLab و غیره) push کنید.
|
||||
2. [پروژه را به Netlify وارد کنید](https://app.netlify.com/start).
|
||||
3. اگر از [hextra-starter-template][hextra-starter-template] استفاده نمیکنید، موارد زیر را به صورت دستی پیکربندی کنید:
|
||||
- دستور Build را روی `hugo --gc --minify` پیکربندی کنید
|
||||
- دایرکتوری Publish را برای `public` مشخص کنید
|
||||
- `HUGO_VERSION` متغیر محیط استقرار را اضافه کنید و روی `0.119.0` تنظیم کنید
|
||||
4. استقرار!
|
||||
- دستور ساخت را روی `hugo --gc --minify` تنظیم کنید.
|
||||
- دایرکتوری انتشار را روی `public` مشخص کنید.
|
||||
- متغیر محیطی `HUGO_VERSION` را اضافه کرده و روی `0.147.7` تنظیم کنید، یا آن را در فایل `netlify.toml` مشخص کنید.
|
||||
4. استقرار دهید!
|
||||
|
||||
برای جزئیات بیشتر [Hugo را در Netlify](https://docs.netlify.com/integrations/frameworks/hugo/) بررسی کنید.
|
||||
برای جزئیات بیشتر، [Hugo در Netlify](https://docs.netlify.com/integrations/frameworks/hugo/) را بررسی کنید.
|
||||
|
||||
|
||||
## Vercel
|
||||
|
||||
1. کد خود را به مخزن Git خود (گیتهاب، گیتلب و غیره) ارسال کنید.
|
||||
2. به [پیشخوان Vercel](https://vercel.com/dashboard) بروید و پروژه Hugo خود را وارد کنید
|
||||
3. پروژه را پیکربندی کنید، Hugo را به عنوان چارچوب Preset انتخاب کنید
|
||||
4. دستور Build و Install را لغو کنید:
|
||||
1. دستور Build را روی `hugo --gc --minify` تنظیم کنید
|
||||
2. دستور Install را روی `yum install golang` تنظیم کنید
|
||||
1. کد خود را به مخزن Git (GitHub, GitLab و غیره) push کنید.
|
||||
2. به [داشبورد Vercel](https://vercel.com/dashboard) بروید و پروژه Hugo خود را وارد کنید.
|
||||
3. پروژه را پیکربندی کنید، Hugo را به عنوان پیشتنظیم فریمورک انتخاب کنید.
|
||||
4. دستور ساخت و دستور نصب را بازنویسی کنید:
|
||||
1. دستور ساخت را روی `hugo --gc --minify` تنظیم کنید.
|
||||
2. دستور نصب را روی `yum install golang` تنظیم کنید.
|
||||
|
||||

|
||||

|
@@ -4,24 +4,24 @@ prev: /docs/guide/shortcodes
|
||||
next: /docs/advanced
|
||||
---
|
||||
|
||||
Hugoは静的サイトを生成するため、柔軟なホスティングオプションが可能です。
|
||||
このページでは、Hextraサイトをさまざまなプラットフォームにデプロイするためのガイドを提供します。
|
||||
Hugo は静的サイトを生成するため、柔軟なホスティングオプションが利用可能です。
|
||||
このページでは、Hextra サイトを様々なプラットフォームにデプロイする方法を解説します。
|
||||
|
||||
<!--more-->
|
||||
|
||||
|
||||
## GitHub Pages
|
||||
|
||||
[GitHub Pages](https://docs.github.com/pages)は、無料でウェブサイトをデプロイおよびホストするための推奨方法です。
|
||||
[GitHub Pages](https://docs.github.com/pages) は無料でサイトをデプロイ・ホストするための推奨方法です。
|
||||
|
||||
[hextra-starter-template](https://github.com/imfing/hextra-starter-template)を使用してサイトをブートストラップした場合、GitHub Pagesへの自動デプロイを支援するGitHub Actionsワークフローがすぐに利用可能です。
|
||||
[hextra-starter-template](https://github.com/imfing/hextra-starter-template) を使用してサイトを構築した場合、GitHub Pages への自動デプロイを支援する GitHub Actions ワークフローが最初から用意されています。
|
||||
|
||||
{{% details title="GitHub Actionsの設定" closed="true" %}}
|
||||
{{% details title="GitHub Actions 設定" closed="true" %}}
|
||||
|
||||
以下は、[hextra-starter-template](https://github.com/imfing/hextra-starter-template)からの設定例です:
|
||||
以下は [hextra-starter-template](https://github.com/imfing/hextra-starter-template) の設定例です:
|
||||
|
||||
```yaml {filename=".github/workflows/pages.yaml"}
|
||||
# HugoサイトをGitHub Pagesにデプロイするためのサンプルワークフロー
|
||||
# Hugo サイトをビルドし GitHub Pages にデプロイするサンプルワークフロー
|
||||
name: Deploy Hugo site to Pages
|
||||
|
||||
on:
|
||||
@@ -29,22 +29,21 @@ on:
|
||||
push:
|
||||
branches: ["main"]
|
||||
|
||||
# Actionsタブから手動でこのワークフローを実行可能
|
||||
# Actions タブから手動で実行可能
|
||||
workflow_dispatch:
|
||||
|
||||
# GITHUB_TOKENの権限を設定してGitHub Pagesへのデプロイを許可
|
||||
# GITHUB_TOKEN の権限を設定(GitHub Pages へのデプロイを許可)
|
||||
permissions:
|
||||
contents: read
|
||||
pages: write
|
||||
id-token: write
|
||||
|
||||
# 同時実行を1つに制限し、進行中の実行と最新のキューイングされた実行の間の実行をスキップ。
|
||||
# ただし、進行中の実行はキャンセルしないでください。これらの本番デプロイを完了させたいためです。
|
||||
# 同時実行を1つに制限(進行中の実行はキャンセルしない)
|
||||
concurrency:
|
||||
group: "pages"
|
||||
cancel-in-progress: false
|
||||
|
||||
# デフォルトはbash
|
||||
# デフォルトシェルを bash に設定
|
||||
defaults:
|
||||
run:
|
||||
shell: bash
|
||||
@@ -59,7 +58,7 @@ jobs:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0 # .GitInfoと.Lastmodのためにすべての履歴を取得
|
||||
fetch-depth: 0 # .GitInfo と .Lastmod 用に全履歴を取得
|
||||
submodules: recursive
|
||||
- name: Setup Go
|
||||
uses: actions/setup-go@v5
|
||||
@@ -74,7 +73,7 @@ jobs:
|
||||
&& sudo dpkg -i ${{ runner.temp }}/hugo.deb
|
||||
- name: Build with Hugo
|
||||
env:
|
||||
# Hugoモジュールとの最大限の互換性のために
|
||||
# Hugo モジュールとの最大互換性のため
|
||||
HUGO_ENVIRONMENT: production
|
||||
HUGO_ENV: production
|
||||
run: |
|
||||
@@ -103,13 +102,13 @@ jobs:
|
||||
|
||||
|
||||
{{< callout >}}
|
||||
リポジトリ設定で、**Pages** > **Build and deployment** > **Source** を **GitHub Actions** に設定します:
|
||||
リポジトリ設定で、**Pages** > **Build and deployment** > **Source** を **GitHub Actions** に設定してください:
|
||||

|
||||
{{< /callout >}}
|
||||
|
||||
デフォルトでは、上記のGitHub Actionsワークフロー `.github/workflows/pages.yaml` は、サイトが `https://<USERNAME>.github.io/<REPO>/` にデプロイされることを前提としています。
|
||||
デフォルトでは、上記の GitHub Actions ワークフロー `.github/workflows/pages.yaml` は `https://<USERNAME>.github.io/<REPO>/` へのデプロイを想定しています。
|
||||
|
||||
`https://<USERNAME>.github.io/` にデプロイする場合は、`--baseURL` を変更します:
|
||||
`https://<USERNAME>.github.io/` にデプロイする場合は `--baseURL` を修正してください:
|
||||
|
||||
```yaml {filename=".github/workflows/pages.yaml",linenos=table,linenostart=54,hl_lines=[4]}
|
||||
run: |
|
||||
@@ -118,47 +117,47 @@ run: |
|
||||
--baseURL "https://${{ github.repository_owner }}.github.io/"
|
||||
```
|
||||
|
||||
独自のドメインにデプロイする場合は、`--baseURL` の値を適宜変更してください。
|
||||
独自ドメインを使用する場合は、`--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** セクションで以下の情報を提供します:
|
||||
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** セクションで以下を設定:
|
||||
|
||||
| 設定 | 値 |
|
||||
| ---------------- | ------------------- |
|
||||
| 本番ブランチ | `main` |
|
||||
| ビルドコマンド | `hugo --gc --minify` |
|
||||
| ビルドディレクトリ | `public` |
|
||||
| 設定項目 | 値 |
|
||||
| ----------------- | -------------------- |
|
||||
| Production branch | `main` |
|
||||
| Build command | `hugo --gc --minify` |
|
||||
| Build directory | `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/)。
|
||||
詳細は以下を参照:
|
||||
- [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. [プロジェクトをインポート](https://app.netlify.com/start)してNetlifyに追加します。
|
||||
3. [hextra-starter-template][hextra-starter-template]を使用していない場合、以下の設定を手動で行います:
|
||||
- ビルドコマンドを `hugo --gc --minify` に設定します。
|
||||
- 公開ディレクトリを `public` に指定します。
|
||||
- 環境変数 `HUGO_VERSION` を追加し、`0.147.7` に設定するか、`netlify.toml` ファイルに設定します。
|
||||
4. デプロイします!
|
||||
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. デプロイ!
|
||||
|
||||
詳細については、[NetlifyでのHugo](https://docs.netlify.com/integrations/frameworks/hugo/)を確認してください。
|
||||
詳細は [Hugo on Netlify](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` に設定します。
|
||||
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` に設定
|
||||
|
||||

|
||||

|
@@ -4,42 +4,42 @@ prev: /docs/guide/shortcodes
|
||||
next: /docs/advanced
|
||||
---
|
||||
|
||||
Hugo 生成静态网站,允许灵活的托管选项。
|
||||
本页提供了在各种平台上部署 Hextra 站点的指南。
|
||||
Hugo 生成静态网站,支持灵活的托管方案。
|
||||
本页提供在各类平台上部署 Hextra 站点的指南。
|
||||
|
||||
<!--more-->
|
||||
|
||||
|
||||
## GitHub Pages
|
||||
|
||||
[GitHub Pages](https://docs.github.com/pages) 是推荐的方式,可以免费部署和托管您的网站。
|
||||
[GitHub Pages](https://docs.github.com/pages) 是推荐的免费部署托管方案。
|
||||
|
||||
如果您使用 [hextra-starter-template](https://github.com/imfing/hextra-starter-template) 引导站点,它已经提供了开箱即用的 GitHub Actions 工作流,帮助自动部署到 GitHub 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 的示例工作流
|
||||
# 构建并部署 Hugo 站点到 GitHub Pages 的示例工作流
|
||||
name: 部署 Hugo 站点到 Pages
|
||||
|
||||
on:
|
||||
# 在推送到默认分支时运行
|
||||
# 针对默认分支的推送触发
|
||||
push:
|
||||
branches: ["main"]
|
||||
|
||||
# 允许您从 Actions 选项卡手动运行此工作流
|
||||
# 允许从 Actions 标签手动运行
|
||||
workflow_dispatch:
|
||||
|
||||
# 设置 GITHUB_TOKEN 的权限以允许部署到 GitHub Pages
|
||||
# 设置 GITHUB_TOKEN 权限以允许部署到 GitHub Pages
|
||||
permissions:
|
||||
contents: read
|
||||
pages: write
|
||||
id-token: write
|
||||
|
||||
# 只允许一个并发部署,跳过在运行中和最新排队之间的运行。
|
||||
# 但是,不要取消正在运行的运行,因为我们希望这些生产部署能够完成。
|
||||
# 仅允许一个并发部署,跳过正在运行与最新排队之间的运行
|
||||
# 但不会取消进行中的运行,以确保生产部署完成
|
||||
concurrency:
|
||||
group: "pages"
|
||||
cancel-in-progress: false
|
||||
@@ -56,32 +56,32 @@ jobs:
|
||||
env:
|
||||
HUGO_VERSION: 0.147.7
|
||||
steps:
|
||||
- name: 检出
|
||||
- name: 检出代码
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
fetch-depth: 0 # 获取所有历史记录以支持 .GitInfo 和 .Lastmod
|
||||
fetch-depth: 0 # 获取完整历史记录以支持 .GitInfo 和 .Lastmod
|
||||
submodules: recursive
|
||||
- name: 设置 Go
|
||||
- name: 设置 Go 环境
|
||||
uses: actions/setup-go@v5
|
||||
with:
|
||||
go-version: '1.22'
|
||||
- name: 设置 Pages
|
||||
- name: 配置 Pages
|
||||
id: pages
|
||||
uses: actions/configure-pages@v4
|
||||
- name: 设置 Hugo
|
||||
- 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 模块提供最大兼容性
|
||||
HUGO_ENVIRONMENT: production
|
||||
HUGO_ENV: production
|
||||
run: |
|
||||
hugo \
|
||||
--gc --minify \
|
||||
--baseURL "${{ steps.pages.outputs.base_url }}/"
|
||||
- name: 上传工件
|
||||
- name: 上传产物
|
||||
uses: actions/upload-pages-artifact@v3
|
||||
with:
|
||||
path: ./public
|
||||
@@ -103,13 +103,13 @@ jobs:
|
||||
|
||||
|
||||
{{< callout >}}
|
||||
在您的仓库设置中,将 **Pages** > **Build and deployment** > **Source** 设置为 **GitHub Actions**:
|
||||
在仓库设置中,将 **Pages** > **构建与部署** > **源** 设为 **GitHub Actions**:
|
||||

|
||||
{{< /callout >}}
|
||||
|
||||
默认情况下,上述 GitHub Actions 工作流 `.github/workflows/pages.yaml` 假设站点部署到 `https://<USERNAME>.github.io/<REPO>/`。
|
||||
默认配置中,GitHub Actions 工作流 `.github/workflows/pages.yaml` 假设站点部署在 `https://<用户名>.github.io/<仓库名>/`。
|
||||
|
||||
如果您部署到 `https://<USERNAME>.github.io/`,请修改 `--baseURL`:
|
||||
若需部署到 `https://<用户名>.github.io/`,请修改 `--baseURL`:
|
||||
|
||||
```yaml {filename=".github/workflows/pages.yaml",linenos=table,linenostart=54,hl_lines=[4]}
|
||||
run: |
|
||||
@@ -118,47 +118,47 @@ run: |
|
||||
--baseURL "https://${{ github.repository_owner }}.github.io/"
|
||||
```
|
||||
|
||||
如果您部署到自己的域名,请相应地更改 `--baseURL` 值。
|
||||
若使用自定义域名,请相应调整 `--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** 部分提供以下信息:
|
||||
1. 将站点源码存入 Git 仓库(如 GitHub)
|
||||
2. 登录 [Cloudflare 控制台](https://dash.cloudflare.com/) 并选择账户
|
||||
3. 在账户首页选择 **Workers & Pages** > **创建应用** > **Pages** > **连接 Git**
|
||||
4. 选择仓库后,在 **设置构建与部署** 部分填写:
|
||||
|
||||
| 配置项 | 值 |
|
||||
| ------------------ | -------------------- |
|
||||
| 生产分支 | `main` |
|
||||
| 构建命令 | `hugo --gc --minify` |
|
||||
| 构建目录 | `public` |
|
||||
| 配置项 | 值 |
|
||||
| ---------------- | -------------------- |
|
||||
| 生产分支 | `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/)。
|
||||
更多细节请参阅:
|
||||
- [部署 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. [导入项目](https://app.netlify.com/start) 到 Netlify
|
||||
3. 如果您没有使用 [hextra-starter-template][hextra-starter-template],请手动配置以下内容:
|
||||
- 将构建命令配置为 `hugo --gc --minify`
|
||||
- 指定发布目录为 `public`
|
||||
- 添加环境变量 `HUGO_VERSION` 并设置为 `0.147.7`,或者将其设置在 `netlify.toml` 文件中
|
||||
4. 部署!
|
||||
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/) 了解更多详情。
|
||||
详见 [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`
|
||||
1. 将代码推送到 Git 仓库(GitHub/GitLab 等)
|
||||
2. 进入 [Vercel 控制台](https://vercel.com/dashboard) 导入 Hugo 项目
|
||||
3. 配置项目时选择 Hugo 作为框架预设
|
||||
4. 覆盖构建命令与安装命令:
|
||||
1. 构建命令设为 `hugo --gc --minify`
|
||||
2. 安装命令设为 `yum install golang`
|
||||
|
||||

|
@@ -4,15 +4,15 @@ weight: 6
|
||||
next: /docs/guide/shortcodes
|
||||
---
|
||||
|
||||
در حال حاضر، هگزترا از [Mermaid](#mermaid) برای نمودارها پشتیبانی میکند.
|
||||
در حال حاضر، Hextra از [Mermaid](#mermaid) برای نمودارها پشتیبانی میکند.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Mermaid
|
||||
|
||||
[Mermaid](https://github.com/mermaid-js/mermaid#readme) یک ابزار نمودار و نمودار مبتنی بر جاوااسکریپت است که تعاریف متنی الهام گرفته از مارکداون را دریافت میکند و نمودارها را به صورت پویا در مرورگر ایجاد میکند. به عنوان مثال، Mermaid میتواند نمودارهای فلوچارت، نمودارهای توالی، نمودارهای دایرهای و موارد دیگر را رندر کند.
|
||||
[Mermaid](https://github.com/mermaid-js/mermaid#readme) یک ابزار نمودار و چارت مبتنی بر جاوااسکریپت است که تعاریف متنی الهامگرفته از Markdown را گرفته و به صورت پویا در مرورگر نمودارها را ایجاد میکند. به عنوان مثال، Mermaid میتواند فلوچارتها، نمودارهای توالی، نمودارهای دایرهای و موارد دیگر را رندر کند.
|
||||
|
||||
استفاده از Mermaid در هگزترا به سادگی نوشتن یک بلوک کد با مجموعه زبان `mermaid` است:
|
||||
استفاده از Mermaid در Hextra به سادگی نوشتن یک بلوک کد با زبان تنظیم شده `mermaid` است:
|
||||
|
||||
````markdown
|
||||
```mermaid
|
||||
@@ -24,7 +24,7 @@ graph TD;
|
||||
```
|
||||
````
|
||||
|
||||
به صورت زیر رندر خواهد شد:
|
||||
به صورت زیر رندر میشود:
|
||||
|
||||
```mermaid
|
||||
graph TD;
|
||||
@@ -50,4 +50,4 @@ sequenceDiagram
|
||||
Bob-->>John: Jolly good!
|
||||
```
|
||||
|
||||
برای اطلاعات بیشتر، لطفا به [مستندات Mermaid](https://mermaid-js.github.io/mermaid/#/) مراجعه کنید.
|
||||
برای اطلاعات بیشتر، لطفاً به [مستندات Mermaid](https://mermaid-js.github.io/mermaid/#/) مراجعه کنید.
|
@@ -4,15 +4,15 @@ weight: 6
|
||||
next: /docs/guide/shortcodes
|
||||
---
|
||||
|
||||
現在、Hextraはダイアグラムのために[Mermaid](#mermaid)をサポートしています。
|
||||
現在、Hextra は [Mermaid](#mermaid) によるダイアグラム作成をサポートしています。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Mermaid
|
||||
|
||||
[Mermaid](https://github.com/mermaid-js/mermaid#readme)は、JavaScriptベースのダイアグラムおよびチャート作成ツールで、Markdownにインスパイアされたテキスト定義を取り込み、ブラウザ内でダイナミックにダイアグラムを作成します。例えば、Mermaidはフローチャート、シーケンス図、円グラフなどをレンダリングできます。
|
||||
[Mermaid](https://github.com/mermaid-js/mermaid#readme) は、JavaScript ベースのダイアグラムおよびチャート作成ツールで、Markdown 風のテキスト定義をブラウザ上で動的にダイアグラムに変換します。例えば、Mermaid はフローチャート、シーケンス図、円グラフなどをレンダリングできます。
|
||||
|
||||
HextraでMermaidを使用するのは、言語を`mermaid`に設定したコードブロックを書くのと同じくらい簡単です:
|
||||
Hextra で Mermaid を使用するには、言語を `mermaid` に設定したコードブロックを記述するだけです:
|
||||
|
||||
````markdown
|
||||
```mermaid
|
||||
@@ -24,7 +24,7 @@ graph TD;
|
||||
```
|
||||
````
|
||||
|
||||
これは次のようにレンダリングされます:
|
||||
これは以下のようにレンダリングされます:
|
||||
|
||||
```mermaid
|
||||
graph TD;
|
||||
@@ -34,20 +34,20 @@ graph TD;
|
||||
C-->D;
|
||||
```
|
||||
|
||||
シーケンス図:
|
||||
シーケンス図の例:
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
participant Alice
|
||||
participant Bob
|
||||
Alice->>John: こんにちはJohn、元気ですか?
|
||||
loop 健康チェック
|
||||
John->>John: 心気症と戦う
|
||||
Alice->>John: Hello John, how are you?
|
||||
loop Healthcheck
|
||||
John->>John: Fight against hypochondria
|
||||
end
|
||||
Note right of John: 理性的な思考 <br/>が勝つ!
|
||||
John-->>Alice: 元気です!
|
||||
John->>Bob: あなたはどうですか?
|
||||
Bob-->>John: とても元気です!
|
||||
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/#/)を参照してください。
|
||||
詳細については、[Mermaid ドキュメント](https://mermaid-js.github.io/mermaid/#/)を参照してください。
|
@@ -4,13 +4,13 @@ weight: 6
|
||||
next: /docs/guide/shortcodes
|
||||
---
|
||||
|
||||
目前,Hextra 支持使用 [Mermaid](#mermaid) 来绘制图表。
|
||||
目前,Hextra 支持通过 [Mermaid](#mermaid) 绘制图表。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Mermaid
|
||||
|
||||
[Mermaid](https://github.com/mermaid-js/mermaid#readme) 是一个基于 JavaScript 的图表工具,它通过类似 Markdown 的文本定义,在浏览器中动态生成图表。例如,Mermaid 可以渲染流程图、序列图、饼图等。
|
||||
[Mermaid](https://github.com/mermaid-js/mermaid#readme) 是一个基于 JavaScript 的图表绘制工具,它能将类 Markdown 的文本定义动态转换为浏览器中渲染的图表。例如,Mermaid 可以绘制流程图、时序图、饼图等多种图表。
|
||||
|
||||
在 Hextra 中使用 Mermaid 非常简单,只需编写一个语言设置为 `mermaid` 的代码块:
|
||||
|
||||
@@ -24,7 +24,7 @@ graph TD;
|
||||
```
|
||||
````
|
||||
|
||||
将会渲染为:
|
||||
上述代码将渲染为:
|
||||
|
||||
```mermaid
|
||||
graph TD;
|
||||
@@ -34,7 +34,7 @@ graph TD;
|
||||
C-->D;
|
||||
```
|
||||
|
||||
序列图示例:
|
||||
时序图示例:
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
@@ -42,12 +42,12 @@ sequenceDiagram
|
||||
participant Bob
|
||||
Alice->>John: 你好 John,最近怎么样?
|
||||
loop 健康检查
|
||||
John->>John: 与疑病症作斗争
|
||||
John->>John: 与疑病症斗争
|
||||
end
|
||||
Note right of John: 理性思考 <br/>占据上风!
|
||||
John-->>Alice: 很好!
|
||||
John-->>Alice: 好极了!
|
||||
John->>Bob: 你怎么样?
|
||||
Bob-->>John: 非常好!
|
||||
```
|
||||
|
||||
更多信息,请参考 [Mermaid 文档](https://mermaid-js.github.io/mermaid/#/)。
|
||||
更多信息请参阅 [Mermaid 官方文档](https://mermaid-js.github.io/mermaid/#/)。
|
@@ -3,32 +3,35 @@ title: "LaTeX"
|
||||
weight: 4
|
||||
---
|
||||
|
||||
به طور پیشفرض، \(\KaTeX\) برای رندر کردن عبارتهای ریاضی LaTeX استفاده میشود.
|
||||
نیازی به فعالسازی دستی نیست، میتوانید فوراً از عبارتهای ریاضی LaTeX در محتوای مارکداون خود استفاده کنید.
|
||||
عبارات ریاضی LaTeX به طور پیشفرض با استفاده از \(\KaTeX\) نمایش داده میشوند. کافی است آنها را در محتوای Markdown خود قرار دهید بدون نیاز به هیچ پیکربندی دستی.
|
||||
|
||||
## مثال
|
||||
## نحوه استفاده
|
||||
|
||||
هر دو عبارتهای ریاضی درونخطی و پاراگراف جداگانه LaTeX در محتوای مارکداون پشتیبانی میشوند.
|
||||
میتوانید از LaTeX هم برای عبارات درون خطی و هم برای بلوکهای بزرگتر متن استفاده کنید.
|
||||
|
||||
### درونخطی
|
||||
### ریاضی درون خطی
|
||||
|
||||
برای قرار دادن یک عبارت درون یک خط متن، آن را بین `\(` و `\)` قرار دهید.
|
||||
|
||||
```markdown {filename="page.md"}
|
||||
این \(\sigma(z) = \frac{1}{1 + e^{-z}}\) درونخطی است.
|
||||
این \(\sigma(z) = \frac{1}{1 + e^{-z}}\) یک عبارت درون خطی است.
|
||||
```
|
||||
|
||||
این \(\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$$
|
||||
```
|
||||
|
||||
به صورت زیر رندر خواهد شد:
|
||||
به این صورت نمایش داده میشود:
|
||||
|
||||
$$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"}
|
||||
$$
|
||||
@@ -41,7 +44,7 @@ $$
|
||||
$$
|
||||
```
|
||||
|
||||
به صورت زیر رندر خواهد شد:
|
||||
به این صورت نمایش داده میشود:
|
||||
|
||||
$$
|
||||
\begin{aligned}
|
||||
@@ -52,11 +55,28 @@ $$
|
||||
\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 را در محتوای مارکداون شما تشخیص دهد.
|
||||
> لطفاً افزونه [passthrough](https://gohugo.io/content-management/mathematics/) را در فایل پیکربندی Hugo فعال و پیکربندی کنید تا Hugo بتواند عبارات ریاضی LaTeX را در محتوای Markdown شما تشخیص دهد.
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
markup:
|
||||
@@ -69,35 +89,47 @@ markup:
|
||||
enable: true
|
||||
```
|
||||
|
||||
## توابع پشتیبانی شده
|
||||
### موتور ریاضی
|
||||
|
||||
برای مشاهده فهرست توابع پشتیبانی شده، به [توابع پشتیبانی شده KaTeX](https://katex.org/docs/supported.html) مراجعه کنید.
|
||||
[KaTeX][katex] موتور پیشفرضی است که برای نمایش عبارات ریاضی LaTeX در فرآیند ساخت توسط [Hugo][hugo-transform-tomath] استفاده میشود.
|
||||
|
||||
## شیمی
|
||||
پیشفرض KaTeX است، اما در صورت نیاز به ویژگیهایی که فقط در [MathJax][mathjax] موجود است، میتوانید به MathJax سوئیچ کنید.
|
||||
|
||||
عبارتهای شیمی از طریق افزونه [mhchem](https://mhchem.github.io/MathJax-mhchem/) پشتیبانی میشوند.
|
||||
#### KaTeX
|
||||
|
||||
درونخطی: \(\ce{H2O}\) آب است.
|
||||
پیکربندی پیشفرض نیاز به هیچ تنظیمی ندارد. Hugo فایل CSS مربوط به KaTeX را از CDN دریافت میکند.
|
||||
اگر نیاز به استفاده از نسخه خاصی از KaTeX یا استفاده از فایلهای محلی دارید، میتوانید این کار را در فایل `hugo.yaml` انجام دهید.
|
||||
|
||||
پاراگراف جداگانه:
|
||||
##### تغییر آدرس پایه CDN
|
||||
|
||||
```markdown {filename="page.md"}
|
||||
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
math:
|
||||
engine: katex
|
||||
katex:
|
||||
base: "https://cdn.jsdelivr.net/npm/katex@0.16.22/dist"
|
||||
```
|
||||
|
||||
به صورت زیر رندر خواهد شد:
|
||||
##### استفاده از فایلهای محلی
|
||||
|
||||
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
|
||||
همچنین میتوانید فایل 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
|
||||
|
||||
به طور پیشفرض، [KaTeX][katex] برای رندر کردن عبارتهای ریاضی LaTeX در طول فرآیند ساخت استفاده میشود که روش ترجیحی است.
|
||||
به عنوان جایگزین، میتوانید از [MathJax][mathjax] برای رندر کردن عبارتهای ریاضی استفاده کنید.
|
||||
|
||||
برای استفاده از آن، موارد زیر را به فایل پیکربندی `hugo.yaml` اضافه کنید:
|
||||
به عنوان جایگزین، میتوانید از [MathJax][mathjax] برای نمایش عبارات ریاضی استفاده کنید:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
@@ -105,5 +137,10 @@ params:
|
||||
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/
|
@@ -3,32 +3,35 @@ title: "LaTeX"
|
||||
weight: 4
|
||||
---
|
||||
|
||||
デフォルトでは、\(\KaTeX\) が LaTeX 数式のレンダリングに使用されます。
|
||||
手動での有効化は不要で、Markdown コンテンツで LaTeX 数式をすぐに使い始めることができます。
|
||||
LaTeX の数式表現はデフォルトで \(\KaTeX\) を使用してレンダリングされます。特別な設定なしで、Markdown コンテンツ内に直接記述できます。
|
||||
|
||||
## 例
|
||||
## 使用方法
|
||||
|
||||
Markdown コンテンツ内で、インラインおよび別段落の LaTeX 数式がサポートされています。
|
||||
LaTeX はインライン式とブロック式の両方で使用できます。
|
||||
|
||||
### インライン
|
||||
### インライン数式
|
||||
|
||||
文中に数式を含めるには、`\(` と `\)` で囲みます。
|
||||
|
||||
```markdown {filename="page.md"}
|
||||
これは \(\sigma(z) = \frac{1}{1 + e^{-z}}\) インラインです。
|
||||
この \(\sigma(z) = \frac{1}{1 + e^{-z}}\) はインライン式です。
|
||||
```
|
||||
|
||||
これは \(\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$$
|
||||
```
|
||||
|
||||
次のようにレンダリングされます:
|
||||
|
||||
$$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 環境を使用する場合:
|
||||
複数行の数式には `aligned` などの LaTeX 環境も使用できます。
|
||||
|
||||
```latex {filename="page.md"}
|
||||
$$
|
||||
@@ -52,11 +55,28 @@ $$
|
||||
\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 数式を検出できるように、Hugo 設定ファイルで [パススルー拡張機能](https://gohugo.io/content-management/mathematics/) を有効にして設定してください。
|
||||
> Hugo が Markdown コンテンツ内の LaTeX 数式を認識できるよう、[パススルー拡張](https://gohugo.io/content-management/mathematics/) を Hugo 設定ファイルで有効にしてください。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
markup:
|
||||
@@ -69,35 +89,47 @@ markup:
|
||||
enable: true
|
||||
```
|
||||
|
||||
## サポートされている関数
|
||||
### 数式エンジン
|
||||
|
||||
サポートされている関数の一覧については、[KaTeX サポートされている関数](https://katex.org/docs/supported.html) を参照してください。
|
||||
[KaTeX][katex] はビルド時に LaTeX 数式をレンダリングするデフォルトエンジンで、[Hugo][hugo-transform-tomath] でサポートされています。
|
||||
|
||||
## 化学
|
||||
デフォルトは KaTeX ですが、MathJax のみの機能が必要な場合は [MathJax][mathjax] に切り替えられます。
|
||||
|
||||
化学式は [mhchem](https://mhchem.github.io/MathJax-mhchem/) 拡張機能を介してサポートされています。
|
||||
#### KaTeX
|
||||
|
||||
インライン: \(\ce{H2O}\) は水です。
|
||||
デフォルト設定では追加の設定は不要です。Hugo は KaTeX の CSS を CDN から取得します。
|
||||
特定のバージョンを固定したりローカルアセットを使用する場合は、`hugo.yaml` ファイルで設定できます。
|
||||
|
||||
別段落:
|
||||
##### CDN ベース URL の上書き
|
||||
|
||||
```markdown {filename="page.md"}
|
||||
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
math:
|
||||
engine: katex
|
||||
katex:
|
||||
base: "https://cdn.jsdelivr.net/npm/katex@0.16.22/dist"
|
||||
```
|
||||
|
||||
次のようにレンダリングされます:
|
||||
##### ローカルアセットの使用
|
||||
|
||||
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
|
||||
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
|
||||
|
||||
デフォルトでは、ビルドプロセス中に LaTeX 数式をレンダリングするために [KaTeX][katex] が使用されます(推奨)。
|
||||
代替として、[MathJax][mathjax] を使用して数式をレンダリングすることもできます。
|
||||
|
||||
MathJax を使用するには、`hugo.yaml` 設定ファイルに以下を追加してください:
|
||||
代わりに [MathJax][mathjax] を使用して数式をレンダリングすることもできます:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
@@ -105,5 +137,10 @@ params:
|
||||
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/
|
@@ -1,35 +1,37 @@
|
||||
---
|
||||
title: "数学公式"
|
||||
weight: 4
|
||||
math: true
|
||||
---
|
||||
|
||||
默认情况下,\(\KaTeX\) 用于渲染 LaTeX 数学表达式。
|
||||
无需手动激活,您可以直接在 Markdown 内容中开始使用 LaTeX 数学表达式。
|
||||
LaTeX 数学表达式默认使用 \(\KaTeX\) 渲染。直接在 Markdown 内容中使用即可,无需手动配置。
|
||||
|
||||
## 示例
|
||||
## 使用方法
|
||||
|
||||
Markdown 内容中支持内联和独立段落的 LaTeX 数学表达式。
|
||||
LaTeX 既可用于行内表达式,也可用于大段文本。
|
||||
|
||||
### 内联
|
||||
### 行内公式
|
||||
|
||||
要在文本行内插入表达式,用 `\(` 和 `\)` 包裹。
|
||||
|
||||
```markdown {filename="page.md"}
|
||||
这个 \(\sigma(z) = \frac{1}{1 + e^{-z}}\) 是内联的。
|
||||
这个 \(\sigma(z) = \frac{1}{1 + e^{-z}}\) 是行内表达式。
|
||||
```
|
||||
|
||||
这个 \(\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$$
|
||||
```
|
||||
|
||||
将渲染为:
|
||||
|
||||
$$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"}
|
||||
$$
|
||||
@@ -53,11 +55,28 @@ $$
|
||||
\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 数学表达式。
|
||||
> 请在 Hugo 配置文件中启用并配置 [passthrough 扩展](https://gohugo.io/content-management/mathematics/),以便 Hugo 能识别 Markdown 中的 LaTeX 数学表达式。
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
markup:
|
||||
@@ -70,35 +89,46 @@ markup:
|
||||
enable: true
|
||||
```
|
||||
|
||||
## 支持的函数
|
||||
### 数学引擎
|
||||
|
||||
有关支持的函数列表,请参阅 [KaTeX 支持的函数](https://katex.org/docs/supported.html)。
|
||||
构建过程中默认使用 [KaTeX][katex] 渲染 LaTeX 数学表达式,由 [Hugo][hugo-transform-tomath] 支持。
|
||||
|
||||
## 化学
|
||||
默认引擎是 KaTeX,但也可切换至 [MathJax][mathjax] 以使用其特有功能。
|
||||
|
||||
通过 [mhchem](https://mhchem.github.io/MathJax-mhchem/) 扩展支持化学表达式。
|
||||
#### KaTeX
|
||||
|
||||
内联:\(\ce{H2O}\) 是水。
|
||||
默认设置无需配置。Hugo 会从 CDN 获取 KaTeX CSS。如需指定 KaTeX 版本或使用本地资源,可在 `hugo.yaml` 中配置。
|
||||
|
||||
独立段落:
|
||||
##### 覆盖 CDN 基础 URL
|
||||
|
||||
```markdown {filename="page.md"}
|
||||
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
math:
|
||||
engine: katex
|
||||
katex:
|
||||
base: "https://cdn.jsdelivr.net/npm/katex@0.16.22/dist"
|
||||
```
|
||||
|
||||
将渲染为:
|
||||
##### 使用本地资源
|
||||
|
||||
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$
|
||||
可将 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
|
||||
|
||||
默认情况下,使用 [KaTeX][katex] 在构建过程中渲染 LaTeX 数学表达式,这是首选方式。
|
||||
或者,您可以使用 [MathJax][mathjax] 来渲染数学表达式。
|
||||
|
||||
要使用 MathJax,请将以下内容添加到 `hugo.yaml` 配置文件中:
|
||||
也可使用 [MathJax][mathjax] 渲染数学表达式:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
@@ -106,5 +136,10 @@ params:
|
||||
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/
|
@@ -1,141 +1,183 @@
|
||||
---
|
||||
title: مارکداون
|
||||
title: Markdown
|
||||
weight: 2
|
||||
---
|
||||
|
||||
Hugo از سینتکس [مارکداون](https://en.wikipedia.org/wiki/Markdown) برای قالببندی متن، ایجاد فهرست و موارد دیگر پشتیبانی میکند. این صفحه برخی از رایجترین نمونههای سینتکس مارکداون را به شما نشان میدهد.
|
||||
Hugo از [Markdown](https://en.wikipedia.org/wiki/Markdown) برای قالببندی متن، ایجاد لیستها و موارد دیگر پشتیبانی میکند. این صفحه برخی از رایجترین نمونههای نحوه استفاده از Markdown را به شما نشان میدهد.
|
||||
|
||||
<!--more-->
|
||||
|
||||
## مثالهای مارکداون
|
||||
## نمونههای Markdown
|
||||
|
||||
### ظاهر طراحی دادن به متن
|
||||
### استایلدهی متن
|
||||
|
||||
| سبک | سینتکس | مثال | خروجی |
|
||||
| -------- | -------- | ------ | ------ |
|
||||
| توپر | `**متن توپر**` | `**متن توپر**` | **متن توپر** |
|
||||
| کج | `*متن کج*` | `*متن کج*` | *متن کج* |
|
||||
| خط خورده | `~~متن خط خورده~~` | `~~متن خط خورده~~` | ~~متن خط خورده~~ |
|
||||
| پاییننویس | `<sub></sub>` | `این یک متن <sub>پاییننویس</sub> است` | این یک متن <sub>پاییننویس</sub> است |
|
||||
| بالانویس | `<sup></sup>` | `این یک متن <sup>بالانویس</sup> است` | این یک متن <sup>بالانویس</sup> است |
|
||||
| استایل | نحو | مثال | خروجی |
|
||||
| :------------ | :----------------------- | :-------------------------------------- | :------------------------------------ |
|
||||
| پررنگ | `**متن پررنگ**` | `**متن پررنگ**` | **متن پررنگ** |
|
||||
| مورب | `*متن مورب*` | `*متن مورب*` | _متن مورب_ |
|
||||
| خطخورده | `~~متن خطخورده~~` | `~~متن خطخورده~~` | ~~متن خطخورده~~ |
|
||||
| زیرنویس | `<sub></sub>` | `این یک <sub>زیرنویس</sub> است` | این یک <sub>زیرنویس</sub> است |
|
||||
| بالانویس | `<sup></sup>` | `این یک <sup>بالانویس</sup> است` | این یک <sup>بالانویس</sup> است |
|
||||
|
||||
### بلوک نقلقول
|
||||
### نقلقولها
|
||||
|
||||
بلوک نقلقول با ذکر منبع
|
||||
نقلقول با ذکر منبع
|
||||
|
||||
> با اشتراکگذاری حافظه ارتباط برقرار نکنید، حافظه را با برقراری ارتباط به اشتراک بگذارید.<br>
|
||||
> — <cite>راب پایک[^1]</cite>
|
||||
> با اشتراکگذاری حافظه ارتباط برقرار نکنید، بلکه با ارتباط، حافظه را اشتراک بگذارید.<br>
|
||||
> — <cite>Rob Pike[^1]</cite>
|
||||
|
||||
[^1]: نقلقول بالا گزیدهای از [سخنرانی](https://www.youtube.com/watch?v=PAAkCSZUG1c) راب پایک در Gopherfest، در تاریخ ۲۷ آبان ۱۳۹۴ است.
|
||||
[^1]: این نقلقول از [سخنرانی](https://www.youtube.com/watch?v=PAAkCSZUG1c) Rob Pike در Gopherfest در ۱۸ نوامبر ۲۰۱۵ گرفته شده است.
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
> با اشتراکگذاری حافظه ارتباط برقرار نکنید، حافظه را با برقراری ارتباط به اشتراک بگذارید.<br>
|
||||
> — <cite>راب پایک[^1]</cite>
|
||||
> با اشتراکگذاری حافظه ارتباط برقرار نکنید، بلکه با ارتباط، حافظه را اشتراک بگذارید.<br>
|
||||
> — <cite>Rob Pike[^1]</cite>
|
||||
|
||||
[^1]: نقلقول بالا گزیدهای از [سخنرانی](https://www.youtube.com/watch?v=PAAkCSZUG1c) راب پایک در Gopherfest، در تاریخ ۲۷ آبان ۱۳۹۴ است.
|
||||
[^1]: این نقلقول از [سخنرانی](https://www.youtube.com/watch?v=PAAkCSZUG1c) Rob Pike در Gopherfest در ۱۸ نوامبر ۲۰۱۵ گرفته شده است.
|
||||
```
|
||||
|
||||
### جدولها
|
||||
### هشدارها
|
||||
|
||||
جدولها بخشی از مشخصات اصلی مارکداون نیستند، اما Hugo از آنها در خارج از جعبه پشتیبانی میکند.
|
||||
{{< 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" >}}
|
||||
{{< card link="../../guide/syntax-highlighting" title="رنگآمیزی نحوی" icon="sparkles" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
### فهرستها
|
||||
### لیستها
|
||||
|
||||
#### فهرست مرتبشده
|
||||
#### لیست مرتب
|
||||
|
||||
1. اولین آیتم
|
||||
2. دومین آیتم
|
||||
3. سومین آیتم
|
||||
۱. مورد اول
|
||||
۲. مورد دوم
|
||||
۳. مورد سوم
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
1. اولین آیتم
|
||||
2. دومین آیتم
|
||||
3. سومین آیتم
|
||||
۱. مورد اول
|
||||
۲. مورد دوم
|
||||
۳. مورد سوم
|
||||
```
|
||||
|
||||
#### فهرست مرتبنشده
|
||||
#### لیست نامرتب
|
||||
|
||||
* فهرست آیتم
|
||||
* یک آیتم دیگه
|
||||
* و یک آیتم دیگه
|
||||
* مورد لیست
|
||||
* مورد دیگر
|
||||
* و یک مورد دیگر
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
* فهرست آیتم
|
||||
* یک آیتم دیگه
|
||||
* و یک آیتم دیگه
|
||||
* مورد لیست
|
||||
* مورد دیگر
|
||||
* و یک مورد دیگر
|
||||
```
|
||||
|
||||
#### فهرست تو در تو
|
||||
#### لیست تو در تو
|
||||
|
||||
* میوه
|
||||
* سیب
|
||||
* پرتقال
|
||||
* موز
|
||||
* لبنیات
|
||||
* شیر
|
||||
* پنیر
|
||||
- میوه
|
||||
- سیب
|
||||
- پرتقال
|
||||
- موز
|
||||
- لبنیات
|
||||
- شیر
|
||||
- پنیر
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
* میوه
|
||||
* سیب
|
||||
* پرتقال
|
||||
* موز
|
||||
* لبنیات
|
||||
* شیر
|
||||
* پنیر
|
||||
- میوه
|
||||
- سیب
|
||||
- پرتقال
|
||||
- موز
|
||||
- لبنیات
|
||||
- شیر
|
||||
- پنیر
|
||||
```
|
||||
|
||||
### عکسها
|
||||
### تصاویر
|
||||
|
||||

|
||||

|
||||
|
||||
```markdown {filename=Markdown}
|
||||

|
||||

|
||||
```
|
||||
|
||||
با توضیحات:
|
||||
با عنوان:
|
||||
|
||||

|
||||

|
||||
|
||||
```markdown {filename=Markdown}
|
||||

|
||||

|
||||
```
|
||||
|
||||
برای عملکرد پیشرفتهتر، از [shortcode Figure](https://gohugo.io/shortcodes/figure/) داخلی Hugo استفاده کنید.
|
||||
|
||||
## پیکربندی
|
||||
|
||||
Hugo از [Goldmark](https://github.com/yuin/goldmark) برای تجزیه مارکداون استفاده میکند.
|
||||
رندر مارکداون را میتوان در `hugo.yaml` تحت `markup.goldmark` پیکربندی کنید.
|
||||
در زیر پیکربندی پیشفرض هگزترا را میتوانید ببینید:
|
||||
Hugo از [Goldmark](https://github.com/yuin/goldmark) برای تجزیه Markdown استفاده میکند.
|
||||
رندر Markdown را میتوان در `hugo.yaml` تحت `markup.goldmark` پیکربندی کرد.
|
||||
در زیر پیکربندی پیشفرض Hextra آمده است:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
markup:
|
||||
@@ -146,11 +188,11 @@ markup:
|
||||
noClasses: false
|
||||
```
|
||||
|
||||
برای گزینههای پیکربندی بیشتر، به مستندات Hugo در [پیکربندی نشانهگذاری](https://gohugo.io/getting-started/configuration-markup/) مراجعه کنید.
|
||||
برای گزینههای پیکربندی بیشتر، مستندات Hugo در مورد [پیکربندی Markup](https://gohugo.io/getting-started/configuration-markup/) را ببینید.
|
||||
|
||||
## منابع یادگیری
|
||||
|
||||
* [راهنمای مارکداون](https://www.markdownguide.org/)
|
||||
* [برگه تقلب مارکداون](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
|
||||
* [آموزش مارکداون](https://www.markdowntutorial.com/)
|
||||
* [مرجع مارکداون](https://commonmark.org/help/)
|
||||
- [راهنمای 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/)
|
@@ -3,104 +3,104 @@ title: Markdown
|
||||
weight: 2
|
||||
---
|
||||
|
||||
Hugoは、テキストのフォーマットやリストの作成などに[Markdown](https://ja.wikipedia.org/wiki/Markdown)構文をサポートしています。このページでは、最も一般的なMarkdown構文の例をいくつか紹介します。
|
||||
Hugo はテキストの書式設定やリスト作成などに [Markdown](https://en.wikipedia.org/wiki/Markdown) 構文をサポートしています。このページでは、最も一般的な Markdown 構文の例を紹介します。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## Markdownの例
|
||||
## Markdown の例
|
||||
|
||||
### テキストのスタイル
|
||||
### テキストのスタイリング
|
||||
|
||||
| スタイル | 構文 | 例 | 出力 |
|
||||
| -------- | -------- | ------ | ------ |
|
||||
| 太字 | `**太字テキスト**` | `**太字テキスト**` | **太字テキスト** |
|
||||
| 斜体 | `*斜体テキスト*` | `*斜体テキスト*` | *斜体テキスト* |
|
||||
| 取り消し線 | `~~取り消し線テキスト~~` | `~~取り消し線テキスト~~` | ~~取り消し線テキスト~~ |
|
||||
| 下付き文字 | `<sub></sub>` | `これは<sub>下付き文字</sub>です` | これは<sub>下付き文字</sub>です |
|
||||
| 上付き文字 | `<sup></sup>` | `これは<sup>上付き文字</sup>です` | これは<sup>上付き文字</sup>です |
|
||||
| スタイル | 構文 | 例 | 出力 |
|
||||
| :------------ | :----------------------- | :------------------------------------ | :------------------------------------ |
|
||||
| 太字 | `**太字テキスト**` | `**太字テキスト**` | **太字テキスト** |
|
||||
| 斜体 | `*斜体テキスト*` | `*斜体テキスト*` | _斜体テキスト_ |
|
||||
| 打ち消し線 | `~~打ち消し線テキスト~~` | `~~打ち消し線テキスト~~` | ~~打ち消し線テキスト~~ |
|
||||
| 下付き文字 | `<sub></sub>` | `これは<sub>下付き文字</sub>です` | これは<sub>下付き文字</sub>です |
|
||||
| 上付き文字 | `<sup></sup>` | `これは<sup>上付き文字</sup>です` | これは<sup>上付き文字</sup>です |
|
||||
|
||||
### ブロッククォート
|
||||
|
||||
引用元付きのブロッククォート
|
||||
|
||||
> メモリを共有してコミュニケーションするのではなく、コミュニケーションしてメモリを共有せよ。<br>
|
||||
> — <cite>ロブ・パイク[^1]</cite>
|
||||
> メモリを共有することで通信するのではなく、通信することでメモリを共有しなさい。<br>
|
||||
> — <cite>Rob Pike[^1]</cite>
|
||||
|
||||
[^1]: 上記の引用は、2015年11月18日のGopherfestでのロブ・パイクの[講演](https://www.youtube.com/watch?v=PAAkCSZUG1c)から抜粋したものです。
|
||||
[^1]: 上記の引用は、2015年11月18日のGopherfestでのRob Pikeの[講演](https://www.youtube.com/watch?v=PAAkCSZUG1c)から抜粋したものです。
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
> メモリを共有してコミュニケーションするのではなく、コミュニケーションしてメモリを共有せよ。<br>
|
||||
> — <cite>ロブ・パイク[^1]</cite>
|
||||
> メモリを共有することで通信するのではなく、通信することでメモリを共有しなさい。<br>
|
||||
> — <cite>Rob Pike[^1]</cite>
|
||||
|
||||
[^1]: 上記の引用は、2015年11月18日のGopherfestでのロブ・パイクの[講演](https://www.youtube.com/watch?v=PAAkCSZUG1c)から抜粋したものです。
|
||||
[^1]: 上記の引用は、2015年11月18日のGopherfestでのRob Pikeの[講演](https://www.youtube.com/watch?v=PAAkCSZUG1c)から抜粋したものです。
|
||||
```
|
||||
|
||||
### アラート
|
||||
|
||||
{{< new-feature version="v0.9.0" >}}
|
||||
|
||||
アラートは、ブロッククォート構文に基づくMarkdown拡張で、重要な情報を強調するために使用できます。
|
||||
アラートは、重要な情報を強調するために使用できるブロッククォート構文を基にした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)以降を使用していることを確認してください。
|
||||
最新バージョンの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仕様の一部ではありませんが、Hugoはデフォルトでサポートしています。
|
||||
|
||||
| 名前 | 年齢 |
|
||||
|--------|------|
|
||||
| ボブ | 27 |
|
||||
| アリス | 23 |
|
||||
| 名前 | 年齢 |
|
||||
| :---- | :-- |
|
||||
| Bob | 27 |
|
||||
| Alice | 23 |
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
| 名前 | 年齢 |
|
||||
|--------|------|
|
||||
| ボブ | 27 |
|
||||
| アリス | 23 |
|
||||
| 名前 | 年齢 |
|
||||
| :---- | :-- |
|
||||
| Bob | 27 |
|
||||
| Alice | 23 |
|
||||
```
|
||||
|
||||
#### テーブル内のインラインMarkdown
|
||||
|
||||
| 斜体 | 太字 | コード |
|
||||
| -------- | -------- | ------ |
|
||||
| *斜体* | **太字** | `コード` |
|
||||
| 斜体 | 太字 | コード |
|
||||
| :-------- | :-------- | :-------- |
|
||||
| _斜体_ | **太字** | `コード` |
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
| 斜体 | 太字 | コード |
|
||||
| -------- | -------- | ------ |
|
||||
| *斜体* | **太字** | `コード` |
|
||||
| 斜体 | 太字 | コード |
|
||||
| :-------- | :-------- | :-------- |
|
||||
| _斜体_ | **太字** | `コード` |
|
||||
```
|
||||
|
||||
### コードブロック
|
||||
@@ -137,22 +137,22 @@ Hextraの最新バージョンと[Hugo v0.146.0](https://github.com/gohugoio/hug
|
||||
|
||||
#### ネストされたリスト
|
||||
|
||||
* 果物
|
||||
* りんご
|
||||
* オレンジ
|
||||
* バナナ
|
||||
* 乳製品
|
||||
* 牛乳
|
||||
* チーズ
|
||||
- 果物
|
||||
- りんご
|
||||
- オレンジ
|
||||
- バナナ
|
||||
- 乳製品
|
||||
- 牛乳
|
||||
- チーズ
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
* 果物
|
||||
* りんご
|
||||
* オレンジ
|
||||
* バナナ
|
||||
* 乳製品
|
||||
* 牛乳
|
||||
* チーズ
|
||||
- 果物
|
||||
- りんご
|
||||
- オレンジ
|
||||
- バナナ
|
||||
- 乳製品
|
||||
- 牛乳
|
||||
- チーズ
|
||||
```
|
||||
|
||||
### 画像
|
||||
@@ -165,16 +165,18 @@ Hextraの最新バージョンと[Hugo v0.146.0](https://github.com/gohugoio/hug
|
||||
|
||||
キャプション付き:
|
||||
|
||||

|
||||

|
||||
|
||||
```markdown {filename=Markdown}
|
||||

|
||||

|
||||
```
|
||||
|
||||
より高度な機能が必要な場合は、Hugoの組み込み[Figureショートコード](https://gohugo.io/shortcodes/figure/)を使用してください。
|
||||
|
||||
## 設定
|
||||
|
||||
HugoはMarkdownの解析に[Goldmark](https://github.com/yuin/goldmark)を使用しています。
|
||||
Markdownのレンダリングは、`hugo.yaml`の`markup.goldmark`で設定できます。
|
||||
HugoはMarkdown解析に[Goldmark](https://github.com/yuin/goldmark)を使用しています。
|
||||
Markdownのレンダリング設定は`hugo.yaml`の`markup.goldmark`で行えます。
|
||||
以下はHextraのデフォルト設定です:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
@@ -186,11 +188,11 @@ markup:
|
||||
noClasses: false
|
||||
```
|
||||
|
||||
その他の設定オプションについては、Hugoのドキュメント[Configure Markup](https://gohugo.io/getting-started/configuration-markup/)を参照してください。
|
||||
その他の設定オプションについては、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/)
|
||||
- [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/)
|
@@ -3,7 +3,7 @@ title: Markdown
|
||||
weight: 2
|
||||
---
|
||||
|
||||
Hugo 支持使用 [Markdown](https://en.wikipedia.org/wiki/Markdown) 语法来格式化文本、创建列表等。本页将展示一些最常见的 Markdown 语法示例。
|
||||
Hugo 支持使用 [Markdown](https://en.wikipedia.org/wiki/Markdown) 语法来格式化文本、创建列表等。本页将展示一些最常用的 Markdown 语法示例。
|
||||
|
||||
<!--more-->
|
||||
|
||||
@@ -11,28 +11,28 @@ Hugo 支持使用 [Markdown](https://en.wikipedia.org/wiki/Markdown) 语法来
|
||||
|
||||
### 文本样式
|
||||
|
||||
| 样式 | 语法 | 示例 | 输出 |
|
||||
| -------- | -------- | ------ | ------ |
|
||||
| 粗体 | `**粗体文本**` | `**粗体文本**` | **粗体文本** |
|
||||
| 斜体 | `*斜体文本*` | `*斜体文本*` | *斜体文本* |
|
||||
| 删除线 | `~~删除线文本~~` | `~~删除线文本~~` | ~~删除线文本~~ |
|
||||
| 下标 | `<sub></sub>` | `这是一个<sub>下标</sub>文本` | 这是一个<sub>下标</sub>文本 |
|
||||
| 上标 | `<sup></sup>` | `这是一个<sup>上标</sup>文本` | 这是一个<sup>上标</sup>文本 |
|
||||
| 样式 | 语法 | 示例 | 输出 |
|
||||
| :----- | :--------------- | :------------------------ | :---------------------- |
|
||||
| 粗体 | `**粗体文本**` | `**粗体文本**` | **粗体文本** |
|
||||
| 斜体 | `*斜体文本*` | `*斜体文本*` | _斜体文本_ |
|
||||
| 删除线 | `~~删除线文本~~` | `~~删除线文本~~` | ~~删除线文本~~ |
|
||||
| 下标 | `<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)。
|
||||
[^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)。
|
||||
[^1]: 上述引用摘自 Rob Pike 在 2015 年 11 月 18 日 Gopherfest 上的[演讲](https://www.youtube.com/watch?v=PAAkCSZUG1c)。
|
||||
```
|
||||
|
||||
### 提示框
|
||||
@@ -44,63 +44,63 @@ Hugo 支持使用 [Markdown](https://en.wikipedia.org/wiki/Markdown) 语法来
|
||||
请确保您使用的是最新版本的 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 核心规范的一部分,但 Hugo 原生支持它们。
|
||||
|
||||
| 姓名 | 年龄 |
|
||||
|--------|------|
|
||||
| Bob | 27 |
|
||||
| Alice | 23 |
|
||||
| 姓名 | 年龄 |
|
||||
| :--- | :--- |
|
||||
| 张三 | 27 |
|
||||
| 李四 | 23 |
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
| 姓名 | 年龄 |
|
||||
|--------|------|
|
||||
| Bob | 27 |
|
||||
| Alice | 23 |
|
||||
| 姓名 | 年龄 |
|
||||
| :--- | :--- |
|
||||
| 张三 | 27 |
|
||||
| 李四 | 23 |
|
||||
```
|
||||
|
||||
#### 表格中的内联 Markdown
|
||||
#### 表格内的行内 Markdown
|
||||
|
||||
| 斜体 | 粗体 | 代码 |
|
||||
| -------- | -------- | ------ |
|
||||
| *斜体* | **粗体** | `代码` |
|
||||
| :----- | :------- | :----- |
|
||||
| _斜体_ | **粗体** | `代码` |
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
| 斜体 | 粗体 | 代码 |
|
||||
| -------- | -------- | ------ |
|
||||
| *斜体* | **粗体** | `代码` |
|
||||
| :----- | :------- | :----- |
|
||||
| _斜体_ | **粗体** | `代码` |
|
||||
```
|
||||
|
||||
### 代码块
|
||||
@@ -125,34 +125,34 @@ Hugo 支持使用 [Markdown](https://en.wikipedia.org/wiki/Markdown) 语法来
|
||||
|
||||
#### 无序列表
|
||||
|
||||
* 列表项
|
||||
* 另一个项
|
||||
* 再一个项
|
||||
- 列表项
|
||||
- 另一个项
|
||||
- 再一个项
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
* 列表项
|
||||
* 另一个项
|
||||
* 再一个项
|
||||
- 列表项
|
||||
- 另一个项
|
||||
- 再一个项
|
||||
```
|
||||
|
||||
#### 嵌套列表
|
||||
|
||||
* 水果
|
||||
* 苹果
|
||||
* 橙子
|
||||
* 香蕉
|
||||
* 乳制品
|
||||
* 牛奶
|
||||
* 奶酪
|
||||
- 水果
|
||||
- 苹果
|
||||
- 橙子
|
||||
- 香蕉
|
||||
- 乳制品
|
||||
- 牛奶
|
||||
- 奶酪
|
||||
|
||||
```markdown {filename=Markdown}
|
||||
* 水果
|
||||
* 苹果
|
||||
* 橙子
|
||||
* 香蕉
|
||||
* 乳制品
|
||||
* 牛奶
|
||||
* 奶酪
|
||||
- 水果
|
||||
- 苹果
|
||||
- 橙子
|
||||
- 香蕉
|
||||
- 乳制品
|
||||
- 牛奶
|
||||
- 奶酪
|
||||
```
|
||||
|
||||
### 图片
|
||||
@@ -165,16 +165,18 @@ Hugo 支持使用 [Markdown](https://en.wikipedia.org/wiki/Markdown) 语法来
|
||||
|
||||
带标题:
|
||||
|
||||

|
||||

|
||||
|
||||
```markdown {filename=Markdown}
|
||||

|
||||

|
||||
```
|
||||
|
||||
如需更高级的功能,请使用 Hugo 内置的 [Figure 短代码](https://gohugo.io/shortcodes/figure/)。
|
||||
|
||||
## 配置
|
||||
|
||||
Hugo 使用 [Goldmark](https://github.com/yuin/goldmark) 进行 Markdown 解析。
|
||||
Markdown 渲染可以在 `hugo.yaml` 中的 `markup.goldmark` 下进行配置。
|
||||
Markdown 渲染可以在 `hugo.yaml` 中的 `markup.goldmark` 下配置。
|
||||
以下是 Hextra 的默认配置:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
@@ -190,7 +192,7 @@ 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/)
|
||||
- [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/)
|
||||
|
@@ -1,12 +1,13 @@
|
||||
---
|
||||
title: سازماندهی پروندهها
|
||||
title: سازماندهی فایلها
|
||||
weight: 1
|
||||
prev: /docs/guide
|
||||
---
|
||||
|
||||
## ساختار دایرکتوری
|
||||
|
||||
به طور پیشفرض، Hugo پروندههای مارکداون را در فهرست `content` جستجو میکند و ساختار فهرست، ساختار خروجی نهایی وبسایت شما را تعیین میکند. همین سایت را به عنوان مثال در نظر بگیرید:
|
||||
بهطور پیشفرض، Hugo فایلهای Markdown را در دایرکتوری `content` جستجو میکند و ساختار این دایرکتوری تعیینکننده ساختار نهایی خروجی وبسایت شماست.
|
||||
این سایت را به عنوان مثال در نظر بگیرید:
|
||||
|
||||
<!--more-->
|
||||
|
||||
@@ -28,7 +29,7 @@ prev: /docs/guide
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
هر یک از پروندههای `_index.md` صفحه اصلی هر بخش هستند که برای هر بخش مجزا است. سایر پروندههای مارکداون صفحههای معمولی دیگهای هستند.
|
||||
هر یک از فایلهای `_index.md` صفحه اصلی مربوط به بخش خود هستند. سایر فایلهای Markdown صفحات معمولی هستند.
|
||||
|
||||
```
|
||||
content
|
||||
@@ -46,15 +47,15 @@ content
|
||||
|
||||
## طرحبندیها
|
||||
|
||||
هگزترا سه طرحبندی برای انواع مختلف محتوا ارائه میکند:
|
||||
Hextra سه طرحبندی برای انواع مختلف محتوا ارائه میدهد:
|
||||
|
||||
| طرحبندی | دایرکتوری | ویژگیها |
|
||||
| :-------- | :-------------------- | :--------------------------------------------------------------- |
|
||||
| `docs` | `content/docs/` | ایدهآل برای مستندات ساختار یافته، مانند این بخش. |
|
||||
| `blog` | `content/blog/` | برای نوشتههای وبلاگ، با هر فهرستبندی و هم نمایش جزئیات مقاله. |
|
||||
| `default` | همه دایرکتوریهای دیگر | مشاهده مقاله تک صفحهای بدون نوار کناری. |
|
||||
| طرحبندی | دایرکتوری | ویژگیها |
|
||||
| :-------- | :----------------- | :----------------------------------------------------------- |
|
||||
| `docs` | `content/docs/` | مناسب برای مستندات ساختاریافته، مشابه این بخش. |
|
||||
| `blog` | `content/blog/` | برای پستهای وبلاگ، با نمایش لیست و مقالههای تفصیلی. |
|
||||
| `default` | سایر دایرکتوریها | نمایش تکصفحهای مقاله بدون نوار کناری. |
|
||||
|
||||
برای سفارشی کردن یک بخش برای منعکس کردن رفتار یک طرح داخلی، نوع طرحبندی مورد نظر را در قسمت بالایی قسمت _index.md` مشخص کنید.
|
||||
برای سفارشیسازی یک بخش به منظور تقلید رفتار یک طرحبندی داخلی، نوع مورد نظر را در front matter فایل `_index.md` بخش مشخص کنید.
|
||||
|
||||
```yaml {filename="content/my-docs/_index.md"}
|
||||
---
|
||||
@@ -64,11 +65,11 @@ cascade:
|
||||
---
|
||||
```
|
||||
|
||||
پیکربندی مثال بالا تضمین میکند که پروندههای محتوای در داخل `content/my-docs/` بهطور پیشفرض به عنوان مستندات (نوع `docs`) مورد استفاده قرار میگیرند.
|
||||
مثال پیکربندی بالا تضمین میکند که فایلهای محتوا در `content/my-docs/` بهطور پیشفرض به عنوان مستندات (نوع `docs`) در نظر گرفته میشوند.
|
||||
|
||||
## ناوبری نوار کناری
|
||||
|
||||
ناوبری نوار کناری به طور خودکار براساس حروف الفبا ایجاد میشود. برای پیکربندی دستی ترتیب نوار کناری، میتوانید از پارامتر `weight` در قسمت بالایی پروندههای مارکداون استفاده کنید.
|
||||
ناوبری نوار کناری بهطور خودکار بر اساس سازماندهی محتوا به ترتیب الفبایی ایجاد میشود. برای پیکربندی دستی ترتیب نوار کناری، میتوانیم از پارامتر `weight` در front matter فایلهای Markdown استفاده کنیم.
|
||||
|
||||
```yaml {filename="content/docs/guide/_index.md"}
|
||||
---
|
||||
@@ -78,18 +79,126 @@ weight: 2
|
||||
```
|
||||
|
||||
{{< callout emoji="ℹ️">}}
|
||||
توصیه میکنیم نوار کناری خیلی عمیق نباشد. اگر محتوای زیادی دارید، آنها را **به چند بخش تقسیم کنید**.
|
||||
توصیه میشود نوار کناری را خیلی عمیق نگه ندارید. اگر محتوای زیادی دارید، **آنها را به چند بخش تقسیم کنید**.
|
||||
{{< /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` انجام دهید.
|
||||
بهطور پیشفرض، دایرکتوری ریشه `content/` توسط Hugo برای ساخت سایت استفاده میشود.
|
||||
اگر نیاز به استفاده از دایرکتوری دیگری برای محتوا دارید، مثلاً `docs/`، این کار را میتوان با تنظیم پارامتر [`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir) در پیکربندی سایت `hugo.yaml` انجام داد.
|
||||
|
||||
## افزودن تصاویر
|
||||
## اضافه کردن تصاویر
|
||||
|
||||
برای افزودن تصاویر، سادهترین راه این است که پروندههای عکسها را در همان دایرکتوری پرونده مارکداون قرار دهید.
|
||||
برای مثال، یک پرونده عکس `image.png` را در کنار پرونده `my-page.md` اضافه کنید:
|
||||
برای اضافه کردن تصاویر، سادهترین راه این است که فایلهای تصویر را در همان دایرکتوری فایل Markdown قرار دهید.
|
||||
به عنوان مثال، یک فایل تصویر `image.png` را در کنار فایل `my-page.md` اضافه کنید:
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
@@ -100,13 +209,13 @@ weight: 2
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
سپس، میتوانید از سینتکس مارکداون زیر برای افزودن عکس به محتوا استفاده کنید:
|
||||
سپس میتوانیم از سینتکس Markdown زیر برای اضافه کردن تصویر به محتوا استفاده کنیم:
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||

|
||||
```
|
||||
|
||||
همچنین میتوانید از ویژگی [بستههای صفحه][page-bundles] Hugo برای سازماندهی پروندههای عکسها همراه با پرونده مارکداون استفاده کنید. برای رسیدن به این هدف، پرونده `my-page.md` را به یک دایرکتوری `my-page` تبدیل کنید و محتوا را در پروندهای به نام `index.md` قرار دهید و پروندههای عکسها را در دایرکتوری `my-page` قرار دهید:
|
||||
همچنین میتوانیم از ویژگی [page bundles][page-bundles] Hugo استفاده کنیم تا فایلهای تصویر را همراه با فایل Markdown سازماندهی کنیم. برای این کار، فایل `my-page.md` را به یک دایرکتوری `my-page` تبدیل کنید و محتوا را در یک فایل به نام `index.md` قرار دهید و فایلهای تصویر را داخل دایرکتوری `my-page` قرار دهید:
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
@@ -123,7 +232,7 @@ weight: 2
|
||||

|
||||
```
|
||||
|
||||
همچنین میتوانید پروندههای عکسها را در دایرکتوری `static` قرار دهید که عکسها را برای همه صفحات در دسترس قرار میدهد:
|
||||
بهعنوان جایگزین، میتوانیم فایلهای تصویر را در دایرکتوری `static` قرار دهیم، که تصاویر را برای تمام صفحات قابل دسترس میکند:
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="static" >}}
|
||||
@@ -138,10 +247,10 @@ weight: 2
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
توجه داشته باشید که مسیر عکس با یک اسلش `/` شروع میشود و نسبت به دایرکتوری استاتیک است:
|
||||
توجه کنید که مسیر تصویر با یک اسلش `/` شروع میشود و نسبت به دایرکتوری static است:
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||

|
||||
```
|
||||
|
||||
[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles
|
||||
[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles
|
@@ -6,8 +6,8 @@ prev: /docs/guide
|
||||
|
||||
## ディレクトリ構造
|
||||
|
||||
デフォルトでは、Hugoは`content`ディレクトリ内のMarkdownファイルを検索し、ディレクトリの構造がウェブサイトの最終的な出力構造を決定します。
|
||||
このサイトを例に取ります:
|
||||
デフォルトでは、Hugo は `content` ディレクトリ内の Markdown ファイルを検索し、ディレクトリの構造がウェブサイトの最終的な出力構造を決定します。
|
||||
このサイトを例に挙げます:
|
||||
|
||||
<!--more-->
|
||||
|
||||
@@ -29,7 +29,7 @@ prev: /docs/guide
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
各`_index.md`ファイルは、対応するセクションのインデックスページです。他のMarkdownファイルは通常のページです。
|
||||
各 `_index.md` ファイルは、対応するセクションのインデックスページです。他の Markdown ファイルは通常のページです。
|
||||
|
||||
```
|
||||
content
|
||||
@@ -47,15 +47,15 @@ content
|
||||
|
||||
## レイアウト
|
||||
|
||||
Hextraは、異なるコンテンツタイプに対して3つのレイアウトを提供します:
|
||||
Hextra は、異なるコンテンツタイプに対して3つのレイアウトを提供します:
|
||||
|
||||
| レイアウト | ディレクトリ | 特徴 |
|
||||
| :-------- | :-------------------- | :--------------------------------------------------------------- |
|
||||
| `docs` | `content/docs/` | 構造化されたドキュメントに最適で、このセクションと同じです。 |
|
||||
| `blog` | `content/blog/` | ブログ投稿用で、リスト表示と詳細記事表示の両方があります。 |
|
||||
| `default` | その他のディレクトリ | サイドバーなしの単一ページ記事表示です。 |
|
||||
| レイアウト | ディレクトリ | 特徴 |
|
||||
| :-------- | :------------------- | :------------------------------------------------------------------- |
|
||||
| `docs` | `content/docs/` | 構造化されたドキュメントに最適。このセクションと同じです。 |
|
||||
| `blog` | `content/blog/` | ブログ投稿用。リスト表示と詳細記事ビューの両方があります。 |
|
||||
| `default` | その他のディレクトリ | サイドバーなしの単一ページ記事ビュー。 |
|
||||
|
||||
セクションの動作をビルトインレイアウトと同じにするには、セクションの`_index.md`のフロントマターで希望するタイプを指定します。
|
||||
セクションの動作を組み込みレイアウトと同じにするには、セクションの `_index.md` のフロントマターで希望するタイプを指定します。
|
||||
|
||||
```yaml {filename="content/my-docs/_index.md"}
|
||||
---
|
||||
@@ -65,11 +65,11 @@ cascade:
|
||||
---
|
||||
```
|
||||
|
||||
上記の設定例により、`content/my-docs/`内のコンテンツファイルはデフォルトでドキュメント(`docs`タイプ)として扱われます。
|
||||
上記の設定例により、`content/my-docs/` 内のコンテンツファイルはデフォルトでドキュメント(`docs` タイプ)として扱われます。
|
||||
|
||||
## サイドバーナビゲーション
|
||||
|
||||
サイドバーナビゲーションは、コンテンツの整理に基づいて自動的に生成されます。サイドバーの順序を手動で設定するには、Markdownファイルのフロントマターで`weight`パラメータを使用します。
|
||||
サイドバーナビゲーションは、コンテンツのアルファベット順に基づいて自動的に生成されます。サイドバーの順序を手動で設定するには、Markdown ファイルのフロントマターで `weight` パラメータを使用します。
|
||||
|
||||
```yaml {filename="content/docs/guide/_index.md"}
|
||||
---
|
||||
@@ -79,24 +79,93 @@ weight: 2
|
||||
```
|
||||
|
||||
{{< callout emoji="ℹ️">}}
|
||||
サイドバーがあまり深くならないようにすることをお勧めします。多くのコンテンツがある場合は、**複数のセクションに分割する**ことを検討してください。
|
||||
サイドバーを深くしすぎないことをお勧めします。多くのコンテンツがある場合は、**複数のセクションに分割する**ことを検討してください。
|
||||
{{< /callout >}}
|
||||
|
||||
## パンくずナビゲーション
|
||||
## セクションナビゲーション
|
||||
|
||||
パンくずは、`/content`のディレクトリ構造に基づいて自動生成されます。
|
||||
### セクションページネーションの順序
|
||||
|
||||
例えば、[上記のファイル構造](#directory-structure)を考えます。その構造に基づいて、`/docs/guide/organize-files/`ページの上部にパンくずが自動的に表示されます:
|
||||
[`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`を指定します。
|
||||
デフォルトでは、各パンくずリストのリンクはそのページの `title` パラメータに基づいて生成されます。これをカスタマイズするには、`linkTitle` を指定します。
|
||||
|
||||
例えば、`Organize Files`の代わりに`Foo Bar`と表示したい場合:
|
||||
たとえば、`Organize Files` の代わりにパンくずリストを `Foo Bar` にしたい場合:
|
||||
|
||||
```yaml {filename="content/docs/guide/organize-files.md"}
|
||||
---
|
||||
@@ -105,14 +174,14 @@ title: Organize Files
|
||||
---
|
||||
```
|
||||
|
||||
これにより、以下のパンくずが生成されます:
|
||||
これにより、次のパンくずリストが生成されます:
|
||||
```
|
||||
Documentation > Guide > Foo Bar
|
||||
```
|
||||
|
||||
### パンくずを非表示にする
|
||||
### パンくずリストの非表示
|
||||
|
||||
ページのフロントマターで`breadcrumbs: false`を指定することで、パンくずを完全に非表示にできます:
|
||||
ページからパンくずリストを完全に非表示にするには、フロントマターで `breadcrumbs: false` を指定します:
|
||||
|
||||
```yaml {filename="content/docs/guide/organize-files.md"}
|
||||
---
|
||||
@@ -123,13 +192,13 @@ title: Organize Files
|
||||
|
||||
## コンテンツディレクトリの設定
|
||||
|
||||
デフォルトでは、Hugoはサイトを構築するためにルートの`content/`ディレクトリを使用します。
|
||||
例えば`docs/`など、異なるディレクトリをコンテンツに使用する必要がある場合は、サイト設定`hugo.yaml`で[`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir)パラメータを設定することで行えます。
|
||||
デフォルトでは、Hugo はサイトを構築するためにルートの `content/` ディレクトリを使用します。
|
||||
別のディレクトリ(例えば `docs/`)をコンテンツ用に使用する必要がある場合は、サイト設定 `hugo.yaml` で [`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir) パラメータを設定することで可能です。
|
||||
|
||||
## 画像の追加
|
||||
|
||||
画像を追加する最も簡単な方法は、画像ファイルをMarkdownファイルと同じディレクトリに置くことです。
|
||||
例えば、`my-page.md`ファイルと同じディレクトリに`image.png`ファイルを追加します:
|
||||
画像を追加する最も簡単な方法は、画像ファイルを Markdown ファイルと同じディレクトリに置くことです。
|
||||
たとえば、`my-page.md` ファイルと同じディレクトリに `image.png` ファイルを追加します:
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
@@ -140,13 +209,13 @@ title: Organize Files
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
その後、以下のMarkdown構文を使用してコンテンツに画像を追加できます:
|
||||
そして、次の Markdown 構文を使用してコンテンツに画像を追加できます:
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||

|
||||
```
|
||||
|
||||
また、Hugoの[ページバンドル][page-bundles]機能を利用して、画像ファイルをMarkdownファイルと一緒に整理することもできます。そのためには、`my-page.md`ファイルを`my-page`ディレクトリに変換し、コンテンツを`index.md`というファイルに置き、画像ファイルを`my-page`ディレクトリ内に置きます:
|
||||
また、Hugo の [ページバンドル][page-bundles] 機能を利用して、画像ファイルを Markdown ファイルと一緒に整理することもできます。そのためには、`my-page.md` ファイルを `my-page` ディレクトリに変換し、コンテンツを `index.md` というファイルに置き、画像ファイルを `my-page` ディレクトリ内に配置します:
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
@@ -163,7 +232,7 @@ title: Organize Files
|
||||

|
||||
```
|
||||
|
||||
または、画像ファイルを`static`ディレクトリに置くこともできます。これにより、すべてのページで画像が利用可能になります:
|
||||
あるいは、画像ファイルを `static` ディレクトリに置くこともできます。これにより、画像はすべてのページで利用可能になります:
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="static" >}}
|
||||
@@ -178,7 +247,7 @@ title: Organize Files
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
画像パスはスラッシュ`/`で始まり、`static`ディレクトリからの相対パスであることに注意してください:
|
||||
画像パスはスラッシュ `/` で始まり、static ディレクトリからの相対パスであることに注意してください:
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||

|
||||
|
@@ -1,5 +1,5 @@
|
||||
---
|
||||
title: 组织文件
|
||||
title: 文件组织
|
||||
weight: 1
|
||||
prev: /docs/guide
|
||||
---
|
||||
@@ -29,7 +29,7 @@ prev: /docs/guide
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
每个 `_index.md` 文件都是对应部分的索引页面。其他 Markdown 文件则是常规页面。
|
||||
每个 `_index.md` 文件都是对应部分的索引页。其他 Markdown 文件则是常规页面。
|
||||
|
||||
```
|
||||
content
|
||||
@@ -49,13 +49,13 @@ content
|
||||
|
||||
Hextra 为不同类型的内容提供了三种布局:
|
||||
|
||||
| 布局 | 目录 | 特性 |
|
||||
| :-------- | :------------------ | :----------------------------------------------------------- |
|
||||
| `docs` | `content/docs/` | 适合结构化文档,与本部分相同。 |
|
||||
| `blog` | `content/blog/` | 用于博客文章,包含列表和详细文章视图。 |
|
||||
| `default` | 其他所有目录 | 单页文章视图,无侧边栏。 |
|
||||
| 布局 | 目录 | 特点 |
|
||||
| :-------- | :----------------- | :------------------------------------------------------------- |
|
||||
| `docs` | `content/docs/` | 适合结构化文档,与本部分相同。 |
|
||||
| `blog` | `content/blog/` | 用于博客文章,包含列表和详细文章视图。 |
|
||||
| `default` | 其他所有目录 | 单页文章视图,无侧边栏。 |
|
||||
|
||||
要将某个部分自定义为与内置布局相同的行为,可以在该部分的 `_index.md` 的前言中指定所需的类型。
|
||||
要自定义一个部分以模仿内置布局的行为,可以在该部分的 `_index.md` 的 front matter 中指定所需的类型。
|
||||
|
||||
```yaml {filename="content/my-docs/_index.md"}
|
||||
---
|
||||
@@ -65,11 +65,11 @@ cascade:
|
||||
---
|
||||
```
|
||||
|
||||
上述示例配置确保 `content/my-docs/` 中的内容文件默认会被视为文档(`docs` 类型)。
|
||||
上述示例配置确保 `content/my-docs/` 内的内容文件默认会被视为文档(`docs` 类型)。
|
||||
|
||||
## 侧边栏导航
|
||||
|
||||
侧边栏导航会根据内容组织按字母顺序自动生成。要手动配置侧边栏顺序,可以在 Markdown 文件的前言中使用 `weight` 参数。
|
||||
侧边栏导航会根据内容组织按字母顺序自动生成。要手动配置侧边栏顺序,可以在 Markdown 文件的 front matter 中使用 `weight` 参数。
|
||||
|
||||
```yaml {filename="content/docs/guide/_index.md"}
|
||||
---
|
||||
@@ -79,14 +79,83 @@ weight: 2
|
||||
```
|
||||
|
||||
{{< callout emoji="ℹ️">}}
|
||||
建议不要让侧边栏过深。如果你有很多内容,考虑**将它们分成多个部分**。
|
||||
建议不要让侧边栏过深。如果有大量内容,可以考虑**将其拆分为多个部分**。
|
||||
{{< /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` 的目录结构自动生成。
|
||||
面包屑会根据 `/content` 的目录结构自动生成。
|
||||
|
||||
例如,考虑上面[展示的目录结构](#directory-structure)。根据该结构,页面 `/docs/guide/organize-files/` 顶部的面包屑导航会自动显示如下:
|
||||
例如,考虑[上面展示的](#directory-structure)文件结构。给定该结构,位于 `/docs/guide/organize-files/` 的页面顶部的面包屑会自动显示如下:
|
||||
|
||||
```
|
||||
文档 > 指南 > 组织文件
|
||||
@@ -94,7 +163,7 @@ weight: 2
|
||||
|
||||
### 自定义面包屑链接标题
|
||||
|
||||
默认情况下,每个面包屑链接是根据页面的 `title` 参数生成的。你可以通过指定 `linkTitle` 来自定义。
|
||||
默认情况下,每个面包屑链接是根据该页面的 `title` 参数生成的。可以通过指定 `linkTitle` 来自定义。
|
||||
|
||||
例如,如果我们希望面包屑显示为 `Foo Bar` 而不是 `Organize Files`:
|
||||
|
||||
@@ -112,7 +181,7 @@ title: 组织文件
|
||||
|
||||
### 隐藏面包屑
|
||||
|
||||
你可以通过在页面的前言中指定 `breadcrumbs: false` 来完全隐藏面包屑:
|
||||
可以通过在页面的 front matter 中指定 `breadcrumbs: false` 来完全隐藏面包屑:
|
||||
|
||||
```yaml {filename="content/docs/guide/organize-files.md"}
|
||||
---
|
||||
@@ -124,11 +193,11 @@ title: 组织文件
|
||||
## 配置内容目录
|
||||
|
||||
默认情况下,Hugo 使用根目录 `content/` 来构建网站。
|
||||
如果你需要使用不同的目录来存放内容,例如 `docs/`,可以通过在站点配置文件 `hugo.yaml` 中设置 [`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir) 参数来实现。
|
||||
如果需要使用其他目录作为内容目录,例如 `docs/`,可以在站点配置 `hugo.yaml` 中设置 [`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir) 参数。
|
||||
|
||||
## 添加图片
|
||||
|
||||
添加图片的最简单方法是将图片文件放在与 Markdown 文件相同的目录中。
|
||||
添加图片最简单的方法是将图片文件放在与 Markdown 文件相同的目录中。
|
||||
例如,将图片文件 `image.png` 与 `my-page.md` 文件放在一起:
|
||||
|
||||
{{< filetree/container >}}
|
||||
@@ -140,13 +209,13 @@ title: 组织文件
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
然后,我们可以使用以下 Markdown 语法将图片添加到内容中:
|
||||
然后,可以使用以下 Markdown 语法将图片添加到内容中:
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||

|
||||
```
|
||||
|
||||
我们还可以利用 Hugo 的 [页面包][page-bundles] 功能将图片文件与 Markdown 文件一起组织。为此,将 `my-page.md` 文件转换为目录 `my-page`,并将内容放入名为 `index.md` 的文件中,然后将图片文件放入 `my-page` 目录中:
|
||||
我们还可以利用 Hugo 的[页面包][page-bundles]功能将图片文件与 Markdown 文件组织在一起。为此,将 `my-page.md` 文件转换为目录 `my-page`,并将内容放入名为 `index.md` 的文件中,然后将图片文件放入 `my-page` 目录中:
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
@@ -178,7 +247,7 @@ title: 组织文件
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
注意,图片路径以斜杠 `/` 开头,并且相对于静态目录:
|
||||
注意,图片路径以斜杠 `/` 开头,并且相对于 static 目录:
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||

|
||||
|
@@ -1,21 +1,29 @@
|
||||
---
|
||||
title: کدهای کوتاه
|
||||
title: شورتکدها
|
||||
weight: 9
|
||||
prev: /docs/guide/diagrams
|
||||
next: /docs/guide/shortcodes/filetree
|
||||
next: /docs/guide/shortcodes/callout
|
||||
---
|
||||
|
||||
[کدهای کوتاه Hugo](https://gohugo.io/content-management/shortcodes/) قطعههای سادهای در داخل پروندههای محتوای شما هستند که قالبهای داخلی یا سفارشی را فراخوانی میکنند.
|
||||
|
||||
هگزترا مجموعهای از کدهای کوتاه زیبا را برای بهبود محتوای شما ارائه میکند.
|
||||
[شورتکدهای Hugo](https://gohugo.io/content-management/shortcodes/) قطعهکدهای سادهای درون فایلهای محتوای شما هستند که تمپلیتهای داخلی یا سفارشی را فراخوانی میکنند.
|
||||
|
||||
Hextra مجموعهای از شورتکدهای زیبا را برای بهبود محتوای شما ارائه میدهد.
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="filetree" title="FileTree" icon="folder-tree" >}}
|
||||
{{< card link="icon" title="آیکون" icon="badge-check" >}}
|
||||
{{< card link="details" title="جزئیات" icon="chevron-right" >}}
|
||||
{{< card link="tabs" title="زبانهها" icon="collection" >}}
|
||||
{{< card link="callout" title="فراخوانی" icon="warning" >}}
|
||||
{{< 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" >}}
|
||||
{{< /cards >}}
|
@@ -5,18 +5,18 @@ prev: /docs/guide/diagrams
|
||||
next: /docs/guide/shortcodes/callout
|
||||
---
|
||||
|
||||
[Hugo ショートコード](https://gohugo.io/content-management/shortcodes/)は、コンテンツファイル内に埋め込まれるシンプルなスニペットで、組み込みまたはカスタムテンプレートを呼び出します。
|
||||
[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="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="badge-check" >}}
|
||||
{{< card link="steps" title="ステップ" icon="one" >}}
|
||||
{{< card link="tabs" title="タブ" icon="collection" >}}
|
||||
{{< 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>
|
||||
@@ -25,5 +25,5 @@ Hugo と Hextra が提供する追加のショートコード:
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="jupyter" title="Jupyter Notebook" icon="jupyter" tag="alpha" >}}
|
||||
{{< card link="others" title="その他" icon="view-grid" >}}
|
||||
{{< /cards >}}
|
||||
{{< card link="others" title="Others" icon="view-grid" >}}
|
||||
{{< /cards >}}
|
@@ -5,12 +5,12 @@ prev: /docs/guide/diagrams
|
||||
next: /docs/guide/shortcodes/callout
|
||||
---
|
||||
|
||||
[Hugo 短代码](https://gohugo.io/content-management/shortcodes/)是内容文件中的简单片段,用于调用内置或自定义模板。
|
||||
[Hugo 短代码](https://gohugo.io/content-management/shortcodes/)是内容文件中调用内置或自定义模板的简单片段。
|
||||
|
||||
Hextra 提供了一系列精美的短代码,以增强您的内容。
|
||||
Hextra 提供了一系列精美的短代码来增强您的内容。
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="callout" title="标注" icon="warning" >}}
|
||||
{{< 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" >}}
|
||||
|
@@ -1,55 +1,60 @@
|
||||
---
|
||||
title: کامپوننت فراخوانی
|
||||
linkTitle: فراخوانی
|
||||
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 emoji="👾">}}
|
||||
**فراخوانی** یک متن کوتاه است که برای جلب توجه در نظر گرفته شده است.
|
||||
یک **callout** متن کوتاهی است که برای جلب توجه طراحی شده است.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="info" >}}
|
||||
**فراخوانی** یک متن کوتاه است که برای جلب توجه در نظر گرفته شده است.
|
||||
یک **callout** متن کوتاهی است که برای جلب توجه طراحی شده است.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
**فراخوانی** یک متن کوتاه است که برای جلب توجه در نظر گرفته شده است.
|
||||
یک **callout** متن کوتاهی است که برای جلب توجه طراحی شده است.
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="error" >}}
|
||||
**فراخوانی** یک متن کوتاه است که برای جلب توجه در نظر گرفته شده است.
|
||||
یک **callout** متن کوتاهی است که برای جلب توجه طراحی شده است.
|
||||
{{< /callout >}}
|
||||
|
||||
## استفاده
|
||||
## نحوه استفاده
|
||||
|
||||
### پیشفرض
|
||||
|
||||
{{< callout emoji="🌐">}}
|
||||
Hugo را میتوانید برای ایجاد طیف گستردهای از وبسایتها، از جمله وبلاگها، نمونهکارها، سایتهای مستندسازی و غیره استفاده کرد.
|
||||
Hugo میتواند برای ایجاد انواع مختلف وبسایتها از جمله وبلاگها، نمونهکارها، سایتهای مستندات و غیره استفاده شود.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout emoji="🌐" */>}}
|
||||
Hugo را میتوانید برای ایجاد طیف گستردهای از وبسایتها، از جمله وبلاگها، نمونهکارها، سایتهای مستندسازی و غیره استفاده کرد.
|
||||
Hugo میتواند برای ایجاد انواع مختلف وبسایتها از جمله وبلاگها، نمونهکارها، سایتهای مستندات و غیره استفاده شود.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### اطلاعات
|
||||
|
||||
{{< callout type="info" >}}
|
||||
لطفا برای مشاهده آخرین نسخهها به گیتهاب مراجعه کنید.
|
||||
لطفاً برای مشاهده آخرین نسخهها به GitHub مراجعه کنید.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="info" */>}}
|
||||
لطفا برای مشاهده آخرین نسخهها به گیتهاب مراجعه کنید.
|
||||
لطفاً برای مشاهده آخرین نسخهها به GitHub مراجعه کنید.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
@@ -68,11 +73,11 @@ aliases:
|
||||
### خطا
|
||||
|
||||
{{< callout type="error" >}}
|
||||
مشکلی پیش آمد و اتفاقی رخ خواهد شد.
|
||||
مشکلی پیش آمده و قرار است منفجر شود.
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="error" */>}}
|
||||
مشکلی پیش آمد و اتفاقی رخ خواهد شد.
|
||||
مشکلی پیش آمده و قرار است منفجر شود.
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
```
|
@@ -6,30 +6,30 @@ aliases:
|
||||
prev: /docs/guide/shortcodes
|
||||
---
|
||||
|
||||
読者に重要な情報を示すための組み込みコンポーネントです。
|
||||
読者に重要な情報を表示するための組み込みコンポーネントです。
|
||||
|
||||
<!--more-->
|
||||
|
||||
> [!NOTE]
|
||||
> [GitHubスタイルのアラート](../../markdown#alerts)は[v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0)以降でサポートされています。
|
||||
> これはMarkdown構文を活用してコールアウトをレンダリングし、コンテンツの移植性と可読性を向上させます。
|
||||
> これはMarkdown構文を活用してコールアウトをレンダリングするため、コンテンツの移植性と可読性が向上します。
|
||||
|
||||
## 例
|
||||
|
||||
{{< callout emoji="👾">}}
|
||||
**コールアウト**は、注意を引くための短いテキストです。
|
||||
**コールアウト**とは、注意を引くための短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="info" >}}
|
||||
**コールアウト**は、注意を引くための短いテキストです。
|
||||
**コールアウト**とは、注意を引くための短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
**コールアウト**は、注意を引くための短いテキストです。
|
||||
**コールアウト**とは、注意を引くための短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="error" >}}
|
||||
**コールアウト**は、注意を引くための短いテキストです。
|
||||
**コールアウト**とは、注意を引くための短いテキストです。
|
||||
{{< /callout >}}
|
||||
|
||||
## 使用方法
|
||||
@@ -37,24 +37,24 @@ prev: /docs/guide/shortcodes
|
||||
### デフォルト
|
||||
|
||||
{{< callout emoji="🌐">}}
|
||||
Hugoは、ブログ、ポートフォリオ、ドキュメントサイトなど、さまざまなウェブサイトを作成するために使用できます。
|
||||
Hugoはブログ、ポートフォリオ、ドキュメントサイトなど、様々な種類のウェブサイト作成に使用できます。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout emoji="🌐" */>}}
|
||||
Hugoは、ブログ、ポートフォリオ、ドキュメントサイトなど、さまざまなウェブサイトを作成するために使用できます。
|
||||
Hugoはブログ、ポートフォリオ、ドキュメントサイトなど、様々な種類のウェブサイト作成に使用できます。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### 情報
|
||||
|
||||
{{< callout type="info" >}}
|
||||
最新のリリースを確認するには、GitHubをご覧ください。
|
||||
最新リリースについてはGitHubをご覧ください。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="info" */>}}
|
||||
最新のリリースを確認するには、GitHubをご覧ください。
|
||||
最新リリースについてはGitHubをご覧ください。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
@@ -66,18 +66,18 @@ prev: /docs/guide/shortcodes
|
||||
|
||||
```markdown
|
||||
{{</* callout type="warning" */>}}
|
||||
**コールアウト**は、注意を引くための短いテキストです。
|
||||
このAPIは次のバージョンで非推奨になります。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### エラー
|
||||
|
||||
{{< callout type="error" >}}
|
||||
何か問題が発生し、爆発しそうです。
|
||||
問題が発生しました。まもなく爆発します。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="error" */>}}
|
||||
何か問題が発生し、爆発しそうです。
|
||||
問題が発生しました。まもなく爆発します。
|
||||
{{</* /callout */>}}
|
||||
```
|
@@ -2,7 +2,7 @@
|
||||
title: 提示框组件
|
||||
linkTitle: 提示框
|
||||
aliases:
|
||||
- 提示框
|
||||
- callouts
|
||||
prev: /docs/guide/shortcodes
|
||||
---
|
||||
|
||||
@@ -11,73 +11,73 @@ prev: /docs/guide/shortcodes
|
||||
<!--more-->
|
||||
|
||||
> [!NOTE]
|
||||
> 自 [v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0) 起支持 [GitHub 风格的提醒](../../markdown#alerts)。
|
||||
> 它利用 Markdown 语法来渲染提示框,确保内容具有更好的可移植性和可读性。
|
||||
> 自 [v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0) 起支持 [GitHub风格提示框](../../markdown#alerts)。
|
||||
> 它利用Markdown语法渲染提示框,确保内容具有更好的可移植性和可读性。
|
||||
|
||||
## 示例
|
||||
|
||||
{{< callout emoji="👾">}}
|
||||
**提示框** 是一段简短的文本,旨在吸引注意力。
|
||||
**提示框**是一段旨在吸引注意力的简短文本。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="info" >}}
|
||||
**提示框** 是一段简短的文本,旨在吸引注意力。
|
||||
**提示框**是一段旨在吸引注意力的简短文本。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
**提示框** 是一段简短的文本,旨在吸引注意力。
|
||||
**提示框**是一段旨在吸引注意力的简短文本。
|
||||
{{< /callout >}}
|
||||
|
||||
{{< callout type="error" >}}
|
||||
**提示框** 是一段简短的文本,旨在吸引注意力。
|
||||
**提示框**是一段旨在吸引注意力的简短文本。
|
||||
{{< /callout >}}
|
||||
|
||||
## 用法
|
||||
## 使用方法
|
||||
|
||||
### 默认
|
||||
### 默认样式
|
||||
|
||||
{{< callout emoji="🌐">}}
|
||||
Hugo 可用于创建各种类型的网站,包括博客、作品集、文档站点等。
|
||||
Hugo可用于创建各种类型的网站,包括博客、作品集、文档站点等。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout emoji="🌐" */>}}
|
||||
Hugo 可用于创建各种类型的网站,包括博客、作品集、文档站点等。
|
||||
Hugo可用于创建各种类型的网站,包括博客、作品集、文档站点等。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### 信息
|
||||
### 信息提示
|
||||
|
||||
{{< callout type="info" >}}
|
||||
请访问 GitHub 查看最新版本。
|
||||
请访问GitHub查看最新发布版本。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="info" */>}}
|
||||
请访问 GitHub 查看最新版本。
|
||||
请访问GitHub查看最新发布版本。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### 警告
|
||||
### 警告提示
|
||||
|
||||
{{< callout type="warning" >}}
|
||||
此 API 将在下一个版本中弃用。
|
||||
此API将在下一版本中弃用。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="warning" */>}}
|
||||
**提示框** 是一段简短的文本,旨在吸引注意力。
|
||||
此API将在下一版本中弃用。
|
||||
{{</* /callout */>}}
|
||||
```
|
||||
|
||||
### 错误
|
||||
### 错误提示
|
||||
|
||||
{{< callout type="error" >}}
|
||||
出错了,系统即将崩溃。
|
||||
出现错误,系统即将崩溃。
|
||||
{{< /callout >}}
|
||||
|
||||
```markdown
|
||||
{{</* callout type="error" */>}}
|
||||
出错了,系统即将崩溃。
|
||||
出现错误,系统即将崩溃。
|
||||
{{</* /callout */>}}
|
||||
```
|
@@ -6,59 +6,110 @@ linkTitle: کارتها
|
||||
## مثال
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="../callout" title="فراخوانی" icon="warning" >}}
|
||||
{{< card link="/fa" title="بدون آیکون" >}}
|
||||
{{< 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 میباشد و پردازش توسط Hugo شده است." method="Resize" options="600x q80 webp" >}}
|
||||
{{< 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="/fa" title="بدون آیکون" */>}}
|
||||
{{</* 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 میباشد و پردازش توسط Hugo شده است." method="Resize" options="600x q80 webp" */>}}
|
||||
{{</* 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` | نشانی اینترنتی (داخلی یا خارجی). |
|
||||
| `title` | عنوان برای کارت. |
|
||||
| `subtitle` | عنوان زیرنویس (از مارکداون پشتیبانی میکند).. |
|
||||
| `icon` | نام آیکون. |
|
||||
| پارامتر | توضیحات |
|
||||
|----------- |-----------------------------------------------------------------|
|
||||
| `link` | URL (داخلی یا خارجی). |
|
||||
| `title` | عنوان کارت. |
|
||||
| `subtitle` | زیرعنوان (پشتیبانی از Markdown). |
|
||||
| `icon` | نام آیکون. |
|
||||
| `tag` | متن تگ. |
|
||||
| `tagColor` | رنگ تگ: `gray` (پیشفرض), `yellow`, `red` و `blue`. |
|
||||
|
||||
## کارت تصویری
|
||||
|
||||
## کارت تصویر
|
||||
علاوه بر این، کارت از افزودن تصویر و پردازش آن از طریق این پارامترها پشتیبانی میکند:
|
||||
|
||||
علاوه بر این، کارت از افزودن تصویر و پردازش از طریق این پارامترها پشتیبانی میکند:
|
||||
|
||||
| پارامتر | توضیحات |
|
||||
| پارامتر | توضیحات |
|
||||
|----------- |---------------------------------------------|
|
||||
| `image` | نشانی اینترنتی تصویر کارت را مشخص میکند. |
|
||||
| `method` | روش پردازش تصویر Hugo را تنظیم میکند. |
|
||||
| `options` | گزینههای پردازش تصویر Hugo را پیکربندی میکند. |
|
||||
| `image` | آدرس تصویر کارت را مشخص میکند. |
|
||||
| `method` | روش پردازش تصویر هوگو را تنظیم میکند. |
|
||||
| `options` | تنظیمات پردازش تصویر هوگو را پیکربندی میکند. |
|
||||
|
||||
کارت از سه نوع تصویر پشتیبانی میکند:
|
||||
|
||||
1. تصویر از راه دور: نشانی اینترنتی کامل در پارامتر `image`.
|
||||
2. تصویر استاتیک: از مسیر نسبی در دایرکتوری `static/` Hugo استفاده کنید.
|
||||
3. تصویر پردازش شده: از مسیر نسبی در دایرکتوری `assets/` Hugo استفاده کنید.
|
||||
1. تصویر راهدور: URL کامل در پارامتر `image`.
|
||||
2. تصویر استاتیک: از مسیر نسبی در دایرکتوری `static/` هوگو استفاده کنید.
|
||||
3. تصویر پردازش شده: از مسیر نسبی در دایرکتوری `assets/` هوگو استفاده کنید.
|
||||
|
||||
هگزترا در صورت نیاز به پردازش تصویر در حین ساخت، به طور خودکار تشخیص میدهد و پارامتر `options` یا تنظیمات پیشفرض را اعمال میکند (تغییر اندازه، 800x، کیفیت 80، فرمت WebP).
|
||||
در حال حاضر این `method` را پشتیبانی میکند: `Resize`، `Fit`، `Fill` و `Crop`.
|
||||
Hextra به صورت خودکار تشخیص میدهد که آیا پردازش تصویر در زمان ساخت نیاز است و پارامتر `options` یا تنظیمات پیشفرض (Resize، 800x، کیفیت 80، فرمت WebP) را اعمال میکند.
|
||||
در حال حاضر از این `method`ها پشتیبانی میکند: `Resize`, `Fit`, `Fill` و `Crop`.
|
||||
|
||||
برای اطلاعات بیشتر در مورد دستورات، روشها و گزینههای پردازش تصویر داخلی Hugo به [مستندات پردازش تصویر](https://gohugo.io/content-management/image-processing/) آنها مراجعه کنید.
|
||||
برای اطلاعات بیشتر در مورد دستورات، روشها و تنظیمات پردازش تصویر هوگو، به [مستندات پردازش تصویر](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 */>}}
|
||||
```
|
@@ -13,8 +13,8 @@ linkTitle: カード
|
||||
|
||||
{{< 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" >}}
|
||||
{{< 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 >}}
|
||||
|
||||
## 使用方法
|
||||
@@ -30,8 +30,8 @@ linkTitle: カード
|
||||
```
|
||||
{{</* 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" */>}}
|
||||
{{</* 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 */>}}
|
||||
```
|
||||
|
||||
@@ -42,18 +42,18 @@ linkTitle: カード
|
||||
| `link` | URL(内部または外部)。 |
|
||||
| `title` | カードのタイトル見出し。 |
|
||||
| `subtitle` | サブタイトル見出し(Markdown対応)。 |
|
||||
| `icon` | アイコンの名前。 |
|
||||
| `tag` | タグ内のテキスト。 |
|
||||
| `icon` | アイコン名。 |
|
||||
| `tag` | タグのテキスト。 |
|
||||
| `tagColor` | タグの色: `gray`(デフォルト)、`yellow`、`red`、`blue`。 |
|
||||
|
||||
## 画像カード
|
||||
|
||||
さらに、カードは画像の追加と以下のパラメータを通じた処理をサポートします:
|
||||
さらに、カードには画像の追加と以下のパラメータを通じた処理がサポートされています:
|
||||
|
||||
| パラメータ | 説明 |
|
||||
|----------- |---------------------------------------------|
|
||||
| `image` | カードの画像URLを指定します。 |
|
||||
| `method` | Hugoの画像処理メソッドを設定します。 |
|
||||
| `method` | Hugoの画像処理方法を設定します。 |
|
||||
| `options` | Hugoの画像処理オプションを設定します。 |
|
||||
|
||||
カードは3種類の画像をサポートします:
|
||||
@@ -62,14 +62,14 @@ linkTitle: カード
|
||||
2. 静的画像: Hugoの`static/`ディレクトリ内の相対パスを使用。
|
||||
3. 処理済み画像: Hugoの`assets/`ディレクトリ内の相対パスを使用。
|
||||
|
||||
Hextraはビルド時に画像処理が必要かどうかを自動検出し、`options`パラメータまたはデフォルト設定(Resize、800x、品質80、WebPフォーマット)を適用します。
|
||||
現在サポートされている`method`は`Resize`、`Fit`、`Fill`、`Crop`です。
|
||||
Hextraはビルド時に画像処理が必要か自動検出し、`options`パラメータまたはデフォルト設定(Resize、800x、品質80、WebP形式)を適用します。
|
||||
現在サポートされている`method`: `Resize`、`Fit`、`Fill`、`Crop`。
|
||||
|
||||
Hugoの組み込み画像処理コマンド、メソッド、オプションの詳細については、[画像処理ドキュメント](https://gohugo.io/content-management/image-processing/)を参照してください。
|
||||
Hugoの組み込み画像処理コマンド、方法、オプションの詳細については、[画像処理ドキュメント](https://gohugo.io/content-management/image-processing/)を参照してください。
|
||||
|
||||
## タグ
|
||||
|
||||
カードはタグの追加をサポートしており、追加のステータス情報を表示するのに役立ちます。
|
||||
カードはタグの追加をサポートしており、追加のステータス情報を表示するのに便利です。
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="../callout" title="デフォルトタグ付きカード" tag="タグテキスト" >}}
|
||||
@@ -81,10 +81,10 @@ Hugoの組み込み画像処理コマンド、メソッド、オプションの
|
||||
|
||||
```
|
||||
{{</* cards */>}}
|
||||
{{</* card link="../callout" title="デフォルトタグ色付きカード" tag="タグテキスト" */>}}
|
||||
{{</* card link="../callout" title="デフォルト赤タグ付きカード" tag="タグテキスト" tagType="error" */>}}
|
||||
{{</* 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="../callout" title="黄タグ付きカード" tag="タグテキスト" tagType="warning" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
|
@@ -14,10 +14,10 @@ linkTitle: 卡片
|
||||
{{< 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" >}}
|
||||
{{< card link="/" title="本地图片" image="images/space.jpg" subtitle="资源目录下的图片,经过Hugo处理。" method="Resize" options="600x q80 webp" >}}
|
||||
{{< /cards >}}
|
||||
|
||||
## 用法
|
||||
## 使用方法
|
||||
|
||||
```
|
||||
{{</* cards */>}}
|
||||
@@ -29,9 +29,9 @@ linkTitle: 卡片
|
||||
|
||||
```
|
||||
{{</* cards */>}}
|
||||
{{</* card link="/" title="图片卡片" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="Unsplash 风景" */>}}
|
||||
{{</* 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" */>}}
|
||||
{{</* card link="/" title="本地图片" image="images/space.jpg" subtitle="资源目录下的图片,经过Hugo处理。" method="Resize" options="600x q80 webp" */>}}
|
||||
{{</* /cards */>}}
|
||||
```
|
||||
|
||||
@@ -39,37 +39,37 @@ linkTitle: 卡片
|
||||
|
||||
| 参数 | 描述 |
|
||||
|----------- |-----------------------------------------------------------------|
|
||||
| `link` | URL(内部或外部)。 |
|
||||
| `title` | 卡片的标题。 |
|
||||
| `subtitle` | 卡片的副标题(支持 Markdown)。 |
|
||||
| `icon` | 图标的名称。 |
|
||||
| `tag` | 标签中的文本。 |
|
||||
| `tagColor` | 标签的颜色:`gray`(默认)、`yellow`、`red` 和 `blue`。 |
|
||||
| `link` | 链接地址(内部或外部)。 |
|
||||
| `title` | 卡片的标题。 |
|
||||
| `subtitle` | 卡片的副标题(支持Markdown)。 |
|
||||
| `icon` | 图标名称。 |
|
||||
| `tag` | 标签文本。 |
|
||||
| `tagColor` | 标签颜色:`gray`(默认)、`yellow`、`red` 和 `blue`。 |
|
||||
|
||||
## 图片卡片
|
||||
|
||||
此外,卡片支持通过以下参数添加图片并进行处理:
|
||||
此外,卡片还支持通过以下参数添加图片并进行处理:
|
||||
|
||||
| 参数 | 描述 |
|
||||
|-----------|--------------------------------------|
|
||||
| `image` | 指定卡片的图片 URL。 |
|
||||
| `method` | 设置 Hugo 的图片处理方法。 |
|
||||
| `options` | 配置 Hugo 的图片处理选项。 |
|
||||
| 参数 | 描述 |
|
||||
|----------- |---------------------------------------------|
|
||||
| `image` | 指定卡片的图片URL。 |
|
||||
| `method` | 设置Hugo的图片处理方法。 |
|
||||
| `options` | 配置Hugo的图片处理选项。 |
|
||||
|
||||
卡片支持三种类型的图片:
|
||||
|
||||
1. 远程图片:`image` 参数中的完整 URL。
|
||||
2. 静态图片:使用 Hugo `static/` 目录中的相对路径。
|
||||
3. 处理后的图片:使用 Hugo `assets/` 目录中的相对路径。
|
||||
1. 远程图片:在`image`参数中填写完整的URL。
|
||||
2. 静态图片:使用Hugo的`static/`目录下的相对路径。
|
||||
3. 处理后的图片:使用Hugo的`assets/`目录下的相对路径。
|
||||
|
||||
Hextra 在构建时自动检测是否需要图片处理,并应用 `options` 参数或默认设置(Resize,800x,质量 80,WebP 格式)。
|
||||
目前支持以下 `method`:`Resize`、`Fit`、`Fill` 和 `Crop`。
|
||||
Hextra在构建时会自动检测是否需要图片处理,并应用`options`参数或默认设置(Resize,800x,质量80,WebP格式)。
|
||||
目前支持的`method`有:`Resize`、`Fit`、`Fill`和`Crop`。
|
||||
|
||||
有关 Hugo 内置图片处理命令、方法和选项的更多信息,请参阅其[图片处理文档](https://gohugo.io/content-management/image-processing/)。
|
||||
有关Hugo内置图片处理命令、方法和选项的更多信息,请参阅其[图片处理文档](https://gohugo.io/content-management/image-processing/)。
|
||||
|
||||
## 标签
|
||||
|
||||
卡片支持添加标签,这对于显示额外的状态信息非常有用。
|
||||
卡片支持添加标签,可用于显示额外的状态信息。
|
||||
|
||||
{{< cards >}}
|
||||
{{< card link="../callout" title="带默认标签的卡片" tag="标签文本" >}}
|
||||
@@ -90,7 +90,7 @@ Hextra 在构建时自动检测是否需要图片处理,并应用 `options`
|
||||
|
||||
## 列数
|
||||
|
||||
您可以通过将 `cols` 参数传递给 `cards` 短代码来指定卡片的最大列数。请注意,在较小的屏幕上,列仍会折叠。
|
||||
可以通过向`cards`短代码传递`cols`参数来指定卡片的最大列数。请注意,在小屏幕上列数仍会折叠。
|
||||
|
||||
{{< cards cols="1" >}}
|
||||
{{< card link="/" title="顶部卡片" >}}
|
||||
|
@@ -2,7 +2,7 @@
|
||||
title: جزئیات
|
||||
---
|
||||
|
||||
یک کامپوننت داخلی برای نمایش محتوای قابل باز و بسته شدن.
|
||||
یک کامپوننت داخلی برای نمایش محتوای جمعشدنی.
|
||||
|
||||
<!--more-->
|
||||
|
||||
@@ -16,13 +16,13 @@ title: جزئیات
|
||||
|
||||
{{% /details %}}
|
||||
|
||||
{{% details title="برای نمایش روی من کلیک کنید" closed="true" %}}
|
||||
{{% details title="برای نمایش کلیک کنید" closed="true" %}}
|
||||
|
||||
این به طور پیشفرض پنهان میشود.
|
||||
این بهصورت پیشفرض مخفی خواهد بود.
|
||||
|
||||
{{% /details %}}
|
||||
|
||||
## استفاده
|
||||
## نحوه استفاده
|
||||
|
||||
````markdown
|
||||
{{%/* details title="جزئیات" */%}}
|
||||
@@ -35,9 +35,9 @@ title: جزئیات
|
||||
````
|
||||
|
||||
````markdown
|
||||
{{%/* details title="برای نمایش روی من کلیک کنید"closed="true" */%}}
|
||||
{{%/* details title="برای نمایش کلیک کنید" closed="true" */%}}
|
||||
|
||||
این به طور پیشفرض پنهان میشود.
|
||||
این بهصورت پیشفرض مخفی خواهد بود.
|
||||
|
||||
{{%/* /details */%}}
|
||||
````
|
||||
````
|
@@ -2,7 +2,7 @@
|
||||
title: 詳細
|
||||
---
|
||||
|
||||
折りたたみ可能なコンテンツを表示するための組み込みコンポーネント。
|
||||
折りたたみ可能なコンテンツを表示するための組み込みコンポーネントです。
|
||||
|
||||
<!--more-->
|
||||
|
||||
@@ -12,7 +12,7 @@ title: 詳細
|
||||
|
||||
これは詳細のコンテンツです。
|
||||
|
||||
Markdownは**サポートされています**。
|
||||
Markdown は **サポートされています**。
|
||||
|
||||
{{% /details %}}
|
||||
|
||||
@@ -22,14 +22,14 @@ Markdownは**サポートされています**。
|
||||
|
||||
{{% /details %}}
|
||||
|
||||
## 使い方
|
||||
## 使用方法
|
||||
|
||||
````markdown
|
||||
{{%/* details title="詳細" */%}}
|
||||
|
||||
これは詳細のコンテンツです。
|
||||
|
||||
Markdownは**サポートされています**。
|
||||
Markdown は **サポートされています**。
|
||||
|
||||
{{%/* /details */%}}
|
||||
````
|
||||
|
@@ -12,7 +12,7 @@ title: 详情
|
||||
|
||||
这是详情的内容。
|
||||
|
||||
支持 **Markdown**。
|
||||
支持 **Markdown** 格式。
|
||||
|
||||
{{% /details %}}
|
||||
|
||||
@@ -22,14 +22,14 @@ title: 详情
|
||||
|
||||
{{% /details %}}
|
||||
|
||||
## 用法
|
||||
## 使用方法
|
||||
|
||||
````markdown
|
||||
{{%/* details title="详情" */%}}
|
||||
|
||||
这是详情的内容。
|
||||
|
||||
支持 **Markdown**。
|
||||
支持 **Markdown** 格式。
|
||||
|
||||
{{%/* /details */%}}
|
||||
````
|
||||
|
@@ -1,8 +1,6 @@
|
||||
---
|
||||
title: کامپوننت FileTree
|
||||
linkTitle: FileTree
|
||||
prev: /docs/guide/shortcodes
|
||||
next: /docs/guide/shortcodes/icon
|
||||
---
|
||||
|
||||
## مثال
|
||||
@@ -13,13 +11,13 @@ next: /docs/guide/shortcodes/icon
|
||||
{{< filetree/folder name="docs" state="closed" >}}
|
||||
{{< filetree/file name="_index.md" >}}
|
||||
{{< filetree/file name="introduction.md" >}}
|
||||
{{< filetree/file name="introduction.fa.md" >}}
|
||||
{{< filetree/file name="introduction.fr.md" >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/folder >}}
|
||||
{{< filetree/file name="hugo.toml" >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
## استفاده
|
||||
## نحوه استفاده
|
||||
|
||||
```text {filename="Markdown"}
|
||||
{{</* filetree/container */>}}
|
||||
@@ -28,9 +26,9 @@ next: /docs/guide/shortcodes/icon
|
||||
{{</* filetree/folder name="docs" state="closed" */>}}
|
||||
{{</* filetree/file name="_index.md" */>}}
|
||||
{{</* filetree/file name="introduction.md" */>}}
|
||||
{{</* filetree/file name="introduction.fa.md" */>}}
|
||||
{{</* filetree/file name="introduction.fr.md" */>}}
|
||||
{{</* /filetree/folder */>}}
|
||||
{{</* /filetree/folder */>}}
|
||||
{{</* filetree/file name="hugo.toml" */>}}
|
||||
{{</* /filetree/container */>}}
|
||||
```
|
||||
```
|
@@ -17,7 +17,7 @@ linkTitle: 文件树
|
||||
{{< filetree/file name="hugo.toml" >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
## 用法
|
||||
## 使用方法
|
||||
|
||||
```text {filename="Markdown"}
|
||||
{{</* filetree/container */>}}
|
||||
|
@@ -1,15 +1,15 @@
|
||||
---
|
||||
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) پیدا کنید.
|
||||
لیست آیکونهای موجود را میتوانید در [`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml) مشاهده کنید.
|
||||
|
||||
<!--more-->
|
||||
|
||||
@@ -20,23 +20,23 @@ enableInlineShortcodes: true
|
||||
{{< icon "gift" >}}
|
||||
{{< icon "sparkles" >}}
|
||||
|
||||
## استفاده
|
||||
## نحوه استفاده
|
||||
|
||||
```
|
||||
{{</* icon "github" */>}}
|
||||
```
|
||||
|
||||
آیکونهای با طرحهای متفاوت در [Heroicons](https://v1.heroicons.com/) نسخه ۱ خارج از جعبه در دسترس هستند.
|
||||
آیکونهای [Heroicons](https://v1.heroicons.com/) نسخه 1 به صورت پیشفرض در دسترس هستند.
|
||||
|
||||
### چجوری آیکونهای خودمان را اضافه کنیم
|
||||
### چگونه آیکونهای خود را اضافه کنید
|
||||
|
||||
پرونده `data/icons.yaml` را ایجاد کنید، سپس آیکونهای SVG خود را در فرمت زیر اضافه کنید:
|
||||
فایل `data/icons.yaml` را ایجاد کنید، سپس آیکونهای SVG خود را با فرمت زیر اضافه کنید:
|
||||
|
||||
```yaml {filename="data/icons.yaml"}
|
||||
your-icon: <svg>your icon svg content</svg>
|
||||
your-icon: <svg>محتوای SVG آیکون شما</svg>
|
||||
```
|
||||
|
||||
سپس میتوان آن را در کد کوتاه مانند زیر استفاده کرد:
|
||||
سپس میتوانید از آن در شورتکد به این صورت استفاده کنید:
|
||||
|
||||
```
|
||||
{{</* icon "your-icon" */>}}
|
||||
@@ -44,4 +44,4 @@ your-icon: <svg>your icon svg content</svg>
|
||||
{{</* card icon="your-icon" */>}}
|
||||
```
|
||||
|
||||
نکته: [Iconify Design](https://iconify.design/) مکانی عالی برای پیدا کردن آیکونهای SVG برای سایت شما است.
|
||||
نکته: [Iconify Design](https://iconify.design/) منبع خوبی برای یافتن آیکونهای SVG برای سایت شماست.
|
@@ -1,5 +1,6 @@
|
||||
---
|
||||
title: アイコン
|
||||
next: /docs/guide/shortcodes/steps
|
||||
---
|
||||
|
||||
このショートコードをインラインで使用するには、設定でインラインショートコードを有効にする必要があります:
|
||||
@@ -8,7 +9,7 @@ title: アイコン
|
||||
enableInlineShortcodes: true
|
||||
```
|
||||
|
||||
利用可能なアイコンのリストは、[`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml) で確認できます。
|
||||
利用可能なアイコンの一覧は [`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml) で確認できます。
|
||||
|
||||
<!--more-->
|
||||
|
||||
@@ -29,13 +30,13 @@ enableInlineShortcodes: true
|
||||
|
||||
### 独自のアイコンを追加する方法
|
||||
|
||||
`data/icons.yaml` ファイルを作成し、以下の形式で独自のSVGアイコンを追加します:
|
||||
`data/icons.yaml` ファイルを作成し、以下の形式で独自の SVG アイコンを追加します:
|
||||
|
||||
```yaml {filename="data/icons.yaml"}
|
||||
your-icon: <svg>your icon svg content</svg>
|
||||
```
|
||||
|
||||
その後、ショートコードで以下のように使用できます:
|
||||
追加したアイコンは以下のようにショートコードで使用できます:
|
||||
|
||||
```
|
||||
{{</* icon "your-icon" */>}}
|
||||
@@ -43,4 +44,4 @@ your-icon: <svg>your icon svg content</svg>
|
||||
{{</* card icon="your-icon" */>}}
|
||||
```
|
||||
|
||||
ヒント: [Iconify Design](https://iconify.design/) は、サイト用のSVGアイコンを見つけるのに最適な場所です。
|
||||
ヒント: [Iconify Design](https://iconify.design/) はサイト用の SVG アイコンを見つけるのに最適な場所です。
|
@@ -1,14 +1,15 @@
|
||||
---
|
||||
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) 中找到。
|
||||
可用图标列表可在 [`data/icons.yaml`](https://github.com/imfing/hextra/blob/main/data/icons.yaml) 中找到。
|
||||
|
||||
<!--more-->
|
||||
|
||||
@@ -19,23 +20,23 @@ enableInlineShortcodes: true
|
||||
{{< icon "gift" >}}
|
||||
{{< icon "sparkles" >}}
|
||||
|
||||
## 用法
|
||||
## 使用方法
|
||||
|
||||
```
|
||||
{{</* icon "github" */>}}
|
||||
```
|
||||
|
||||
[Heroicons](https://v1.heroicons.com/) v1 的轮廓图标默认可用。
|
||||
默认支持 [Heroicons](https://v1.heroicons.com/) v1 轮廓风格图标。
|
||||
|
||||
### 如何添加自定义图标
|
||||
|
||||
创建 `data/icons.yaml` 文件,然后按照以下格式添加自定义的 SVG 图标:
|
||||
创建 `data/icons.yaml` 文件,按以下格式添加您的 SVG 图标:
|
||||
|
||||
```yaml {filename="data/icons.yaml"}
|
||||
your-icon: <svg>your icon svg content</svg>
|
||||
your-icon: <svg>您的图标 SVG 内容</svg>
|
||||
```
|
||||
|
||||
然后可以在短代码中这样使用:
|
||||
随后即可通过短代码调用:
|
||||
|
||||
```
|
||||
{{</* icon "your-icon" */>}}
|
||||
@@ -43,4 +44,4 @@ your-icon: <svg>your icon svg content</svg>
|
||||
{{</* card icon="your-icon" */>}}
|
||||
```
|
||||
|
||||
提示:[Iconify Design](https://iconify.design/) 是寻找网站 SVG 图标的好地方。
|
||||
提示:[Iconify Design](https://iconify.design/) 是寻找网站 SVG 图标的优质资源平台。
|
79
exampleSite/content/docs/guide/shortcodes/jupyter.fa.md
Normal file
79
exampleSite/content/docs/guide/shortcodes/jupyter.fa.md
Normal file
@@ -0,0 +1,79 @@
|
||||
---
|
||||
title: "کامپوننت Jupyter Notebook"
|
||||
linktitle: "Jupyter Notebook"
|
||||
math: true
|
||||
sidebar:
|
||||
exclude: true
|
||||
---
|
||||
|
||||
{{< callout >}}ویژگی آزمایشی برای گنجاندن 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
|
@@ -6,15 +6,15 @@ sidebar:
|
||||
exclude: true
|
||||
---
|
||||
|
||||
{{< callout >}}Jupyter Notebook をショートコード経由で含める実験的な機能です。すべてのセルタイプがサポートされているわけではありません。{{< /callout >}}
|
||||
{{< callout >}}Jupyter Notebook をショートコード経由で組み込む実験的機能です。すべてのセルタイプがサポートされているわけではありません。{{< /callout >}}
|
||||
|
||||
[Jupyter Notebook](https://jupyter.org/) は、[Project Jupyter](https://jupyter.org/) の言語に依存しない HTML ノートブックアプリケーションです。これを使用すると、ライブコード、数式、視覚化、および説明文を含むドキュメントを作成して共有できます。
|
||||
[Jupyter Notebook](https://jupyter.org/) は [Project Jupyter](https://jupyter.org/) の言語非依存な HTML ノートブックアプリケーションです。ライブコード、数式、可視化、説明文を含むドキュメントを作成・共有できます。
|
||||
|
||||
<!--more-->
|
||||
|
||||
## 使用方法
|
||||
|
||||
### ローカルノートブックを使用する
|
||||
### ローカルノートブックの使用
|
||||
|
||||
Jupyter Notebook ショートコードを使用するには、プロジェクト内に Jupyter Notebook ファイルが必要です。[画像を追加する](../../organize-files#add-images)方法と同様に、Jupyter Notebook を `assets` フォルダに追加できます。
|
||||
|
||||
@@ -29,11 +29,11 @@ Jupyter Notebook ショートコードを使用するには、プロジェクト
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
`jupyter` ショートコードを使用してページに Jupyter Notebook を含めます:
|
||||
`jupyter` ショートコードを使用してページに Jupyter Notebook を組み込みます:
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||
---
|
||||
title: My Page
|
||||
title: マイページ
|
||||
math: true
|
||||
---
|
||||
|
||||
@@ -55,16 +55,16 @@ math: true
|
||||
|
||||
```markdown {filename="content/docs/my-page/index.md"}
|
||||
---
|
||||
title: My Page
|
||||
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) ノートブックをページに含めるには、次のショートコードを使用します:
|
||||
ノートブックファイルの 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" */%}}
|
||||
@@ -72,7 +72,7 @@ math: true
|
||||
|
||||
## ノートブックの例
|
||||
|
||||
{{< callout type="info" >}}以下は、プロジェクトの assets フォルダに含まれているノートブックファイルの例です。{{< /callout >}}
|
||||
{{< callout type="info" >}}以下は、プロジェクトの assets フォルダに含まれるノートブックファイルの例です。{{< /callout >}}
|
||||
|
||||
{{% jupyter "example.ipynb" %}}
|
||||
|
||||
|
@@ -6,9 +6,9 @@ sidebar:
|
||||
exclude: true
|
||||
---
|
||||
|
||||
{{< callout >}}实验性功能:通过短代码嵌入 Jupyter Notebook。请注意,并非所有单元格类型都受支持。{{< /callout >}}
|
||||
{{< callout >}}实验性功能:通过短代码嵌入 Jupyter Notebook。注意并非所有单元格类型都受支持。{{< /callout >}}
|
||||
|
||||
[Jupyter Notebook](https://jupyter.org/) 是 [Project Jupyter](https://jupyter.org/) 的一个语言无关的 HTML 笔记本应用程序。它允许你创建和共享包含实时代码、方程、可视化和叙述性文本的文档。
|
||||
[Jupyter Notebook](https://jupyter.org/) 是 [Project Jupyter](https://jupyter.org/) 推出的语言无关的 HTML 笔记本应用。它允许你创建和分享包含动态代码、数学公式、可视化图表和叙述性文本的文档。
|
||||
|
||||
<!--more-->
|
||||
|
||||
@@ -16,7 +16,7 @@ sidebar:
|
||||
|
||||
### 使用本地笔记本
|
||||
|
||||
要使用 Jupyter Notebook 短代码,你需要在项目中有一个 Jupyter Notebook 文件。类似于如何[添加图片](../../organize-files#add-images)到项目中,你可以将 Jupyter Notebooks 添加到 `assets` 文件夹。
|
||||
要使用 Jupyter Notebook 短代码,你需要在项目中放置一个 Jupyter Notebook 文件。与[添加图片](../../organize-files#add-images)到项目类似,你可以将 Jupyter Notebook 放入 `assets` 文件夹。
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="assets" >}}
|
||||
@@ -29,7 +29,7 @@ sidebar:
|
||||
{{< /filetree/folder >}}
|
||||
{{< /filetree/container >}}
|
||||
|
||||
使用 `jupyter` 短代码将 Jupyter Notebook 包含在页面中:
|
||||
使用 `jupyter` 短代码将笔记本嵌入页面:
|
||||
|
||||
```markdown {filename="content/docs/my-page.md"}
|
||||
---
|
||||
@@ -40,7 +40,7 @@ math: true
|
||||
{{%/* jupyter "notebook.ipynb" */%}}
|
||||
```
|
||||
|
||||
或者,你可以利用 Hugo 的[页面包][page-bundles]功能将 Jupyter Notebooks 与 Markdown 文件一起组织。
|
||||
或者,你可以利用 Hugo 的[页面包][page-bundles]功能,将 Jupyter Notebook 与 Markdown 文件组织在一起。
|
||||
|
||||
{{< filetree/container >}}
|
||||
{{< filetree/folder name="content" >}}
|
||||
@@ -64,7 +64,7 @@ math: true
|
||||
|
||||
### 使用远程笔记本
|
||||
|
||||
你也可以通过提供笔记本文件的 URL 来使用远程笔记本。例如,要在页面中包含 [What is the Jupyter Notebook](https://github.com/jupyter/notebook/blob/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.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" */%}}
|
||||
@@ -72,7 +72,7 @@ math: true
|
||||
|
||||
## 示例笔记本
|
||||
|
||||
{{< callout type="info" >}}以下是包含在项目 assets 文件夹中的笔记本文件示例。{{< /callout >}}
|
||||
{{< callout type="info" >}}以下示例展示的是项目 assets 文件夹中包含的笔记本文件。{{< /callout >}}
|
||||
|
||||
{{% jupyter "example.ipynb" %}}
|
||||
|
||||
|
78
exampleSite/content/docs/guide/shortcodes/others.fa.md
Normal file
78
exampleSite/content/docs/guide/shortcodes/others.fa.md
Normal file
@@ -0,0 +1,78 @@
|
||||
---
|
||||
title: سایر شورتکدها
|
||||
linkTitle: سایر
|
||||
sidebar:
|
||||
exclude: true
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
{{< callout emoji="ℹ️" >}}
|
||||
برخی از اینها شورتکدهای داخلی Hugo هستند.
|
||||
این شورتکدها کمتر پایدار در نظر گرفته میشوند و ممکن است هر زمان تغییر کنند.
|
||||
{{< /callout >}}
|
||||
|
||||
## نشان
|
||||
|
||||
```
|
||||
{{</* badge "نشان" */>}}
|
||||
```
|
||||
|
||||
نتیجه:
|
||||
|
||||
{{< badge "نشان" >}}
|
||||
|
||||
انواع مختلف:
|
||||
|
||||
```
|
||||
{{</* badge content="اطلاعات" type="info" */>}}
|
||||
{{</* badge content="هشدار" type="warning" */>}}
|
||||
{{</* badge content="خطا" type="error" */>}}
|
||||
```
|
||||
|
||||
نتیجه:
|
||||
|
||||
{{< badge content="اطلاعات" type="info" >}}
|
||||
{{< badge content="هشدار" type="warning" >}}
|
||||
{{< badge content="خطا" type="error" >}}
|
||||
|
||||
با لینک و آیکون:
|
||||
|
||||
```
|
||||
{{</* badge content="انتشارها" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
|
||||
```
|
||||
|
||||
نتیجه:
|
||||
|
||||
{{< badge content="انتشارها" link="https://github.com/imfing/hextra/releases" icon="github" >}}
|
||||
|
||||
## یوتیوب
|
||||
|
||||
تعبیه یک ویدیوی یوتیوب.
|
||||
|
||||
```
|
||||
{{</* 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" >}}
|
@@ -3,22 +3,23 @@ title: その他のショートコード
|
||||
linkTitle: その他
|
||||
sidebar:
|
||||
exclude: true
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
{{< callout emoji="ℹ️" >}}
|
||||
これらの一部はHugoの組み込みショートコードです。
|
||||
これらの一部は Hugo 組み込みのショートコードです。
|
||||
これらのショートコードは安定性が低く、いつでも変更される可能性があります。
|
||||
{{< /callout >}}
|
||||
|
||||
## バッジ
|
||||
|
||||
```
|
||||
{{</* badge "バッジ" */>}}
|
||||
{{</* badge "Badge" */>}}
|
||||
```
|
||||
|
||||
結果:
|
||||
|
||||
{{< badge "バッジ" >}}
|
||||
{{< badge "Badge" >}}
|
||||
|
||||
バリエーション:
|
||||
|
||||
@@ -37,16 +38,16 @@ sidebar:
|
||||
リンクとアイコン付き:
|
||||
|
||||
```
|
||||
{{</* badge content="リリース" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
|
||||
{{</* badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
|
||||
```
|
||||
|
||||
結果:
|
||||
|
||||
{{< badge content="リリース" link="https://github.com/imfing/hextra/releases" icon="github" >}}
|
||||
{{< badge content="Releases" link="https://github.com/imfing/hextra/releases" icon="github" >}}
|
||||
|
||||
## YouTube
|
||||
|
||||
YouTube動画を埋め込みます。
|
||||
YouTube 動画を埋め込みます。
|
||||
|
||||
```
|
||||
{{</* youtube VIDEO_ID */>}}
|
||||
@@ -56,17 +57,17 @@ YouTube動画を埋め込みます。
|
||||
|
||||
{{< youtube id=dQw4w9WgXcQ loading=lazy >}}
|
||||
|
||||
詳細については、[HugoのYouTubeショートコード](https://gohugo.io/content-management/shortcodes/#youtube)を参照してください。
|
||||
詳細については、[Hugo の YouTube ショートコード](https://gohugo.io/content-management/shortcodes/#youtube)を参照してください。
|
||||
|
||||
## PDF
|
||||
|
||||
PDFショートコードを使用すると、コンテンツ内にPDFファイルを埋め込むことができます。
|
||||
PDF ショートコードを使用すると、コンテンツ内に PDF ファイルを埋め込むことができます。
|
||||
|
||||
```
|
||||
{{</* pdf "https://example.com/sample.pdf" */>}}
|
||||
```
|
||||
|
||||
また、プロジェクトディレクトリ内にPDFファイルを配置し、相対パスを使用することもできます。
|
||||
プロジェクトディレクトリ内に PDF ファイルを配置し、相対パスを使用することもできます。
|
||||
|
||||
```
|
||||
{{</* pdf "path/to/file.pdf" */>}}
|
||||
|
@@ -3,11 +3,12 @@ title: 其他短代码
|
||||
linkTitle: 其他
|
||||
sidebar:
|
||||
exclude: true
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
{{< callout emoji="ℹ️" >}}
|
||||
其中一些是 Hugo 内置的短代码。
|
||||
这些短代码被认为不太稳定,可能会随时更改。
|
||||
其中部分为Hugo内置短代码。
|
||||
这些短代码稳定性较低,可能随时变更。
|
||||
{{< /callout >}}
|
||||
|
||||
## 徽章
|
||||
@@ -16,7 +17,7 @@ sidebar:
|
||||
{{</* badge "徽章" */>}}
|
||||
```
|
||||
|
||||
结果:
|
||||
效果:
|
||||
|
||||
{{< badge "徽章" >}}
|
||||
|
||||
@@ -28,7 +29,7 @@ sidebar:
|
||||
{{</* badge content="错误" type="error" */>}}
|
||||
```
|
||||
|
||||
结果:
|
||||
效果:
|
||||
|
||||
{{< badge content="信息" type="info" >}}
|
||||
{{< badge content="警告" type="warning" >}}
|
||||
@@ -37,22 +38,22 @@ sidebar:
|
||||
带链接和图标:
|
||||
|
||||
```
|
||||
{{</* badge content="发布" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
|
||||
{{</* badge content="版本发布" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
|
||||
```
|
||||
|
||||
结果:
|
||||
效果:
|
||||
|
||||
{{< badge content="发布" link="https://github.com/imfing/hextra/releases" icon="github" >}}
|
||||
{{< badge content="版本发布" link="https://github.com/imfing/hextra/releases" icon="github" >}}
|
||||
|
||||
## YouTube
|
||||
|
||||
嵌入 YouTube 视频。
|
||||
嵌入YouTube视频。
|
||||
|
||||
```
|
||||
{{</* youtube 视频ID */>}}
|
||||
```
|
||||
|
||||
结果:
|
||||
效果:
|
||||
|
||||
{{< youtube id=dQw4w9WgXcQ loading=lazy >}}
|
||||
|
||||
@@ -60,13 +61,13 @@ sidebar:
|
||||
|
||||
## PDF
|
||||
|
||||
使用 PDF 短代码,您可以在内容中嵌入 PDF 文件。
|
||||
通过PDF短代码可在内容中嵌入PDF文件。
|
||||
|
||||
```
|
||||
{{</* pdf "https://example.com/sample.pdf" */>}}
|
||||
```
|
||||
|
||||
您也可以将 PDF 文件放在项目目录中并使用相对路径。
|
||||
也可将PDF文件置于项目目录中并使用相对路径。
|
||||
|
||||
```
|
||||
{{</* pdf "path/to/file.pdf" */>}}
|
||||
|
@@ -1,6 +1,5 @@
|
||||
---
|
||||
title: مراحل
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
یک کامپوننت داخلی برای نمایش یک سری مراحل.
|
||||
@@ -10,6 +9,7 @@ next: /docs/guide/deploy-site
|
||||
{{% steps %}}
|
||||
|
||||
### مرحله ۱
|
||||
|
||||
این اولین مرحله است.
|
||||
|
||||
### مرحله ۲
|
||||
@@ -23,9 +23,14 @@ next: /docs/guide/deploy-site
|
||||
{{% /steps %}}
|
||||
|
||||
|
||||
## استفاده
|
||||
## نحوه استفاده
|
||||
|
||||
سرتیتر مارکداون h3 را در کد کوتاه `steps` قرار دهید.
|
||||
{{< callout emoji="ℹ️" >}}
|
||||
لطفاً توجه داشته باشید که این شورتکد **فقط برای محتوای Markdown** طراحی شده است.
|
||||
اگر محتوای HTML یا شورتکدهای دیگر را به عنوان محتوای مرحله قرار دهید، ممکن است به درستی نمایش داده نشود.
|
||||
{{< /callout >}}
|
||||
|
||||
عنوان h3 مارکداون را درون شورتکد `steps` قرار دهید.
|
||||
|
||||
```
|
||||
{{%/* steps */%}}
|
||||
@@ -39,4 +44,4 @@ next: /docs/guide/deploy-site
|
||||
این دومین مرحله است.
|
||||
|
||||
{{%/* /steps */%}}
|
||||
```
|
||||
```
|
@@ -2,7 +2,7 @@
|
||||
title: ステップ
|
||||
---
|
||||
|
||||
ステップのシリーズを表示するための組み込みコンポーネント。
|
||||
一連のステップを表示するための組み込みコンポーネントです。
|
||||
|
||||
## 例
|
||||
|
||||
@@ -22,14 +22,15 @@ title: ステップ
|
||||
|
||||
{{% /steps %}}
|
||||
|
||||
|
||||
## 使い方
|
||||
|
||||
{{< callout emoji="ℹ️" >}}
|
||||
このショートコードは**Markdownコンテンツ専用**であることに注意してください。
|
||||
HTMLコンテンツや他のショートコードをステップの内容として使用すると、期待通りにレンダリングされない場合があります。
|
||||
このショートコードは **Markdown コンテンツ専用** であることに注意してください。
|
||||
HTML コンテンツや他のショートコードをステップの内容として含めると、期待通りにレンダリングされない場合があります。
|
||||
{{< /callout >}}
|
||||
|
||||
`steps` ショートコード内にMarkdownのh3ヘッダーを配置します。
|
||||
`steps` ショートコード内に Markdown の h3 ヘッダーを配置します。
|
||||
|
||||
```
|
||||
{{%/* steps */%}}
|
||||
|
@@ -23,14 +23,14 @@ title: 步骤
|
||||
{{% /steps %}}
|
||||
|
||||
|
||||
## 用法
|
||||
## 使用方法
|
||||
|
||||
{{< callout emoji="ℹ️" >}}
|
||||
请注意,此短代码**仅适用于 Markdown 内容**。
|
||||
如果将 HTML 内容或其他短代码作为步骤内容,可能无法按预期渲染。
|
||||
请注意,此短代码**仅适用于Markdown内容**。
|
||||
如果在步骤内容中放入HTML或其他短代码,可能无法按预期渲染。
|
||||
{{< /callout >}}
|
||||
|
||||
在 `steps` 短代码中放置 Markdown 的 h3 标题。
|
||||
在`steps`短代码内放置Markdown的三级标题。
|
||||
|
||||
```
|
||||
{{%/* steps */%}}
|
||||
|
@@ -1,70 +1,71 @@
|
||||
---
|
||||
title: زبانهها
|
||||
title: تبها
|
||||
next: /docs/guide/deploy-site
|
||||
---
|
||||
|
||||
## مثال
|
||||
|
||||
{{< tabs items="JSON,YAML,TOML" >}}
|
||||
{{< tabs items="macOS,Linux,Windows" >}}
|
||||
|
||||
{{< tab >}}**JSON**: جیسون معادل اختصاری عبارت JavaScript Object Notation به معنی «نمادگذاری اشیا در جاوا اسکریپت» است. جیسون یک قالب استاندارد باز است که امکان تبادل دادهها در وب با استفاده از جفتهای خصوصیت-کلید را ممکن ساخته است.{{< /tab >}}
|
||||
{{< tab >}}**YAML**: یک زبان برای سریالسازی داده قابل-خواندن-برای-انسان است.{{< /tab >}}
|
||||
{{< tab >}}**TOML**: یک قالب پرونده پیکربندی که به هدف سادگی در خوانایی به کمک داشتن معانی مشخص با هدف «کمینه» و مینیمال بودن ارائه شده است.{{< /tab >}}
|
||||
{{< tab >}}**macOS**: یک سیستم عامل دسکتاپ توسط اپل.{{< /tab >}}
|
||||
{{< tab >}}**Linux**: یک سیستم عامل متنباز.{{< /tab >}}
|
||||
{{< tab >}}**Windows**: یک سیستم عامل دسکتاپ توسط مایکروسافت.{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
## استفاده
|
||||
## نحوه استفاده
|
||||
|
||||
### پیشفرض
|
||||
|
||||
```
|
||||
{{</* tabs items="JSON,YAML,TOML" */>}}
|
||||
|
||||
{{</* tab */>}}**JSON**: جیسون معادل اختصاری عبارت JavaScript Object Notation به معنی «نمادگذاری اشیا در جاوا اسکریپت» است. جیسون یک قالب استاندارد باز است که امکان تبادل دادهها در وب با استفاده از جفتهای خصوصیت-کلید را ممکن ساخته است.{{</* /tab */>}}
|
||||
{{</* tab */>}}**YAML**: یک زبان برای سریالسازی داده قابل-خواندن-برای-انسان است.{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: یک قالب پرونده پیکربندی که به هدف سادگی در خوانایی به کمک داشتن معانی مشخص با هدف «کمینه» و مینیمال بودن ارائه شده است.{{</* /tab */>}}
|
||||
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش دادههای ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{</* /tab */>}}
|
||||
{{</* tab */>}}**YAML**: YAML یک زبان سریالسازی دادههای قابل خواندن توسط انسان است.{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
### مشخص کردن زبانه پیشفرض
|
||||
### مشخص کردن ایندکس انتخاب شده
|
||||
|
||||
از ویژگی `defaultIndex` برای مشخص کردن زبانه پیشفرض استفاده کنید. این شاخص از 0 شروع میشود.
|
||||
از ویژگی `defaultIndex` برای مشخص کردن تب انتخاب شده استفاده کنید. ایندکس از 0 شروع میشود.
|
||||
|
||||
```
|
||||
{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}
|
||||
|
||||
{{</* tab */>}}**JSON**: جیسون معادل اختصاری عبارت JavaScript Object Notation به معنی «نمادگذاری اشیا در جاوا اسکریپت» است. جیسون یک قالب استاندارد باز است که امکان تبادل دادهها در وب با استفاده از جفتهای خصوصیت-کلید را ممکن ساخته است.{{</* /tab */>}}
|
||||
{{</* tab */>}}**YAML**: یک زبان برای سریالسازی داده قابل-خواندن-برای-انسان است.{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: یک قالب پرونده پیکربندی که به هدف سادگی در خوانایی به کمک داشتن معانی مشخص با هدف «کمینه» و مینیمال بودن ارائه شده است.{{</* /tab */>}}
|
||||
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش دادههای ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{</* /tab */>}}
|
||||
{{</* tab */>}}**YAML**: YAML یک زبان سریالسازی دادههای قابل خواندن توسط انسان است.{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
زبانه `YAML` به طور پیشفرض انتخاب میشود.
|
||||
تب `YAML` به طور پیشفرض انتخاب خواهد شد.
|
||||
|
||||
{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}
|
||||
|
||||
{{< tab >}}**JSON**: جیسون معادل اختصاری عبارت JavaScript Object Notation به معنی «نمادگذاری اشیا در جاوا اسکریپت» است. جیسون یک قالب استاندارد باز است که امکان تبادل دادهها در وب با استفاده از جفتهای خصوصیت-کلید را ممکن ساخته است.{{< /tab >}}
|
||||
{{< tab >}}**YAML**: یک زبان برای سریالسازی داده قابل-خواندن-برای-انسان است.{{< /tab >}}
|
||||
{{< tab >}}**TOML**: یک قالب پرونده پیکربندی که به هدف سادگی در خوانایی به کمک داشتن معانی مشخص با هدف «کمینه» و مینیمال بودن ارائه شده است.{{< /tab >}}
|
||||
{{< tab >}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش دادههای ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{< /tab >}}
|
||||
{{< tab >}}**YAML**: YAML یک زبان سریالسازی دادههای قابل خواندن توسط انسان است.{{< /tab >}}
|
||||
{{< tab >}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
### استفاده از مارکداون
|
||||
### استفاده از Markdown
|
||||
|
||||
سینتکس مارکداون از جمله بلوک کد نیز پشتیبانی میشود:
|
||||
نحو Markdown شامل بلوک کد نیز پشتیبانی میشود:
|
||||
|
||||
````
|
||||
{{</* tabs items="JSON,YAML,TOML" */>}}
|
||||
|
||||
{{</* tab */>}}
|
||||
```json
|
||||
{ "سلام": "دنیا" }
|
||||
{ "hello": "world" }
|
||||
```
|
||||
{{</* /tab */>}}
|
||||
|
||||
... زبانههای دیگر را به همین ترتیب اضافه کنید
|
||||
... سایر تبها را به همین ترتیب اضافه کنید
|
||||
|
||||
{{</* /tabs */>}}
|
||||
````
|
||||
@@ -73,20 +74,52 @@ title: زبانهها
|
||||
|
||||
{{< tab >}}
|
||||
```json
|
||||
{ "سلام": "دنیا" }
|
||||
{ "hello": "world" }
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab >}}
|
||||
```yaml
|
||||
سلام: دنیا
|
||||
hello: world
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< tab >}}
|
||||
```toml
|
||||
سلام = "دنیا"
|
||||
hello = "world"
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
### همگامسازی تبها
|
||||
|
||||
تبهایی که لیست `items` یکسانی دارند میتوانند همگامسازی شوند. وقتی فعال باشد، انتخاب یک تب تمام تبهای دیگر با `items` یکسان را بهروز میکند و انتخاب را در بین صفحات به خاطر میسپارد.
|
||||
|
||||
به صورت جهانی در فایل `hugo.yaml` در بخش `page` فعال کنید:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
page:
|
||||
tabs:
|
||||
sync: true
|
||||
```
|
||||
|
||||
با فعال کردن این گزینه، دو بلوک تب زیر همیشه آیتم انتخاب شده یکسانی را نمایش خواهند داد:
|
||||
|
||||
```markdown
|
||||
{{</* tabs items="A,B" */>}}
|
||||
|
||||
{{</* tab */>}}محتوای A{{</* /tab */>}}
|
||||
{{</* tab */>}}محتوای B{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
|
||||
{{</* tabs items="A,B" */>}}
|
||||
|
||||
{{</* tab */>}}محتوای دوم A{{</* /tab */>}}
|
||||
{{</* tab */>}}محتوای دوم B{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
@@ -5,11 +5,11 @@ next: /docs/guide/deploy-site
|
||||
|
||||
## 例
|
||||
|
||||
{{< tabs items="JSON,YAML,TOML" >}}
|
||||
{{< tabs items="macOS,Linux,Windows" >}}
|
||||
|
||||
{{< tab >}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{< /tab >}}
|
||||
{{< tab >}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{< /tab >}}
|
||||
{{< tab >}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}
|
||||
{{< tab >}}**macOS**: Apple が提供するデスクトップオペレーティングシステム。{{< /tab >}}
|
||||
{{< tab >}}**Linux**: オープンソースのオペレーティングシステム。{{< /tab >}}
|
||||
{{< tab >}}**Windows**: Microsoft が提供するデスクトップオペレーティングシステム。{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
@@ -20,23 +20,23 @@ next: /docs/guide/deploy-site
|
||||
```
|
||||
{{</* tabs items="JSON,YAML,TOML" */>}}
|
||||
|
||||
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{</* /tab */>}}
|
||||
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現する標準のテキストベースフォーマットです。{{</* /tab */>}}
|
||||
{{</* tab */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML は、明確なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
### 選択されたインデックスを指定
|
||||
### 選択インデックスの指定
|
||||
|
||||
`defaultIndex` プロパティを使用して、選択されるタブを指定します。インデックスは 0 から始まります。
|
||||
`defaultIndex` プロパティを使用して選択するタブを指定します。インデックスは 0 から始まります。
|
||||
|
||||
```
|
||||
{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}
|
||||
|
||||
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{</* /tab */>}}
|
||||
{{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現する標準のテキストベースフォーマットです。{{</* /tab */>}}
|
||||
{{</* tab */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML は、明確なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
@@ -45,14 +45,14 @@ next: /docs/guide/deploy-site
|
||||
|
||||
{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}
|
||||
|
||||
{{< tab >}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現するための標準的なテキストベースのフォーマットです。{{< /tab >}}
|
||||
{{< tab >}}**JSON**: JavaScript Object Notation (JSON) は、JavaScript オブジェクト構文に基づいた構造化データを表現する標準のテキストベースフォーマットです。{{< /tab >}}
|
||||
{{< tab >}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{< /tab >}}
|
||||
{{< tab >}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}
|
||||
{{< tab >}}**TOML**: TOML は、明確なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
### Markdown を使用
|
||||
### Markdown の使用
|
||||
|
||||
コードブロックを含む Markdown 構文もサポートされています:
|
||||
|
||||
@@ -90,4 +90,36 @@ next: /docs/guide/deploy-site
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
### タブの同期
|
||||
|
||||
同じ `items` リストを持つタブは同期できます。有効にすると、タブを選択すると同じ `items` を持つ他のタブも更新され、ページ間で選択が記憶されます。
|
||||
|
||||
`hugo.yaml` の `page` セクションでグローバルに有効にします:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
page:
|
||||
tabs:
|
||||
sync: true
|
||||
```
|
||||
|
||||
これを有効にすると、以下の 2 つのタブブロックは常に同じ選択項目を表示します:
|
||||
|
||||
```markdown
|
||||
{{</* tabs items="A,B" */>}}
|
||||
|
||||
{{</* tab */>}}A の内容{{</* /tab */>}}
|
||||
{{</* tab */>}}B の内容{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
|
||||
{{</* tabs items="A,B" */>}}
|
||||
|
||||
{{</* tab */>}}2 番目の A の内容{{</* /tab */>}}
|
||||
{{</* tab */>}}2 番目の B の内容{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
@@ -5,56 +5,56 @@ next: /docs/guide/deploy-site
|
||||
|
||||
## 示例
|
||||
|
||||
{{< tabs items="JSON,YAML,TOML" >}}
|
||||
{{< tabs items="macOS,Linux,Windows" >}}
|
||||
|
||||
{{< tab >}}**JSON**: JavaScript 对象表示法(JSON)是一种基于 JavaScript 对象语法的标准文本格式,用于表示结构化数据。{{< /tab >}}
|
||||
{{< tab >}}**YAML**: YAML 是一种人类可读的数据序列化语言。{{< /tab >}}
|
||||
{{< tab >}}**TOML**: TOML 旨在成为一种最小化的配置文件格式,由于其明显的语义,易于阅读。{{< /tab >}}
|
||||
{{< tab >}}**macOS**: 苹果公司开发的桌面操作系统。{{< /tab >}}
|
||||
{{< tab >}}**Linux**: 一款开源操作系统。{{< /tab >}}
|
||||
{{< tab >}}**Windows**: 微软公司开发的桌面操作系统。{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
## 用法
|
||||
## 使用方法
|
||||
|
||||
### 默认
|
||||
|
||||
```
|
||||
{{</* tabs items="JSON,YAML,TOML" */>}}
|
||||
|
||||
{{</* tab */>}}**JSON**: JavaScript 对象表示法(JSON)是一种基于 JavaScript 对象语法的标准文本格式,用于表示结构化数据。{{</* /tab */>}}
|
||||
{{</* tab */>}}**YAML**: YAML 是一种人类可读的数据序列化语言。{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML 旨在成为一种最小化的配置文件格式,由于其明显的语义,易于阅读。{{</* /tab */>}}
|
||||
{{</* tab */>}}**JSON**: JavaScript对象表示法(JSON)是一种基于JavaScript对象语法的标准文本格式,用于表示结构化数据。{{</* /tab */>}}
|
||||
{{</* tab */>}}**YAML**: YAML是一种人类可读的数据序列化语言。{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML旨在成为一种易于阅读的最小化配置文件格式,因其明显的语义而易于理解。{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
### 指定选中索引
|
||||
### 指定默认选中项
|
||||
|
||||
使用 `defaultIndex` 属性来指定选中的标签页。索引从 0 开始。
|
||||
使用 `defaultIndex` 属性指定默认选中的标签页,索引从0开始。
|
||||
|
||||
```
|
||||
{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}
|
||||
|
||||
{{</* tab */>}}**JSON**: JavaScript 对象表示法(JSON)是一种基于 JavaScript 对象语法的标准文本格式,用于表示结构化数据。{{</* /tab */>}}
|
||||
{{</* tab */>}}**YAML**: YAML 是一种人类可读的数据序列化语言。{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML 旨在成为一种最小化的配置文件格式,由于其明显的语义,易于阅读。{{</* /tab */>}}
|
||||
{{</* tab */>}}**JSON**: JavaScript对象表示法(JSON)是一种基于JavaScript对象语法的标准文本格式,用于表示结构化数据。{{</* /tab */>}}
|
||||
{{</* tab */>}}**YAML**: YAML是一种人类可读的数据序列化语言。{{</* /tab */>}}
|
||||
{{</* tab */>}}**TOML**: TOML旨在成为一种易于阅读的最小化配置文件格式,因其明显的语义而易于理解。{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
||||
|
||||
默认情况下,`YAML` 标签页将被选中。
|
||||
默认会选中 `YAML` 标签页。
|
||||
|
||||
{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}
|
||||
|
||||
{{< tab >}}**JSON**: JavaScript 对象表示法(JSON)是一种基于 JavaScript 对象语法的标准文本格式,用于表示结构化数据。{{< /tab >}}
|
||||
{{< tab >}}**YAML**: YAML 是一种人类可读的数据序列化语言。{{< /tab >}}
|
||||
{{< tab >}}**TOML**: TOML 旨在成为一种最小化的配置文件格式,由于其明显的语义,易于阅读。{{< /tab >}}
|
||||
{{< tab >}}**JSON**: JavaScript对象表示法(JSON)是一种基于JavaScript对象语法的标准文本格式,用于表示结构化数据。{{< /tab >}}
|
||||
{{< tab >}}**YAML**: YAML是一种人类可读的数据序列化语言。{{< /tab >}}
|
||||
{{< tab >}}**TOML**: TOML旨在成为一种易于阅读的最小化配置文件格式,因其明显的语义而易于理解。{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
### 使用 Markdown
|
||||
### 使用Markdown
|
||||
|
||||
Markdown 语法,包括代码块,也受支持:
|
||||
支持包括代码块在内的Markdown语法:
|
||||
|
||||
````
|
||||
{{</* tabs items="JSON,YAML,TOML" */>}}
|
||||
@@ -65,7 +65,7 @@ Markdown 语法,包括代码块,也受支持:
|
||||
```
|
||||
{{</* /tab */>}}
|
||||
|
||||
... 类似地添加其他标签页
|
||||
... 其他标签页类似添加
|
||||
|
||||
{{</* /tabs */>}}
|
||||
````
|
||||
@@ -90,4 +90,36 @@ Markdown 语法,包括代码块,也受支持:
|
||||
```
|
||||
{{< /tab >}}
|
||||
|
||||
{{< /tabs >}}
|
||||
{{< /tabs >}}
|
||||
|
||||
|
||||
### 同步标签页
|
||||
|
||||
具有相同 `items` 列表的标签页可以同步。启用后,选择一个标签页会更新所有具有相同 `items` 的其他标签页,并在页面间记住选择。
|
||||
|
||||
在 `hugo.yaml` 的 `page` 部分全局启用:
|
||||
|
||||
```yaml {filename="hugo.yaml"}
|
||||
params:
|
||||
page:
|
||||
tabs:
|
||||
sync: true
|
||||
```
|
||||
|
||||
启用后,以下两个标签页块将始终显示相同的选中项:
|
||||
|
||||
```markdown
|
||||
{{</* tabs items="A,B" */>}}
|
||||
|
||||
{{</* tab */>}}A内容{{</* /tab */>}}
|
||||
{{</* tab */>}}B内容{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
|
||||
{{</* tabs items="A,B" */>}}
|
||||
|
||||
{{</* tab */>}}第二个A内容{{</* /tab */>}}
|
||||
{{</* tab */>}}第二个B内容{{</* /tab */>}}
|
||||
|
||||
{{</* /tabs */>}}
|
||||
```
|
@@ -1,69 +1,87 @@
|
||||
---
|
||||
title: "برجستهکردن سینتکس"
|
||||
title: "رنگآمیزی نحوی"
|
||||
weight: 3
|
||||
---
|
||||
|
||||
هیوگو از [Chroma](https://github.com/alecthomas/chroma)، یک برجستهکننده سینتکس عمومی در Go خالص، برای برجستهسازی کردن سینتکس استفاده میکند.
|
||||
توصیه میشود از بکتیک برای بلوکهای کد در محتوای مارکداون استفاده کنید. مثلا:
|
||||
Hugo از [Chroma](https://github.com/alecthomas/chroma)، یک رنگآمیزی نحوی همهمنظوره در Go خالص، برای رنگآمیزی نحوی استفاده میکند.
|
||||
توصیه میشود برای بلوکهای کد در محتوای Markdown از بکتیک استفاده کنید. به عنوان مثال:
|
||||
|
||||
<!--more-->
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python
|
||||
def say_hello():
|
||||
print("سلام!")
|
||||
print("Hello!")
|
||||
```
|
||||
````
|
||||
|
||||
به صورت زیر رندر خواهد شد:
|
||||
به صورت زیر نمایش داده میشود:
|
||||
|
||||
```python
|
||||
def say_hello():
|
||||
print("سلام!")
|
||||
print("Hello!")
|
||||
```
|
||||
|
||||
## ویژگیها
|
||||
|
||||
### Filename
|
||||
### نام فایل
|
||||
|
||||
برای افزودن نام پرونده یا عنوان به بلوک کد، `filename` را مشخص کنید:
|
||||
برای افزودن نام فایل یا عنوان به بلوک کد، ویژگی `filename` را تنظیم کنید:
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python {filename="hello.py"}
|
||||
def say_hello():
|
||||
print("سلام!")
|
||||
print("Hello!")
|
||||
```
|
||||
````
|
||||
|
||||
```python {filename="hello.py"}
|
||||
def say_hello():
|
||||
print("سلام!")
|
||||
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="exampleSite/hugo.work"}
|
||||
go 1.20
|
||||
```
|
||||
````
|
||||
|
||||
```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="exampleSite/hugo.work"}
|
||||
go 1.20
|
||||
```
|
||||
|
||||
### شماره خطوط
|
||||
|
||||
برای تنظیم شماره خطوط، ویژگی `linenos` را روی `table` قرار دهید و به صورت اختیاری `linenostart` را روی شمارهای که خط شروع میشود تنظیم کنید:
|
||||
برای تنظیم شماره خطوط، ویژگی `linenos` را به `table` تنظیم کنید و اختیاریاً `linenostart` را به شماره خط شروع تنظیم کنید:
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python {linenos=table,linenostart=42}
|
||||
def say_hello():
|
||||
print("سلام!")
|
||||
print("Hello!")
|
||||
```
|
||||
````
|
||||
|
||||
```python {linenos=table,linenostart=42}
|
||||
def say_hello():
|
||||
print("سلام!")
|
||||
print("Hello!")
|
||||
```
|
||||
|
||||
### برجسته کردن خطوط
|
||||
### برجستهسازی خطوط
|
||||
|
||||
برای برجسته کردن خطوط، ویژگی `hl_lines` را به فهرستی از شماره خطوط تنظیم کنید:
|
||||
برای برجستهسازی خطوط، ویژگی `hl_lines` را به لیستی از شماره خطوط تنظیم کنید:
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
|
||||
def say_hello():
|
||||
print("سلام!")
|
||||
print("Hello!")
|
||||
|
||||
def main():
|
||||
say_hello()
|
||||
@@ -72,18 +90,25 @@ def main():
|
||||
|
||||
```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
|
||||
def say_hello():
|
||||
print("سلام!")
|
||||
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) مراجعه کنید.
|
||||
برای مشاهده لیست زبانهای پشتیبانی شده، لطفاً به [مستندات Chroma](https://github.com/alecthomas/chroma#supported-languages) مراجعه کنید.
|
@@ -3,8 +3,8 @@ title: "シンタックスハイライト"
|
||||
weight: 3
|
||||
---
|
||||
|
||||
Hugoは、純粋なGoで書かれた汎用シンタックスハイライターである[Chroma](https://github.com/alecthomas/chroma)を使用してシンタックスハイライトを行います。
|
||||
Markdownコンテンツ内のコードブロックにはバッククォートを使用することを推奨します。例えば:
|
||||
Hugo は構文強調表示に、純粋な Go で書かれた汎用シンタックスハイライタ [Chroma](https://github.com/alecthomas/chroma) を使用しています。
|
||||
Markdown コンテンツ内のコードブロックにはバッククォートを使用することを推奨します。例えば:
|
||||
|
||||
<!--more-->
|
||||
|
||||
@@ -15,7 +15,7 @@ def say_hello():
|
||||
```
|
||||
````
|
||||
|
||||
は次のようにレンダリングされます:
|
||||
は次のようにレンダリングされます:
|
||||
|
||||
```python
|
||||
def say_hello():
|
||||
@@ -26,7 +26,7 @@ def say_hello():
|
||||
|
||||
### ファイル名
|
||||
|
||||
コードブロックにファイル名やタイトルを追加するには、`filename`属性を設定します:
|
||||
コードブロックにファイル名やタイトルを追加するには、`filename` 属性を設定します:
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python {filename="hello.py"}
|
||||
@@ -44,7 +44,7 @@ def say_hello():
|
||||
|
||||
{{< new-feature version="v0.9.2" >}}
|
||||
|
||||
`base_url`属性を使用して、ファイル名と組み合わせてリンクを生成するベースURLを提供できます。
|
||||
`base_url` 属性を使用してベース URL を指定し、ファイル名と組み合わせてリンクを生成できます。
|
||||
|
||||
ファイル名には、ベースパス内のファイルの場所を指定する相対パスを含めることができます。
|
||||
|
||||
@@ -60,7 +60,7 @@ go 1.20
|
||||
|
||||
### 行番号
|
||||
|
||||
行番号を設定するには、`linenos`属性を`table`に設定し、オプションで`linenostart`を開始行番号に設定します:
|
||||
行番号を表示するには、`linenos` 属性を `table` に設定し、必要に応じて `linenostart` で開始行番号を指定します:
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python {linenos=table,linenostart=42}
|
||||
@@ -76,7 +76,7 @@ def say_hello():
|
||||
|
||||
### 行のハイライト
|
||||
|
||||
行をハイライトするには、`hl_lines`属性に行番号のリストを設定します:
|
||||
特定の行をハイライト表示するには、`hl_lines` 属性に行番号のリストを設定します:
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
|
||||
@@ -98,7 +98,7 @@ def main():
|
||||
|
||||
### コピーボタン
|
||||
|
||||
デフォルトでは、コードブロックにコピーボタンが有効になっています。その動作はサイト設定ファイルを変更することで変更できます:
|
||||
デフォルトでコードブロックにはコピーボタンが有効になっています。この動作はサイト設定ファイルで変更できます:
|
||||
|
||||
```yaml {linenos=table,linenostart=42,filename="hugo.yaml"}
|
||||
params:
|
||||
@@ -109,6 +109,6 @@ params:
|
||||
display: hover
|
||||
```
|
||||
|
||||
## サポートされている言語
|
||||
## 対応言語
|
||||
|
||||
サポートされている言語のリストについては、[Chromaのドキュメント](https://github.com/alecthomas/chroma#supported-languages)を参照してください。
|
||||
対応言語の一覧については、[Chroma のドキュメント](https://github.com/alecthomas/chroma#supported-languages)を参照してください。
|
@@ -3,8 +3,7 @@ title: "语法高亮"
|
||||
weight: 3
|
||||
---
|
||||
|
||||
Hugo 使用 [Chroma](https://github.com/alecthomas/chroma),这是一个用纯 Go 编写的通用语法高亮器,用于语法高亮。
|
||||
建议在 Markdown 内容中使用反引号来标记代码块。例如:
|
||||
Hugo 使用纯 Go 编写的通用语法高亮工具 [Chroma](https://github.com/alecthomas/chroma) 来实现代码高亮。建议在 Markdown 内容中使用反引号标记代码块,例如:
|
||||
|
||||
<!--more-->
|
||||
|
||||
@@ -15,18 +14,18 @@ def say_hello():
|
||||
```
|
||||
````
|
||||
|
||||
将会渲染为:
|
||||
将渲染为:
|
||||
|
||||
```python
|
||||
def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
|
||||
## 功能
|
||||
## 功能特性
|
||||
|
||||
### 文件名
|
||||
### 文件名标注
|
||||
|
||||
要为代码块添加文件名或标题,请设置 `filename` 属性:
|
||||
通过设置 `filename` 属性可为代码块添加文件名或标题:
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python {filename="hello.py"}
|
||||
@@ -44,9 +43,7 @@ def say_hello():
|
||||
|
||||
{{< new-feature version="v0.9.2" >}}
|
||||
|
||||
你可以使用 `base_url` 属性提供一个基础 URL,它将与文件名结合生成一个链接。
|
||||
|
||||
如果文件名指定了文件在基础路径中的位置,则可以包含相对路径。
|
||||
通过 `base_url` 属性可设置基础 URL,该 URL 会与文件名组合生成可点击的链接。文件名可包含相对路径以指定文件在基础路径中的位置。
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="exampleSite/hugo.work"}
|
||||
@@ -58,9 +55,9 @@ go 1.20
|
||||
go 1.20
|
||||
```
|
||||
|
||||
### 行号
|
||||
### 行号显示
|
||||
|
||||
要设置行号,请将 `linenos` 属性设置为 `table`,并可选地设置 `linenostart` 为起始行号:
|
||||
设置 `linenos=table` 可启用行号,并通过 `linenostart` 指定起始行号:
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python {linenos=table,linenostart=42}
|
||||
@@ -74,9 +71,9 @@ def say_hello():
|
||||
print("Hello!")
|
||||
```
|
||||
|
||||
### 高亮行
|
||||
### 行高亮
|
||||
|
||||
要高亮特定行,请将 `hl_lines` 属性设置为行号列表:
|
||||
通过 `hl_lines` 属性可高亮指定行号(支持数组格式):
|
||||
|
||||
````markdown {filename="Markdown"}
|
||||
```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
|
||||
@@ -98,7 +95,7 @@ def main():
|
||||
|
||||
### 复制按钮
|
||||
|
||||
默认情况下,代码块启用了复制按钮。可以通过修改站点配置文件来更改其行为:
|
||||
代码块默认启用复制功能,可通过站点配置文件修改其行为:
|
||||
|
||||
```yaml {linenos=table,linenostart=42,filename="hugo.yaml"}
|
||||
params:
|
||||
@@ -109,6 +106,6 @@ params:
|
||||
display: hover
|
||||
```
|
||||
|
||||
## 支持的语言
|
||||
## 支持语言
|
||||
|
||||
有关支持的语言列表,请参阅 [Chroma 文档](https://github.com/alecthomas/chroma#supported-languages)。
|
||||
完整支持的语言列表请参阅 [Chroma 文档](https://github.com/alecthomas/chroma#supported-languages)。
|
Reference in New Issue
Block a user