Compare commits

...

10 Commits

Author SHA1 Message Date
Xin
d35a471e7b chore: prepare release 2025-08-14 22:25:49 +08:00
Xin
b9bcf5b470 chore: update fa and ja translations 2025-08-14 22:07:15 +08:00
Xin
24debf9b0c chore: update ja translation 2025-08-14 19:28:16 +08:00
Xin
f79b1d262c chore: update zh-cn translation 2025-08-14 19:07:25 +08:00
Xin
8773081fae 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. 2025-08-14 17:11:37 +08:00
Xin
273e1e3db9 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. 2025-08-14 16:28:36 +08:00
Xin
477b98e151 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. 2025-08-14 14:49:55 +08:00
Xin
d6dd2550b1 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. 2025-08-14 09:32:58 +08:00
Xin
cc6d7e6e94 Update v0.10.md 2025-08-14 01:48:52 +08:00
Xin
7d9d07bfdf docs(blog): prepare for v0.10 release post 2025-08-14 01:43:35 +08:00
85 changed files with 4172 additions and 1545 deletions

View File

@@ -0,0 +1,20 @@
---
title: このサイトについて
toc: false
---
Hextra は、モダンな静的サイトを構築するためのシンプルで高速かつ柔軟なテーマとして設計されています。特にドキュメントサイトの構築に適していますが、ブログやポートフォリオなど様々な種類のサイトにも利用可能です。
Hugo は Jekyll と同様に静的サイトジェネレータですが、単一のバイナリで構成されている点が特徴です。これにより様々なプラットフォームでのインストールと実行が容易で、極めて高速かつ信頼性が高く、数千ページあるサイトでもミリ秒単位でレンダリング可能です。
Hextra は最小限のフットプリントに焦点を当てた思想で構築されています。開始するにあたり、Node.js パッケージなどの追加依存関係は不要で、必要なのは単一の YAML 設定ファイルと Markdown コンテンツのみです。これにより、ツールのセットアップではなく質の高いコンテンツの作成に集中できます。
## クレジット
Hextra は以下のツールとインスピレーションなしには成り立ちません:
- [Hugo](https://gohugo.io/)
- [Tailwind CSS](https://tailwindcss.com/)
- [Heroicons](https://heroicons.com/)
- [Nextra](https://nextra.vercel.app/)
- [Next.js](https://nextjs.org/)

View File

@@ -3,15 +3,15 @@ title: 关于
toc: false toc: false
--- ---
Hextra 是一款简洁、快速灵活的主题适用于构建现代化静态站点。Hextra 特别适用于文档网站,但也可用于构建博客、个人网站等各种类型的网站 Hextra 是一款专为构建现代化静态网站而设计的简洁、快速灵活的主题。它尤其适合搭建文档网站,同时也能轻松驾驭博客、作品集等多种站点类型
Hugo 和 Jekyll 类似,是一静态网站生成器。但与其他生成器不同Hugo 只有单个可执行文件,这使得它可以轻松地在各种平台上安装运行。Hugo 的运行速度非常快且可靠性高,能够在几毫秒渲染数千页的网站。 Jekyll 类似,Hugo 同样是一静态网站生成器。其独特之处在于采用单一二进制文件,可在多平台轻松安装运行。Hugo 以极致的速度与稳定性著称,能在毫秒渲染包含数千页的网站。
Hextra 被设计为轻量级,具有最小化的内存占用。使用 Hextra 无需安装繁杂的依赖,比如 Node.js相反你只需要一个简单的 YAML 配置文件 Markdown 内容。因此,我们可以专注于内容而非配置环境上浪费精力 Hextra 秉持极简理念开发。您无需安装 Node.js 等额外依赖,仅需一个 YAML 配置文件搭配 Markdown 内容即可快速开始。这让我们能专注于创作优质内容而非配置工具链
## ##
Hextra 的设计离不开这些项目的支持和其提供的灵感 Hextra 的诞生离不开以下工具与灵感的启发
- [Hugo](https://gohugo.io/) - [Hugo](https://gohugo.io/)
- [Tailwind CSS](https://tailwindcss.com/) - [Tailwind CSS](https://tailwindcss.com/)

View File

@@ -4,7 +4,7 @@ title: "وبلاگ"
<div style="text-align: center; margin-top: 1em;"> <div style="text-align: center; margin-top: 1em;">
{{< hextra/hero-badge link="index.xml" >}} {{< hextra/hero-badge link="index.xml" >}}
<span>خوراک RSS</span> <span>فید RSS</span>
{{< icon name="rss" attributes="height=14" >}} {{< icon name="rss" attributes="height=14" >}}
{{< /hextra/hero-badge >}} {{< /hextra/hero-badge >}}
</div> </div>

View File

@@ -0,0 +1,10 @@
---
title: "ブログ"
---
<div style="text-align: center; margin-top: 1em;">
{{< hextra/hero-badge link="index.xml" >}}
<span>RSS フィード</span>
{{< icon name="rss" attributes="height=14" >}}
{{< /hextra/hero-badge >}}
</div>

View File

@@ -1,6 +1,6 @@
--- ---
title: راهنمای استفاده سینتکس مارک‌داون title: راهنمای نحو Markdown
date: 2024-03-03 date: 2020-01-01
authors: authors:
- name: imfing - name: imfing
link: https://github.com/imfing link: https://github.com/imfing
@@ -14,123 +14,117 @@ authors:
tags: tags:
- Markdown - Markdown
- مثال - مثال
- راهنمای - راهنما
excludeSearch: true excludeSearch: true
--- ---
این مقاله نمونه‌ای از سینتکس ابتدایی مارک‌داون را آموزش می‌دهد، که می‌توانید در پرونده‌های محتوای Hugo استفاده کنید. این مقاله نمونه‌ای از نحو پایه‌ای Markdown را ارائه می‌دهد که می‌توان در فایل‌های محتوای Hugo استفاده کرد.
<!--more--> <!--more-->
## سینتکس ابتدایی ## نحو پایه
### سرتیترها ### سرتیترها
``` ```
# سرتیتر ۱ # سرتیتر 1
## سرتیتر ۲ ## سرتیتر 2
### سرتیتر ۳ ### سرتیتر 3
#### سرتیتر ۴ #### سرتیتر 4
##### سرتیتر ۵ ##### سرتیتر 5
###### سرتیتر ۶ ###### سرتیتر 6
``` ```
## سرتیتر ۲ ## سرتیتر 2
### سرتیتر ۳ ### سرتیتر 3
#### سرتیتر ۴ #### سرتیتر 4
##### سرتیتر ۵ ##### سرتیتر 5
###### سرتیتر ۶ ###### سرتیتر 6
### تاکید ### تأکید
```text ```text
*این متن کج خواهد بود* *این متن به صورت ایتالیک نمایش داده می‌شود*
_این متن هم کج خواهد بود_ _این نیز به صورت ایتالیک نمایش داده می‌شود_
**این متن توپر خواهد بود** **این متن به صورت پررنگ نمایش داده می‌شود**
__این متن هم توپر خواهد بود__ __این نیز به صورت پررنگ نمایش داده می‌شود__
_شما **می‌توانید** آنها را ترکیب کنید_ _شما می‌توانید **آنها را ترکیب** کنید_
``` ```
*این متن کج خواهد بود* *این متن به صورت ایتالیک نمایش داده می‌شود*
_این متن هم کج خواهد بود_ _این نیز به صورت ایتالیک نمایش داده می‌شود_
**این متن توپر خواهد بود** **این متن به صورت پررنگ نمایش داده می‌شود**
__این متن هم توپر خواهد بود__ __این نیز به صورت پررنگ نمایش داده می‌شود__
_شما **می‌توانید** آنها را ترکیب کنید_ _شما می‌توانید **آنها را ترکیب** کنید_
### فهرست‌ها ### فهرست‌ها
#### مرتب نشده #### بدون ترتیب
``` ```
* مورد ۱ * مورد ۱
* مورد ۲ * مورد ۲
* مورد ۱الف * مورد ۲الف
* مورد ۲ب * مورد ۲ب
``` ```
* مورد ۱ * مورد ۱
* مورد ۲ * مورد ۲
* مورد ۱الف * مورد ۲الف
* مورد ۲ب * مورد ۲ب
#### مرتب شده #### با ترتیب
``` ```
1. مورد ۱ ۱. مورد ۱
2. مورد ۲ ۲. مورد ۲
3. مورد ۳ ۳. مورد ۳
1. مورد ۳الف ۱. مورد ۳الف
2. مورد ۳ب ۲. مورد ۳ب
``` ```
1. مورد ۱ ### تصاویر
2. مورد ۲
3. مورد ۳
1. مورد ۳الف
2. مورد ۳ب
### عکس‌ها
```markdown ```markdown
![آرم گیت‌هاب](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png) ![لوگوی GitHub](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)
``` ```
![آرم گیت‌هاب](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png) ![لوگوی GitHub](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)
### پیوندها ### پیوندها
```markdown ```markdown
[هیوگو](https://gohugo.io) [Hugo](https://gohugo.io)
``` ```
[هیوگو](https://gohugo.io) [Hugo](https://gohugo.io)
### بلوک نقل‌قول ### نقل‌قولها
```markdown ```markdown
همانطور که نیوتن گفت: همانطور که نیوتن گفت:
> اگر فاصله دورتری را دیده‌ام با ایستادن بر شانه‌های غول‌ها بوده است. > اگر من دورتر را دیده‌ام، به این دلیل است که بر شانه‌های غول‌ها ایستاده‌ام.
``` ```
> اگر فاصله دورتری را دیده‌ام با ایستادن بر شانه‌های غول‌ها بوده است. > اگر من دورتر را دیده‌ام، به این دلیل است که بر شانه‌های غول‌ها ایستاده‌ام.
### کد درون‌خطی ### کد درون‌خطی
```markdown ```markdown
`کد` درون‌خطی دارای `بک‌-تیک در اطراف` خود است. کد `درون‌خطی` با `علامت back-tick` احاطه شده است.
``` ```
`کد` درون‌خطی دارای `بک‌-تیک در اطراف` خود است. کد `درون‌خطی` با `علامت back-tick` احاطه شده است.
### بلوک‌های کد ### بلوک‌های کد
#### برجسته‌کردن سینتکس(Syntax) #### هایلایت سینتکس
````markdown ````markdown
```go ```go
@@ -146,21 +140,21 @@ func main() {
} }
``` ```
### جدولها ### جداول
```markdown ```markdown
| عنوان | توضیحات | | سینتکس | توضیحات |
| --------- | ----------- | | --------- | ----------- |
| سرتیتر | عنوان | | هدر | عنوان |
| پاراگراف | متن | | پاراگراف | متن |
``` ```
| عنوان | توضیحات | | سینتکس | توضیحات |
| --------- | ----------- | | --------- | ----------- |
| سرتیتر | عنوان | | هدر | عنوان |
| پاراگراف | متن | | پاراگراف | متن |
## منابع ## منابع
- [سینتکس مارک‌داون](https://www.markdownguide.org/basic-syntax/) - [نحو Markdown](https://www.markdownguide.org/basic-syntax/)
- [مارک‌داون هیوگو](https://gohugo.io/content-management/formats/#markdown) - [Markdown در Hugo](https://gohugo.io/content-management/formats/#markdown)

View File

@@ -0,0 +1,157 @@
---
title: Markdown 構文ガイド
date: 2020-01-01
authors:
- name: imfing
link: https://github.com/imfing
image: https://github.com/imfing.png
- name: Octocat
link: https://github.com/octocat
image: https://github.com/octocat.png
tags:
- Markdown
- サンプル
- ガイド
excludeSearch: true
---
この記事では、Hugo のコンテンツファイルで使用できる基本的な Markdown 構文のサンプルを紹介します。
<!--more-->
## 基本構文
### 見出し
```
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
```
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
### 強調
```text
*このテキストは斜体になります*
_これも斜体になります_
**このテキストは太字になります**
__これも太字になります__
_これらを**組み合わせる**こともできます_
```
*このテキストは斜体になります*
_これも斜体になります_
**このテキストは太字になります**
__これも太字になります__
_これらを**組み合わせる**こともできます_
### リスト
#### 順序なしリスト
```
* 項目1
* 項目2
* 項目2a
* 項目2b
```
* 項目1
* 項目2
* 項目2a
* 項目2b
#### 順序付きリスト
```
1. 項目1
2. 項目2
3. 項目3
1. 項目3a
2. 項目3b
```
### 画像
```markdown
![GitHub ロゴ](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)
```
![GitHub ロゴ](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png)
### リンク
```markdown
[Hugo](https://gohugo.io)
```
[Hugo](https://gohugo.io)
### ブロッククォート
```markdown
ニュートンはこう言いました:
> 私が遠くを見渡せたとしたら、それは巨人の肩の上に立っていたからです。
```
> 私が遠くを見渡せたとしたら、それは巨人の肩の上に立っていたからです。
### インラインコード
```markdown
インライン `コード``バッククォートで囲みます`
```
インライン `コード``バッククォートで囲みます`
### コードブロック
#### シンタックスハイライト
````markdown
```go
func main() {
fmt.Println("Hello World")
}
```
````
```go
func main() {
fmt.Println("Hello World")
}
```
### テーブル
```markdown
| 構文 | 説明 |
| --------- | ----------- |
| 見出し | タイトル |
| 段落 | テキスト |
```
| 構文 | 説明 |
| --------- | ----------- |
| 見出し | タイトル |
| 段落 | テキスト |
## 参考資料
- [Markdown 構文](https://www.markdownguide.org/basic-syntax/)
- [Hugo Markdown](https://gohugo.io/content-management/formats/#markdown)

View File

@@ -2,8 +2,12 @@
title: Markdown 语法指南 title: Markdown 语法指南
date: 2020-01-01 date: 2020-01-01
authors: authors:
- name: John Doe - name: imfing
link: https://example.com/johndoe link: https://github.com/imfing
image: https://github.com/imfing.png
- name: Octocat
link: https://github.com/octocat
image: https://github.com/octocat.png
tags: tags:
- Markdown - Markdown
- 示例 - 示例
@@ -11,8 +15,7 @@ tags:
excludeSearch: true excludeSearch: true
--- ---
这篇文章提供了一些基础 Markdown 语法样例,这些可以在 Hugo 的内容文件中使用 本文展示了 Hugo 内容文件中可用的基础 Markdown 语法示例
<!--more--> <!--more-->
## 基础语法 ## 基础语法
@@ -34,40 +37,53 @@ excludeSearch: true
##### 五级标题 ##### 五级标题
###### 六级标题 ###### 六级标题
### 强调
```text ```text
*这段文字将是斜体* *这段文字会显示为斜体*
_这也将是斜体_ _这段文字也会显示为斜体_
**这段文字将是粗体** **这段文字会显示为粗体**
__这也将是粗体__ __这段文字也会显示为粗体__
_你 **可以** 组合它们_ _你可以**组合**使用_
``` ```
*这段文字将是斜体* *这段文字会显示为斜体*
_这也将是斜体_
**这段文字将是粗体** _这段文字也会显示为斜体_
__这也将是粗体__
_你 **可以** 组合它们_ **这段文字会显示为粗体**
__这段文字也会显示为粗体__
_你可以**组合**使用_
### 列表 ### 列表
#### 无序列表 #### 无序列表
* 项目 1 ```
* 项目 2 * 项目1
* 项目 2a * 项目2
* 项目 2b * 子项目2a
* 子项目2b
```
* 项目1
* 项目2
* 子项目2a
* 子项目2b
#### 有序列表 #### 有序列表
1. 项目 1 ```
2. 项目 2 1. 项目1
3. 项目 3 2. 项目2
1. 项目 3a 3. 项目3
2. 项目 3b 1. 子项目3a
2. 子项目3b
```
### 图片 ### 图片
@@ -85,23 +101,23 @@ _你 **可以** 组合它们_
[Hugo](https://gohugo.io) [Hugo](https://gohugo.io)
### 引用 ### 引用
```markdown ```markdown
牛顿说: 正如牛顿说:
> 如果我看得更远,那是因为我站在巨人的肩膀上。 > 如果我看得比别人更远,那是因为我站在巨人的肩膀上。
``` ```
> 如果我看得更远,那是因为我站在巨人的肩膀上。 > 如果我看得比别人更远,那是因为我站在巨人的肩膀上。
### 行内代码 ### 行内代码
```markdown ```markdown
行内 `代码``反引号` 包围 行内`代码`会用`反引号包裹`起来
``` ```
行内 `代码``反引号` 包围 行内`代码`会用`反引号包裹`起来
### 代码块 ### 代码块
@@ -124,18 +140,18 @@ func main() {
### 表格 ### 表格
```markdown ```markdown
| Syntax | Description | | 语法 | 描述 |
| --------- | ----------- | | --------- | ----------- |
| Header | Title | | 标题 | 标题文本 |
| Paragraph | Text | | 段落 | 正文内容 |
``` ```
| Syntax | Description | | 语法 | 描述 |
| --------- | ----------- | | --------- | ----------- |
| Header | Title | | 标题 | 标题文本 |
| Paragraph | Text | | 段落 | 正文内容 |
## 参考 ## 参考资料
- [Markdown Syntax](https://www.markdownguide.org/basic-syntax/) - [Markdown 语法](https://www.markdownguide.org/basic-syntax/)
- [Hugo Markdown](https://gohugo.io/content-management/formats/#markdown) - [Hugo Markdown](https://gohugo.io/content-management/formats/#markdown)

View File

@@ -0,0 +1,247 @@
---
title: "Hextra v0.10"
date: 2025-08-14
authors:
- name: imfing
link: https://github.com/imfing
image: https://github.com/imfing.png
tags:
- انتشار
---
Hextra v0.10.0 یک انتشار بزرگ است که مملو از قابلیت‌های جدید، ارتقاهای معماری و بهبودهای کیفیت زندگی می‌باشد.
<!--more-->
همچنین شامل مشارکت‌های 10 [مشارکت‌کننده جدید](#contributors) بوده و درخواست‌های دیرینه جامعه را برطرف می‌کند.
## راهنمای ارتقا
> [!IMPORTANT]
> **تغییرات شکست‌آمیز**: این انتشار شامل چندین تغییر شکست‌آمیز است. لطفاً قبل از ارتقا، چک‌لیست و [راهنمای مهاجرت](#migration-guide) را بررسی کنید.
قبل از ارتقا به v0.10.0، مطمئن شوید که:
- Hugo v0.146.0+ (نسخه extended) نصب شده است
- CSS سفارشی را برای تغییرات نام کلاس بررسی کرده‌اید (به [تغییرات پیشوند کلاس‌های CSS](#css-class-prefix-changes) و [Tailwind CSS v4](#tailwind-css-v4) مراجعه کنید)
- تأیید کرده‌اید که محیط ساخت دسترسی به اینترنت برای دانلود دارایی‌ها هنگام استفاده از LaTeX و/یا Mermaid دارد
پس از آماده‌سازی، ماژول Hugo را به‌روزرسانی کنید:
```bash
hugo mod get -u github.com/imfing/hextra@v0.10.0
```
## ویژگی‌های جدید
در زیر لیستی از ویژگی‌های جدید قابل توجه در این انتشار آمده است:
- [**پشتیبانی از منوی کشویی در نوار ناوبری**](#dropdown-menu-support-in-navbar): ایجاد منوهای ناوبری سلسله‌مراتبی
- [**تجربه جستجوی بهبودیافته**](#enhanced-search-experience): جستجوی بهبودیافته در تمام سرتیترها با دقت بهتر
- [**پشتیبانی از llms.txt**](#llmstxt-support): تولید خلاصه سایت مناسب برای هوش مصنوعی
- [**هایلایت کردن اسکرول فهرست مطالب**](#table-of-contents-scroll-highlighting): هایلایت کردن خودکار سرتیترها هنگام اسکرول صفحه
- [**تبدیل همگام تب‌ها**](#synchronized-tab-switching): همگام‌سازی انتخاب تب‌ها در چندین گروه تب
- [**صفحه‌بندی لیست وبلاگ**](#blog-list-pagination): اضافه کردن کنترل‌های صفحه‌بندی به صفحات لیست وبلاگ
- [**پشتیبانی از MathJax**](#mathjax-support): موتور رندر ریاضی جایگزین در کنار KaTeX
### پشتیبانی از منوی کشویی در نوار ناوبری
منوهای کشویی را در نوار ناوبری خود برای سازماندهی بهتر موارد ناوبری ایجاد کنید.
```yaml {filename="hugo.yaml"}
menu:
main:
- identifier: products
name: "محصولات"
- name: "محصول الف"
parent: products
url: "/product-a"
- name: "محصول ب"
parent: products
url: "/product-b"
```
![ناوبری منوی کشویی](https://github.com/user-attachments/assets/1816f9b9-7fe3-46e8-9546-f15e43e9914a)
### تجربه جستجوی بهبودیافته
- **جستجو در تمام سرتیترها**: یافتن محتوا در تمام سطوح سرتیترها، نه فقط عنوان صفحات
- **دقت بهتر نتایج**: مدیریت بهتر عنوان‌ها و دقت پیونددهی
- **ناوبری ثابت نتایج**: نتایج جستجو اکنون به بخش‌های صحیح صفحه پیوند می‌خورند
با تشکر ویژه از [@ldez](https://github.com/ldez) برای پیشبرد قابلیت‌های جستجو!
![نتایج جستجوی بهبودیافته](https://github.com/user-attachments/assets/f819652a-95d4-4843-b7e2-c7953a8cabe8)
### پشتیبانی از llms.txt
Hextra اکنون از فرمت خروجی [llms.txt](https://llmstxt.org/) برای سایت شما پشتیبانی می‌کند، که سایت شما را برای ابزارهای هوش مصنوعی و مدل‌های زبانی برای زمینه و مرجع قابل دسترس‌تر می‌سازد.
```yaml {filename="hugo.yaml"}
outputs:
home: [html, llms]
```
این یک فایل `llms.txt` در ریشه سایت شما ایجاد می‌کند.
![مثال llms txt](https://github.com/user-attachments/assets/c6e929bb-0fce-4ab2-af15-a71c5a38b22c)
### هایلایت کردن اسکرول فهرست مطالب
فهرست مطالب اکنون به‌طور خودکار بخش فعلی را هنگام اسکرول صفحه هایلایت می‌کند، که ناوبری را شهودی‌تر می‌سازد.
![هایلایت اسکرول ToC](https://github.com/user-attachments/assets/d623fb99-7000-428b-af95-384eb722f0eb)
### تبدیل همگام تب‌ها
تب‌هایی با موارد یکسان اکنون در سراسر صفحه همگام می‌شوند. هنگامی که همگام‌سازی فعال است، انتخاب یک تب تمام گروه‌های تب که لیست موارد یکسانی دارند را به‌روزرسانی می‌کند (و انتخاب شما به خاطر سپرده می‌شود).
```yaml {filename="hugo.yaml"}
params:
page:
tabs:
sync: true
```
### صفحه‌بندی لیست وبلاگ
کنترل‌های صفحه‌بندی پایه به صفحات لیست وبلاگ اضافه شده‌اند.
```yaml {filename="hugo.yaml"}
params:
blog:
list:
pagerSize: 20 # پست‌ها در هر صفحه
```
![صفحه‌بندی وبلاگ](https://github.com/user-attachments/assets/60405fb4-ec36-4733-ba13-b4066396b5c5)
### پشتیبانی از MathJax
عبارات ریاضی را با [MathJax](https://www.mathjax.org/) در کنار پشتیبانی پیش‌فرض KaTeX رندر کنید. موتوری را انتخاب کنید که بهترین تناسب را با نیازهای شما دارد.
```yaml {filename="hugo.yaml"}
params:
math:
engine: "mathjax" # پیش‌فرض "katex" است
```
## بهبودهای فنی
### چارچوب و سیستم ساخت
- **مهاجرت به Tailwind CSS v4**: مهاجرت کامل به [Tailwind CSS v4](https://tailwindcss.com/blog/tailwindcss-v4) با پشتیبانی بهبودیافته سفارشی‌سازی.
- **سیستم قالب Hugo**: سازگار با [سیستم قالب جدید Hugo](https://gohugo.io/templates/new-templatesystem-overview/) (v0.146.0+) برای سازگاری آینده.
- **رندر سمت سرور ریاضی**: مدیریت بهتر رندر معادلات ریاضی با استفاده از رندر بومی Hugo به‌صورت پیش‌فرض.
- **ارتقای FlexSearch 0.8**: ارتقای موتور جستجو [FlexSearch](https://github.com/nextapps-de/flexsearch) برای نتایج سریع‌تر و دقیق‌تر با رمزگذاری بهبودیافته محتوای CJK (چینی، ژاپنی، کرهای).
- **مدیریت بهبودیافته دارایی‌ها**: دارایی‌های KaTeX و Mermaid از بارگیری از CDN یا محلی پشتیبانی می‌کنند
## بهبودهای کیفیت زندگی
- **تغییر دینامیک favicon**: به‌روزرسانی خودکار favicon بر اساس ترجیحات طرح رنگ
- **صفحه‌بندی معکوس**: نویسندگان اکنون می‌توانند `reversePagination` را در front matter صفحه تنظیم کنند
- **کنترل نمایه‌سازی گوگل**: پارامتر صفحه جدید برای مسدود کردن نمایه‌سازی گوگل در صورت نیاز
- **بهبودهای مدیریت عرض**: کنترل‌های طراحی پاسخگو بهتر از طریق متغیرهای CSS
- **بهبودهای استایل**: استایل‌های مدرن برای جدول Markdown و خط افقی
## رفع اشکالات و پایداری
- **همگام‌سازی تم Giscus**: نظرات اکنون به درستی تغییرات حالت تاریک/روشن را دنبال می‌کنند
- **دقت نتایج جستجو**: رفع مشکلات پیونددهی و فرار عنوان در نتایج جستجو
- **تبدیل تب‌ها**: رفع مشکلات ناوبری در حالت غیرهمگام تب
- **اسکرول فانتوم**: رفع رفتار ناخواسته اسکرول هنگام غیرفعال بودن پاورقی
- **دسترسی تصویر**: جلوگیری از رندر تکراری متن alt
- **رندر پیوند**: بهبود مدیریت URL پایه برای ساختارهای پیچیده سایت
---
## راهنمای مهاجرت
- [**نیازمندی‌های نسخه Hugo**](#hugo-version-requirements): نیاز به Hugo v0.146.0+ (نسخه extended) دارد
- [**تغییرات پیشوند کلاس‌های CSS**](#css-class-prefix-changes): کلاس‌های CSS کامپوننت اکنون از پیشوند سازگار `hextra-` استفاده می‌کنند
- [**مدیریت دارایی‌ها**](#asset-management-for-katex-and-mermaid): دارایی‌های KaTeX و Mermaid اکنون در زمان ساخت دانلود می‌شوند
- [**Tailwind CSS v4**](#tailwind-css-v4): کامپایل CSS داخلی اکنون از Tailwind CSS v4.x با پیشوند `hx:` استفاده می‌کند
#### نیازمندی‌های نسخه Hugo
**تأثیر**: سایت‌هایی که از نسخه‌های قدیمی Hugo استفاده می‌کنند
Hextra v0.10.0 به دلیل پذیرش سیستم قالب جدید، نیاز به Hugo v0.146.0 یا بالاتر (نسخه extended) دارد.
**اقدام مورد نیاز**: قبل از ارتقای Hextra، Hugo را به v0.146.0+ به‌روزرسانی کنید
#### تغییرات پیشوند کلاس‌های CSS
**تأثیر**: سایت‌هایی با CSS سفارشی که کلاس‌های کامپوننت Hextra را هدف قرار می‌دهند
Hextra v0.10.0 پیشوند سازگار `hextra-` را برای اکثر کلاس‌های CSS کامپوننت معرفی می‌کند تا قابلیت نگهداری را بهبود بخشد و از تداخل با استایل‌های کاربر جلوگیری کند.
**اقدام مورد نیاز**: اگر CSS سفارشی دارید که کامپوننت‌های Hextra را هدف قرار می‌دهد، نام کلاس‌های زیر را به‌روزرسانی کنید:
| حوزه | قبل | بعد |
| -------------------- | ---------------------------- | ------------------------------------------------- |
| جستجو (ظرف) | `.search-wrapper` | `.hextra-search-wrapper` |
| جستجو (ورودی) | `.search-input` | `.hextra-search-input` |
| جستجو (نتایج) | `.search-results` | `.hextra-search-results` |
| جستجو (عنوان) | `.search-wrapper .title` | `.hextra-search-wrapper .hextra-search-title` |
| جستجو (مورد فعال) | `.search-wrapper .active` | `.hextra-search-wrapper .hextra-search-active` |
| جستجو (بدون نتیجه) | `.search-wrapper .no-result` | `.hextra-search-wrapper .hextra-search-no-result` |
| جستجو (پیشوند) | `.search-wrapper .prefix` | `.hextra-search-wrapper .hextra-search-prefix` |
| جستجو (گزیده) | `.search-wrapper .excerpt` | `.hextra-search-wrapper .hextra-search-excerpt` |
| جستجو (مطابقت) | `.search-wrapper .match` | `.hextra-search-wrapper .hextra-search-match` |
| تارنما محو | `.nav-container-blur` | `.hextra-nav-container-blur` |
| منوی همبرگر | `.hamburger-menu` | `.hextra-hamburger-menu` |
| تغییر تم | `.theme-toggle` | `.hextra-theme-toggle` |
| تغییر زبان | `.language-switcher` | `.hextra-language-switcher` |
| ظرف نوار کناری | `.sidebar-container` | `.hextra-sidebar-container` |
| مورد فعال نوار کناری | `.sidebar-active-item` | `.hextra-sidebar-active-item` |
| نام فایل کد | `.filename` | `.hextra-code-filename` |
| آیکون کپی | `.copy-icon` | `.hextra-copy-icon` |
| آیکون موفقیت | `.success-icon` | `.hextra-success-icon` |
| مراحل | `.steps` | `.hextra-steps` |
#### مدیریت دارایی‌ها برای KaTeX و Mermaid
**تأثیر**: سایت‌هایی که از KaTeX یا Mermaid استفاده می‌کنند
Hextra v0.10.0 اکنون دارایی‌های KaTeX و Mermaid را از CDN در زمان ساخت دانلود می‌کند.
**چه چیزی تغییر کرده است:**
- فرآیند ساخت اکنون نیاز به دسترسی به اینترنت برای دانلود این دارایی‌ها دارد
- دیگر پس از ساخت، فراخوانی CDN خارجی برای این دارایی‌ها وجود ندارد
**اقدام مورد نیاز**:
- مطمئن شوید که محیط ساخت شما دسترسی به اینترنت برای دانلود دارایی‌ها دارد
- سایت‌های در محیط‌های ایزوله ممکن است نیاز به پیش‌دانلود این دارایی‌ها و پیکربندی Hextra برای بارگیری آنها داشته باشند
#### Tailwind CSS v4
**تأثیر**: سایت‌هایی با CSS سفارشی گسترده که کلاس‌های Tailwind Hextra `hx-*` را هدف قرار می‌دهند
در حالی که Hextra مهاجرت Tailwind CSS v4 را به صورت داخلی مدیریت می‌کند، سایت‌هایی با سفارشی‌سازی‌های سنگین ممکن است نیاز به تنظیمات بیشتری داشته باشند.
**چه چیزی تغییر کرده است:**
- کامپایل CSS داخلی اکنون از Tailwind CSS v4.x استفاده می‌کند
- کلاس‌های ابزار اکنون با پیشوند `hx:` به جای `hx-` هستند
## مشارکت‌کنندگان
این انتشار با مشارکت‌های 10 مشارکت‌کننده جدید ممکن شد:
- [@oosquare](https://github.com/oosquare) - فونت‌های KaTeX، قلاب‌های رندر تصویر، بهبودهای مدیریت پیوند
- [@Zabriskije](https://github.com/Zabriskije) - رفع اسکرول فانتوم
- [@miniwater](https://github.com/miniwater) - مرکزسازی پاورقی سفارشی، بهبودهای متن alt تصویر
- [@MattDodsonEnglish](https://github.com/MattDodsonEnglish) - کنترل‌های نمایه‌سازی گوگل، مستندات OpenGraph
- [@KStocky](https://github.com/KStocky) - ویژگی صفحه‌بندی معکوس
- [@PrintN](https://github.com/PrintN) - اضافه شدن نمایش مستندات
- [@hobobandy](https://github.com/hobobandy) - بهبودهای فاصله عنوان
- [@dlwocks31](https://github.com/dlwocks31) - به‌روزرسانی ترجمه کرهای
- [@TwoAnts](https://github.com/TwoAnts) - رفع تغییر تم Giscus
- [@ldez](https://github.com/ldez) - بهبودهای جستجو و رفع اشکالات
با تشکر ویژه از مشارکت‌کنندگان بازگشتی [@deining](https://github.com/deining) و [@yuri1969](https://github.com/yuri1969) برای حمایت مستمرشان در مستندات، ترجمه‌ها و بهبودهای فنی.
**تغییرات کامل**: https://github.com/imfing/hextra/compare/v0.9.7...v0.10.0

View File

@@ -0,0 +1,247 @@
---
title: "Hextra v0.10"
date: 2025-08-14
authors:
- name: imfing
link: https://github.com/imfing
image: https://github.com/imfing.png
tags:
- Release
---
Hextra v0.10.0 は、新機能、アーキテクチャの刷新、利便性向上を詰め込んだ大きなリリースです。
<!--more-->
また、10名の[新規コントリビューター](#contributors)からの貢献と、長らく要望のあった機能の実装も含まれています。
## アップグレードガイド
> [!IMPORTANT]
> **破壊的変更**: このリリースにはいくつかの破壊的変更が含まれています。アップグレード前にチェックリストと[移行ガイド](#migration-guide)を確認してください。
v0.10.0 にアップグレードする前に、以下を確認してください:
- Hugo v0.146.0+ (extended 版) がインストールされていること
- カスタムCSSのクラス名変更を確認 ( [CSSクラスプレフィックス変更](#css-class-prefix-changes) と [Tailwind CSS v4](#tailwind-css-v4) を参照)
- LaTeX や Mermaid を使用する場合、ビルド環境がアセットダウンロードのためインターネットに接続できること
準備が整ったら、Hugoモジュールを更新します:
```bash
hugo mod get -u github.com/imfing/hextra@v0.10.0
```
## 新機能
このリリースの主な新機能は以下の通りです:
- [**ナビゲーションバーのドロップダウンメニューサポート**](#dropdown-menu-support-in-navbar): 階層型ナビゲーションメニューの作成
- [**検索機能の強化**](#enhanced-search-experience): すべての見出しを対象にした精度向上した検索
- [**llms.txt サポート**](#llmstxt-support): AI向けサイトアウトラインの生成
- [**目次のスクロールハイライト**](#table-of-contents-scroll-highlighting): ページスクロール中の見出し自動ハイライト
- [**タブの同期切り替え**](#synchronized-tab-switching): 複数のタブグループ間でのタブ選択の同期
- [**ブログ一覧のページネーション**](#blog-list-pagination): ブログ一覧ページへのページネーションコントロール追加
- [**MathJax サポート**](#mathjax-support): KaTeXに加えてMathJaxを数式レンダリングエンジンとして選択可能
### ナビゲーションバーのドロップダウンメニューサポート
ナビゲーションバーにドロップダウンメニューを作成し、ナビゲーション項目を整理できます。
```yaml {filename="hugo.yaml"}
menu:
main:
- identifier: products
name: "製品"
- name: "製品A"
parent: products
url: "/product-a"
- name: "製品B"
parent: products
url: "/product-b"
```
![ドロップダウンメニューナビゲーション](https://github.com/user-attachments/assets/1816f9b9-7fe3-46e8-9546-f15e43e9914a)
### 検索機能の強化
- **すべての見出しを検索**: ページタイトルだけでなく、すべてのレベルの見出しからコンテンツを検索
- **検索結果の精度向上**: タイトル処理とリンク精度の改善
- **結果ナビゲーションの修正**: 検索結果が正しいページセクションにリンクするようになりました
検索機能の強化に貢献してくださった [@ldez](https://github.com/ldez) に感謝します!
![強化された検索結果](https://github.com/user-attachments/assets/f819652a-95d4-4843-b7e2-c7953a8cabe8)
### llms.txt サポート
Hextra はサイトの [llms.txt](https://llmstxt.org/) 出力形式をサポートし、AIツールや言語モデルがコンテキストや参照のためにサイトをよりアクセスしやすくします。
```yaml {filename="hugo.yaml"}
outputs:
home: [html, llms]
```
これにより、サイトのルートに `llms.txt` ファイルが生成されます。
![llms txtの例](https://github.com/user-attachments/assets/c6e929bb-0fce-4ab2-af15-a71c5a38b22c)
### 目次のスクロールハイライト
ページをスクロールする際に、目次が現在のセクションを自動的にハイライトするようになり、ナビゲーションがより直感的になりました。
![目次のスクロールハイライト](https://github.com/user-attachments/assets/d623fb99-7000-428b-af95-384eb722f0eb)
### タブの同期切り替え
同じ項目を持つタブはページ全体で同期されるようになりました。同期が有効な場合、タブを選択すると同じ項目リストを共有するすべてのタブグループが更新されます(選択内容は記憶されます)。
```yaml {filename="hugo.yaml"}
params:
page:
tabs:
sync: true
```
### ブログ一覧のページネーション
ブログ一覧ページに基本的なページネーションコントロールが追加されました。
```yaml {filename="hugo.yaml"}
params:
blog:
list:
pagerSize: 20 # 1ページあたりの投稿数
```
![ブログページネーション](https://github.com/user-attachments/assets/60405fb4-ec36-4733-ba13-b4066396b5c5)
### MathJax サポート
デフォルトのKaTeXサポートに加えて、[MathJax](https://www.mathjax.org/) で数式をレンダリングできるようになりました。ニーズに合ったエンジンを選択できます。
```yaml {filename="hugo.yaml"}
params:
math:
engine: "mathjax" # デフォルトは "katex"
```
## 技術的改善
### フレームワークとビルドシステム
- **Tailwind CSS v4 移行**: [Tailwind CSS v4](https://tailwindcss.com/blog/tailwindcss-v4) への完全移行とカスタマイズサポートの改善
- **Hugoテンプレートシステム**: Hugoの[新しいテンプレートシステム](https://gohugo.io/templates/new-templatesystem-overview/) (v0.146.0+) への対応
- **数式のサーバーサイドレンダリング**: Hugoネイティブレンダリングを使用した数式レンダリングの改善
- **FlexSearch 0.8 アップグレード**: 検索エンジン [FlexSearch](https://github.com/nextapps-de/flexsearch) のアップグレードにより、CJK (中国語、日本語、韓国語) コンテンツのエンコーディング改善と高速化・精度向上
- **アセット管理の強化**: KaTeXとMermaidアセットのCDNまたはローカルからの読み込みサポート
## 利便性の向上
- **動的ファビコン切り替え**: カラースキーム設定に基づくファビコンの自動更新
- **逆順ページネーション**: ページフロントマターで `reversePagination` を設定可能に
- **Googleインデックス制御**: Googleのインデックスをブロックする新しいページパラメータ
- **幅の処理改善**: CSS変数によるレスポンシブデザイン制御の強化
- **スタイリング改善**: Markdownテーブルと水平線のモダンなスタイル
## バグ修正と安定性
- **Giscusテーマ同期**: コメントがダーク/ライトモードの切り替えに正しく追従
- **検索結果の精度**: 検索結果のリンク問題とタイトルエスケープの修正
- **タブ切り替え**: 非同期タブモードでのナビゲーション問題の解決
- **ファントムスクロール**: フッター無効時の不要なスクロール動作の修正
- **画像アクセシビリティ**: 重複したaltテキストレンダリングの防止
- **リンクレンダリング**: 複雑なサイト構造におけるベースURL処理の改善
---
## 移行ガイド
- [**Hugoバージョン要件**](#hugo-version-requirements): Hugo v0.146.0+ (extended版) が必要
- [**CSSクラスプレフィックス変更**](#css-class-prefix-changes): コンポーネントCSSクラスに一貫した `hextra-` プレフィックスを採用
- [**アセット管理**](#asset-management-for-katex-and-mermaid): KaTeXとMermaidアセットはビルド時にダウンロード
- [**Tailwind CSS v4**](#tailwind-css-v4): 内部CSSコンパイルにTailwind CSS v4.xを採用し `hx:` プレフィックスを使用
#### Hugoバージョン要件
**影響**: 古いHugoバージョンで動作しているサイト
Hextra v0.10.0 は新しいテンプレートシステムを採用しているため、Hugo v0.146.0以降 (extended版) が必要です。
**必要な対応**: Hextraをアップグレードする前にHugoをv0.146.0+に更新
#### CSSクラスプレフィックス変更
**影響**: HextraコンポーネントクラスをターゲットにしたカスタムCSSがあるサイト
Hextra v0.10.0 では、メンテナンス性向上とユーザースタイルとの衝突防止のため、ほとんどのコンポーネントCSSクラスに一貫した `hextra-` プレフィックスを導入しました。
**必要な対応**: HextraコンポーネントをターゲットにしたカスタムCSSがある場合、以下のクラス名を更新してください:
| 領域 | 変更前 | 変更後 |
| -------------------- | ---------------------------- | ------------------------------------------------- |
| 検索 (コンテナ) | `.search-wrapper` | `.hextra-search-wrapper` |
| 検索 (入力) | `.search-input` | `.hextra-search-input` |
| 検索 (結果) | `.search-results` | `.hextra-search-results` |
| 検索 (タイトル) | `.search-wrapper .title` | `.hextra-search-wrapper .hextra-search-title` |
| 検索 (アクティブ項目)| `.search-wrapper .active` | `.hextra-search-wrapper .hextra-search-active` |
| 検索 (結果なし) | `.search-wrapper .no-result` | `.hextra-search-wrapper .hextra-search-no-result` |
| 検索 (プレフィックス)| `.search-wrapper .prefix` | `.hextra-search-wrapper .hextra-search-prefix` |
| 検索 (抜粋) | `.search-wrapper .excerpt` | `.hextra-search-wrapper .hextra-search-excerpt` |
| 検索 (マッチ) | `.search-wrapper .match` | `.hextra-search-wrapper .hextra-search-match` |
| ナビバーブラー | `.nav-container-blur` | `.hextra-nav-container-blur` |
| ハンバーガーメニュー | `.hamburger-menu` | `.hextra-hamburger-menu` |
| テーマトグル | `.theme-toggle` | `.hextra-theme-toggle` |
| 言語スイッチャー | `.language-switcher` | `.hextra-language-switcher` |
| サイドバーコンテナ | `.sidebar-container` | `.hextra-sidebar-container` |
| サイドバーアクティブ項目 | `.sidebar-active-item` | `.hextra-sidebar-active-item` |
| コードファイル名 | `.filename` | `.hextra-code-filename` |
| コピーアイコン | `.copy-icon` | `.hextra-copy-icon` |
| 成功アイコン | `.success-icon` | `.hextra-success-icon` |
| ステップ | `.steps` | `.hextra-steps` |
#### KaTeXとMermaidのアセット管理
**影響**: KaTeXまたはMermaidを使用しているサイト
Hextra v0.10.0 では、KaTeXとMermaidアセットをビルド時にCDNからダウンロードするようになりました。
**変更点:**
- これらのアセットをダウンロードするため、ビルドプロセスでインターネットアクセスが必要
- ビルド後はこれらのアセットに対する外部CDN呼び出しが不要
**必要な対応**:
- アセットをダウンロードするため、ビルド環境がインターネットに接続できることを確認
- エアギャップ環境のサイトでは、これらのアセットを事前にダウンロードし、Hextraがそれらを読み込むように設定する必要がある場合があります
#### Tailwind CSS v4
**影響**: HextraのTailwindクラス `hx-*` を広範囲にカスタマイズしているサイト
HextraはTailwind CSS v4移行を内部で処理しますが、高度にカスタマイズされたサイトでは追加の調整が必要な場合があります。
**変更点:**
- 内部CSSコンパイルにTailwind CSS v4.xを使用
- ユーティリティクラスのプレフィックスが `hx-` から `hx:` に変更
## コントリビューター
このリリースは、10名の新規コントリビューターの貢献によって実現されました:
- [@oosquare](https://github.com/oosquare) - KaTeXフォント、画像レンダーフック、リンク処理の改善
- [@Zabriskije](https://github.com/Zabriskije) - ファントムスクロールの修正
- [@miniwater](https://github.com/miniwater) - カスタムフッターの中央揃え、画像altテキストの改善
- [@MattDodsonEnglish](https://github.com/MattDodsonEnglish) - Googleインデックス制御、OpenGraphドキュメント
- [@KStocky](https://github.com/KStocky) - 逆順ページネーション機能
- [@PrintN](https://github.com/PrintN) - ドキュメントショーケースの追加
- [@hobobandy](https://github.com/hobobandy) - タイトル間隔の改善
- [@dlwocks31](https://github.com/dlwocks31) - 韓国語翻訳の更新
- [@TwoAnts](https://github.com/TwoAnts) - Giscusテーマ切り替えの修正
- [@ldez](https://github.com/ldez) - 検索機能の改善とバグ修正
継続的なサポート、ドキュメント、翻訳、技術的改善を提供してくださった [@deining](https://github.com/deining) と [@yuri1969](https://github.com/yuri1969) にも感謝します。
**完全な変更履歴**: https://github.com/imfing/hextra/compare/v0.9.7...v0.10.0

View File

@@ -1,5 +1,5 @@
--- ---
title: "Hextra v0.10.0 is released" title: "Hextra v0.10"
date: 2025-08-14 date: 2025-08-14
authors: authors:
- name: imfing - name: imfing
@@ -7,26 +7,176 @@ authors:
image: https://github.com/imfing.png image: https://github.com/imfing.png
tags: tags:
- Release - Release
draft: true
--- ---
Hextra v0.10.0 is a big release packed with new capabilities, architectural upgrades, and quality-of-life improvements.
<!--more--> <!--more-->
## What's New It also includes contributions from 10 [new contributors](#contributors) and addresses long-standing community requests.
TODO ## Upgrade Guide
To upgrade to v0.10.0, update your Hugo module: > [!IMPORTANT]
> **Breaking Changes**: This release includes several breaking changes. Please review the checklist and the [Migration Guide](#migration-guide) before upgrading.
Before upgrading to v0.10.0, ensure that you have:
- Hugo v0.146.0+ (extended version) installed
- Reviewed custom CSS for class name changes (see [CSS Class Prefix Changes](#css-class-prefix-changes) and [Tailwind CSS v4](#tailwind-css-v4))
- Verified that build environment has internet access for asset downloads when LaTeX and/or Mermaid is used
Once ready, update the Hugo module:
```bash ```bash
hugo mod get -u github.com/imfing/hextra@v0.10.0 hugo mod get -u github.com/imfing/hextra@v0.10.0
``` ```
## New Features
Here is a list of notable new features in this release:
- [**Dropdown Menu Support in Navbar**](#dropdown-menu-support-in-navbar): create hierarchical navigation menus
- [**Enhanced Search Experience**](#enhanced-search-experience): improved search across all headings with better accuracy
- [**llms.txt Support**](#llmstxt-support): generate AI-friendly site outline
- [**Table of Contents Scroll Highlighting**](#table-of-contents-scroll-highlighting): automatic heading highlighting during page scroll
- [**Synchronized Tab Switching**](#synchronized-tab-switching): synchronize tab selections across multiple tab groups
- [**Blog List Pagination**](#blog-list-pagination): add pagination controls to blog listing pages
- [**MathJax Support**](#mathjax-support): alternative math rendering engine alongside KaTeX
### Dropdown Menu Support in Navbar
Create dropdown menus in your navigation bar for better navigation items organization.
```yaml {filename="hugo.yaml"}
menu:
main:
- identifier: products
name: "Products"
- name: "Product A"
parent: products
url: "/product-a"
- name: "Product B"
parent: products
url: "/product-b"
```
![Dropdown menu navigation](https://github.com/user-attachments/assets/1816f9b9-7fe3-46e8-9546-f15e43e9914a)
### Enhanced Search Experience
- **Search in all headings**: find content across all heading levels, not just page titles
- **Improved result accuracy**: better title handling and linking precision
- **Fixed result navigation**: search results now link to the correct page sections
Huge thanks to [@ldez](https://github.com/ldez) for pushing the search capabilities forward!
![Enhanced search results](https://github.com/user-attachments/assets/f819652a-95d4-4843-b7e2-c7953a8cabe8)
### llms.txt Support
Hextra now supports [llms.txt](https://llmstxt.org/) output format for your site, making your site more accessible to AI tools and language models for context and reference.
```yaml {filename="hugo.yaml"}
outputs:
home: [html, llms]
```
This will generate an `llms.txt` file at your site's root.
![Example llms txt](https://github.com/user-attachments/assets/c6e929bb-0fce-4ab2-af15-a71c5a38b22c)
### Table of Contents Scroll Highlighting
The table of contents now automatically highlights the current section as you scroll through the page, making navigation more intuitive.
![ToC scroll highlighting](https://github.com/user-attachments/assets/d623fb99-7000-428b-af95-384eb722f0eb)
### Synchronized Tab Switching
Tabs with the same items now synchronize across the page. When sync is enabled, selecting a tab updates all tab groups that share the same items list (and your selection is remembered).
```yaml {filename="hugo.yaml"}
params:
page:
tabs:
sync: true
```
### Blog List Pagination
Basic pagination controls have been added to blog listing pages.
```yaml {filename="hugo.yaml"}
params:
blog:
list:
pagerSize: 20 # Posts per page
```
![Blog pagination](https://github.com/user-attachments/assets/60405fb4-ec36-4733-ba13-b4066396b5c5)
### MathJax Support
Render mathematical expressions with [MathJax](https://www.mathjax.org/) alongside the default KaTeX support. Choose the engine that best fits your needs.
```yaml {filename="hugo.yaml"}
params:
math:
engine: "mathjax" # default is "katex"
```
## Technical Improvements
### Framework and Build System
- **Tailwind CSS v4 Migration**: complete migration to [Tailwind CSS v4](https://tailwindcss.com/blog/tailwindcss-v4) with improved customization support.
- **Hugo Template System**: adapted to Hugo's [new template system](https://gohugo.io/templates/new-templatesystem-overview/) (v0.146.0+) for future compatibility.
- **Math Server-Side Rendering**: better handling of math equation rendering using Hugo native rendering by default.
- **FlexSearch 0.8 Upgrade**: upgraded search engine [FlexSearch](https://github.com/nextapps-de/flexsearch) for faster, more accurate results with improved CJK (Chinese, Japanese, Korean) content encoding.
- **Enhanced Asset Management**: KaTeX and Mermaid assets support loading from CDN or local
## Quality of Life Improvements
- **Dynamic favicon switching**: automatic favicon updates based on color scheme preferences
- **Reverse pagination**: authors can now set `reversePagination` in page front matter
- **Google indexing control**: new page parameter to block Google indexing when needed
- **Width handling improvements**: better responsive design controls via CSS variables
- **Styling improvements**: modern styles for Markdown table and horizontal line
## Bug Fixes and Stability
- **Giscus theme synchronization**: comments now properly follow dark/light mode switches
- **Search result accuracy**: fixed linking issues and title escaping in search results
- **Tab switching**: resolved navigation issues in non-synced tab mode
- **Phantom scrolling**: fixed unwanted scroll behavior when footer is disabled
- **Image accessibility**: prevented duplicate alt text rendering
- **Link rendering**: improved base URL handling for complex site structures
---
## Migration Guide ## Migration Guide
### CSS class prefix - [**Hugo Version Requirements**](#hugo-version-requirements): Requires Hugo v0.146.0+ (extended version)
- [**CSS Class Prefix Changes**](#css-class-prefix-changes): Component CSS classes now use consistent `hextra-` prefixing
- [**Asset Management**](#asset-management-for-katex-and-mermaid): KaTeX and Mermaid assets now download during build time
- [**Tailwind CSS v4**](#tailwind-css-v4): Internal CSS compilation now uses Tailwind CSS v4.x with `hx:` prefix
This release includes a comprehensive CSS class naming refactor to improve consistency and avoid potential conflicts. Most Hextra components CSS classes now use the `hextra-` prefix. #### Hugo Version Requirements
**Impact**: Sites running older Hugo versions
Hextra v0.10.0 requires Hugo v0.146.0 or later (extended version) due to the new template system adoption.
**Action required**: Update Hugo to v0.146.0+ before upgrading Hextra
#### CSS Class Prefix Changes
**Impact**: Sites with custom CSS targeting Hextra component classes
Hextra v0.10.0 introduces consistent `hextra-` prefixing for majority of component CSS classes to improve maintainability and prevent conflicts with user styles.
**Action required**: If you have custom CSS targeting Hextra components, update the following class names:
| Area | Before | After | | Area | Before | After |
| -------------------- | ---------------------------- | ------------------------------------------------- | | -------------------- | ---------------------------- | ------------------------------------------------- |
@@ -50,6 +200,48 @@ This release includes a comprehensive CSS class naming refactor to improve consi
| Success icon | `.success-icon` | `.hextra-success-icon` | | Success icon | `.success-icon` | `.hextra-success-icon` |
| Steps | `.steps` | `.hextra-steps` | | Steps | `.steps` | `.hextra-steps` |
--- #### Asset Management for KaTeX and Mermaid
_This is a draft release announcement. The actual release date and features may vary._ **Impact**: Sites using KaTeX or Mermaid
Hextra v0.10.0 now downloads KaTeX and Mermaid assets from CDN during build time.
**What's changed:**
- Build process now requires internet access to download these assets
- No more external CDN calls for these assets after build
**Action required**:
- Ensure your build environment has internet access to download assets
- Sites in air-gapped environments may need to pre-download these assets and configure Hextra to load them
#### Tailwind CSS v4
**Impact**: Sites with extensive custom CSS targeting Hextra Tailwind classes `hx-*`
While Hextra handles the Tailwind CSS v4 migration internally, sites with heavy customizations may need further adjustments.
**What's changed:**
- Internal CSS compilation now uses Tailwind CSS v4.x
- Utility classes now prefix with `hx:` rather than `hx-`
## Contributors
This release was made possible by contributions from 10 new contributors:
- [@oosquare](https://github.com/oosquare) - KaTeX fonts, image render hooks, link handling improvements
- [@Zabriskije](https://github.com/Zabriskije) - Phantom scroll fix
- [@miniwater](https://github.com/miniwater) - Custom footer centering, image alt text improvements
- [@MattDodsonEnglish](https://github.com/MattDodsonEnglish) - Google indexing controls, OpenGraph documentation
- [@KStocky](https://github.com/KStocky) - Reverse pagination feature
- [@PrintN](https://github.com/PrintN) - Documentation showcase additions
- [@hobobandy](https://github.com/hobobandy) - Title spacing improvements
- [@dlwocks31](https://github.com/dlwocks31) - Korean translation updates
- [@TwoAnts](https://github.com/TwoAnts) - Giscus theme switching fix
- [@ldez](https://github.com/ldez) - Search improvements and bug fixes
Additional thanks to returning contributors [@deining](https://github.com/deining) and [@yuri1969](https://github.com/yuri1969) for their continued support with documentation, translations, and technical improvements.
**Full Changelog**: https://github.com/imfing/hextra/compare/v0.9.7...v0.10.0

View File

@@ -0,0 +1,247 @@
---
title: "Hextra v0.10"
date: 2025-08-14
authors:
- name: imfing
link: https://github.com/imfing
image: https://github.com/imfing.png
tags:
- Release
---
Hextra v0.10.0 是一个重大版本更新,包含多项新功能、架构升级和使用体验优化。
<!--more-->
本次更新还包含了来自 10 位 [新贡献者](#contributors) 的代码提交,并解决了社区长期期待的功能需求。
## 升级指南
> [!IMPORTANT]
> **破坏性变更**:此版本包含多项不兼容改动。升级前请仔细阅读检查清单和 [迁移指南](#migration-guide)。
升级至 v0.10.0 前,请确保:
- 已安装 Hugo v0.146.0+(扩展版)
- 检查自定义 CSS 的类名变更(参见 [CSS 类前缀变更](#css-class-prefix-changes) 和 [Tailwind CSS v4](#tailwind-css-v4)
- 确认构建环境可访问互联网以下载 LaTeX 和/或 Mermaid 资源
准备就绪后,更新 Hugo 模块:
```bash
hugo mod get -u github.com/imfing/hextra@v0.10.0
```
## 新功能
以下是本版本值得关注的新特性:
- [**导航栏下拉菜单支持**](#dropdown-menu-support-in-navbar):创建层级导航菜单
- [**增强搜索体验**](#enhanced-search-experience):改进全标题搜索精度
- [**llms.txt 支持**](#llmstxt-support):生成 AI 友好的站点大纲
- [**目录滚动高亮**](#table-of-contents-scroll-highlighting):滚动时自动高亮当前章节
- [**同步标签页切换**](#synchronized-tab-switching):跨多组标签页同步选择状态
- [**博客列表分页**](#blog-list-pagination):为博客列表添加分页控件
- [**MathJax 支持**](#mathjax-support):在 KaTeX 外新增数学公式渲染引擎
### 导航栏下拉菜单支持
在导航栏中创建下拉菜单,优化导航项组织方式。
```yaml {filename="hugo.yaml"}
menu:
main:
- identifier: products
name: "产品"
- name: "产品A"
parent: products
url: "/product-a"
- name: "产品B"
parent: products
url: "/product-b"
```
![下拉菜单导航](https://github.com/user-attachments/assets/1816f9b9-7fe3-46e8-9546-f15e43e9914a)
### 增强搜索体验
- **全标题搜索**:可搜索所有层级标题内容,不限于页面标题
- **提升结果精度**:改进标题处理和链接准确性
- **修复结果导航**:搜索结果现在能正确跳转到对应章节
特别感谢 [@ldez](https://github.com/ldez) 推动搜索功能升级!
![增强版搜索结果](https://github.com/user-attachments/assets/f819652a-95d4-4843-b7e2-c7953a8cabe8)
### llms.txt 支持
现支持生成 [llms.txt](https://llmstxt.org/) 格式输出,使站点内容更便于 AI 工具和语言模型获取上下文参考。
```yaml {filename="hugo.yaml"}
outputs:
home: [html, llms]
```
这将在站点根目录生成 `llms.txt` 文件。
![示例 llms 文本](https://github.com/user-attachments/assets/c6e929bb-0fce-4ab2-af15-a71c5a38b22c)
### 目录滚动高亮
滚动页面时,目录会自动高亮当前章节,使导航更加直观。
![目录滚动高亮效果](https://github.com/user-attachments/assets/d623fb99-7000-428b-af95-384eb722f0eb)
### 同步标签页切换
相同内容的标签页现在支持跨组同步。启用同步后,选择某个标签会更新所有包含相同项目的标签组(且会记住选择状态)。
```yaml {filename="hugo.yaml"}
params:
page:
tabs:
sync: true
```
### 博客列表分页
为博客列表页面添加基础分页控件。
```yaml {filename="hugo.yaml"}
params:
blog:
list:
pagerSize: 20 # 每页文章数
```
![博客分页效果](https://github.com/user-attachments/assets/60405fb4-ec36-4733-ba13-b4066396b5c5)
### MathJax 支持
除默认的 KaTeX 外,新增 [MathJax](https://www.mathjax.org/) 数学公式渲染引擎支持,可按需选择。
```yaml {filename="hugo.yaml"}
params:
math:
engine: "mathjax" # 默认为 "katex"
```
## 技术改进
### 框架与构建系统
- **Tailwind CSS v4 迁移**:完整迁移至 [Tailwind CSS v4](https://tailwindcss.com/blog/tailwindcss-v4),提供更好的定制支持
- **Hugo 模板系统**:适配 Hugo [新版模板系统](https://gohugo.io/templates/new-templatesystem-overview/)v0.146.0+)以确保未来兼容性
- **数学公式服务端渲染**:默认使用 Hugo 原生渲染改进数学公式处理
- **FlexSearch 0.8 升级**:搜索引擎升级至 [FlexSearch](https://github.com/nextapps-de/flexsearch) 0.8,提升 CJK中日韩内容编码处理能力
- **增强资源管理**KaTeX 和 Mermaid 资源支持从 CDN 或本地加载
## 使用体验优化
- **动态 favicon 切换**:根据色彩偏好自动更新网站图标
- **反向分页**:支持通过页面 front matter 设置 `reversePagination`
- **Google 索引控制**:新增页面参数控制是否允许 Google 索引
- **宽度处理改进**:通过 CSS 变量优化响应式设计控制
- **样式改进**:现代化 Markdown 表格和水平线样式
## 错误修复与稳定性
- **Giscus 主题同步**:评论模块现在正确跟随暗黑/明亮模式切换
- **搜索结果准确性**:修复搜索结果链接和标题转义问题
- **标签页切换**:解决非同步模式下的导航问题
- **幽灵滚动**:修复禁用页脚时出现的异常滚动行为
- **图片可访问性**:避免重复渲染 alt 文本
- **链接渲染**:改进复杂站点结构下的基础 URL 处理
---
## 迁移指南
- [**Hugo 版本要求**](#hugo-version-requirements):需 Hugo v0.146.0+(扩展版)
- [**CSS 类前缀变更**](#css-class-prefix-changes):组件 CSS 类现统一使用 `hextra-` 前缀
- [**资源管理**](#asset-management-for-katex-and-mermaid)KaTeX 和 Mermaid 资源改为构建时下载
- [**Tailwind CSS v4**](#tailwind-css-v4):内部 CSS 编译现使用 Tailwind CSS v4.x 并采用 `hx:` 前缀
#### Hugo 版本要求
**影响**:使用旧版 Hugo 的站点
Hextra v0.10.0 因采用新模板系统,要求 Hugo v0.146.0 或更高版本(扩展版)。
**需执行操作**:升级 Hextra 前先更新 Hugo 至 v0.146.0+
#### CSS 类前缀变更
**影响**:自定义 CSS 中引用了 Hextra 组件类的站点
v0.10.0 为大多数组件 CSS 类引入统一的 `hextra-` 前缀,以提高可维护性并避免与用户样式冲突。
**需执行操作**:如果自定义 CSS 中引用了 Hextra 组件,请更新以下类名:
| 区域 | 旧类名 | 新类名 |
| -------------------- | -------------------------- | ----------------------------------------------- |
| 搜索(容器) | `.search-wrapper` | `.hextra-search-wrapper` |
| 搜索(输入框) | `.search-input` | `.hextra-search-input` |
| 搜索(结果) | `.search-results` | `.hextra-search-results` |
| 搜索(标题) | `.search-wrapper .title` | `.hextra-search-wrapper .hextra-search-title` |
| 搜索(活动项) | `.search-wrapper .active` | `.hextra-search-wrapper .hextra-search-active` |
| 搜索(无结果) | `.search-wrapper .no-result` | `.hextra-search-wrapper .hextra-search-no-result` |
| 搜索(前缀) | `.search-wrapper .prefix` | `.hextra-search-wrapper .hextra-search-prefix` |
| 搜索(摘要) | `.search-wrapper .excerpt` | `.hextra-search-wrapper .hextra-search-excerpt` |
| 搜索(匹配项) | `.search-wrapper .match` | `.hextra-search-wrapper .hextra-search-match` |
| 导航栏模糊效果 | `.nav-container-blur` | `.hextra-nav-container-blur` |
| 汉堡菜单 | `.hamburger-menu` | `.hextra-hamburger-menu` |
| 主题切换 | `.theme-toggle` | `.hextra-theme-toggle` |
| 语言切换器 | `.language-switcher` | `.hextra-language-switcher` |
| 侧边栏容器 | `.sidebar-container` | `.hextra-sidebar-container` |
| 侧边栏活动项 | `.sidebar-active-item` | `.hextra-sidebar-active-item` |
| 代码文件名 | `.filename` | `.hextra-code-filename` |
| 复制图标 | `.copy-icon` | `.hextra-copy-icon` |
| 成功图标 | `.success-icon` | `.hextra-success-icon` |
| 步骤组件 | `.steps` | `.hextra-steps` |
#### KaTeX 和 Mermaid 资源管理
**影响**:使用 KaTeX 或 Mermaid 的站点
v0.10.0 改为在构建时从 CDN 下载 KaTeX 和 Mermaid 资源。
**变更内容:**
- 构建过程需要联网下载这些资源
- 构建后不再需要外部 CDN 调用
**需执行操作:**
- 确保构建环境可访问互联网以下载资源
- 隔离环境中的站点需预下载资源并配置 Hextra 加载路径
#### Tailwind CSS v4
**影响**:大量自定义 CSS 引用了 `hx-*` 类名的站点
虽然 Hextra 内部已处理 Tailwind CSS v4 迁移,但深度定制的站点可能需要额外调整。
**变更内容:**
- 内部 CSS 编译使用 Tailwind CSS v4.x
- 工具类前缀改为 `hx:` 而非 `hx-`
## 贡献者
本次发布得益于 10 位新贡献者的代码提交:
- [@oosquare](https://github.com/oosquare) - KaTeX 字体、图片渲染钩子、链接处理改进
- [@Zabriskije](https://github.com/Zabriskije) - 修复幽灵滚动问题
- [@miniwater](https://github.com/miniwater) - 自定义页脚居中、图片 alt 文本优化
- [@MattDodsonEnglish](https://github.com/MattDodsonEnglish) - Google 索引控制、OpenGraph 文档
- [@KStocky](https://github.com/KStocky) - 反向分页功能
- [@PrintN](https://github.com/PrintN) - 文档展示增强
- [@hobobandy](https://github.com/hobobandy) - 标题间距优化
- [@dlwocks31](https://github.com/dlwocks31) - 韩语翻译更新
- [@TwoAnts](https://github.com/TwoAnts) - 修复 Giscus 主题切换
- [@ldez](https://github.com/ldez) - 搜索功能改进与错误修复
同时感谢长期贡献者 [@deining](https://github.com/deining) 和 [@yuri1969](https://github.com/yuri1969) 在文档、翻译和技术改进方面的持续支持。
**完整更新日志**https://github.com/imfing/hextra/compare/v0.9.7...v0.10.0

View File

@@ -3,37 +3,37 @@ linkTitle: "مستندات"
title: معرفی title: معرفی
--- ---
👋 سلام! به مستندات هگزترا خوش آمدید! 👋 سلام! به مستندات Hextra خوش آمدید!
<!--more--> <!--more-->
## هگزترا چیه؟ ## Hextra چیست؟
هگزترا یک تم [Hugo][hugo] مدرن و سریع است که با [Tailwind CSS][tailwind-css] ساخته شده است. Hextra یک پوسته مدرن، سریع و کامل برای [Hugo][hugo] است که با [Tailwind CSS][tailwind-css] ساخته شده است.
طراحی شده برای ساخت وب‌سایت‌های زیبا برای مستندات، وبلاگ‌ها و وب‌سایت‌ها، ویژگی‌های خارج از جعبه و انعطاف‌پذیری را برای پاسخگویی نیازهای مختلف فراهم می‌کند. این پوسته برای ساخت وب‌سایت‌های زیبا برای مستندات، وبلاگ‌ها و وب‌سایت‌ها طراحی شده و امکاناتی را به صورت پیش‌فرض ارائه می‌دهد که انعطاف لازم برای پاسخگویی به نیازهای مختلف را دارد.
## ویژگی‌ها ## ویژگی‌ها
- **طراحی زیبا** - با الهام از Nextra، هگزترا از Tailwind CSS برای ارائه یک طراحی مدرن که سایت شما را برجسته می‌کند، استفاده می‌کند. - **طراحی زیبا** - با الهام از Nextra، Hextra از Tailwind CSS استفاده می‌کند تا طراحی مدرنی ارائه دهد که سایت شما را برجسته می‌کند.
- **طراحی واکنش‌گرا و حالت تیره** - در تمام دستگاه‌ها، از تلفن همراه، تبلت تا دسکتاپ، عالی به نظر می‌رسد. حالت تیره نیز برای انطباق با شرایط مختلف روشنایی پشتیبانی می‌شود. - **چیدمان واکنش‌گرا و حالت تاریک** - در تمام دستگاه‌ها از موبایل و تبلت تا دسکتاپ عالی به نظر می‌رسد. حالت تاریک نیز پشتیبانی می‌شود تا شرایط نوری مختلف را پوشش دهد.
- **سریع و سبک** - طراحی شده توسط Hugo، یک ایجادکننده سایت استاتیک سریع مثل رعد و برق که در یک فایل باینری قرار گرفته است، هگزترا ردپای خود را به حداقل می‌رساند. برای استفاده از آن به جاوااسکریپت یا Node.js نیازی ندارید. - **سریع و سبک‌وزن** - با قدرت Hugo، یک مولد سایت استاتیک فوق‌العاده سریع که در یک فایل باینری واحد قرار دارد، Hextra ردپای کوچکی دارد. برای استفاده از آن نیازی به JavaScript یا Node.js نیست.
- **جستجوی متن کامل** - جستجوی متن کاملا آفلاین داخلی طراحی شده توسط FlexSearch، بدون نیاز به پیکربندی اضافی. - **جستجوی تمام‌متن** - جستجوی تمام‌متن آفلاین داخلی با قدرت FlexSearch، بدون نیاز به پیکربندی اضافی.
- **امکانات کامل** - برای بهتر کردن محتوای شما مارک‌داون، برجسته‌کردن سینتکس، فرمول‌های ریاضی LaTeX، نمودارها و عناصر Shortcodeها را شامل میشه. فهرست مطالب، بردکرامب، صفحه‌بندی، پیمایش نوار کناری و موارد دیگر همه به صورت خودکار تولید می‌شوند. - **کامل و آماده استفاده** - عناصر Markdown، برجسته‌سازی سینتکس، فرمول‌های ریاضی LaTeX، نمودارها و Shortcodes برای غنی‌تر کردن محتوای شما. فهرست مطالب، مسیرهای ناوبری، صفحه‌بندی، نوار کناری و موارد دیگر همگی به صورت خودکار تولید می‌شوند.
- **چند زبانه و سئو آماده** - سایت‌های چند زبانه با حالت چند زبانه Hugo راحت ساخته می‌شوند. پشتیبانی خارج از جعبه برای برچسب‌های سئو، Open Graph و کارت‌های توییتر گنجانده شده است. - **چندزبانه و آماده برای سئو** - ساخت سایت‌های چندزبانه با حالت چندزبانه Hugo آسان شده است. پشتیبانی پیش‌فرض برای تگ‌های سئو، Open Graph و Twitter Cards وجود دارد.
## سوال یا بازخورد؟ ## سوال یا بازخورد دارید؟
{{< callout emoji="❓" >}} {{< callout emoji="❓" >}}
هگزترا هنوز در حال توسعه است. Hextra هنوز در حال توسعه فعال است.
سوال یا بازخوردی دارید؟ با خیال راحت [یک موضوع را باز کنید](https://github.com/imfing/hextra/issues)! سوال یا بازخوردی دارید؟ با خیال راحت [یک issue باز کنید](https://github.com/imfing/hextra/issues)!
{{< /callout >}} {{< /callout >}}
## بعدی ## بعدی
برای شروع کردن به بخش زیر مراجعه کنید: برای شروع، مستقیماً به بخش زیر بروید:
{{< cards >}} {{< cards >}}
{{< card link="getting-started" title="شروع کنید" icon="document-text" subtitle="یادگیری نحوه ایجاد وب‌سایت با استفاده از هگزترا" >}} {{< card link="getting-started" title="شروع به کار" icon="document-text" subtitle="یاد بگیرید چگونه با استفاده از Hextra وب‌سایت بسازید" >}}
{{< /cards >}} {{< /cards >}}
[hugo]: https://gohugo.io/ [hugo]: https://gohugo.io/

View File

@@ -1,38 +1,38 @@
--- ---
linkTitle: "ドキュメンテーション" linkTitle: "ドキュメン"
title: イントロダクション title: はじめに
--- ---
👋 こんにちはHextraドキュメンテーションへようこそ! 👋 こんにちはHextra ドキュメンへようこそ!
<!--more--> <!--more-->
## Hextraとは ## Hextra とは?
Hextraは、[Tailwind CSS][tailwind-css]を使用して構築された、モダンで高速かつ機能豊富な[Hugo][hugo]テーマです。ドキュメンテーション、ブログ、ウェブサイトのための美しいウェブサイトを構築するために設計されており、さまざまな要件に対応するための機能と柔軟性を提供します。 Hextraは、[Tailwind CSS][tailwind-css]を使用して構築された、モダンで高速かつ機能豊富な[Hugo][hugo]テーマです。ドキュメンテーション、ブログ、ウェブサイトのための美しいウェブサイトを構築するために設計されており、さまざまな要件に対応するための機能と柔軟性を提供します。
## 特徴 ## 特徴
- **美しいデザイン** - Nextraにインスパイアされ、Tailwind CSSを活用しモダンなデザインを提供し、サイトを際立たせます。 - **美しいデザイン** - Nextra にインスパイアされ、Tailwind CSS を活用しモダンなデザイン、サイトを際立たせます。
- **レスポンシブレイアウトとダークモード** - モバイル、タブレット、デスクトップなど、すべてのデバイスで美しく表示されます。また、ダークモードもサポートされており、さまざまな照明条件に対応します。 - **レスポンシブレイアウトとダークモード** - モバイル、タブレット、デスクトップなど、すべてのデバイスで美しく表示されます。また、さまざまな照明条件に対応するため、ダークモードもサポートされています。
- **高速で軽量** - 単一のバイナリファイルに収められた超高速静的サイトジェネレータであるHugoを採用し、Hextraはそのフットプリントを最小限に抑えています。JavaScriptNode.jsは必要ありません。 - **高速で軽量** - 単一のバイナリファイルで提供される超高速静的サイトジェネレータ Hugo を採用しており、Hextra はフットプリントを最小限に抑えています。JavaScriptNode.js は必要ありません。
- **全文検索** - FlexSearchを利用したオフライン全文検索が組み込まれており、追加の設定は不要です。 - **全文検索** - FlexSearch を利用したオフライン全文検索が組み込まれており、追加の設定は不要です。
- **機能豊富** - Markdown、シンタックスハイライト、LaTeX数式、ダイアグラム、ショートコード要素など、コンテンツを強化するための機能を提供します。目次、パンくずリスト、ページネーション、サイドバーナビゲーションなど自動生成されます。 - **バッテリーインクルード** - コンテンツを強化するための Markdown、シンタックスハイライト、LaTeX 数式、ダイアグラム、ショートコード要素が利用可能です。目次、パンくずリスト、ページネーション、サイドバーナビゲーションなどはすべて自動生成されます。
- **多言語対応とSEO対応** - Hugoの多言語モードを使用して、多言語サイトを簡単に作成できます。SEOタグ、Open Graph、Twitter Cardsのサポートも標準で提供されます。 - **多言語対応とSEO準備完了** - Hugo の多言語モードを用して、多言語サイトを簡単に構築できます。SEO タグ、Open Graph、Twitter Cards のサポートも標準で提供されています。
## 質問やフィードバックは? ## 質問やフィードバック
{{< callout emoji="❓" >}} {{< callout emoji="❓" >}}
Hextraはまだ活発に開発中です。 Hextra は現在も活発に開発中です。
質問やフィードバックがありますか?[issueを開いて](https://github.com/imfing/hextra/issues)お気軽にお知らせください! 質問やフィードバックがありましたら、[issue を開いて](https://github.com/imfing/hextra/issues)ください!
{{< /callout >}} {{< /callout >}}
## 次に ## 次に
以下のセクションに進んで、すぐに始めましょう: 以下のセクションから始めましょう:
{{< cards >}} {{< cards >}}
{{< card link="getting-started" title="はじめに" icon="document-text" subtitle="Hextraを使用してウェブサイトを作成する方法を学ぶ" >}} {{< card link="getting-started" title="はじめに" icon="document-text" subtitle="Hextra を使てウェブサイトを作成する方法を学ぶ" >}}
{{< /cards >}} {{< /cards >}}
[hugo]: https://gohugo.io/ [hugo]: https://gohugo.io/

View File

@@ -1,38 +1,38 @@
--- ---
linkTitle: "文档" linkTitle: "文档"
title: 介 title:
--- ---
👋 你好!欢迎来到 Hextra 文档! 👋 你好!欢迎来到 Hextra 文档中心
<!--more--> <!--more-->
## 什么是 Hextra ## 什么是 Hextra
Hextra 是一个现代、快速且功能齐全的 [Hugo][hugo] 主题,基于 [Tailwind CSS][tailwind-css] 构建。专为构建美观的文档、博客和网站而设计,它提供了开箱即用的功能和灵活性,以满足各种需求。 Hextra 是一个基于 [Tailwind CSS][tailwind-css] 构建的现代化、高性能且开箱即用的 [Hugo][hugo] 主题。专为打造文档、博客和网站而设计,它提供丰富的内置功能和灵活配置,满足多样化需求。
## 特性 ## 核心特性
- **精美设计** - 灵感源自 NextraHextra 利用 Tailwind CSS 提供现代设计,使您的网站脱颖而出。 - **精美设计** - 灵感源自 Nextra用 Tailwind CSS 实现现代美学,让您的站点脱颖而出。
- **响应式布局与暗黑模式** - 在所有设备上都能完美呈现,从手机、平板桌面。暗黑模式也得到支持,以适应不同的光照条件 - **响应式布局与暗黑模式** - 完美适配移动设备、平板桌面端,并支持根据环境光线自动切换的暗黑模式
- **快速且轻量** - Hugo 驱动这是一个闪电般快速的静态网站生成器仅需一个二进制文件Hextra 保持其占用空间最小。无需 JavaScript 或 Node.js 即可使用 - **极速轻量** - 依托 Hugo 静态网站生成器的单文件二进制架构,无需 JavaScript 或 Node.js 环境即可运行
- **全文搜索** - 内置离线全文搜索,由 FlexSearch 提供支持,无需额外配置 - **全文搜索** - 内置基于 FlexSearch 的离线全文搜索功能,零配置开箱即用
- **功能齐全** - Markdown语法高亮、LaTeX 数学公式、图表和 Shortcodes 元素,丰富您的内容。目录、面包屑导航、分页侧边栏导航等均自动生成 - **功能完备** - 支持 Markdown 语法高亮、LaTeX 数学公式、图表和 Shortcodes 等丰富内容元素。自动生成目录导航、面包屑、分页侧边栏等组件
- **多语言与 SEO 就绪** - 通过 Hugo 多语言模式轻松创建多语言网站。开箱即用支持 SEO 标签、Open Graph 和 Twitter Cards。 - **多语言与 SEO 友好** - 通过 Hugo 多语言模式轻松构建国际化站点,原生集成 SEO 标签、Open Graph 和 Twitter Cards 支持
## 问题或反馈 ## 问题或建议
{{< callout emoji="❓" >}} {{< callout emoji="❓" >}}
Hextra 仍在积极开发中。 Hextra 仍在积极开发中。
有问题或反馈欢迎[提交问题](https://github.com/imfing/hextra/issues) 如有疑问或反馈欢迎[提交 Issue](https://github.com/imfing/hextra/issues)
{{< /callout >}} {{< /callout >}}
## 下一步 ## 下一步
立即深入以下部分,开始使用 立即开始探索
{{< cards >}} {{< cards >}}
{{< card link="getting-started" title="入门指南" icon="document-text" subtitle="学习如何使用 Hextra 创建网站" >}} {{< card link="getting-started" title="快速开始" icon="document-text" subtitle="学习如何使用 Hextra 创建网站" >}}
{{< /cards >}} {{< /cards >}}
[hugo]: https://gohugo.io/ [hugo]: https://gohugo.io/

View File

@@ -1,16 +1,16 @@
--- ---
linkTitle: پیشرفته linkTitle: پیشرفته
title: موضوعات پیشرفته title: مباحث پیشرفته
prev: /docs/guide/shortcodes/steps prev: /docs/guide/shortcodes/tabs
next: /docs/advanced/multi-language next: /docs/advanced/multi-language
--- ---
این بخش برخی از موضوعات پیشرفته تم را پوشش می‌دهد. این بخش برخی از مباحث پیشرفته این پوسته را پوشش می‌دهد.
<!--more--> <!--more-->
{{< cards >}} {{< cards >}}
{{< card link="multi-language" title="چند زبانه" icon="translate" >}} {{< card link="multi-language" title="چندزبانه" icon="translate" >}}
{{< card link="customization" title="سفارشی‌سازی" icon="pencil" >}} {{< card link="customization" title="سفارشی‌سازی" icon="pencil" >}}
{{< card link="comments" title="سیستم نظردهی" icon="chat-alt" >}} {{< card link="comments" title="سیستم نظرات" icon="chat-alt" >}}
{{< /cards >}} {{< /cards >}}

View File

@@ -1,11 +1,11 @@
--- ---
linkTitle: 上級者向け linkTitle: 高度な設定
title: 上級者向けトピック title: 高度なトピック
prev: /docs/guide/shortcodes/tabs prev: /docs/guide/shortcodes/tabs
next: /docs/advanced/multi-language next: /docs/advanced/multi-language
--- ---
このセクションでは、テーマの上級者向けトピックをカバーします。 このセクションでは、テーマの高度なトピックについて説明します。
<!--more--> <!--more-->

View File

@@ -5,12 +5,12 @@ prev: /docs/guide/shortcodes/tabs
next: /docs/advanced/multi-language next: /docs/advanced/multi-language
--- ---
本节涵盖了一些主题的高级内容。 本节涵盖主题的一些高级内容。
<!--more--> <!--more-->
{{< cards >}} {{< cards >}}
{{< card link="multi-language" title="多语言" icon="translate" >}} {{< card link="multi-language" title="多语言支持" icon="translate" >}}
{{< card link="customization" title="自定义" icon="pencil" >}} {{< card link="customization" title="自定义配置" icon="pencil" >}}
{{< card link="comments" title="评论系统" icon="chat-alt" >}} {{< card link="comments" title="评论系统" icon="chat-alt" >}}
{{< /cards >}} {{< /cards >}}

View File

@@ -1,18 +1,18 @@
--- ---
title: سیستم نظردهی title: سیستم نظرات
linkTitle: نظردهی linkTitle: نظرات
--- ---
هگزترا از افزودن سیستم نظردهی به سایت شما پشتیبانی می‌کند. Hextra از افزودن سیستم نظرات به سایت شما پشتیبانی می‌کند.
در حال حاضر [giscus](https://giscus.app/) پشتیبانی می‌شود. در حال حاضر [giscus](https://giscus.app/) پشتیبانی می‌شود.
<!--more--> <!--more-->
## giscus ## giscus
[giscus](https://giscus.app/) یک سیستم نظردهی است که توسط [GitHub Discussions](https://docs.github.com/en/discussions) طراحی شده است. رایگان و متن باز است. [giscus](https://giscus.app/) یک سیستم نظرات است که توسط [GitHub Discussions](https://docs.github.com/en/discussions) قدرت می‌گیرد. این سیستم رایگان و متنباز است.
برای فعال کردن giscus، باید موارد زیر را به پرونده پیکربندی سایت اضافه کنید: برای فعال کردن giscus، باید موارد زیر را به فایل پیکربندی سایت اضافه کنید:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
@@ -27,13 +27,13 @@ params:
categoryId: <category ID> categoryId: <category ID>
``` ```
تنظیمات giscus را می توانید از وبسایت [giscus.app](https://giscus.app/) ساخت. جزئیات بیشتر را نیز می‌توانید در آنجا ببینید. تنظیمات giscus را میتوان از وبسایت [giscus.app](https://giscus.app/) ساخت. جزئیات بیشتر نیز در آنجا موجود است.
دیدگاه‌ها را می‌توانید برای یک صفحه خاص در بالای همان صفحه فعال یا غیرفعال کرد: می‌توان نظرات را برای یک صفحه خاص در front matter صفحه فعال یا غیرفعال کرد:
```yaml {filename="content/docs/about.md"} ```yaml {filename="content/docs/about.md"}
--- ---
title: درباره ما title: درباره
comments: true comments: true
--- ---
``` ```

View File

@@ -3,16 +3,16 @@ title: コメントシステム
linkTitle: コメント linkTitle: コメント
--- ---
Hextraはサイトにコメントシステムを追加することをサポートしています。 Hextra はサイトにコメントシステムを追加する機能をサポートしています。
現在[giscus](https://giscus.app/)がサポートされています。 現在 [giscus](https://giscus.app/) が利用可能です。
<!--more--> <!--more-->
## giscus ## giscus
[giscus](https://giscus.app/)は、[GitHub Discussions](https://docs.github.com/ja/discussions)を利用したコメントシステムです。無料でオープンソースです。 [giscus](https://giscus.app/)[GitHub Discussions](https://docs.github.com/ja/discussions) を利用したコメントシステムです。無料でオープンソースです。
giscusを有効にするには、サイト設定ファイルに以下を追加する必要があります: giscus を有効にするには、サイト設定ファイルに以下を追加してください:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
@@ -27,13 +27,13 @@ params:
categoryId: <カテゴリID> categoryId: <カテゴリID>
``` ```
giscusの設定は[giscus.app](https://giscus.app/)ウェブサイトから構築できます。詳細もそで確認できます。 giscus の設定は [giscus.app](https://giscus.app/) ウェブサイトから構築できます。詳細もそちらで確認できます。
特定のページでコメントを有効または無効にするには、ページのフロントマターに以下を追加します 特定のページでコメントを有効/無効にするには、ページのフロントマターで設定します:
```yaml {filename="content/docs/about.md"} ```yaml {filename="content/docs/about.md"}
--- ---
title: について title: このサイトについて
comments: true comments: true
--- ---
``` ```

View File

@@ -10,7 +10,7 @@ Hextra 支持为您的网站添加评论系统。
## giscus ## giscus
[giscus](https://giscus.app/) 是一个由 [GitHub Discussions](https://docs.github.com/en/discussions) 提供支持的评论系统。它是免费且开源的。 [giscus](https://giscus.app/) 是一个由 [GitHub Discussions](https://docs.github.com/en/discussions) 驱动的评论系统。它是免费且开源的。
要启用 giscus您需要在网站配置文件中添加以下内容 要启用 giscus您需要在网站配置文件中添加以下内容
@@ -27,7 +27,7 @@ params:
categoryId: <分类 ID> categoryId: <分类 ID>
``` ```
giscus 的配置可以从 [giscus.app](https://giscus.app/) 网站生成。更多详细信息也可以在那里找到。 giscus 的配置可以从 [giscus.app](https://giscus.app/) 网站生成。更多详也可以在那里找到。
可以在页面的 front matter 中为特定页面启用或禁用评论: 可以在页面的 front matter 中为特定页面启用或禁用评论:

View File

@@ -1,20 +1,20 @@
--- ---
title: سفارشی‌سازی هگزترا title: سفارشی‌سازی Hextra
linkTitle: سفارشی‌سازی linkTitle: سفارشی‌سازی
--- ---
هگزترا برخی از گزینه‌های سفارشی‌سازی پیش‌فرض را در پرونده `hugo.yaml` برای پیکربندی تم ارائه می‌کند. Hextra برخی گزینه‌های پیش‌فرض سفارشی‌سازی را در فایل پیکربندی `hugo.yaml` ارائه می‌دهد تا تم را پیکربندی کنید.
این صفحه گزینه‌های موجود و نحوه سفارشی‌سازی بیشتر تم را توضیح می‌دهد. این صفحه گزینه‌های موجود و نحوه سفارشی‌سازی بیشتر تم را توضیح می‌دهد.
<!--more--> <!--more-->
## CSS سفارشی ## CSS سفارشی
برای افزودن CSS سفارشی، باید یک پرونده `assets/css/custom.css` در سایت خود ایجاد کنیم. هگزترا به طور خودکار این پرونده را بارگیری خواهد کرد. برای افزودن CSS سفارشی، باید یک فایل `assets/css/custom.css` در سایت خود ایجاد کنیم. Hextra به طور خودکار این فایل را بارگذاری می‌کند.
### خانواده فونت ### خانواده فونت
خانواده فونت برای محتوا را می‌توانید با استفاده از این سفارشی کنید: خانواده فونت محتوا را می‌توان با استفاده از موارد زیر سفارشی کرد:
```css {filename="assets/css/custom.css"} ```css {filename="assets/css/custom.css"}
.content { .content {
@@ -22,9 +22,9 @@ linkTitle: سفارشی‌سازی
} }
``` ```
### عنصر کد درونخطی ### عنصر کد درون خطی
رنگ متن ترکیب شده با `متن دیگر` را می‌توانید با موارد زیر سفارشی کرد: رنگ متن مخلوط شده با `متن دیگر` را می‌توان با موارد زیر سفارشی کرد:
```css {filename="assets/css/custom.css"} ```css {filename="assets/css/custom.css"}
.content code:not(.code-block code) { .content code:not(.code-block code) {
@@ -34,40 +34,218 @@ linkTitle: سفارشی‌سازی
### رنگ اصلی ### رنگ اصلی
رنگ اصلی تم را می‌توانید با تنظیم متغیرهای `--primary-hue` و `--primary-saturation` سفارشی کرد: رنگ اصلی تم را می‌توان با تنظیم متغیرهای `--primary-hue`، `--primary-saturation` و `--primary-lightness` سفارشی کرد:
```css {filename="assets/css/custom.css"} ```css {filename="assets/css/custom.css"}
:root { :root {
--primary-hue: 100deg; --primary-hue: 100deg;
--primary-saturation: 90%; --primary-saturation: 90%;
--primary-lightness: 50%;
} }
``` ```
### برجسته‌کردن سینتکس ### متغیرهای چیدمان کامپوننت
فهرست تم‌های برجسته‌کردن سینتکس در دسترس [گالری Chroma Styles](https://xyproto.github.io/splash/docs/all.html) موجود است. شیوه‌نامه را می‌توانید با استفاده از دستور زیر تولید کرد: Hextra متغیرهای CSS را برای سفارشی‌سازی عرض صفحات، نوار ناوبری و پاورقی ارائه می‌دهد:
```css {filename="assets/css/custom.css"}
:root {
/* عرض صفحه - همچنین از طریق params.page.width در hugo.yaml قابل پیکربندی است */
--hextra-max-page-width: 80rem; /* پیش‌فرض: 80rem (نرمال)، 90rem (عریض)، 100% (کامل) */
/* عرض نوار ناوبری - همچنین از طریق params.navbar.width در hugo.yaml قابل پیکربندی است */
--hextra-max-navbar-width: 90rem; /* عرض مستقل نوار ناوبری */
/* عرض پاورقی - همچنین از طریق params.footer.width در hugo.yaml قابل پیکربندی است */
--hextra-max-footer-width: 80rem; /* عرض مستقل پاورقی */
}
```
### متغیرهای تم Tailwind
با شروع از Hextra v0.10.0 که بر پایه Tailwind CSS v4 ساخته شده است، می‌توانید تم را با بازنویسی متغیرهای CSS در بلوک `@layer theme` سفارشی کنید.
این به شما امکان می‌دهد ظاهر کلی را بدون نیاز به تغییر هر کلاس به صورت جداگانه سفارشی کنید.
```css {filename="assets/css/custom.css"}
@layer theme {
:root {
--hx-default-mono-font-family: "JetBrains Mono", monospace;
}
}
```
برای جزئیات بیشتر، [مستندات متغیرهای تم Tailwind](https://tailwindcss.com/docs/theme#default-theme-variable-reference) را بررسی کنید.
### سفارشی‌سازی بیشتر تم
تم را می‌توان با بازنویسی استایل‌های پیش‌فرض از طریق کلاس‌های CSS در معرض، بیشتر سفارشی کرد. مثالی برای سفارشی‌سازی عنصر پاورقی:
```css {filename="assets/css/custom.css"}
.hextra-footer {
/* استایل‌ها روی عنصر پاورقی اعمال می‌شوند */
}
.hextra-footer:is(html[class~="dark"] *) {
/* استایل‌ها روی عنصر پاورقی در حالت تاریک اعمال می‌شوند */
}
```
از کلاس‌های زیر می‌توان برای سفارشی‌سازی بخش‌های مختلف تم استفاده کرد.
#### عمومی
- `hextra-scrollbar` - عنصر نوار پیمایش
- `content` - ظرف محتوای صفحه
#### شورتکدها
##### نشان
- `hextra-badge` - عنصر نشان
##### کارت
- `hextra-card` - عنصر کارت
- `hextra-card-image` - عنصر تصویر کارت
- `hextra-card-icon` - عنصر آیکون کارت
- `hextra-card-subtitle` - عنصر زیرنویس کارت
##### کارت‌ها
- `hextra-cards` - ظرف شبکه‌ای کارت‌ها
##### نوت‌بوک Jupyter
- `hextra-jupyter-code-cell` - ظرف سلول کد Jupyter
- `hextra-jupyter-code-cell-outputs-container` - ظرف خروجی‌های سلول کد Jupyter
- `hextra-jupyter-code-cell-outputs` - عنصر div خروجی سلول کد Jupyter
##### PDF
- `hextra-pdf` - عنصر ظرف PDF
##### مراحل
- `hextra-steps` - ظرف مراحل
##### تب‌ها
- `hextra-tabs-panel` - ظرف پنل تب‌ها
- `hextra-tabs-toggle` - دکمه تغییر تب‌ها
##### درخت فایل
- `hextra-filetree` - ظرف درخت فایل
##### پوشه
- `hextra-filetree-folder` - ظرف پوشه درخت فایل
#### نوار ناوبری
- `hextra-nav-container` - ظرف نوار ناوبری
- `hextra-nav-container-blur` - عنصر ظرف نوار ناوبری در حالت محو
- `hextra-hamburger-menu` - دکمه منوی همبرگری
#### پاورقی
- `hextra-footer` - عنصر پاورقی
- `hextra-custom-footer` - ظرف بخش پاورقی سفارشی
#### جستجو
- `hextra-search-wrapper` - ظرف wrapper جستجو
- `hextra-search-input` - عنصر ورودی جستجو
- `hextra-search-results` - ظرف لیست نتایج جستجو
کلاس‌های تو در تو اختیاری مورد استفاده در رابط کاربری جستجو:
- `hextra-search-title` - عنصر عنوان نتیجه
- `hextra-search-active` - لنکر نتیجه فعال
- `hextra-search-no-result` - عنصر حالت خالی
- `hextra-search-prefix` - برچسب مسیر/پیشوند برای نتایج گروه‌بندی شده
- `hextra-search-excerpt` - متن خلاصه نتیجه
- `hextra-search-match` - span پرس و جوی هایلایت شده
#### فهرست مطالب
- `hextra-toc` - ظرف فهرست مطالب
#### نوار کناری
- `hextra-sidebar-container` - ظرف نوار کناری
- `hextra-sidebar-active-item` - آیتم فعال در نوار کناری
#### تغییردهنده زبان
- `hextra-language-switcher` - دکمه تغییردهنده زبان
- `hextra-language-options` - ظرف گزینه‌های زبان
#### تغییردهنده تم
- `hextra-theme-toggle` - دکمه تغییر تم
#### دکمه کپی کد
- `hextra-code-copy-btn-container` - ظرف دکمه کپی کد
- `hextra-code-copy-btn` - دکمه کپی کد
- `hextra-copy-icon` - عنصر آیکون کپی
- `hextra-success-icon` - عنصر آیکون موفقیت
#### بلوک کد
- `hextra-code-block` - ظرف بلوک کد
- `hextra-code-filename` - عنصر نام فایل برای بلوک‌های کد
#### کارت ویژگی
- `hextra-feature-card` - عنصر لینک کارت ویژگی
#### شبکه ویژگی
- `hextra-feature-grid` - ظرف شبکه ویژگی
#### هایلایت سینتکس
لیست تم‌های هایلایت سینتکس موجود در [گالری استایل‌های Chroma](https://xyproto.github.io/splash/docs/all.html) قابل مشاهده است. برگه استایل را می‌توان با دستور زیر تولید کرد:
```shell ```shell
hugo gen chromastyles --style=github hugo gen chromastyles --style=github
``` ```
برای نادیده گرفتن طرح زمینه برجسته‌کردن سینتکس پیش‌فرض، می‌توانید استایل‌های تولید شده را به پرونده CSS سفارشی اضافه کنیم. برای بازنویسی تم پیش‌فرض هایلایت سینتکس، می‌توانیم استایل‌های تولید شده را به فایل CSS سفارشی اضافه کنیم.
## اسکریپت‌های سفارشی ## اسکریپت‌های سفارشی
با افزودن پرونده زیر می‌توانید اسکریپت‌های سفارشی را برای هر صفحه به انتهای اون اضافه کنید: می‌توانید اسکریپت‌های سفارشی را به انتهای head برای هر صفحه با افزودن فایل زیر اضافه کنید:
``` ```
layouts/partials/custom/head-end.html layouts/partials/custom/head-end.html
``` ```
## طرح‌بندی‌های سفارشی ## بخش اضافی سفارشی در پاورقی
با ایجاد پرونده‌ای با همین نام در دایرکتوری `layouts` سایت خود، می‌توانید طرح‌های تم را نادیده بگیرید. می‌توانید بخش اضافی در پاورقی با ایجاد یک فایل `layouts/partials/custom/footer.html` در سایت خود اضافه کنید.
به عنوان مثال، برای لغو طرح‌بندی `single.html` برای مستندات، یک پرونده`layouts/docs/single.html` در سایت خود ایجاد کنید.
برای اطلاعات بیشتر، به [Templateهای هیوگو](https://gohugo.io/templates/) مراجعه کنید. ```html {filename="layouts/partials/custom/footer.html"}
<!-- عنصر پاورقی شما اینجا -->
```
بخش اضافه شده قبل از بخش کپی‌رایت در پاورقی اضافه می‌شود.
می‌توانید از [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) و [سینتکس قالب Hugo](https://gohugo.io/templates/) برای افزودن محتوای خود استفاده کنید.
متغیرهای Hugo موجود در بخش پاورقی عبارتند از: `.switchesVisible` و `.displayCopyright`.
## چیدمان‌های سفارشی
چیدمان‌های تم را می‌توان با ایجاد یک فایل با همان نام در دایرکتوری `layouts` سایت خود بازنویسی کرد.
به عنوان مثال، برای بازنویسی چیدمان `single.html` برای مستندات، یک فایل `layouts/docs/single.html` در سایت خود ایجاد کنید.
برای اطلاعات بیشتر، به [مستندات قالب‌های Hugo][hugo-template-docs] مراجعه کنید.
## سفارشی‌سازی بیشتر ## سفارشی‌سازی بیشتر
چیزی را که دنبالش بودید پیدا نکردید؟ با خیال راحت [بحثی را باز کنید](https://github.com/imfing/hextra/discussions) یا به موضوع کمک کنید! آیا آنچه را که به دنبالش بودید پیدا نکردید؟ با خیال راحت [یک بحث باز کنید](https://github.com/imfing/hextra/discussions) یا به تم کمک کنید!
[hugo-template-docs]: https://gohugo.io/templates/

View File

@@ -3,18 +3,18 @@ title: Hextraのカスタマイズ
linkTitle: カスタマイズ linkTitle: カスタマイズ
--- ---
Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトのカスタマイズオプションを提供し、テーマを設定できます。 Hextraは、`hugo.yaml`設定ファイル内でテーマを設定するためのデフォルトのカスタマイズオプションを提供しています。
このページでは、利用可能なオプションとテーマをさらにカスタマイズする方法について説明します。 このページでは、利用可能なオプションとテーマをさらにカスタマイズする方法について説明します。
<!--more--> <!--more-->
## カスタムCSS ## カスタムCSS
カスタムCSSを追加するには、サイト内に`assets/css/custom.css`ファイルを作成する必要があります。Hextraはこのファイルを自動的に読み込みます。 カスタムCSSを追加するには、サイト内に`assets/css/custom.css`ファイルを作成ます。Hextraはこのファイルを自動的に読み込みます。
### フォントファミリー ### フォントファミリー
コンテンツのフォントファミリーは以下のようにカスタマイズできます コンテンツのフォントファミリーは以下のようにカスタマイズできます:
```css {filename="assets/css/custom.css"} ```css {filename="assets/css/custom.css"}
.content { .content {
@@ -24,7 +24,7 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
### インラインコード要素 ### インラインコード要素
`other text`と混在するテキストの色は以下のようにカスタマイズできます `他のテキスト`と混在するテキストの色は以下のようにカスタマイズできます:
```css {filename="assets/css/custom.css"} ```css {filename="assets/css/custom.css"}
.content code:not(.code-block code) { .content code:not(.code-block code) {
@@ -34,7 +34,7 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
### プライマリカラー ### プライマリカラー
テーマのプライマリカラーは、`--primary-hue`、`--primary-saturation`、`--primary-lightness`変数を設定することでカスタマイズできます テーマのプライマリカラーは、`--primary-hue`、`--primary-saturation`、`--primary-lightness`変数を設定することでカスタマイズできます:
```css {filename="assets/css/custom.css"} ```css {filename="assets/css/custom.css"}
:root { :root {
@@ -44,9 +44,42 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
} }
``` ```
### テーマのさらなるカスタマイズ ### コンポーネントレイアウト変数
テーマは、公開されているCSSクラスを介してデフォルトのスタイルをオーバーライドすることでさらにカスタマイズできます。フッター要素をカスタマイズする例: Hextraは、ページ、ナビゲーションバー、フッターの幅をカスタマイズするためのCSS変数を提供しています:
```css {filename="assets/css/custom.css"}
:root {
/* ページ幅 - hugo.yamlのparams.page.widthでも設定可能 */
--hextra-max-page-width: 80rem; /* デフォルト: 80rem (標準), 90rem (ワイド), 100% (フル) */
/* ナビゲーションバー幅 - hugo.yamlのparams.navbar.widthでも設定可能 */
--hextra-max-navbar-width: 90rem; /* 独立したナビゲーションバー幅 */
/* フッター幅 - hugo.yamlのparams.footer.widthでも設定可能 */
--hextra-max-footer-width: 80rem; /* 独立したフッター幅 */
}
```
### Tailwindテーマ変数
Tailwind CSS v4をベースにしたHextra v0.10.0以降では、`@layer theme`ブロック内でCSS変数をオーバーライドすることでテーマをカスタマイズできます。
これにより、個々のクラスを変更することなく、グローバルな外観をカスタマイズできます。
```css {filename="assets/css/custom.css"}
@layer theme {
:root {
--hx-default-mono-font-family: "JetBrains Mono", monospace;
}
}
```
詳細については、[Tailwindテーマ変数のドキュメント](https://tailwindcss.com/docs/theme#default-theme-variable-reference)を参照してください。
### さらなるテーマカスタマイズ
テーマは、公開されているCSSクラスをオーバーライドすることでさらにカスタマイズできます。フッター要素をカスタマイズする例:
```css {filename="assets/css/custom.css"} ```css {filename="assets/css/custom.css"}
.hextra-footer { .hextra-footer {
@@ -94,7 +127,7 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
##### ステップ ##### ステップ
- `steps` - ステップコンテナ - `hextra-steps` - ステップコンテナ
##### タブ ##### タブ
@@ -111,9 +144,9 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
#### ナビゲーションバー #### ナビゲーションバー
- `nav-container` - ナビゲーションバーコンテナ - `hextra-nav-container` - ナビゲーションバーコンテナ
- `nav-container-blur` - ナビゲーションバーコンテナのぼかし要素 - `hextra-nav-container-blur` - ブラー効果付きナビゲーションバーコンテナ
- `hamburger-menu` - ハンバーガーメニューボタン - `hextra-hamburger-menu` - ハンバーガーメニューボタン
#### フッター #### フッター
@@ -122,9 +155,18 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
#### 検索 #### 検索
- `search-wrapper` - 検索ラッパーコンテナ - `hextra-search-wrapper` - 検索ラッパーコンテナ
- `search-input` - 検索入力要素 - `hextra-search-input` - 検索入力要素
- `search-results` - 検索結果リストコンテナ - `hextra-search-results` - 検索結果リストコンテナ
検索UI内で使用されるオプションのネストされたクラス:
- `hextra-search-title` - 結果タイトル要素
- `hextra-search-active` - アクティブな結果アンカー
- `hextra-search-no-result` - 空の状態要素
- `hextra-search-prefix` - グループ化された結果のパンくずリスト/プレフィックスラベル
- `hextra-search-excerpt` - 結果スニペットテキスト
- `hextra-search-match` - ハイライトされたクエリスパン
#### 目次 #### 目次
@@ -132,27 +174,29 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
#### サイドバー #### サイドバー
- `mobile-menu-overlay` - モバイルメニューのオーバーレイ要素 - `hextra-sidebar-container` - サイドバーコンテナ
- `sidebar-container` - サイドバーコンテナ - `hextra-sidebar-active-item` - サイドバーのアクティブアイテム
- `sidebar-active-item` - サイドバーのアクティブアイテム
#### 言語スイッチャー #### 言語スイッチャー
- `language-switcher` - 言語スイッチャーボタン - `hextra-language-switcher` - 言語スイッチャーボタン
- `language-options` - 言語オプションコンテナ - `hextra-language-options` - 言語オプションコンテナ
#### テーマトグル #### テーマトグル
- `theme-toggle` - テーマトグルボタン - `hextra-theme-toggle` - テーマトグルボタン
#### コードコピーボタン #### コードコピーボタン
- `hextra-code-copy-btn-container` - コードコピーボタンコンテナ - `hextra-code-copy-btn-container` - コードコピーボタンコンテナ
- `hextra-code-copy-btn` - コードコピーボタン - `hextra-code-copy-btn` - コードコピーボタン
- `hextra-copy-icon` - コピーアイコン要素
- `hextra-success-icon` - 成功アイコン要素
#### コードブロック #### コードブロック
- `hextra-code-block` - コードブロックコンテナ - `hextra-code-block` - コードブロックコンテナ
- `hextra-code-filename` - コードブロックのファイル名要素
#### フィーチャーカード #### フィーチャーカード
@@ -162,13 +206,9 @@ Hextraは、`hugo.yaml`設定ファイル内でいくつかのデフォルトの
- `hextra-feature-grid` - フィーチャーグリッドコンテナ - `hextra-feature-grid` - フィーチャーグリッドコンテナ
#### パンくずリスト
パンくずリスト用の特定のクラスはありません。
### シンタックスハイライト ### シンタックスハイライト
利用可能なシンタックスハイライトテーマのリストは、[Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html)で確認できます。スタイルシートは以下のコマンドで生成できます 利用可能なシンタックスハイライトテーマの一覧は、[Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html)で確認できます。スタイルシートは以下のコマンドで生成できます:
```shell ```shell
hugo gen chromastyles --style=github hugo gen chromastyles --style=github
@@ -178,34 +218,34 @@ hugo gen chromastyles --style=github
## カスタムスクリプト ## カスタムスクリプト
すべてのページのheadの最後にカスタムスクリプトを追加するには、以下のファイルを追加します すべてのページのheadの終わりにカスタムスクリプトを追加するには、以下のファイルを作成します:
``` ```
layouts/partials/custom/head-end.html layouts/partials/custom/head-end.html
``` ```
## フッターのカスタムセクション ## フッターのカスタムセクション追加
フッターに追加セクションを追加するには、サイト内に`layouts/partials/custom/footer.html`ファイルを作成します。 フッターに追加セクションを追加するには、サイト内に`layouts/partials/custom/footer.html`ファイルを作成します。
```html {filename="layouts/partials/custom/footer.html"} ```html {filename="layouts/partials/custom/footer.html"}
<!-- ここにフッター要素を追加 --> <!-- ここにフッター要素を追加 -->
``` ```
追加されたセクションは、フッターの著作権セクションの前に追加されます。 追加されたセクションは、フッターの著作権セクションの前に追加されます。
[HTML](https://developer.mozilla.org/ja/docs/Web/HTML)と[Hugoテンプレート構文](https://gohugo.io/templates/)を使用して独自のコンテンツを追加できます。 [HTML](https://developer.mozilla.org/ja/docs/Web/HTML)と[Hugoテンプレート構文](https://gohugo.io/templates/)を使用して独自のコンテンツを追加できます。
フッターセクションで利用可能なHugo変数は、`.switchesVisible`と`.copyrightVisible`です フッターセクションで利用可能なHugo変数: `.switchesVisible`と`.displayCopyright`
## カスタムレイアウト ## カスタムレイアウト
テーマのレイアウトは、サイトの`layouts`ディレクトリに同じ名前のファイルを作成することでオーバーライドできます。 テーマのレイアウトは、サイトの`layouts`ディレクトリに同じ名前のファイルを作成することでオーバーライドできます。
例えば、ドキュメントの`single.html`レイアウトをオーバーライドするには、サイト内に`layouts/docs/single.html`ファイルを作成します。 例えば、ドキュメントの`single.html`レイアウトをオーバーライドするには、サイト内に`layouts/docs/single.html`ファイルを作成します。
詳細については、[Hugoテンプレート][hugo-template-docs]を参照してください。 詳細については、[Hugoテンプレート][hugo-template-docs]を参照してください。
## さらなるカスタマイズ ## さらなるカスタマイズ
探しているものが見つかりませんでしたか?[ディスカッションを開く](https://github.com/imfing/hextra/discussions)か、テーマに貢献してください 探しているものが見つかりませんでしたか?[ディスカッションを開く](https://github.com/imfing/hextra/discussions)か、テーマへの貢献をお願いします
[hugo-template-docs]: https://gohugo.io/templates/ [hugo-template-docs]: https://gohugo.io/templates/

View File

@@ -61,6 +61,22 @@ Hextra provides CSS variables to customize the width of pages, navbar, and foote
} }
``` ```
### Tailwind Theme Variables
Starting with Hextra v0.10.0, which is built on Tailwind CSS v4, you can customize the theme by overriding CSS variables inside the `@layer theme` block.
This lets you customize the global look and feel without having to modify every individual class.
```css {filename="assets/css/custom.css"}
@layer theme {
:root {
--hx-default-mono-font-family: "JetBrains Mono", monospace;
}
}
```
Check out [Tailwind Theme Variables documentation](https://tailwindcss.com/docs/theme#default-theme-variable-reference) for details.
### Further Theme Customization ### Further Theme Customization
The theme can be further customized by overriding the default styles via the exposed css classes. An example for customizing the footer element: The theme can be further customized by overriding the default styles via the exposed css classes. An example for customizing the footer element:

View File

@@ -3,18 +3,18 @@ title: 自定义 Hextra
linkTitle: 自定义 linkTitle: 自定义
--- ---
Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项,用于配置主题。 Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项配置主题。
本页描述了可用选项以及如何进一步自定义主题。 本页描述了可用选项以及如何进一步自定义主题。
<!--more--> <!--more-->
## 自定义 CSS ## 自定义 CSS
要添加自定义 CSS我们需要在站点中创建一个文件 `assets/css/custom.css`。Hextra 会自动加载此文件。 要添加自定义 CSS我们需要在站点中创建 `assets/css/custom.css` 文件。Hextra 会自动加载此文件。
### 字体 ### 字体家族
内容的字体可以通过以下方式自定义 可以使用以下方式自定义内容的字体家族
```css {filename="assets/css/custom.css"} ```css {filename="assets/css/custom.css"}
.content { .content {
@@ -22,9 +22,9 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项,
} }
``` ```
### 内代码元素 ### 内代码元素
与 `其他文本` 混合的文本颜色可以通过以下方式自定义: 与 `其他文本` 混合的代码文本颜色可以通过以下方式自定义:
```css {filename="assets/css/custom.css"} ```css {filename="assets/css/custom.css"}
.content code:not(.code-block code) { .content code:not(.code-block code) {
@@ -34,7 +34,7 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项,
### 主色调 ### 主色调
主题的主色调可以通过设置 `--primary-hue`、`--primary-saturation` 和 `--primary-lightness` 变量来自定义: 可以通过设置 `--primary-hue`、`--primary-saturation` 和 `--primary-lightness` 变量来自定义主题的主色调
```css {filename="assets/css/custom.css"} ```css {filename="assets/css/custom.css"}
:root { :root {
@@ -44,9 +44,42 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项,
} }
``` ```
### 进一步的主题自定义 ### 组件布局变量
可以通过覆盖暴露的 CSS 类来进一步自定义主题。以下是一个自定义页脚元素的示例 Hextra 提供了 CSS 变量来自定义页面、导航栏和页脚的宽度
```css {filename="assets/css/custom.css"}
:root {
/* 页面宽度 - 也可以通过 hugo.yaml 中的 params.page.width 配置 */
--hextra-max-page-width: 80rem; /* 默认值80rem普通90rem宽版100%(全宽) */
/* 导航栏宽度 - 也可以通过 hugo.yaml 中的 params.navbar.width 配置 */
--hextra-max-navbar-width: 90rem; /* 独立的导航栏宽度 */
/* 页脚宽度 - 也可以通过 hugo.yaml 中的 params.footer.width 配置 */
--hextra-max-footer-width: 80rem; /* 独立的页脚宽度 */
}
```
### Tailwind 主题变量
从基于 Tailwind CSS v4 的 Hextra v0.10.0 开始,您可以通过在 `@layer theme` 块中覆盖 CSS 变量来自定义主题。
这样可以在不修改每个单独类的情况下自定义全局外观。
```css {filename="assets/css/custom.css"}
@layer theme {
:root {
--hx-default-mono-font-family: "JetBrains Mono", monospace;
}
}
```
详情请参阅 [Tailwind 主题变量文档](https://tailwindcss.com/docs/theme#default-theme-variable-reference)。
### 进一步主题自定义
可以通过覆盖暴露的 CSS 类来自定义主题的默认样式。以下是一个自定义页脚元素的示例:
```css {filename="assets/css/custom.css"} ```css {filename="assets/css/custom.css"}
.hextra-footer { .hextra-footer {
@@ -54,7 +87,7 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项,
} }
.hextra-footer:is(html[class~="dark"] *) { .hextra-footer:is(html[class~="dark"] *) {
/* 样式将应用于暗模式下的页脚元素 */ /* 样式将应用于暗模式下的页脚元素 */
} }
``` ```
@@ -82,11 +115,11 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项,
- `hextra-cards` - 卡片网格容器 - `hextra-cards` - 卡片网格容器
##### Jupyter Notebook ##### Jupyter 笔记本
- `hextra-jupyter-code-cell` - Jupyter 代码单元容器 - `hextra-jupyter-code-cell` - Jupyter 代码单元容器
- `hextra-jupyter-code-cell-outputs-container` - Jupyter 代码单元输出容器 - `hextra-jupyter-code-cell-outputs-container` - Jupyter 代码单元输出容器
- `hextra-jupyter-code-cell-outputs` - Jupyter 代码单元输出 div 元素 - `hextra-jupyter-code-cell-outputs` - Jupyter 代码单元输出 div 元素
##### PDF ##### PDF
@@ -94,7 +127,7 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项,
##### 步骤 ##### 步骤
- `steps` - 步骤容器 - `hextra-steps` - 步骤容器
##### 标签页 ##### 标签页
@@ -111,9 +144,9 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项,
#### 导航栏 #### 导航栏
- `nav-container` - 导航栏容器 - `hextra-nav-container` - 导航栏容器
- `nav-container-blur` - 导航栏模糊元素 - `hextra-nav-container-blur` - 导航栏模糊效果容器
- `hamburger-menu` - 汉堡菜单按钮 - `hextra-hamburger-menu` - 汉堡菜单按钮
#### 页脚 #### 页脚
@@ -122,9 +155,18 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项,
#### 搜索 #### 搜索
- `search-wrapper` - 搜索包装容器 - `hextra-search-wrapper` - 搜索包装容器
- `search-input` - 搜索输入元素 - `hextra-search-input` - 搜索输入元素
- `search-results` - 搜索结果列表容器 - `hextra-search-results` - 搜索结果列表容器
搜索 UI 中使用的可选嵌套类:
- `hextra-search-title` - 结果标题元素
- `hextra-search-active` - 活动结果锚点
- `hextra-search-no-result` - 空状态元素
- `hextra-search-prefix` - 分组结果的面包屑/前缀标签
- `hextra-search-excerpt` - 结果片段文本
- `hextra-search-match` - 高亮查询范围
#### 目录 #### 目录
@@ -132,27 +174,29 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项,
#### 侧边栏 #### 侧边栏
- `mobile-menu-overlay` - 移动菜单的覆盖元素 - `hextra-sidebar-container` - 侧边栏容器
- `sidebar-container` - 侧边栏容器 - `hextra-sidebar-active-item` - 侧边栏中的活动项
- `sidebar-active-item` - 侧边栏中的活动项
#### 语言切换器 #### 语言切换器
- `language-switcher` - 语言切换按钮 - `hextra-language-switcher` - 语言切换按钮
- `language-options` - 语言选项容器 - `hextra-language-options` - 语言选项容器
#### 主题切换 #### 主题切换
- `theme-toggle` - 主题切换按钮 - `hextra-theme-toggle` - 主题切换按钮
#### 代码复制按钮 #### 代码复制按钮
- `hextra-code-copy-btn-container` - 代码复制按钮容器 - `hextra-code-copy-btn-container` - 代码复制按钮容器
- `hextra-code-copy-btn` - 代码复制按钮 - `hextra-code-copy-btn` - 代码复制按钮
- `hextra-copy-icon` - 复制图标元素
- `hextra-success-icon` - 成功图标元素
#### 代码块 #### 代码块
- `hextra-code-block` - 代码块容器 - `hextra-code-block` - 代码块容器
- `hextra-code-filename` - 代码块的文件名元素
#### 功能卡片 #### 功能卡片
@@ -162,10 +206,6 @@ Hextra 在 `hugo.yaml` 配置文件中提供了一些默认的自定义选项,
- `hextra-feature-grid` - 功能网格容器 - `hextra-feature-grid` - 功能网格容器
#### 面包屑导航
面包屑导航没有特定的类。
### 语法高亮 ### 语法高亮
可用的语法高亮主题列表可在 [Chroma 样式库](https://xyproto.github.io/splash/docs/all.html) 中找到。可以使用以下命令生成样式表: 可用的语法高亮主题列表可在 [Chroma 样式库](https://xyproto.github.io/splash/docs/all.html) 中找到。可以使用以下命令生成样式表:
@@ -178,7 +218,7 @@ hugo gen chromastyles --style=github
## 自定义脚本 ## 自定义脚本
可以通过添加以下文件在每个页面的 head 末尾添加自定义脚本: 可以通过添加以下文件在每个页面的 head 末尾添加自定义脚本:
``` ```
layouts/partials/custom/head-end.html layouts/partials/custom/head-end.html
@@ -186,26 +226,26 @@ layouts/partials/custom/head-end.html
## 自定义页脚额外部分 ## 自定义页脚额外部分
可以通过在站点中创建文件 `layouts/partials/custom/footer.html` 来在页脚中添加额外部分。 可以通过在站点中创建 `layouts/partials/custom/footer.html` 文件来添加页脚的额外部分。
```html {filename="layouts/partials/custom/footer.html"} ```html {filename="layouts/partials/custom/footer.html"}
<!-- 的页脚元素在这里 --> <!-- 的页脚元素在这里 -->
``` ```
添加的部分将出现在页脚的版权部分之前。 添加的部分将出现在页脚的版权部分之前。
可以使用 [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) 和 [Hugo 模板语法](https://gohugo.io/templates/) 添加自己的内容。 可以使用 [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) 和 [Hugo 模板语法](https://gohugo.io/templates/) 添加自己的内容。
页脚部分可用的 Hugo 变量有:`.switchesVisible` 和 `.copyrightVisible`。 页脚部分可用的 Hugo 变量有:`.switchesVisible` 和 `.displayCopyright`。
## 自定义布局 ## 自定义布局
可以通过在站点的 `layouts` 目录中创建同名文件来覆盖主题的布局。 可以通过在站点的 `layouts` 目录中创建同名文件来覆盖主题的布局。
例如,要覆盖文档的 `single.html` 布局,可以在站点中创建文件 `layouts/docs/single.html`。 例如,要覆盖文档的 `single.html` 布局,可以在站点中创建 `layouts/docs/single.html` 文件
更多信息,请参阅 [Hugo 模板文档][hugo-template-docs]。 更多信息,请参阅 [Hugo 模板文档][hugo-template-docs]。
## 进一步自定义 ## 进一步自定义
没有找到你想要的?欢迎 [发起讨论](https://github.com/imfing/hextra/discussions) 或为主题做出贡献! 没有找到您需要的内容?欢迎 [发起讨论](https://github.com/imfing/hextra/discussions) 或为主题做出贡献!
[hugo-template-docs]: https://gohugo.io/templates/ [hugo-template-docs]: https://gohugo.io/templates/

View File

@@ -4,13 +4,13 @@ weight: 1
prev: /docs/advanced prev: /docs/advanced
--- ---
هگزترا از ایجاد سایت با چندین زبان با استفاده از [حالت چند زبانه](https://gohugo.io/content-management/multilingual/) Hugo پشتیبانی می‌کند. Hextra از ایجاد سایت با چندین زبان با استفاده از [حالت چندزبانه](https://gohugo.io/content-management/multilingual/) هوگو پشتیبانی می‌کند.
<!--more--> <!--more-->
## فعال‌سازی چند زبانه ## فعال‌سازی چندزبانه
برای اینکه سایت ما چند زبانه شود، باید زبان‌های پشتیبانی شده را به Hugo بگوییم. باید به پرونده پیکربندی سایت اضافه کنیم: برای چندزبانه کردن سایت، باید به هوگو زبان‌های پشتیبانی شده را اطلاع دهیم. باید به فایل پیکربندی سایت اضافه کنیم:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
defaultContentLanguage: en defaultContentLanguage: en
@@ -18,33 +18,33 @@ languages:
en: en:
languageName: English languageName: English
weight: 1 weight: 1
fa: fr:
languageName: فارسی languageName: Français
weight: 2 weight: 2
ja: ja:
languageName: 日本語 languageName: 日本語
weight: 3 weight: 3
``` ```
## مدیریت ترجمه‌ها بر اساس نام پرونده ## مدیریت ترجمه‌ها بر اساس نام فایل
Hugo از مدیریت ترجمه با نام پرونده پشتیبانی می‌کند. به عنوان مثال، اگر یک پرونده `content/docs/_index.md` به زبان انگلیسی داشته باشیم، می توانیم یک پرونده `content/docs/_index.fa.md` برای ترجمه فارسی ایجاد کنیم. هوگو از مدیریت ترجمهها بر اساس نام فایل پشتیبانی می‌کند. به عنوان مثال، اگر فایلی به نام `content/docs/_index.md` به زبان انگلیسی داریم، میتوانیم فایل `content/docs/_index.fr.md` را برای ترجمه فرانسوی ایجاد کنیم.
{{< filetree/container >}} {{< filetree/container >}}
{{< filetree/folder name="content" >}} {{< filetree/folder name="content" >}}
{{< filetree/folder name="docs" state="open" >}} {{< filetree/folder name="docs" state="open" >}}
{{< filetree/file name="_index.md" >}} {{< filetree/file name="_index.md" >}}
{{< filetree/file name="_index.fa.md" >}} {{< filetree/file name="_index.fr.md" >}}
{{< filetree/file name="_index.ja.md" >}} {{< filetree/file name="_index.ja.md" >}}
{{< /filetree/folder >}} {{< /filetree/folder >}}
{{< /filetree/folder >}} {{< /filetree/folder >}}
{{< /filetree/container >}} {{< /filetree/container >}}
توجه: Hugo همچنین از ت[ترجمه توسط دایرکتوری محتوا](https://gohugo.io/content-management/multilingual/#translation-by-content-directory) پشتیبانی می‌کند. توجه: هوگو از [ترجمه بر اساس دایرکتوری محتوا](https://gohugo.io/content-management/multilingual/#translation-by-content-directory) نیز پشتیبانی می‌کند.
## ترجمه آیتم‌های منو ## ترجمه آیتم‌های منو
برای ترجمه آیتم‌های منو در نوار پیمایش، باید فیلد `identifier` را تنظیم کنیم: برای ترجمه آیتم‌های منو در نوار ناوبری، باید فیلد `identifier` را تنظیم کنیم:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
menu: menu:
@@ -59,25 +59,25 @@ menu:
weight: 2 weight: 2
``` ```
و آنها را در پرونده i18n مربوطه ترجمه کنید: و آنها را در فایل i18n مربوطه ترجمه کنیم:
```yaml {filename="i18n/fa.yaml"} ```yaml {filename="i18n/fr.yaml"}
documentation: مستندات documentation: Documentation
blog: وبلاگ blog: Blog
``` ```
## ترجمه رشته‌ها ## ترجمه رشته‌ها
برای ترجمه رشته‌ها در مکان‌های دیگر، باید ترجمه را به پرونده i18n مربوطه اضافه کنیم: برای ترجمه رشته‌ها در سایر قسمت‌ها، باید ترجمه را به فایل i18n مربوطه اضافه کنیم:
```yaml {filename="i18n/fa.yaml"} ```yaml {filename="i18n/fr.yaml"}
readMore: ادامه مطلب readMore: Lire la suite
``` ```
فهرستی از رشته‌های استفاده شده در تم را می‌توان در پرونده `i18n/en.yaml` پیدا کرد. لیستی از رشته‌های استفاده شده در قالب را می‌توان در فایل `i18n/en.yaml` یافت.
## بیشتر بخوانید ## مطالعه بیشتر
- [حالت چند زبانه هیوگو](https://gohugo.io/content-management/multilingual/) - [حالت چندزبانه هوگو](https://gohugo.io/content-management/multilingual/)
- [هیوگو چند زبانه قسمت ۱: ترجمه محتوا](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/) - [چندزبانه هوگو بخش 1: ترجمه محتوا](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/)
- [هیوگو چند زبانه قسمت ۲: بومی‌سازی رشته‌ها](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/) - [چندزبانه هوگو بخش 2: بومی‌سازی رشته‌ها](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/)

View File

@@ -4,13 +4,13 @@ weight: 1
prev: /docs/advanced prev: /docs/advanced
--- ---
Hextraは、Hugo[多言語モード](https://gohugo.io/content-management/multilingual/)を使用して、複数言語サイトを作成することをサポートしています。 HextraHugo[多言語モード](https://gohugo.io/content-management/multilingual/) を使用して、複数言語サイトを作成することをサポートしています。
<!--more--> <!--more-->
## 多言語対応を有効にする ## 多言語対応を有効にする
サイトを多言語対応にするためには、Hugoにサポートする言語を伝える必要があります。サイト設定ファイルに以下を追加します サイトを多言語対応にするには、Hugo にサポートする言語を伝える必要があります。サイト設定ファイルに以下を追加します:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
defaultContentLanguage: en defaultContentLanguage: en
@@ -28,7 +28,7 @@ languages:
## ファイル名による翻訳管理 ## ファイル名による翻訳管理
Hugoはファイル名による翻訳管理をサポートしています。例えば、英語のファイル `content/docs/_index.md` がある場合、フランス語の翻訳用に `content/docs/_index.fr.md` というファイルを作成できます。 Hugo はファイル名による翻訳管理をサポートしています。例えば、英語のファイル `content/docs/_index.md` がある場合、フランス語の翻訳用に `content/docs/_index.fr.md` というファイルを作成できます。
{{< filetree/container >}} {{< filetree/container >}}
{{< filetree/folder name="content" >}} {{< filetree/folder name="content" >}}
@@ -40,11 +40,11 @@ Hugoは、ファイル名による翻訳管理をサポートしています。
{{< /filetree/folder >}} {{< /filetree/folder >}}
{{< /filetree/container >}} {{< /filetree/container >}}
注: Hugo[コンテンツディレクトリによる翻訳](https://gohugo.io/content-management/multilingual/#translation-by-content-directory)もサポートしています。 注: Hugo[コンテンツディレクトリによる翻訳](https://gohugo.io/content-management/multilingual/#translation-by-content-directory) もサポートしています。
## メニュー項目の翻訳 ## メニュー項目の翻訳
ナビゲーションバーのメニュー項目を翻訳するには、`identifier` フィールドを設定する必要があります ナビゲーションバーのメニュー項目を翻訳するには、`identifier` フィールドを設定する必要があります:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
menu: menu:
@@ -59,7 +59,7 @@ menu:
weight: 2 weight: 2
``` ```
そして、対応するi18nファイルで翻訳します そして、対応する i18n ファイルで翻訳します:
```yaml {filename="i18n/fr.yaml"} ```yaml {filename="i18n/fr.yaml"}
documentation: Documentation documentation: Documentation
@@ -68,16 +68,16 @@ blog: Blog
## 文字列の翻訳 ## 文字列の翻訳
他の場所の文字列を翻訳するには、対応するi18nファイルに翻訳を追加する必要があります 他の場所の文字列を翻訳するには、対応する i18n ファイルに翻訳を追加する必要があります:
```yaml {filename="i18n/fr.yaml"} ```yaml {filename="i18n/fr.yaml"}
readMore: Lire la suite readMore: Lire la suite
``` ```
テーマで使用されている文字列のリストは、`i18n/en.yaml` ファイルにあります。 テーマで使用される文字列の一覧は `i18n/en.yaml` ファイルで確認できます。
## さらに詳しく ## さらに詳しく
- [Hugo 多言語モード](https://gohugo.io/content-management/multilingual/) - [Hugo 多言語モード](https://gohugo.io/content-management/multilingual/)
- [Hugo 多言語 Part 1: コンテンツ翻訳](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/) - [Hugo 多言語対応 パート1: コンテンツ翻訳](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/)
- [Hugo 多言語 Part 2: 文字列のローカライズ](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/) - [Hugo 多言語対応 パート2: 文字列のローカライズ](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/)

View File

@@ -8,9 +8,9 @@ Hextra 支持使用 Hugo 的[多语言模式](https://gohugo.io/content-manageme
<!--more--> <!--more-->
## 启用多语言 ## 启用多语言功能
要使我们的网站支持多语言,我们需要告诉 Hugo 支持的语言。我们需要在站点配置文件中添加 要使网站支持多语言,我们需要在站点配置文件中指定支持的语言
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
defaultContentLanguage: en defaultContentLanguage: en
@@ -28,7 +28,7 @@ languages:
## 通过文件名管理翻译 ## 通过文件名管理翻译
Hugo 支持通过文件名管理翻译。例如,如果我们有一个英文文件 `content/docs/_index.md`我们可以创建一个文件 `content/docs/_index.fr.md` 作为法语翻译。 Hugo 支持通过文件名管理翻译。例如,如果我们有一个英文文件 `content/docs/_index.md`,可以创建 `content/docs/_index.fr.md` 作为法语翻译。
{{< filetree/container >}} {{< filetree/container >}}
{{< filetree/folder name="content" >}} {{< filetree/folder name="content" >}}
@@ -40,11 +40,11 @@ Hugo 支持通过文件名管理翻译。例如,如果我们有一个英文文
{{< /filetree/folder >}} {{< /filetree/folder >}}
{{< /filetree/container >}} {{< /filetree/container >}}
注意Hugo 还支持[通过内容目录进行翻译](https://gohugo.io/content-management/multilingual/#translation-by-content-directory)。 注意Hugo 还支持[通过内容目录翻译](https://gohugo.io/content-management/multilingual/#translation-by-content-directory)。
## 翻译菜单项 ## 翻译菜单项
要翻译导航栏中的菜单项,我们需要设置 `identifier` 字段: 要翻译导航栏中的菜单项,需要设置 `identifier` 字段:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
menu: menu:
@@ -59,7 +59,7 @@ menu:
weight: 2 weight: 2
``` ```
并在应的 i18n 文件中进行翻译: 并在应的 i18n 文件中进行翻译:
```yaml {filename="i18n/fr.yaml"} ```yaml {filename="i18n/fr.yaml"}
documentation: Documentation documentation: Documentation
@@ -68,7 +68,7 @@ blog: Blog
## 翻译字符串 ## 翻译字符串
要翻译其他地方的字符串,我们需要将翻译添加到应的 i18n 文件中: 要翻译其他位置的字符串,需要将翻译添加到应的 i18n 文件中:
```yaml {filename="i18n/fr.yaml"} ```yaml {filename="i18n/fr.yaml"}
readMore: Lire la suite readMore: Lire la suite
@@ -76,7 +76,7 @@ readMore: Lire la suite
主题中使用的字符串列表可以在 `i18n/en.yaml` 文件中找到。 主题中使用的字符串列表可以在 `i18n/en.yaml` 文件中找到。
## 了解更多 ## 延伸阅读
- [Hugo 多语言模式](https://gohugo.io/content-management/multilingual/) - [Hugo 多语言模式](https://gohugo.io/content-management/multilingual/)
- [Hugo 多语言第一部分:内容翻译](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/) - [Hugo 多语言第一部分:内容翻译](https://www.regisphilibert.com/blog/2018/08/hugo-multilingual-part-1-managing-content-translation/)

View File

@@ -1,5 +1,5 @@
--- ---
title: شروع کنید title: شروع به کار
weight: 1 weight: 1
tags: tags:
- مستندات - مستندات
@@ -8,32 +8,34 @@ next: /docs/guide
prev: /docs prev: /docs
--- ---
## شروع سریع از طریق Template ## شروع سریع با قالب
{{< icon "github" >}}&nbsp;[imfing/hextra-starter-template](https://github.com/imfing/hextra-starter-template) {{< icon "github" >}}&nbsp;[imfing/hextra-starter-template](https://github.com/imfing/hextra-starter-template)
با استفاده از template در بالای صفحه‌ای مخزن می‌توانید به سرعت شروع به کار کنید. می‌توانید با استفاده از مخزن قالب فوق به سرعت شروع به کار کنید.
<img src="https://docs.github.com/assets/cb-77734/mw-1440/images/help/repository/use-this-template-button.webp" width="500"> <img src="https://docs.github.com/assets/cb-77734/mw-1440/images/help/repository/use-this-template-button.webp" width="500">
ما یک [گردش کاری GitHub Actions](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow) ارائه کرده‌ایم که می‌تواند به ساخت و به‌کاراندازی خودکار سایت شما در گیت‌هاب Pages، برای میزبانی رایگان کمک کند. برای گزینه‌های بیشتر، [به‌کاراندازی سایت](../guide/deploy-site) را بررسی کنید. ما یک [گردش کار GitHub Actions](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow) ارائه کرده‌ایم که می‌تواند به صورت خودکار سایت شما را ساخته و در GitHub Pages مستقر کند و به صورت رایگان میزبانی کند.
برای گزینه‌های بیشتر، [استقرار سایت](../guide/deploy-site) را بررسی کنید.
[🌐 نسخه‌ي نمایشی ](https://imfing.github.io/hextra-starter-template/) [🌐 نسخه نمایشی ](https://imfing.github.io/hextra-starter-template/)
## شروع به عنوان پروژه جدید ## شروع به عنوان پروژه جدید
دو راه اصلی برای اضافه کردن تم هگزترا به پروژه Hugo وجود دارد: دو روش اصلی برای افزودن تم Hextra به پروژه Hugo شما وجود دارد:
1. **ماژول‌های Hugo (توصیه می‌شود)**: ساده‌ترین و توصیه شده‌ترین. [ماژول‌های Hugo](https://gohugo.io/hugo-modules/) به شما امکان می‌دهند تم را مستقیما از منبع آنلاین آن وارد کنید. تم به صورت خودکار دانلود و توسط Hugo مدیریت می‌شود. 1. **ماژول‌های Hugo (توصیه شده)**: ساده‌ترین و توصیهشده‌ترین روش. [ماژول‌های Hugo](https://gohugo.io/hugo-modules/) به شما امکان می‌دهند تم را مستقیماً از منبع آنلاین آن دریافت کنید. تم به صورت خودکار دانلود شده و توسط Hugo مدیریت می‌شود.
2. **ساب‌ماژول گیت**: در عوض، هگزترا را به عنوان یک [ساب‌ماژول گیت](https://git-scm.com/book/en/v2/Git-Tools-Submodules) اضافه کنید. تم توسط گیت دانلود شده و در پوشه `themes` پروژه شما ذخیره می‌شود.
### هگزترا را به عنوان ماژول Hugo راه‌اندازی کنید 2. **زیرماژول Git**: به عنوان جایگزین، Hextra را به عنوان یک [زیرماژول Git](https://git-scm.com/book/en/v2/Git-Tools-Submodules) اضافه کنید. تم توسط Git دانلود شده و در پوشه `themes` پروژه شما ذخیره می‌شود.
### راه‌اندازی Hextra به عنوان ماژول Hugo
#### پیش‌نیازها #### پیش‌نیازها
قبل از شروع، باید این نرم‌افزارها را نصب کنید: قبل از شروع، باید نرم‌افزارهای زیر را نصب کرده باشید:
- [Hugo (extended version)](https://gohugo.io/installation/) - [Hugo (نسخه extended)](https://gohugo.io/installation/)
- [Git](https://git-scm.com/) - [Git](https://git-scm.com/)
- [Go](https://go.dev/) - [Go](https://go.dev/)
@@ -41,24 +43,24 @@ prev: /docs
{{% steps %}} {{% steps %}}
### راه‌انداختن یک سایت جدید Hugo ### راه‌اندازی یک سایت جدید Hugo
```shell ```shell
hugo new site my-site --format=yaml hugo new site my-site --format=yaml
``` ```
### پیکربندی تم هگزترا از طریق ماژول ### پیکربندی تم Hextra از طریق ماژول
```shell ```shell
# مقداردهی اولیه ماژول هیوگو # راه‌اندازی ماژول Hugo
cd my-site cd my-site
hugo mod init github.com/username/my-site hugo mod init github.com/username/my-site
# افزودن تم هگزترا # افزودن تم Hextra
hugo mod get github.com/imfing/hextra hugo mod get github.com/imfing/hextra
``` ```
با افزودن موارد زیر، `hugo.yaml` را برای استفاده از تم هگزترا پیکربندی کنید: فایل `hugo.yaml` را برای استفاده از تم Hextra با افزودن موارد زیر پیکربندی کنید:
```yaml ```yaml
module: module:
@@ -66,9 +68,9 @@ module:
- path: github.com/imfing/hextra - path: github.com/imfing/hextra
``` ```
### اولین صفحه‌های محتوای خود را ایجاد کنید ### ایجاد اولین صفحات محتوای شما
ایجاد صفحه محتوای جدید برای صفحه اصلی و صفحه مستندات: صفحه محتوای جدید برای صفحه اصلی و صفحه مستندات ایجاد کنید:
```shell ```shell
hugo new content/_index.md hugo new content/_index.md
@@ -81,72 +83,72 @@ hugo new content/docs/_index.md
hugo server --buildDrafts --disableFastRender hugo server --buildDrafts --disableFastRender
``` ```
پیش‌نمایش سایت جدید شما در `http://localhost:1313/` در دسترس است. تبریک می‌گوییم، پیش‌نمایش سایت جدید شما در `http://localhost:1313/` در دسترس است.
{{% /steps %}} {{% /steps %}}
{{% details title="چگونه تم را به‌روز کنیم؟" %}} {{% details title="چگونه تم را به‌روزرسانی کنیم؟" %}}
برای به‌روزرسانی همه ماژول‌های Hugo در پروژه خود به آخرین نسخه‌هایشان، دستور زیر را اجرا کنید: برای به‌روزرسانی تمام ماژول‌های Hugo در پروژه خود به آخرین نسخه‌ها، دستور زیر را اجرا کنید:
```shell ```shell
hugo mod get -u hugo mod get -u
``` ```
برای به‌روزرسانی هگزترا به [آخرین نسخه منتشر شده](https://github.com/imfing/hextra/releases)، دستور زیر را اجرا کنید: برای به‌روزرسانی Hextra به [آخرین نسخه منتشر شده](https://github.com/imfing/hextra/releases)، دستور زیر را اجرا کنید:
```shell ```shell
hugo mod get -u github.com/imfing/hextra hugo mod get -u github.com/imfing/hextra
``` ```
برای جزئیات بیشتر به [ماژول‌های هیوگو](https://gohugo.io/hugo-modules/use-modules/#update-all-modules) مراجعه کنید. برای جزئیات بیشتر، [ماژول‌های Hugo](https://gohugo.io/hugo-modules/use-modules/#update-all-modules) را ببینید.
{{% /details %}} {{% /details %}}
### هگزترا را به عنوان ساب‌ماژول Git راه‌اندازی کنید ### راه‌اندازی Hextra به عنوان زیرماژول Git
#### پیش‌نیازها #### پیش‌نیازها
قبل از شروع، باید این نرم‌افزارها را نصب کنید: قبل از شروع، باید نرم‌افزارهای زیر را نصب کرده باشید:
- [Hugo (extended version)](https://gohugo.io/installation/) - [Hugo (نسخه extended)](https://gohugo.io/installation/)
- [Git](https://git-scm.com/) - [Git](https://git-scm.com/)
#### مراحل #### مراحل
{{% steps %}} {{% steps %}}
### راه‌انداختن یک سایت جدید Hugo ### راه‌اندازی یک سایت جدید Hugo
```shell ```shell
hugo new site my-site --format=yaml hugo new site my-site --format=yaml
``` ```
### افزودن تم هگسترا به عنوان یک ساب‌ماژول Git ### افزودن تم Hextra به عنوان زیرماژول Git
به دایرکتوری سایت بروید و یک مخزن Git جدید را مقداردهی اولیه کنید: به دایرکتوری سایت بروید و یک مخزن Git جدید راه‌اندازی کنید:
```shell ```shell
cd my-site cd my-site
git init git init
``` ```
سپس، تم هگسترا را به عنوان یک ساب‌ماژول Git اضافه کنید: سپس، تم Hextra را به عنوان زیرماژول Git اضافه کنید:
```shell ```shell
git submodule add https://github.com/imfing/hextra.git themes/hextra git submodule add https://github.com/imfing/hextra.git themes/hextra
``` ```
با افزودن موارد زیر، `hugo.yaml` را برای استفاده از تم هگزترا پیکربندی کنید: فایل `hugo.yaml` را برای استفاده از تم Hextra با افزودن موارد زیر پیکربندی کنید:
```yaml ```yaml
theme: hextra theme: hextra
``` ```
### اولین صفحه‌های محتوای خود را ایجاد کنید ### ایجاد اولین صفحات محتوای شما
ایجاد صفحه محتوای جدید برای صفحه اصلی و صفحه مستندات: صفحه محتوای جدید برای صفحه اصلی و صفحه مستندات ایجاد کنید:
```shell ```shell
hugo new content/_index.md hugo new content/_index.md
@@ -164,39 +166,39 @@ hugo server --buildDrafts --disableFastRender
{{% /steps %}} {{% /steps %}}
هنگام استفاده از [CI/CD](https://en.wikipedia.org/wiki/CI/CD) برای به‌کاراندازی وب‌سایت Hugo، از اجرای دستور زیر قبل از اجرای دستور `hugo` مطمئن شوید و ضروری است. هنگام استفاده از [CI/CD](https://en.wikipedia.org/wiki/CI/CD) برای استقرار سایت Hugo، ضروری است که قبل از اجرای دستور `hugo`، دستور زیر اجرا شود.
```shell ```shell
git submodule update --init git submodule update --init
``` ```
اجرا نشدن این دستور باعث می‌شود که پوشه تم با پرونده‌های تم هگزترا پر نشود و منجر به خرابی ساخت شود. عدم اجرای این دستور منجر به پر نشدن پوشه تم با فایل‌های تم Hextra شده و باعث شکست ساخت می‌شود.
{{% details title="چگونه تم را به‌روز کنیم؟" %}} {{% details title="چگونه تم را به‌روزرسانی کنیم؟" %}}
برای به‌روزرسانی تمام ساب‌ماژول‌های در مخزن خود به آخرین commitها که موجود هست، دستور زیر را اجرا کنید: برای به‌روزرسانی تمام زیرماژول‌های مخزن شما به آخرین کامیت‌ها، دستور زیر را اجرا کنید:
```shell ```shell
git submodule update --remote git submodule update --remote
``` ```
برای به‌روزرسانی هگزترا به آخرین commit، دستور زیر را اجرا کنید: برای به‌روزرسانی Hextra به آخرین کامیت، دستور زیر را اجرا کنید:
```shell ```shell
git submodule update --remote themes/hextra git submodule update --remote themes/hextra
``` ```
برای جزئیات بیشتر به [ساب‌ماژول‌های Git](https://git-scm.com/book/en/v2/Git-Tools-Submodules) مراجعه کنید. برای جزئیات بیشتر، [زیرماژول‌های Git](https://git-scm.com/book/en/v2/Git-Tools-Submodules) را ببینید.
{{% /details %}} {{% /details %}}
## بعدی ## بعدی
برای شروع اضافه کردن مطالب بیشتر، بخش‌های زیر را کاوش کنید: برای شروع افزودن محتوای بیشتر، بخش‌های زیر را بررسی کنید:
{{< cards >}} {{< cards >}}
{{< card link="../guide/organize-files" title="سازماندهی پروندهها" icon="document-duplicate" >}} {{< card link="../guide/organize-files" title="سازماندهی فایلها" icon="document-duplicate" >}}
{{< card link="../guide/configuration" title="پیکربندی" icon="adjustments" >}} {{< card link="../guide/configuration" title="پیکربندی" icon="adjustments" >}}
{{< card link="../guide/markdown" title="مارک‌داون" icon="markdown" >}} {{< card link="../guide/markdown" title="Markdown" icon="markdown" >}}
{{< /cards >}} {{< /cards >}}

View File

@@ -2,13 +2,13 @@
title: はじめに title: はじめに
weight: 1 weight: 1
tags: tags:
- ドキュメント - Docs
- ガイド - Guide
next: /docs/guide next: /docs/guide
prev: /docs prev: /docs
--- ---
## テンプレートからクイックスタート ## テンプレートから始める
{{< icon "github" >}}&nbsp;[imfing/hextra-starter-template](https://github.com/imfing/hextra-starter-template) {{< icon "github" >}}&nbsp;[imfing/hextra-starter-template](https://github.com/imfing/hextra-starter-template)
@@ -16,26 +16,26 @@ prev: /docs
<img src="https://docs.github.com/assets/cb-77734/mw-1440/images/help/repository/use-this-template-button.webp" width="500"> <img src="https://docs.github.com/assets/cb-77734/mw-1440/images/help/repository/use-this-template-button.webp" width="500">
[GitHub Actionsワークフロー](https://docs.github.com/ja/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow)を提供しており、サイトを自動的にビルドしてGitHub Pagesにデプロイし、無料でホストすることができます。 [GitHub Actions ワークフロー](https://docs.github.com/ja/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow)を提供しており、サイトを自動的にビルドして GitHub Pages にデプロイし、無料でホストすることができます。
その他のオプションについては、[サイトのデプロイ](../guide/deploy-site)を確認してください。 その他のオプションについては、[サイトのデプロイ](../guide/deploy-site)を確認してください。
[🌐 デモ ↗](https://imfing.github.io/hextra-starter-template/) [🌐 デモ ↗](https://imfing.github.io/hextra-starter-template/)
## 新しいプロジェクトとして始める ## 新プロジェクトとして始める
HugoプロジェクトにHextraテーマを追加する主な方法は2つあります Hugo プロジェクトに Hextra テーマを追加する主な方法は2つあります:
1. **Hugoモジュール推奨**: 最も簡単で推奨される方法です。[Hugoモジュール](https://gohugo.io/hugo-modules/)を使用すると、テーマを直接オンラインソースから取り込むことができます。テーマは自動的にダウンロードされ、Hugoによって管理されます。 1. **Hugo モジュール (推奨)**: 最も簡単で推奨される方法です。[Hugo モジュール](https://gohugo.io/hugo-modules/)を使用すると、テーマをオンラインソースから直接取り込むことができます。テーマは自動的にダウンロードされ、Hugo によって管理されます。
2. **Gitサブモジュール**: または、Hextra[Gitサブモジュール](https://git-scm.com/book/ja/v2/Git-%E3%83%84%E3%83%BC%E3%83%AB-%E3%82%B5%E3%83%96%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB)として追加します。テーマはGitによってダウンロードされ、プロジェクトの`themes`フォルダに保存されます。 2. **Git サブモジュール**: または、Hextra[Git サブモジュール](https://git-scm.com/book/ja/v2/Git-%E3%83%84%E3%83%BC%E3%83%AB-%E3%82%B5%E3%83%96%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB)として追加します。テーマは Git によってダウンロードされ、プロジェクトの `themes` フォルダに保存されます。
### HugoモジュールとしてHextraをセットアップ ### Hugo モジュールとして Hextra をセットアップ
#### 前提条件 #### 前提条件
開始する前に、以下のソフトウェアがインストールされている必要があります 開始する前に、以下のソフトウェアがインストールされている必要があります:
- [Hugo拡張版](https://gohugo.io/installation/) - [Hugo (拡張版)](https://gohugo.io/installation/)
- [Git](https://git-scm.com/) - [Git](https://git-scm.com/)
- [Go](https://go.dev/) - [Go](https://go.dev/)
@@ -43,24 +43,24 @@ HugoプロジェクトにHextraテーマを追加する主な方法は2つあり
{{% steps %}} {{% steps %}}
### 新しいHugoサイトを初期化 ### 新しい Hugo サイトを初期化
```shell ```shell
hugo new site my-site --format=yaml hugo new site my-site --format=yaml
``` ```
### モジュール経由でHextraテーマを設定 ### モジュール経由で Hextra テーマを設定
```shell ```shell
# Hugoモジュールを初期化 # Hugo モジュールを初期化
cd my-site cd my-site
hugo mod init github.com/username/my-site hugo mod init github.com/username/my-site
# Hextraテーマを追加 # Hextra テーマを追加
hugo mod get github.com/imfing/hextra hugo mod get github.com/imfing/hextra
``` ```
`hugo.yaml`を設定してHextraテーマを使用するために、以下を追加します `hugo.yaml` を設定して Hextra テーマを使用するようにします:
```yaml ```yaml
module: module:
@@ -70,7 +70,7 @@ module:
### 最初のコンテンツページを作成 ### 最初のコンテンツページを作成
ホームページとドキュメントページの新しいコンテンツページを作成します ホームページとドキュメントページの新しいコンテンツページを作成します:
```shell ```shell
hugo new content/_index.md hugo new content/_index.md
@@ -83,64 +83,64 @@ hugo new content/docs/_index.md
hugo server --buildDrafts --disableFastRender hugo server --buildDrafts --disableFastRender
``` ```
これで、新しいサイトのプレビューが`http://localhost:1313/`で利用可能す。 これで、新しいサイトのプレビューが `http://localhost:1313/` で利用可能になります。
{{% /steps %}} {{% /steps %}}
{{% details title="テーマを更新するには?" %}} {{% details title="テーマを更新するには?" %}}
プロジェクト内のすべてのHugoモジュールを最新バージョンに更新するには、次のコマンドを実行します プロジェクト内のすべての Hugo モジュールを最新バージョンに更新するには、次のコマンドを実行します:
```shell ```shell
hugo mod get -u hugo mod get -u
``` ```
Hextraを[最新リリースバージョン](https://github.com/imfing/hextra/releases)に更新するには、次のコマンドを実行します Hextra を[最新リリースバージョン](https://github.com/imfing/hextra/releases)に更新するには、次のコマンドを実行します:
```shell ```shell
hugo mod get -u github.com/imfing/hextra hugo mod get -u github.com/imfing/hextra
``` ```
詳細については、[Hugoモジュール](https://gohugo.io/hugo-modules/use-modules/#update-all-modules)を参照してください。 詳細については、[Hugo モジュール](https://gohugo.io/hugo-modules/use-modules/#update-all-modules)を参照してください。
{{% /details %}} {{% /details %}}
### GitサブモジュールとしてHextraをセットアップ ### Git サブモジュールとして Hextra をセットアップ
#### 前提条件 #### 前提条件
開始する前に、以下のソフトウェアがインストールされている必要があります 開始する前に、以下のソフトウェアがインストールされている必要があります:
- [Hugo拡張版](https://gohugo.io/installation/) - [Hugo (拡張版)](https://gohugo.io/installation/)
- [Git](https://git-scm.com/) - [Git](https://git-scm.com/)
#### 手順 #### 手順
{{% steps %}} {{% steps %}}
### 新しいHugoサイトを初期化 ### 新しい Hugo サイトを初期化
```shell ```shell
hugo new site my-site --format=yaml hugo new site my-site --format=yaml
``` ```
### HextraテーマをGitサブモジュールとして追加 ### Git サブモジュールとして Hextra テーマを追加
サイトディレクトリに移動し新しいGitリポジトリを初期化します サイトディレクトリに移動し新しい Git リポジトリを初期化します:
```shell ```shell
cd my-site cd my-site
git init git init
``` ```
次に、HextraテーマをGitサブモジュールとして追加します 次に、Hextra テーマを Git サブモジュールとして追加します:
```shell ```shell
git submodule add https://github.com/imfing/hextra.git themes/hextra git submodule add https://github.com/imfing/hextra.git themes/hextra
``` ```
`hugo.yaml`を設定してHextraテーマを使用するために、以下を追加します `hugo.yaml` を設定して Hextra テーマを使用するようにします:
```yaml ```yaml
theme: hextra theme: hextra
@@ -148,7 +148,7 @@ theme: hextra
### 最初のコンテンツページを作成 ### 最初のコンテンツページを作成
ホームページとドキュメントページの新しいコンテンツページを作成します ホームページとドキュメントページの新しいコンテンツページを作成します:
```shell ```shell
hugo new content/_index.md hugo new content/_index.md
@@ -161,41 +161,41 @@ hugo new content/docs/_index.md
hugo server --buildDrafts --disableFastRender hugo server --buildDrafts --disableFastRender
``` ```
新しいサイトのプレビューが`http://localhost:1313/`で利用可能す。 新しいサイトのプレビューが `http://localhost:1313/` で利用可能になります。
{{% /steps %}} {{% /steps %}}
[CI/CD](https://ja.wikipedia.org/wiki/CI/CD)を使用してHugoウェブサイトをデプロイする場合、`hugo`コマンドを実行する前に以下のコマンドを実行することが重要です。 Hugo ウェブサイトのデプロイに [CI/CD](https://ja.wikipedia.org/wiki/CI/CD) を使用する場合、`hugo` コマンドを実行する前に以下のコマンドを実行することが重要です。
```shell ```shell
git submodule update --init git submodule update --init
``` ```
このコマンドを実行しないと、テーマフォルダにHextraテーマファイルが取り込まれず、ビルドが失敗します。 このコマンドを実行しないと、テーマフォルダに Hextra テーマファイルが配置されず、ビルドが失敗します。
{{% details title="テーマを更新するには?" %}} {{% details title="テーマを更新するには?" %}}
リポジトリ内のすべてのサブモジュールを最新のコミットに更新するには、次のコマンドを実行します リポジトリ内のすべてのサブモジュールを最新のコミットに更新するには、次のコマンドを実行します:
```shell ```shell
git submodule update --remote git submodule update --remote
``` ```
Hextraを最新のコミットに更新するには、次のコマンドを実行します Hextra を最新のコミットに更新するには、次のコマンドを実行します:
```shell ```shell
git submodule update --remote themes/hextra git submodule update --remote themes/hextra
``` ```
詳細については、[Gitサブモジュール](https://git-scm.com/book/ja/v2/Git-%E3%83%84%E3%83%BC%E3%83%AB-%E3%82%B5%E3%83%96%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB)を参照してください。 詳細については、[Git サブモジュール](https://git-scm.com/book/ja/v2/Git-%E3%83%84%E3%83%BC%E3%83%AB-%E3%82%B5%E3%83%96%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB)を参照してください。
{{% /details %}} {{% /details %}}
## 次 ## 次
以下のセクションを探索して、さらにコンテンツを追加し始めましょう 以下のセクションを探索して、さらにコンテンツを追加しましょう:
{{< cards >}} {{< cards >}}
{{< card link="../guide/organize-files" title="ファイルの整理" icon="document-duplicate" >}} {{< card link="../guide/organize-files" title="ファイルの整理" icon="document-duplicate" >}}

View File

@@ -1,5 +1,5 @@
--- ---
title: 入门指南 title: 快速开始
weight: 1 weight: 1
tags: tags:
- 文档 - 文档
@@ -8,28 +8,28 @@ next: /docs/guide
prev: /docs prev: /docs
--- ---
## 从模板快速开始 ## 从模板快速启动
{{< icon "github" >}}&nbsp;[imfing/hextra-starter-template](https://github.com/imfing/hextra-starter-template) {{< icon "github" >}}&nbsp;[imfing/hextra-starter-template](https://github.com/imfing/hextra-starter-template)
您可以通过使用上述模板仓库快速入门 您可以通过使用上述模板仓库快速开始
<img src="https://docs.github.com/assets/cb-77734/mw-1440/images/help/repository/use-this-template-button.webp" width="500"> <img src="https://docs.github.com/assets/cb-77734/mw-1440/images/help/repository/use-this-template-button.webp" width="500">
我们提供了一个 [GitHub Actions 工作流](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow),可以帮助自动构建并将您的站点部署到 GitHub Pages并免费托管。 我们提供了一个[GitHub Actions工作流](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow)可以帮助自动构建并将您的站点部署到GitHub Pages并免费托管。
更多选项,请查看 [部署站点](../guide/deploy-site)。 更多选项,请查看[部署站点](../guide/deploy-site)。
[🌐 演示 ↗](https://imfing.github.io/hextra-starter-template/) [🌐 演示 ↗](https://imfing.github.io/hextra-starter-template/)
## 作为新项目开始 ## 作为新项目启动
有两种主要方式将 Hextra 主题添加到您的 Hugo 项目中: 有两种主要方式将Hextra主题添加到您的Hugo项目中
1. **Hugo 模块(推荐)**:最简单且推荐的方法。[Hugo 模块](https://gohugo.io/hugo-modules/)允许您直接从在线源拉取主题。主题会自动下载并由 Hugo 管理。 1. **Hugo模块推荐**:最简单且推荐的方法。[Hugo模块](https://gohugo.io/hugo-modules/)允许您直接从在线源拉取主题。主题会自动下载并由Hugo管理。
2. **Git 子模块**:或者,将 Hextra 添加为 [Git 子模块](https://git-scm.com/book/en/v2/Git-Tools-Submodules)。主题由 Git 下载并存储在项目的 `themes` 文件夹中。 2. **Git子模块**或者将Hextra添加为[Git子模块](https://git-scm.com/book/en/v2/Git-Tools-Submodules)。主题由Git下载并存储在项目的`themes`文件夹中。
### 将 Hextra 设置为 Hugo 模块 ### 将Hextra设置为Hugo模块
#### 先决条件 #### 先决条件
@@ -43,24 +43,24 @@ prev: /docs
{{% steps %}} {{% steps %}}
### 初始化一个新的 Hugo 站点 ### 初始化一个新的Hugo站点
```shell ```shell
hugo new site my-site --format=yaml hugo new site my-site --format=yaml
``` ```
### 通过模块配置 Hextra 主题 ### 通过模块配置Hextra主题
```shell ```shell
# 初始化 Hugo 模块 # 初始化Hugo模块
cd my-site cd my-site
hugo mod init github.com/username/my-site hugo mod init github.com/username/my-site
# 添加 Hextra 主题 # 添加Hextra主题
hugo mod get github.com/imfing/hextra hugo mod get github.com/imfing/hextra
``` ```
配置 `hugo.yaml` 以使用 Hextra 主题,添加以下内容: 配置`hugo.yaml`以使用Hextra主题添加以下内容
```yaml ```yaml
module: module:
@@ -70,7 +70,7 @@ module:
### 创建您的内容页面 ### 创建您的内容页面
为主页和文档页面创建新内容页面 为主页和文档页面创建新内容:
```shell ```shell
hugo new content/_index.md hugo new content/_index.md
@@ -83,30 +83,30 @@ hugo new content/docs/_index.md
hugo server --buildDrafts --disableFastRender hugo server --buildDrafts --disableFastRender
``` ```
恭喜,您的新站点预览可在 `http://localhost:1313/` 查看。 恭喜,您的新站点预览可在`http://localhost:1313/`查看。
{{% /steps %}} {{% /steps %}}
{{% details title="如何更新主题?" %}} {{% details title="如何更新主题?" %}}
要更新项目中所有 Hugo 模块到最新版本,运行以下命令: 要更新项目中所有Hugo模块到最新版本运行以下命令
```shell ```shell
hugo mod get -u hugo mod get -u
``` ```
要将 Hextra 更新到 [最新发布版本](https://github.com/imfing/hextra/releases)运行以下命令: 要将Hextra更新到[最新发布版本](https://github.com/imfing/hextra/releases),运行以下命令:
```shell ```shell
hugo mod get -u github.com/imfing/hextra hugo mod get -u github.com/imfing/hextra
``` ```
有关更多详细信息,请参阅 [Hugo 模块](https://gohugo.io/hugo-modules/use-modules/#update-all-modules)。 更多详请参阅[Hugo模块](https://gohugo.io/hugo-modules/use-modules/#update-all-modules)。
{{% /details %}} {{% /details %}}
### 将 Hextra 设置为 Git 子模块 ### 将Hextra设置为Git子模块
#### 先决条件 #### 先决条件
@@ -119,28 +119,28 @@ hugo mod get -u github.com/imfing/hextra
{{% steps %}} {{% steps %}}
### 初始化一个新的 Hugo 站点 ### 初始化一个新的Hugo站点
```shell ```shell
hugo new site my-site --format=yaml hugo new site my-site --format=yaml
``` ```
### 将 Hextra 主题添加为 Git 子模块 ### 将Hextra主题添加为Git子模块
切换到站点目录并初始化新的 Git 仓库: 切换到站点目录并初始化一个新的Git仓库
```shell ```shell
cd my-site cd my-site
git init git init
``` ```
然后,将 Hextra 主题添加为 Git 子模块: 然后将Hextra主题添加为Git子模块
```shell ```shell
git submodule add https://github.com/imfing/hextra.git themes/hextra git submodule add https://github.com/imfing/hextra.git themes/hextra
``` ```
配置 `hugo.yaml` 以使用 Hextra 主题,添加以下内容: 配置`hugo.yaml`以使用Hextra主题添加以下内容
```yaml ```yaml
theme: hextra theme: hextra
@@ -148,7 +148,7 @@ theme: hextra
### 创建您的内容页面 ### 创建您的内容页面
为主页和文档页面创建新内容页面 为主页和文档页面创建新内容:
```shell ```shell
hugo new content/_index.md hugo new content/_index.md
@@ -161,35 +161,35 @@ hugo new content/docs/_index.md
hugo server --buildDrafts --disableFastRender hugo server --buildDrafts --disableFastRender
``` ```
您的新站点预览可在 `http://localhost:1313/` 查看。 您的新站点预览可在`http://localhost:1313/`查看。
{{% /steps %}} {{% /steps %}}
当使用 [CI/CD](https://en.wikipedia.org/wiki/CI/CD) 部署 Hugo 网站时,确保在运行 `hugo` 命令之前执行以下命令至关重要。 当使用[CI/CD](https://en.wikipedia.org/wiki/CI/CD)部署Hugo网站时确保在运行`hugo`命令之前执行以下命令至关重要。
```shell ```shell
git submodule update --init git submodule update --init
``` ```
如果不运行此命令,主题文件夹将不会被 Hextra 主题文件填充,导致构建失败。 如果不运行此命令,主题文件夹将不会被填充Hextra主题文件导致构建失败。
{{% details title="如何更新主题?" %}} {{% details title="如何更新主题?" %}}
要更新仓库中所有子模块到最新提交,运行以下命令: 要更新仓库中所有子模块到最新提交,运行以下命令:
```shell ```shell
git submodule update --remote git submodule update --remote
``` ```
要将 Hextra 更新到最新提交,运行以下命令: 要将Hextra更新到最新提交运行以下命令
```shell ```shell
git submodule update --remote themes/hextra git submodule update --remote themes/hextra
``` ```
有关更多详细信息,请参阅 [Git 子模块](https://git-scm.com/book/en/v2/Git-Tools-Submodules)。 更多详请参阅[Git子模块](https://git-scm.com/book/en/v2/Git-Tools-Submodules)。
{{% /details %}} {{% /details %}}

View File

@@ -7,17 +7,17 @@ sidebar:
open: true open: true
--- ---
برای یادگیری نحوه استفاده از هگزترا، بخش‌های زیر را کاوش کنید: برای یادگیری نحوه استفاده از Hextra، بخش‌های زیر را بررسی کنید:
<!--more--> <!--more-->
{{< cards >}} {{< 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="configuration" title="پیکربندی" icon="adjustments" >}}
{{< card link="markdown" title="مارک‌داون" icon="markdown" >}} {{< card link="markdown" title="Markdown" icon="markdown" >}}
{{< card link="syntax-highlighting" title="برجسته‌کردن سینتکس" icon="sparkles" >}} {{< card link="syntax-highlighting" title="رنگ‌آمیزی نحوه" icon="sparkles" >}}
{{< card link="latex" title="LaTeX" icon="variable" >}} {{< card link="latex" title="LaTeX" icon="variable" >}}
{{< card link="diagrams" title="نمودارها" icon="chart-square-bar" >}} {{< card link="diagrams" title="نمودارها" icon="chart-square-bar" >}}
{{< card link="shortcodes" title="کدهای کوتاه" icon="template" >}} {{< card link="shortcodes" title="کدهای کوتاه" icon="template" >}}
{{< card link="deploy-site" title="به‌کاراندازی سایت" icon="server" >}} {{< card link="deploy-site" title="استقرار سایت" icon="server" >}}
{{< /cards >}} {{< /cards >}}

View File

@@ -7,7 +7,7 @@ sidebar:
open: true open: true
--- ---
Hextraの使い方を学ぶために、以下のセクションを探索してください: Hextra の使い方を学ぶに、以下のセクションを参照してください:
<!--more--> <!--more-->

View File

@@ -7,7 +7,7 @@ sidebar:
open: true open: true
--- ---
探索以下部分,了解如何使用 Hextra 通过以下章节了解如何使用 Hextra
<!--more--> <!--more-->

View File

@@ -1,11 +1,13 @@
--- ---
title: پیکربندی title: پیکربندی
weight: 2 weight: 2
tags:
- پیکربندی
--- ---
Hugo پیکربندی خود را از `hugo.yaml` در ریشه سایت Hugo شما می‌خواند. Hugo تنظیمات خود را از فایل `hugo.yaml` در ریشه سایت شما می‌خواند.
پرونده پیکربندی جایی است که می‌توانید تمام جنبه‌های سایت خود را پیکربندی کنید. فایل پیکربندی جایی است که می‌توانید تمام جنبه‌های سایت خود را تنظیم کنید.
پرونده پیکربندی این سایت [`exampleSite/hugo.yaml`](https://github.com/imfing/hextra/blob/main/exampleSite/hugo.yaml) را در گیت‌هاب بررسی کنید تا ایده‌ای جامع از تنظیمات موجود و بهترین شیوه‌ها بدست آورید. برای آشنایی جامع با تنظیمات موجود و بهترین روش‌ها، فایل پیکربندی این سایت [`exampleSite/hugo.yaml`](https://github.com/imfing/hextra/blob/main/exampleSite/hugo.yaml) را در GitHub بررسی کنید.
<!--more--> <!--more-->
@@ -13,7 +15,7 @@ Hugo پیکربندی خود را از `hugo.yaml` در ریشه سایت Hugo
### منو ### منو
منوی سمت چپ بالا در قسمت `menu.main` در پرونده پیکربندی تعریف شده است: منوی بالای صفحه در بخش `menu.main` در فایل پیکربندی تعریف می‌شود:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
menu: menu:
@@ -24,14 +26,14 @@ menu:
- name: وبلاگ - name: وبلاگ
pageRef: /blog pageRef: /blog
weight: 2 weight: 2
- name: درباره ما - name: درباره
pageRef: /about pageRef: /about
weight: 3 weight: 3
- name: جستجو - name: جستجو
weight: 4 weight: 4
params: params:
type: search type: search
- name: گیت‌هاب - name: GitHub
weight: 5 weight: 5
url: "https://github.com/imfing/hextra" url: "https://github.com/imfing/hextra"
params: params:
@@ -40,35 +42,56 @@ menu:
انواع مختلفی از آیتم‌های منو وجود دارد: انواع مختلفی از آیتم‌های منو وجود دارد:
1. پیوند به صفحه‌ای در سایت با `pageRef` 1. لینک به یک صفحه در سایت با `pageRef`
```yaml ```yaml
- name: مستندات - name: مستندات
pageRef: /docs pageRef: /docs
``` ```
2. پیوند به یک نشانی اینترنتی با `url` 2. لینک به یک URL خارجی با `url`
```yaml ```yaml
- name: گیت‌هاب - name: GitHub
url: "https://github.com" url: "https://github.com"
``` ```
3. نوار جستجو با `type: search` 3. نوار جستجو با `type: search`
```yaml ```yaml
- name: جستجو - name: جستجو
params: params:
type: search type: search
``` ```
4. آیکون 4. آیکون
```yaml ```yaml
- name: گیت‌هاب - name: GitHub
params: params:
icon: github 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"} ```yaml {filename="hugo.yaml"}
params: 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"} ```yaml {filename="content/docs/guide/configuration.md"}
--- ---
@@ -100,9 +123,9 @@ sidebar:
--- ---
``` ```
### پیوندهای اضافی ### لینک‌های اضافی
پیوندهای اضافی نوار کناری در زیر بخش `menu.sidebar` در پرونده پیکربندی تعریف شده است: لینک‌های اضافی نوار کناری در بخش `menu.sidebar` در فایل پیکربندی تعریف می‌شوند:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
menu: menu:
@@ -111,19 +134,19 @@ menu:
params: params:
type: separator type: separator
weight: 1 weight: 1
- name: "درباره ما" - name: "درباره"
pageRef: "/about" pageRef: "/about"
weight: 2 weight: 2
- name: "مستندات هیوگو ↖" - name: "مستندات Hugo ↗"
url: "https://gohugo.io/documentation/" url: "https://gohugo.io/documentation/"
weight: 3 weight: 3
``` ```
## نوار کناری سمت چپ ## نوار کناری راست
### فهرست مطالب ### فهرست مطالب
فهرست مطالب به طور خودکار از سرتیرهای موجود در پرونده محتوا تولید می‌شود. می‌توان آن را با تنظیم `toc: false` در قسمت بالایی صفحه غیرفعال کرد. فهرست مطالب به طور خودکار از عناوین موجود در فایل محتوا ایجاد می‌شود. می‌توانید آن را با تنظیم `toc: false` در front matter صفحه غیرفعال کنید.
```yaml {filename="content/docs/guide/configuration.md"} ```yaml {filename="content/docs/guide/configuration.md"}
--- ---
@@ -132,9 +155,9 @@ toc: false
--- ---
``` ```
### پیوند ویرایش صفحه ### لینک ویرایش صفحه
برای پیکربندی پیوند ویرایش صفحه، می‌توانیم پارامتر `params.editURL.base` را در پرونده پیکربندی تنظیم کنیم: برای پیکربندی لینک ویرایش صفحه، می‌توانیم پارامتر `params.editURL.base` را در فایل پیکربندی تنظیم کنیم:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
@@ -143,8 +166,8 @@ params:
base: "https://github.com/your-username/your-repo/edit/main" base: "https://github.com/your-username/your-repo/edit/main"
``` ```
پیوندهای ویرایش به طور خودکار برای هر صفحه براساس نشانی اینترنتی ارائه شده به عنوان دایرکتوری ریشه ایجاد می‌شود. لینک‌های ویرایش به طور خودکار برای هر صفحه بر اساس URL ارائه شده به عنوان دایرکتوری ریشه ایجاد می‌شوند.
اگر می‌خواهید پیوند ویرایش را برای یک صفحه خاص تنظیم کنید، می‌توانید پارامتر `editURL` را در قسمت بالای صفحه تنظیم کنید: اگر می‌خواهید لینک ویرایش را برای یک صفحه خاص تنظیم کنید، می‌توانید پارامتر `editURL` را در front matter صفحه تنظیم کنید:
```yaml {filename="content/docs/guide/configuration.md"} ```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"} ```yaml {filename="i18n/en.yaml"}
copyright: "© ۲۰۲۴ متن شما در اینجا" 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/container >}}
{{< filetree/folder name="static" >}} {{< filetree/folder name="static" >}}
@@ -186,14 +209,30 @@ copyright: "© ۲۰۲۴ متن شما در اینجا"
{{< /filetree/folder >}} {{< /filetree/folder >}}
{{< /filetree/container >}} {{< /filetree/container >}}
هر دو پرونده `favicon.ico` و `favicon.svg` را در پروژه خود قرار دهید، تا از نمایش صحیح faviconهای سایت خود مطمئن شوید. #### تنظیمات پایه
در حالی که `favicon.ico` به طور کلی برای مرورگرهای قدیمی‌تر است، `favicon.svg` توسط مرورگرهای مدرن پشتیبانی می‌شود. favicon`favicon-dark.svg` اختیاری را می‌توانید برای یک تجربه سفارشی در حالت تیره اضافه کرد. حداقل، فایل `favicon.svg` را در پوشه `static` قرار دهید. این فایل به عنوان فاوآیکون پیش‌فرض سایت استفاده می‌شود.
با خیال راحت از ابزارهایی مانند [favicon.io](https://favicon.io/) یا [favycon](https://github.com/ruisaraiva19/favycon) برای تولید این آیکون‌ها استفاده کنید.
می‌توانید یک فاوآیکون 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"} ```yaml {filename="hugo.yaml"}
params: params:
@@ -205,16 +244,32 @@ params:
گزینه‌های `theme.default`: گزینه‌های `theme.default`:
- `light` - همیشه از حالت روشن استفاده شود - `light` - همیشه از حالت روشن استفاده کنید
- `dark` - همیشه از حالت تیره استفاده شود - `dark` - همیشه از حالت تاریک استفاده کنید
- `system` - همگام‌سازی با تنظیمات سیستمعامل (پیش‌فرض) - `system` - همگام با تنظیمات سیستم عامل (پیش‌فرض)
پارامتر `theme.displayToggle` به شما این امکان را می‌دهد که یک دکمه جابجایی برای تغییر حالت تم‌ها نمایش دهید. پارامتر `theme.displayToggle` به شما امکان می‌دهد دکمه‌ای برای تغییر تم نمایش دهید.
وقتی روی `true` تنظیم شود، بازدیدکنندگان می‌توانند بین حالت روشن یا تیره جابه‌جا شوند و تنظیمات پیش‌فرض را نادیده بگیرند. وقتی روی `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"} ```yaml {filename="hugo.yaml"}
params: params:
@@ -227,7 +282,7 @@ params:
### عرض صفحه ### عرض صفحه
عرض صفحه را می‌توان با پارامتر `params.page.width` در پرونده پیکربندی سفارشی کرد: عرض صفحه را می‌توان با پارامتر `params.page.width` در فایل پیکربندی سفارشی کرد:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
@@ -236,35 +291,53 @@ params:
width: wide 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) پیاده‌سازی شده و به طور پیش‌فرض فعال است. جستجوی تمام متن با قدرت [FlexSearch](https://github.com/nextapps-de/flexsearch) به طور پیش‌فرض فعال است.
برای سفارشی کردن فهرست جستجو، پارامتر `params.search.flexsearch.index` را در پرونده پیکربندی تنظیم کنید: برای سفارشی کردن نمایه جستجو، پارامتر `params.search.flexsearch.index` را در فایل پیکربندی تنظیم کنید:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
# Search # جستجو
search: search:
enable: true enable: true
type: flexsearch type: flexsearch
flexsearch: flexsearch:
# index page by: content | summary | heading | title # نمایه صفحه بر اساس: content | summary | heading | title
index: content index: content
``` ```
گزینه‌های `flexsearch.index`: گزینه‌های `flexsearch.index`:
- `content` - محتوای کامل صفحه (پیش‌فرض) - `content` - محتوای کامل صفحه (پیش‌فرض)
- `summary` - خلاصه صفحه، برای جزئیات بیشتر به [خلاصه مطالب Hugo](https://gohugo.io/content-management/summaries/) مراجعه کنید - `summary` - خلاصه صفحه، برای جزئیات بیشتر به [خلاصه‌های محتوای Hugo](https://gohugo.io/content-management/summaries/) مراجعه کنید
- `heading` - سرتیترهای سطح ۱ و سطح ۲ - `heading` - عناوین سطح 1 و سطح 2
- `title` - فقط شامل عنوان صفحه است - `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"} ```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"} ```yaml {filename="hugo.yaml"}
services: services:
googleAnalytics: googleAnalytics:
ID: G-MEASUREMENT_ID 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

View File

@@ -1,11 +1,13 @@
--- ---
title: 設定 title: 設定
weight: 2 weight: 2
tags:
- 設定
--- ---
Hugoは、Hugoサイトのルートにある`hugo.yaml`から設定を読み取ります。 Hugo はサイトのルートにある `hugo.yaml` から設定を読み込みます。
この設定ファイルでは、サイトのすべての側面を設定できます。 この設定ファイルであなたのサイトのあらゆる側面を設定できます。
利用可能な設定とベストプラクティスの包括的な理解を得るために、GitHub上のこのサイトの設定ファイル[`exampleSite/hugo.yaml`](https://github.com/imfing/hextra/blob/main/exampleSite/hugo.yaml)をチェックしてください。 利用可能な設定項目とベストプラクティスを網羅的に理解するには、GitHub 上のこのサイトの設定ファイル [`exampleSite/hugo.yaml`](https://github.com/imfing/hextra/blob/main/exampleSite/hugo.yaml) を参照してください。
<!--more--> <!--more-->
@@ -13,7 +15,7 @@ Hugoは、Hugoサイトのルートにある`hugo.yaml`から設定を読み取
### メニュー ### メニュー
右上のメニューは設定ファイルの`menu.main`セクションで定義されます: 右上のメニューは設定ファイルの `menu.main` セクションで定義されます:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
menu: menu:
@@ -24,7 +26,7 @@ menu:
- name: ブログ - name: ブログ
pageRef: /blog pageRef: /blog
weight: 2 weight: 2
- name: について - name: このサイトについて
pageRef: /about pageRef: /about
weight: 3 weight: 3
- name: 検索 - name: 検索
@@ -38,37 +40,58 @@ menu:
icon: github icon: github
``` ```
メニュー項目にはさまざまなタイプがあります: メニュー項目にはいくつかの種類があります:
1. `pageRef`を使用してサイト内のページにリンク 1. `pageRef`サイト内のページにリンク
```yaml ```yaml
- name: ドキュメント - name: ドキュメント
pageRef: /docs pageRef: /docs
``` ```
2. `url`を使用して外部URLにリンク 2. `url`外部URLにリンク
```yaml ```yaml
- name: GitHub - name: GitHub
url: "https://github.com" url: "https://github.com"
``` ```
3. `type: search`を使用して検索バーを表示 3. `type: search`検索バー
```yaml ```yaml
- name: 検索 - name: 検索
params: params:
type: search type: search
``` ```
4. アイコン 4. アイコン
```yaml ```yaml
- name: GitHub - name: GitHub
params: params:
icon: github 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"} ```yaml {filename="hugo.yaml"}
params: 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"} ```yaml {filename="content/docs/guide/configuration.md"}
--- ---
@@ -102,7 +125,7 @@ sidebar:
### 追加リンク ### 追加リンク
サイドバーの追加リンクは設定ファイルの`menu.sidebar`セクションで定義されます: サイドバーの追加リンクは設定ファイルの `menu.sidebar` セクションで定義されます:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
menu: menu:
@@ -111,10 +134,10 @@ menu:
params: params:
type: separator type: separator
weight: 1 weight: 1
- name: "について" - name: "このサイトについて"
pageRef: "/about" pageRef: "/about"
weight: 2 weight: 2
- name: "Hugo Docs ↗" - name: "Hugo ドキュメント ↗"
url: "https://gohugo.io/documentation/" url: "https://gohugo.io/documentation/"
weight: 3 weight: 3
``` ```
@@ -123,7 +146,7 @@ menu:
### 目次 ### 目次
目次はコンテンツファイルの見出しから自動的に生成されます。ページのフロントマターで`toc: false`を設定することで無効できます。 目次はコンテンツファイルの見出しから自動生成されます。ページのフロントマターで `toc: false` を設定することで無効できます。
```yaml {filename="content/docs/guide/configuration.md"} ```yaml {filename="content/docs/guide/configuration.md"}
--- ---
@@ -134,7 +157,7 @@ toc: false
### ページ編集リンク ### ページ編集リンク
ページ編集リンクを設定するには、設定ファイルで`params.editURL.base`パラメータを設定します: ページ編集リンクを設定するには、設定ファイルで `params.editURL.base` パラメータを設定します:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
@@ -143,8 +166,8 @@ params:
base: "https://github.com/your-username/your-repo/edit/main" base: "https://github.com/your-username/your-repo/edit/main"
``` ```
提供されたURLをルートディレクトリとして各ページの編集リンクが自動的に生成されます。 編集リンクは提供されたURLをルートディレクトリとして各ページに対して自動生成されます。
特定のページ編集リンクを設定したい場合は、ページのフロントマターで`editURL`パラメータを設定ます: 特定のページに対して編集リンクを設定したい場合は、ページのフロントマターで `editURL` パラメータを設定できます:
```yaml {filename="content/docs/guide/configuration.md"} ```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"} ```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/container >}}
{{< filetree/folder name="static" >}} {{< filetree/folder name="static" >}}
@@ -186,14 +209,30 @@ copyright: "© 2024 YOUR TEXT HERE"
{{< /filetree/folder >}} {{< /filetree/folder >}}
{{< /filetree/container >}} {{< /filetree/container >}}
プロジェクトに`favicon.ico`、`favicon.svg`、`favicon-dark.svg`ファイルを含めて、サイトのファビコンが正しく表示されるようにします。 #### 基本設定
`favicon.ico`は一般的に古いブラウザ用ですが、`favicon.svg`と`favicon-dark.svg`は現代のブラウザでサポートされています。 最低限、`static` フォルダに `favicon.svg` を含めてください。これがサイトのデフォルトファビコンとして使用されます。
[favicon.io](https://favicon.io/)や[favycon](https://github.com/ruisaraiva19/favycon)などのツールを使用して、このようなアイコンを生成できます。
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"} ```yaml {filename="hugo.yaml"}
params: params:
@@ -203,18 +242,34 @@ params:
displayToggle: true displayToggle: true
``` ```
`theme.default`のオプション: `theme.default` のオプション:
- `light` - 常にライトモードを使用 - `light` - 常にライトモードを使用
- `dark` - 常にダークモードを使用 - `dark` - 常にダークモードを使用
- `system` - オペレーティングシステムの設定と同期(デフォルト) - `system` - オペレーティングシステムの設定と同期(デフォルト)
`theme.displayToggle`パラメータを使用して、テーマを変更するためのトグルボタンを表示できます。 `theme.displayToggle` パラメータテーマを変更するためのトグルボタンを表示ます。
`true`に設定すると、訪問者はデフォルト設定を上書きしてライトモードとダークモードを切り替えることができます。 `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"} ```yaml {filename="hugo.yaml"}
params: params:
@@ -227,7 +282,7 @@ params:
### ページ幅 ### ページ幅
ページの幅は設定ファイルの`params.page.width`パラメータでカスタマイズできます: ページの幅は設定ファイルの `params.page.width` パラメータでカスタマイズできます:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
@@ -236,14 +291,14 @@ params:
width: wide 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)による全文検索はデフォルトで有効です。 [FlexSearch](https://github.com/nextapps-de/flexsearch) を利用した全文検索はデフォルトで有効です。
検索インデックスをカスタマイズするには、設定ファイルで`params.search.flexsearch.index`パラメータを設定します: 検索インデックスをカスタマイズするには、設定ファイルで `params.search.flexsearch.index` パラメータを設定します:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
@@ -253,35 +308,36 @@ params:
type: flexsearch type: flexsearch
flexsearch: flexsearch:
# ページをインデックスする方法: content | summary | heading | title # インデックス対象: content | summary | heading | title
index: content index: content
``` ```
`flexsearch.index`のオプション: `flexsearch.index` のオプション:
- `content` - ページの全内容(デフォルト) - `content` - ページの全(デフォルト)
- `summary` - ページの要約、詳細は[Hugoコンテンツ要約](https://gohugo.io/content-management/summaries/)を参照 - `summary` - ページの要約、詳細は [Hugo コンテンツ要約](https://gohugo.io/content-management/summaries/) を参照
- `heading` - レベル1とレベル2の見出し - `heading` - レベル1とレベル2の見出し
- `title` - ページタイトルのみを含める - `title` - ページタイトルのみを含める
検索トークン化をカスタマイズするには、設定ファイルで`params.search.flexsearch.tokenize`パラメータを設定します: 検索トークン化をカスタマイズするには、設定ファイルで `params.search.flexsearch.tokenize` パラメータを設定します:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
search:
# ... # ...
flexsearch: flexsearch:
# full | forward | reverse | strict # full | forward | reverse | strict
tokenize: forward 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` - 単語全体をインデックス - `strict` - 単語全体をインデックス
- `forward` - 前方方向に単語を増分的にインデックス - `forward` - 前方方向に単語を増分的にインデックス
- `reverse` - 両方向に単語を増分的にインデックス - `reverse` - 両方向に単語を増分的にインデックス
- `full` - すべての可能な組み合わせをインデックス - `full` - すべての可能な組み合わせをインデックス
検索インデックスからページを除外するには、ページのフロントマターで`excludeSearch: true`を設定します: FlexSearch 検索インデックスからページを除外するには、ページのフロントマターで `excludeSearch: true` を設定します:
```yaml {filename="content/docs/guide/configuration.md"} ```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"} ```yaml {filename="hugo.yaml"}
services: services:
googleAnalytics: googleAnalytics:
ID: G-MEASUREMENT_ID 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"
```

View File

@@ -1,11 +1,13 @@
--- ---
title: 配置 title: 配置
weight: 2 weight: 2
tags:
- 配置
--- ---
Hugo 从您 Hugo 站点根目录`hugo.yaml` 文件中读取配置。 Hugo 从站点根目录的 `hugo.yaml` 读取配置。
配置文件是您可以配置站点所有方面的地方 配置文件可用来调整站点所有方面。
查看此站点的配置文件 [`exampleSite/hugo.yaml`](https://github.com/imfing/hextra/blob/main/exampleSite/hugo.yaml) 在 GitHub 上,以全面了解可用设置和最佳实践。 查看本网站的示例配置文件 [`exampleSite/hugo.yaml`](https://github.com/imfing/hextra/blob/main/exampleSite/hugo.yaml) 以全面了解可用设置和最佳实践。
<!--more--> <!--more-->
@@ -13,7 +15,7 @@ Hugo 从您 Hugo 站点根目录下的 `hugo.yaml` 文件中读取配置。
### 菜单 ### 菜单
右上角菜单在配置文件的 `menu.main` 部分定义: 右上角菜单在配置文件的 `menu.main` 部分定义:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
menu: menu:
@@ -38,37 +40,58 @@ menu:
icon: github icon: github
``` ```
有不同类型的菜单项: 菜单项有以下几种类型
1. 使用 `pageRef` 链接到站点内的页面 1. 通过 `pageRef` 链接到站页面
```yaml ```yaml
- name: 文档 - name: 文档
pageRef: /docs pageRef: /docs
``` ```
2. 使用 `url` 链接到外部 URL 2. 通过 `url` 链接到外部网址
```yaml ```yaml
- name: GitHub - name: GitHub
url: "https://github.com" url: "https://github.com"
``` ```
3. 使用 `type: search` 的搜索栏 3. 搜索栏,使用 `type: search`
```yaml ```yaml
- name: 搜索 - name: 搜索
params: params:
type: search type: search
``` ```
4. 图标 4. 图标
```yaml ```yaml
- name: GitHub - name: GitHub
params: params:
icon: github 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"} ```yaml {filename="hugo.yaml"}
params: 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"} ```yaml {filename="content/docs/guide/configuration.md"}
--- ---
@@ -102,7 +125,7 @@ sidebar:
### 额外链接 ### 额外链接
侧边栏额外链接在配置文件的 `menu.sidebar` 部分定义: 侧边栏额外链接在配置文件的 `menu.sidebar` 部分定义:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
menu: menu:
@@ -123,7 +146,7 @@ menu:
### 目录 ### 目录
目录根据内容文件中的标题自动生成。可以通过在页面的 front matter 中设置 `toc: false` 来禁用 目录根据内容文件中的标题自动生成。可以通过在页面的 front matter 中设置 `toc: false` 来禁用。
```yaml {filename="content/docs/guide/configuration.md"} ```yaml {filename="content/docs/guide/configuration.md"}
--- ---
@@ -134,7 +157,7 @@ toc: false
### 页面编辑链接 ### 页面编辑链接
要配置页面编辑链接,我们可以在配置文件中设置 `params.editURL.base` 参数: 要配置页面编辑链接,可以在配置文件中设置 `params.editURL.base` 参数:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
@@ -143,8 +166,8 @@ params:
base: "https://github.com/your-username/your-repo/edit/main" base: "https://github.com/your-username/your-repo/edit/main"
``` ```
编辑链接将根据提供的 URL 作为根目录自动为每个页面生成。 编辑链接将基于提供的 URL 作为根目录自动为每个页面生成。
如果为特定页面设置编辑链接,可以在页面的 front matter 中设置 `editURL` 参数: 如果为特定页面设置编辑链接,可以在页面的 front matter 中设置 `editURL` 参数:
```yaml {filename="content/docs/guide/configuration.md"} ```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"} ```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/container >}}
{{< filetree/folder name="static" >}} {{< filetree/folder name="static" >}}
@@ -186,14 +209,30 @@ copyright: "© 2024 您的文本"
{{< /filetree/folder >}} {{< /filetree/folder >}}
{{< /filetree/container >}} {{< /filetree/container >}}
在您的项目中包含 `favicon.ico`、`favicon.svg` 和 `favicon-dark.svg` 文件,以确保您的站点图标正确显示。 #### 基本设置
虽然 `favicon.ico` 通常用于旧版浏览器,但 `favicon.svg` 和 `favicon-dark.svg` 受现代浏览器支持 至少需要在 `static` 文件夹中包含 `favicon.svg`。这将作为网站的默认图标
使用 [favicon.io](https://favicon.io/) 或 [favycon](https://github.com/ruisaraiva19/favycon) 等工具生成此类图标。
可以通过在 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"} ```yaml {filename="hugo.yaml"}
params: params:
@@ -205,16 +244,32 @@ params:
`theme.default` 的选项: `theme.default` 的选项:
- `light` - 始终使用色模式 - `light` - 始终使用色模式
- `dark` - 始终使用色模式 - `dark` - 始终使用色模式
- `system` - 与操作系统设置同步(默认) - `system` - 与操作系统设置同步(默认)
`theme.displayToggle` 参数允许显示一个切换按钮以更改主题 `theme.displayToggle` 参数允许显示主题切换按钮。
当设置为 `true` 时,访问者可以在浅色或色模式之间切换,覆盖默认设置。 当设置为 `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"} ```yaml {filename="hugo.yaml"}
params: params:
@@ -227,7 +282,7 @@ params:
### 页面宽度 ### 页面宽度
页面宽度可以通过配置文件中的 `params.page.width` 参数进行自定义: 页面宽度可以通过配置文件中的 `params.page.width` 参数自定义:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
@@ -236,14 +291,14 @@ params:
width: wide 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) 提供的全文搜索。 默认启用由 [FlexSearch](https://github.com/nextapps-de/flexsearch) 提供的全文搜索。
要自定义搜索索引,在配置文件中设置 `params.search.flexsearch.index` 参数: 要自定义搜索索引,在配置文件中设置 `params.search.flexsearch.index` 参数:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
@@ -253,21 +308,22 @@ params:
type: flexsearch type: flexsearch
flexsearch: flexsearch:
# 按以下内容索引页面:content | summary | heading | title # 索引页面方式: content | summary | heading | title
index: content index: content
``` ```
`flexsearch.index` 的选项: `flexsearch.index` 的选项:
- `content` - 页面的完整内容(默认) - `content` - 页面的完整内容(默认)
- `summary` - 页面摘要,请参阅 [Hugo 内容摘要](https://gohugo.io/content-management/summaries/) 了解更多详细信息 - `summary` - 页面摘要,详见 [Hugo 内容摘要](https://gohugo.io/content-management/summaries/)
- `heading` - 一级和二级标题 - `heading` - 一级和二级标题
- `title` - 仅包页面标题 - `title` - 仅包页面标题
要自定义搜索分词,在配置文件中设置 `params.search.flexsearch.tokenize` 参数: 要自定义搜索分词方式,在配置文件中设置 `params.search.flexsearch.tokenize` 参数:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
search:
# ... # ...
flexsearch: flexsearch:
# full | forward | reverse | strict # full | forward | reverse | strict
@@ -276,12 +332,12 @@ params:
[`flexsearch.tokenize`](https://github.com/nextapps-de/flexsearch/#tokenizer-prefix-search) 的选项: [`flexsearch.tokenize`](https://github.com/nextapps-de/flexsearch/#tokenizer-prefix-search) 的选项:
- `strict` - 索引整单词 - `strict` - 索引整单词
- `forward` - 向前方向逐步索引单词 - `forward` - 向逐步索引单词
- `reverse` - 双向逐步索引单词 - `reverse` - 双向逐步索引单词
- `full` - 索引所有可能的组合 - `full` - 索引所有可能的组合
要从搜索索引中排除页面,在页面的 front matter 中设置 `excludeSearch: true` 要从 FlexSearch 搜索索引中排除页面,在页面的 front matter 中设置 `excludeSearch: true`
```yaml {filename="content/docs/guide/configuration.md"} ```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"} ```yaml {filename="hugo.yaml"}
services: services:
googleAnalytics: googleAnalytics:
ID: G-MEASUREMENT_ID 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"
```

View File

@@ -1,90 +1,92 @@
--- ---
title: به‌کاراندازی سایت title: استقرار سایت
prev: /docs/guide/shortcodes prev: /docs/guide/shortcodes
next: /docs/advanced next: /docs/advanced
--- ---
Hugo وبسایت‌های استاتیک را ایجاد می‌کند و امکان گزینه‌های میزبانی انعطاف‌پذیر را فراهم می‌کند. Hugo وبسایت‌های استاتیک تولید می‌کند که امکان میزبانی انعطاف‌پذیر را فراهم می‌سازد.
این صفحه راهنماهایی برای به‌کاراندازی سایت هگزترا شما در پلتفرم‌های مختلف ارائه می‌کند. این صفحه راهنماهایی برای استقرار سایت Hextra شما روی پلتفرم‌های مختلف ارائه می‌دهد.
<!--more--> <!--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"} ```yaml {filename=".github/workflows/pages.yaml"}
# Sample workflow for building and deploying a Hugo site to GitHub Pages # نمونه گردش کار برای ساخت و استقرار یک سایت Hugo در GitHub Pages
name: Deploy Hugo site to Pages name: استقرار سایت Hugo در Pages
on: on:
# Runs on pushes targeting the default branch # در push به شاخه پیش‌فرض اجرا می‌شود
push: push:
branches: ["main"] branches: ["main"]
# Allows you to run this workflow manually from the Actions tab # امکان اجرای دستی این گردش کار از تب Actions
workflow_dispatch: workflow_dispatch:
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages # تنظیم مجوزهای GITHUB_TOKEN برای امکان استقرار در GitHub Pages
permissions: permissions:
contents: read contents: read
pages: write pages: write
id-token: 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: concurrency:
group: "pages" group: "pages"
cancel-in-progress: false cancel-in-progress: false
# Default to bash # پیش‌فرض bash
defaults: defaults:
run: run:
shell: bash shell: bash
jobs: jobs:
# Build job # کار ساخت
build: build:
runs-on: ubuntu-latest runs-on: ubuntu-latest
env: env:
HUGO_VERSION: 0.117.0 HUGO_VERSION: 0.147.7
steps: steps:
- name: Checkout - name: Checkout
uses: actions/checkout@v4 uses: actions/checkout@v4
with: with:
fetch-depth: 0 # Fetch all history for .GitInfo and .Lastmod fetch-depth: 0 # دریافت تمام تاریخچه برای .GitInfo و .Lastmod
- name: Setup Go submodules: recursive
uses: actions/setup-go@v4 - name: راه‌اندازی Go
uses: actions/setup-go@v5
with: with:
go-version: '1.21' go-version: '1.22'
- name: Setup Hugo - name: راه‌اندازی Pages
uses: peaceiris/actions-hugo@v2 id: pages
with: uses: actions/configure-pages@v4
hugo-version: '0.117.0' - name: راه‌اندازی Hugo
extended: true run: |
- name: Build with Hugo 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: env:
# For maximum backward compatibility with Hugo modules # برای حداکثر سازگاری با ماژول‌های Hugo
HUGO_ENVIRONMENT: production HUGO_ENVIRONMENT: production
HUGO_ENV: production HUGO_ENV: production
run: | run: |
hugo \ hugo \
--gc --minify \ --gc --minify \
--baseURL "https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/" --baseURL "${{ steps.pages.outputs.base_url }}/"
- name: Upload artifact - name: آپلود آرتیفکت
uses: actions/upload-pages-artifact@v2 uses: actions/upload-pages-artifact@v3
with: with:
path: ./public path: ./public
# Deployment job # کار استقرار
deploy: deploy:
environment: environment:
name: github-pages name: github-pages
@@ -92,22 +94,22 @@ jobs:
runs-on: ubuntu-latest runs-on: ubuntu-latest
needs: build needs: build
steps: steps:
- name: Deploy to GitHub Pages - name: استقرار در GitHub Pages
id: deployment id: deployment
uses: actions/deploy-pages@v2 uses: actions/deploy-pages@v4
``` ```
{{% /details %}} {{% /details %}}
{{< callout >}} {{< callout >}}
در تنظیمات مخزن خود، **Pages** > **Build and deployment** > **Source** را روی **GitHub Actions** تنظیم کنید: در تنظیمات مخزن، بخش **Pages** > **Build and deployment** > **Source** را روی **GitHub Actions** تنظیم کنید:
![](https://user-images.githubusercontent.com/5097752/266784808-99676430-884e-42ab-b901-f6534a0d6eee.png) ![](https://user-images.githubusercontent.com/5097752/266784808-99676430-884e-42ab-b901-f6534a0d6eee.png)
{{< /callout >}} {{< /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]} ```yaml {filename=".github/workflows/pages.yaml",linenos=table,linenostart=54,hl_lines=[4]}
run: | run: |
@@ -116,47 +118,47 @@ run: |
--baseURL "https://${{ github.repository_owner }}.github.io/" --baseURL "https://${{ github.repository_owner }}.github.io/"
``` ```
اگر می‌خواهید روی دامنه شخصی خود استقرار پیدا کند، لطفا مقدار `--baseURL` را بر این اساس تغییر دهید. اگر در دامنه خود مستقر می‌کنید، لطفاً مقدار `--baseURL` را متناسب با آن تغییر دهید.
## کلودفلر Pages ## Cloudflare Pages
1. کد منبع سایت خود را در یک مخزن Git (به عنوان مثال گیت‌هاب) قرار دهید 1. کد منبع سایت را در یک مخزن Git (مثلاً GitHub) قرار دهید.
2. وارد [پیشخوان کلودفلر](https://dash.cloudflare.com/) شوید و حساب خود را انتخاب کنید 2. به [داشبورد Cloudflare](https://dash.cloudflare.com/) وارد شوید و حساب خود را انتخاب کنید.
3. در صفحه اصلی حساب‌کاربری، **Workers & Pages** > **Create application** > **Pages** > **Connect to Git** را انتخاب کنید 3. در صفحه اصلی حساب، **Workers & Pages** > **Create application** > **Pages** > **Connect to Git** را انتخاب کنید.
4. مخزن را انتخاب کنید و در بخش Set up builds and Deployments اطلاعات زیر را وارد کنید: 4. مخزن را انتخاب کنید و در بخش **Set up builds and deployments** اطلاعات زیر را ارائه دهید:
| Configuration | Value | | تنظیمات | مقدار |
| ----------------- | -------------------- | | ---------------- | -------------------- |
| Production branch | `main` | | شاخه تولید | `main` |
| Build command | `hugo --gc --minify` | | دستور ساخت | `hugo --gc --minify` |
| Build directory | `public` | | دایرکتوری ساخت | `public` |
برای جزئیات بیشتر، بررسی کنید: برای جزئیات بیشتر، بررسی کنید:
- [یک سایت هیوگو راه‌اندازی کنید.](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/#deploy-with-cloudflare-pages). - [استقرار یک سایت 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/). - [پشتیبانی زبان و ابزارها](https://developers.cloudflare.com/pages/platform/language-support-and-tools/).
## Netlify ## Netlify
1. کد خود را به مخزن Git خود (گیت‌هاب، گیت‌لب و غیره) ارسال کنید. 1. کد خود را به مخزن Git (GitHub, GitLab و غیره) push کنید.
2. [وارد کردن پروژه](https://app.netlify.com/start) به Netlify 2. [پروژه را به Netlify وارد کنید](https://app.netlify.com/start).
3. اگر از [hextra-starter-template][hextra-starter-template] استفاده نمی‌کنید، موارد زیر را به صورت دستی پیکربندی کنید: 3. اگر از [hextra-starter-template][hextra-starter-template] استفاده نمی‌کنید، موارد زیر را به صورت دستی پیکربندی کنید:
- دستور Build را روی `hugo --gc --minify` پیکربندی کنید - دستور ساخت را روی `hugo --gc --minify` تنظیم کنید.
- دایرکتوری Publish را برای `public` مشخص کنید - دایرکتوری انتشار را روی `public` مشخص کنید.
- `HUGO_VERSION` متغیر محیط استقرار را اضافه کنید و روی `0.119.0` تنظیم کنید - متغیر محیطی `HUGO_VERSION` را اضافه کرده و روی `0.147.7` تنظیم کنید، یا آن را در فایل `netlify.toml` مشخص کنید.
4. استقرار! 4. استقرار دهید!
برای جزئیات بیشتر [Hugo را در Netlify](https://docs.netlify.com/integrations/frameworks/hugo/) بررسی کنید. برای جزئیات بیشتر، [Hugo در Netlify](https://docs.netlify.com/integrations/frameworks/hugo/) را بررسی کنید.
## Vercel ## Vercel
1. کد خود را به مخزن Git خود (گیت‌هاب، گیت‌لب و غیره) ارسال کنید. 1. کد خود را به مخزن Git (GitHub, GitLab و غیره) push کنید.
2. به [پیشخوان Vercel](https://vercel.com/dashboard) بروید و پروژه Hugo خود را وارد کنید 2. به [داشبورد Vercel](https://vercel.com/dashboard) بروید و پروژه Hugo خود را وارد کنید.
3. پروژه را پیکربندی کنید، Hugo را به عنوان چارچوب Preset انتخاب کنید 3. پروژه را پیکربندی کنید، Hugo را به عنوان پیش‌تنظیم فریمورک انتخاب کنید.
4. دستور Build و Install را لغو کنید: 4. دستور ساخت و دستور نصب را بازنویسی کنید:
1. دستور Build را روی `hugo --gc --minify` تنظیم کنید 1. دستور ساخت را روی `hugo --gc --minify` تنظیم کنید.
2. دستور Install را روی `yum install golang` تنظیم کنید 2. دستور نصب را روی `yum install golang` تنظیم کنید.
![پیکربندی استقرار Vercel](https://github.com/imfing/hextra/assets/5097752/887d949b-8d05-413f-a2b4-7ab92192d0b3) ![پیکربندی استقرار Vercel](https://github.com/imfing/hextra/assets/5097752/887d949b-8d05-413f-a2b4-7ab92192d0b3)

View File

@@ -4,24 +4,24 @@ prev: /docs/guide/shortcodes
next: /docs/advanced next: /docs/advanced
--- ---
Hugoは静的サイトを生成するため、柔軟なホスティングオプションが可能です。 Hugo は静的サイトを生成するため、柔軟なホスティングオプションが利用可能です。
このページでは、Hextraサイトをさまざまなプラットフォームにデプロイするためのガイドを提供します。 このページでは、Hextra サイトを様々なプラットフォームにデプロイする方法を解説します。
<!--more--> <!--more-->
## GitHub Pages ## 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"} ```yaml {filename=".github/workflows/pages.yaml"}
# HugoサイトをGitHub Pagesにデプロイするためのサンプルワークフロー # Hugo サイトをビルドし GitHub Pages にデプロイするサンプルワークフロー
name: Deploy Hugo site to Pages name: Deploy Hugo site to Pages
on: on:
@@ -29,22 +29,21 @@ on:
push: push:
branches: ["main"] branches: ["main"]
# Actionsタブから手動でこのワークフローを実行可能 # Actions タブから手動で実行可能
workflow_dispatch: workflow_dispatch:
# GITHUB_TOKENの権限を設定してGitHub Pagesへのデプロイを許可 # GITHUB_TOKEN の権限を設定GitHub Pages へのデプロイを許可
permissions: permissions:
contents: read contents: read
pages: write pages: write
id-token: write id-token: write
# 同時実行を1つに制限し、進行中の実行と最新のキューイングされた実行の間の実行をスキップ。 # 同時実行を1つに制限進行中の実行はキャンセルしない)
# ただし、進行中の実行はキャンセルしないでください。これらの本番デプロイを完了させたいためです。
concurrency: concurrency:
group: "pages" group: "pages"
cancel-in-progress: false cancel-in-progress: false
# デフォルトはbash # デフォルトシェルを bash に設定
defaults: defaults:
run: run:
shell: bash shell: bash
@@ -59,7 +58,7 @@ jobs:
- name: Checkout - name: Checkout
uses: actions/checkout@v4 uses: actions/checkout@v4
with: with:
fetch-depth: 0 # .GitInfo.Lastmodのためにすべての履歴を取得 fetch-depth: 0 # .GitInfo.Lastmod 用に全履歴を取得
submodules: recursive submodules: recursive
- name: Setup Go - name: Setup Go
uses: actions/setup-go@v5 uses: actions/setup-go@v5
@@ -74,7 +73,7 @@ jobs:
&& sudo dpkg -i ${{ runner.temp }}/hugo.deb && sudo dpkg -i ${{ runner.temp }}/hugo.deb
- name: Build with Hugo - name: Build with Hugo
env: env:
# Hugoモジュールとの最大限の互換性のため # Hugo モジュールとの最大互換性のため
HUGO_ENVIRONMENT: production HUGO_ENVIRONMENT: production
HUGO_ENV: production HUGO_ENV: production
run: | run: |
@@ -103,13 +102,13 @@ jobs:
{{< callout >}} {{< callout >}}
リポジトリ設定で、**Pages** > **Build and deployment** > **Source** を **GitHub Actions** に設定します: リポジトリ設定で、**Pages** > **Build and deployment** > **Source** を **GitHub Actions** に設定してください:
![](https://user-images.githubusercontent.com/5097752/266784808-99676430-884e-42ab-b901-f6534a0d6eee.png) ![](https://user-images.githubusercontent.com/5097752/266784808-99676430-884e-42ab-b901-f6534a0d6eee.png)
{{< /callout >}} {{< /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]} ```yaml {filename=".github/workflows/pages.yaml",linenos=table,linenostart=54,hl_lines=[4]}
run: | run: |
@@ -118,47 +117,47 @@ run: |
--baseURL "https://${{ github.repository_owner }}.github.io/" --baseURL "https://${{ github.repository_owner }}.github.io/"
``` ```
独自ドメインにデプロイする場合は、`--baseURL` の値を適宜変更してください。 独自ドメインを使用する場合は、`--baseURL` の値を適宜変更してください。
## Cloudflare Pages ## Cloudflare Pages
1. サイトのソースコードをGitリポジトリ例:GitHubに配置します。 1. サイトのソースコードを Git リポジトリGitHub など)に配置
2. [Cloudflareダッシュボード](https://dash.cloudflare.com/)にログインしアカウントを選択します。 2. [Cloudflare ダッシュボード](https://dash.cloudflare.com/) にログインしアカウントを選択
3. アカウントホームで、**Workers & Pages** > **Create application** > **Pages** > **Connect to Git** を選択します。 3. Account Home で **Workers & Pages** > **Create application** > **Pages** > **Connect to Git** を選択
4. リポジトリを選択し、**Set up builds and deployments** セクションで以下の情報を提供します: 4. リポジトリを選択し、**Set up builds and deployments** セクションで以下を設定:
| 設定 | 値 | | 設定項目 | 値 |
| ---------------- | ------------------- | | ----------------- | -------------------- |
| 本番ブランチ | `main` | | Production branch | `main` |
| ビルドコマンド | `hugo --gc --minify` | | Build command | `hugo --gc --minify` |
| ビルドディレクトリ | `public` | | Build directory | `public` |
詳細については、以下を確認してください: 詳細は以下を参照:
- [Hugoサイトのデプロイ](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/#deploy-with-cloudflare-pages) - [Deploy a Hugo site](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/) - [Language support and tools](https://developers.cloudflare.com/pages/platform/language-support-and-tools/)
## Netlify ## Netlify
1. コードをGitリポジトリGitHubGitLabなどにプッシュします。 1. コードを Git リポジトリGitHub, GitLab など)にプッシュ
2. [プロジェクトをインポート](https://app.netlify.com/start)してNetlifyに追加します。 2. Netlify に [プロジェクトをインポート](https://app.netlify.com/start)
3. [hextra-starter-template][hextra-starter-template]を使用していない場合、以下の設定を手動で行います: 3. [hextra-starter-template][hextra-starter-template] を使用していない場合、以下を手動設定:
- ビルドコマンドを `hugo --gc --minify` に設定します。 - Build command を `hugo --gc --minify` に設定
- 公開ディレクトリを `public` に指定します。 - Publish directory を `public` に指定
- 環境変数 `HUGO_VERSION` を追加し`0.147.7` 設定するか、`netlify.toml` ファイル設定します。 - 環境変数 `HUGO_VERSION` を追加し `0.147.7` 設定、または `netlify.toml` ファイル設定
4. デプロイします 4. デプロイ!
詳細については、[NetlifyでのHugo](https://docs.netlify.com/integrations/frameworks/hugo/)を確認してください。 詳細は [Hugo on Netlify](https://docs.netlify.com/integrations/frameworks/hugo/) を参照
## Vercel ## Vercel
1. コードをGitリポジトリGitHubGitLabなどにプッシュします。 1. コードを Git リポジトリGitHub, GitLab など)にプッシュ
2. [Vercelダッシュボード](https://vercel.com/dashboard)に移動しHugoプロジェクトをインポートします。 2. [Vercel ダッシュボード](https://vercel.com/dashboard) に移動し Hugo プロジェクトをインポート
3. プロジェクトを設定し、フレームワークプリセットとしてHugoを選択します。 3. プロジェクトを設定、Framework Preset で Hugo を選択
4. ビルドコマンドとインストールコマンドを上書きします: 4. Build Command と Install command を上書き:
1. ビルドコマンドを `hugo --gc --minify` に設定します。 1. Build Command を `hugo --gc --minify` に設定
2. インストールコマンドを `yum install golang` に設定します。 2. Install Command を `yum install golang` に設定
![Vercelデプロイ設定](https://github.com/imfing/hextra/assets/5097752/887d949b-8d05-413f-a2b4-7ab92192d0b3) ![Vercel デプロイ設定](https://github.com/imfing/hextra/assets/5097752/887d949b-8d05-413f-a2b4-7ab92192d0b3)

View File

@@ -4,42 +4,42 @@ prev: /docs/guide/shortcodes
next: /docs/advanced next: /docs/advanced
--- ---
Hugo 生成静态网站,允许灵活的托管选项 Hugo 生成静态网站,支持灵活的托管方案
本页提供在各平台上部署 Hextra 站点的指南。 本页提供在各平台上部署 Hextra 站点的指南。
<!--more--> <!--more-->
## GitHub Pages ## 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" %}} {{% 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"} ```yaml {filename=".github/workflows/pages.yaml"}
# 用于构建部署 Hugo 站点到 GitHub Pages 的示例工作流 # 构建部署 Hugo 站点到 GitHub Pages 的示例工作流
name: 部署 Hugo 站点到 Pages name: 部署 Hugo 站点到 Pages
on: on:
# 在推送到默认分支时运行 # 针对默认分支的推送触发
push: push:
branches: ["main"] branches: ["main"]
# 允许从 Actions 选项卡手动运行此工作流 # 允许从 Actions 标签手动运行
workflow_dispatch: workflow_dispatch:
# 设置 GITHUB_TOKEN 权限以允许部署到 GitHub Pages # 设置 GITHUB_TOKEN 权限以允许部署到 GitHub Pages
permissions: permissions:
contents: read contents: read
pages: write pages: write
id-token: write id-token: write
# 允许一个并发部署,跳过在运行中和最新排队之间的运行 # 允许一个并发部署,跳过在运行最新排队之间的运行
# 但是,不要取消正在运行的运行,因为我们希望这些生产部署能够完成 # 但不会取消进行中的运行,以确保生产部署完成
concurrency: concurrency:
group: "pages" group: "pages"
cancel-in-progress: false cancel-in-progress: false
@@ -56,32 +56,32 @@ jobs:
env: env:
HUGO_VERSION: 0.147.7 HUGO_VERSION: 0.147.7
steps: steps:
- name: 检出 - name: 检出代码
uses: actions/checkout@v4 uses: actions/checkout@v4
with: with:
fetch-depth: 0 # 获取所有历史记录以支持 .GitInfo 和 .Lastmod fetch-depth: 0 # 获取完整历史记录以支持 .GitInfo 和 .Lastmod
submodules: recursive submodules: recursive
- name: 设置 Go - name: 设置 Go 环境
uses: actions/setup-go@v5 uses: actions/setup-go@v5
with: with:
go-version: '1.22' go-version: '1.22'
- name: 置 Pages - name: 置 Pages
id: pages id: pages
uses: actions/configure-pages@v4 uses: actions/configure-pages@v4
- name: 设置 Hugo - name: 安装 Hugo
run: | run: |
wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \ 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 && sudo dpkg -i ${{ runner.temp }}/hugo.deb
- name: 使用 Hugo 构建 - name: 使用 Hugo 构建
env: env:
# 为了最大程度地兼容 Hugo 模块 # 为 Hugo 模块提供最大兼容性
HUGO_ENVIRONMENT: production HUGO_ENVIRONMENT: production
HUGO_ENV: production HUGO_ENV: production
run: | run: |
hugo \ hugo \
--gc --minify \ --gc --minify \
--baseURL "${{ steps.pages.outputs.base_url }}/" --baseURL "${{ steps.pages.outputs.base_url }}/"
- name: 上传工件 - name: 上传产物
uses: actions/upload-pages-artifact@v3 uses: actions/upload-pages-artifact@v3
with: with:
path: ./public path: ./public
@@ -103,13 +103,13 @@ jobs:
{{< callout >}} {{< callout >}}
您的仓库设置中,将 **Pages** > **Build and deployment** > **Source** 设为 **GitHub Actions** 在仓库设置中,将 **Pages** > **构建与部署** > **** 设为 **GitHub Actions**
![](https://user-images.githubusercontent.com/5097752/266784808-99676430-884e-42ab-b901-f6534a0d6eee.png) ![](https://user-images.githubusercontent.com/5097752/266784808-99676430-884e-42ab-b901-f6534a0d6eee.png)
{{< /callout >}} {{< /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]} ```yaml {filename=".github/workflows/pages.yaml",linenos=table,linenostart=54,hl_lines=[4]}
run: | run: |
@@ -118,47 +118,47 @@ run: |
--baseURL "https://${{ github.repository_owner }}.github.io/" --baseURL "https://${{ github.repository_owner }}.github.io/"
``` ```
如果您部署到自己的域名,请相应地更改 `--baseURL` 值。 若使用自定义域名,请相应调整 `--baseURL` 值。
## Cloudflare Pages ## Cloudflare Pages
1. 将您的站点源代码放入 Git 仓库(如 GitHub 1. 将站点源码存入 Git 仓库(如 GitHub
2. 登录 [Cloudflare 仪表板](https://dash.cloudflare.com/) 并选择您的账户 2. 登录 [Cloudflare 控制台](https://dash.cloudflare.com/) 并选择账户
3. 在账户主页中,选择 **Workers & Pages** > **Create application** > **Pages** > **Connect to Git** 3. 在账户首页选择 **Workers & Pages** > **创建应用** > **Pages** > **连接 Git**
4. 选择仓库,在 **Set up builds and deployments** 部分提供以下信息 4. 选择仓库,在 **设置构建与部署** 部分填写
| 配置项 | 值 | | 配置项 | 值 |
| ------------------ | -------------------- | | ---------------- | -------------------- |
| 生产分支 | `main` | | 生产分支 | `main` |
| 构建命令 | `hugo --gc --minify` | | 构建命令 | `hugo --gc --minify` |
| 构建目录 | `public` | | 构建输出目录 | `public` |
更多详情,请查看 更多细节请参阅
- [部署 Hugo 站点](https://developers.cloudflare.com/pages/framework-guides/deploy-a-hugo-site/#deploy-with-cloudflare-pages) - [部署 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/) - [语言支持工具](https://developers.cloudflare.com/pages/platform/language-support-and-tools/)
## Netlify ## Netlify
1. 将代码推送到您的 Git 仓库GitHubGitLab 等) 1. 将代码推送到 Git 仓库GitHub/GitLab 等)
2. [导入项目](https://app.netlify.com/start) 到 Netlify 2. 在 Netlify 中[导入项目](https://app.netlify.com/start)
3. 如果您没有使用 [hextra-starter-template][hextra-starter-template]手动配置以下内容 3. 若未使用 [hextra-starter-template][hextra-starter-template]手动配置:
- 构建命令配置为 `hugo --gc --minify` - 构建命令为 `hugo --gc --minify`
- 指定发布目录为 `public` - 发布目录为 `public`
- 添加环境变量 `HUGO_VERSION` 并设为 `0.147.7`,或者将其设置在 `netlify.toml` 文件 - 添加环境变量 `HUGO_VERSION` 并设为 `0.147.7`,或在 `netlify.toml` 中配置
4. 部署! 4. 开始部署!
查看 [Netlify 上的 Hugo](https://docs.netlify.com/integrations/frameworks/hugo/) 了解更多详情。 详见 [Netlify 上的 Hugo](https://docs.netlify.com/integrations/frameworks/hugo/)
## Vercel ## Vercel
1. 将代码推送到您的 Git 仓库GitHubGitLab 等) 1. 将代码推送到 Git 仓库GitHub/GitLab 等)
2. 前往 [Vercel 仪表板](https://vercel.com/dashboard) 导入您的 Hugo 项目 2. 进入 [Vercel 控制台](https://vercel.com/dashboard) 导入 Hugo 项目
3. 配置项目选择 Hugo 作为框架预设 3. 配置项目选择 Hugo 作为框架预设
4. 覆盖构建命令安装命令: 4. 覆盖构建命令安装命令:
1. 构建命令设为 `hugo --gc --minify` 1. 构建命令设为 `hugo --gc --minify`
2. 安装命令设为 `yum install golang` 2. 安装命令设为 `yum install golang`
![Vercel 部署配置](https://github.com/imfing/hextra/assets/5097752/887d949b-8d05-413f-a2b4-7ab92192d0b3) ![Vercel 部署配置](https://github.com/imfing/hextra/assets/5097752/887d949b-8d05-413f-a2b4-7ab92192d0b3)

View File

@@ -4,15 +4,15 @@ weight: 6
next: /docs/guide/shortcodes next: /docs/guide/shortcodes
--- ---
در حال حاضر، هگزترا از [Mermaid](#mermaid) برای نمودارها پشتیبانی می‌کند. در حال حاضر، Hextra از [Mermaid](#mermaid) برای نمودارها پشتیبانی می‌کند.
<!--more--> <!--more-->
## Mermaid ## 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 ````markdown
```mermaid ```mermaid
@@ -24,7 +24,7 @@ graph TD;
``` ```
```` ````
به صورت زیر رندر خواهد شد: به صورت زیر رندر می‌شود:
```mermaid ```mermaid
graph TD; graph TD;
@@ -50,4 +50,4 @@ sequenceDiagram
Bob-->>John: Jolly good! Bob-->>John: Jolly good!
``` ```
برای اطلاعات بیشتر، لطفا به [مستندات Mermaid](https://mermaid-js.github.io/mermaid/#/) مراجعه کنید. برای اطلاعات بیشتر، لطفاً به [مستندات Mermaid](https://mermaid-js.github.io/mermaid/#/) مراجعه کنید.

View File

@@ -4,15 +4,15 @@ weight: 6
next: /docs/guide/shortcodes next: /docs/guide/shortcodes
--- ---
現在、Hextraはダイアグラムのために[Mermaid](#mermaid)をサポートしています。 現在、Hextra[Mermaid](#mermaid) によるダイアグラム作成をサポートしています。
<!--more--> <!--more-->
## Mermaid ## Mermaid
[Mermaid](https://github.com/mermaid-js/mermaid#readme)は、JavaScriptベースのダイアグラムおよびチャート作成ツールで、Markdownにインスパイアされたテキスト定義を取り込み、ブラウザ内でダイナミックにダイアグラムを作成します。例えば、Mermaidはフローチャート、シーケンス図、円グラフなどをレンダリングできます。 [Mermaid](https://github.com/mermaid-js/mermaid#readme) は、JavaScript ベースのダイアグラムおよびチャート作成ツールで、Markdown 風のテキスト定義をブラウザ上で動的にダイアグラムに変換します。例えば、Mermaid はフローチャート、シーケンス図、円グラフなどをレンダリングできます。
HextraMermaidを使用するは、言語を`mermaid`に設定したコードブロックを書くのと同じくらい簡単です: HextraMermaid を使用するは、言語を `mermaid` に設定したコードブロックを記述するだけです:
````markdown ````markdown
```mermaid ```mermaid
@@ -24,7 +24,7 @@ graph TD;
``` ```
```` ````
これはのようにレンダリングされます: これは以下のようにレンダリングされます:
```mermaid ```mermaid
graph TD; graph TD;
@@ -34,20 +34,20 @@ graph TD;
C-->D; C-->D;
``` ```
シーケンス図: シーケンス図の例:
```mermaid ```mermaid
sequenceDiagram sequenceDiagram
participant Alice participant Alice
participant Bob participant Bob
Alice->>John: こんにちはJohn、元気ですか Alice->>John: Hello John, how are you?
loop 健康チェック loop Healthcheck
John->>John: 心気症と戦う John->>John: Fight against hypochondria
end end
Note right of John: 理性的な思考 <br/>が勝つ! Note right of John: Rational thoughts <br/>prevail!
John-->>Alice: 元気です! John-->>Alice: Great!
John->>Bob: あなたはどうですか? John->>Bob: How about you?
Bob-->>John: とても元気です! Bob-->>John: Jolly good!
``` ```
詳細については、[Mermaidドキュメント](https://mermaid-js.github.io/mermaid/#/)を参照してください。 詳細については、[Mermaid ドキュメント](https://mermaid-js.github.io/mermaid/#/)を参照してください。

View File

@@ -4,13 +4,13 @@ weight: 6
next: /docs/guide/shortcodes next: /docs/guide/shortcodes
--- ---
目前Hextra 支持使用 [Mermaid](#mermaid) 绘制图表。 目前Hextra 支持通过 [Mermaid](#mermaid) 绘制图表。
<!--more--> <!--more-->
## Mermaid ## 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` 的代码块:
@@ -24,7 +24,7 @@ graph TD;
``` ```
```` ````
渲染为: 上述代码将渲染为:
```mermaid ```mermaid
graph TD; graph TD;
@@ -34,7 +34,7 @@ graph TD;
C-->D; C-->D;
``` ```
图示例: 序图示例:
```mermaid ```mermaid
sequenceDiagram sequenceDiagram
@@ -42,12 +42,12 @@ sequenceDiagram
participant Bob participant Bob
Alice->>John: 你好 John最近怎么样 Alice->>John: 你好 John最近怎么样
loop 健康检查 loop 健康检查
John->>John: 与疑病症斗争 John->>John: 与疑病症斗争
end end
Note right of John: 理性思考 <br/>占据上风! Note right of John: 理性思考 <br/>占据上风!
John-->>Alice: 好! John-->>Alice: 好极了
John->>Bob: 你怎么样? John->>Bob: 你怎么样?
Bob-->>John: 非常好! Bob-->>John: 非常好!
``` ```
更多信息请参 [Mermaid 文档](https://mermaid-js.github.io/mermaid/#/)。 更多信息请参 [Mermaid 官方文档](https://mermaid-js.github.io/mermaid/#/)。

View File

@@ -3,32 +3,35 @@ title: "LaTeX"
weight: 4 weight: 4
--- ---
به طور پیش‌فرض، \(\KaTeX\) برای رندر کردن عبارتهای ریاضی LaTeX استفاده می‌شود. عبارات ریاضی LaTeX به طور پیش‌فرض با استفاده از \(\KaTeX\) نمایش داده می‌شوند. کافی است آنها را در محتوای Markdown خود قرار دهید بدون نیاز به هیچ پیکربندی دستی.
نیازی به فعال‌سازی دستی نیست، می‌توانید فوراً از عبارت‌های ریاضی LaTeX در محتوای مارک‌داون خود استفاده کنید.
## مثال ## نحوه استفاده
هر دو عبارت‌های ریاضی درونخطی و پاراگراف جداگانه LaTeX در محتوای مارک‌داون پشتیبانی می‌شوند. می‌توانید از LaTeX هم برای عبارات درون خطی و هم برای بلوک‌های بزرگتر متن استفاده کنید.
### درونخطی ### ریاضی درون خطی
برای قرار دادن یک عبارت درون یک خط متن، آن را بین `\(` و `\)` قرار دهید.
```markdown {filename="page.md"} ```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"} ```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"} ```latex {filename="page.md"}
$$ $$
@@ -41,7 +44,7 @@ $$
$$ $$
``` ```
به صورت زیر رندر خواهد شد: به این صورت نمایش داده می‌شود:
$$ $$
\begin{aligned} \begin{aligned}
@@ -52,11 +55,28 @@ $$
\end{aligned} \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] > [!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"} ```yaml {filename="hugo.yaml"}
markup: markup:
@@ -69,35 +89,47 @@ markup:
enable: true 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"} ```yaml {filename="hugo.yaml"}
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$ 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] برای نمایش عبارات ریاضی استفاده کنید:
به عنوان جایگزین، می‌توانید از [MathJax][mathjax] برای رندر کردن عبارت‌های ریاضی استفاده کنید.
برای استفاده از آن، موارد زیر را به فایل پیکربندی `hugo.yaml` اضافه کنید:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
@@ -105,5 +137,10 @@ params:
engine: mathjax engine: mathjax
``` ```
> [!NOTE]
> می‌توانید MathJax را بیشتر سفارشی کنید (مثلاً تنظیمات لودر را تغییر دهید یا CDN/منبع را عوض کنید) با بازنویسی قالب در `layouts/_partials/scripts/mathjax.html` در پروژه خود. Hugo به جای نسخه پیش‌فرض قالب، از نسخه شما استفاده خواهد کرد.
[katex]: https://katex.org/ [katex]: https://katex.org/
[mathjax]: https://www.mathjax.org/ [mathjax]: https://www.mathjax.org/
[mhchem]: https://mhchem.github.io/MathJax-mhchem/
[hugo-transform-tomath]: https://gohugo.io/functions/transform/tomath/

View File

@@ -3,32 +3,35 @@ title: "LaTeX"
weight: 4 weight: 4
--- ---
デフォルトでは、\(\KaTeX\) が LaTeX 数式のレンダリングに使用されます。 LaTeX の数式表現はデフォルトで \(\KaTeX\) を使用してレンダリングされます。特別な設定なしで、Markdown コンテンツ内に直接記述できます。
手動での有効化は不要で、Markdown コンテンツで LaTeX 数式をすぐに使い始めることができます。
## ## 使用方法
Markdown コンテンツ内で、インラインおよび別段落の LaTeX 数式がサポートされています。 LaTeX はインライン式とブロック式の両方で使用できます。
### インライン ### インライン数式
文中に数式を含めるには、`\(``\)` で囲みます。
```markdown {filename="page.md"} ```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"} ```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"} ```latex {filename="page.md"}
$$ $$
@@ -52,11 +55,28 @@ $$
\end{aligned} \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] > [!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"} ```yaml {filename="hugo.yaml"}
markup: markup:
@@ -69,35 +89,47 @@ markup:
enable: true 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"} ```yaml {filename="hugo.yaml"}
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$ 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][mathjax] を使用して数式をレンダリングすることもできます。
MathJax を使用するには、`hugo.yaml` 設定ファイルに以下を追加してください:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
@@ -105,5 +137,10 @@ params:
engine: mathjax engine: mathjax
``` ```
> [!NOTE]
> MathJax をさらにカスタマイズするには(ローダーオプションの調整や CDN/ソースの変更など)、プロジェクトの `layouts/_partials/scripts/mathjax.html` でテンプレートを上書きしてください。Hugo はテーマのデフォルトではなく、あなたのバージョンを使用します。
[katex]: https://katex.org/ [katex]: https://katex.org/
[mathjax]: https://www.mathjax.org/ [mathjax]: https://www.mathjax.org/
[mhchem]: https://mhchem.github.io/MathJax-mhchem/
[hugo-transform-tomath]: https://gohugo.io/functions/transform/tomath/

View File

@@ -1,35 +1,37 @@
--- ---
title: "数学公式" title: "数学公式"
weight: 4 weight: 4
math: true
--- ---
默认情况下,\(\KaTeX\) 用于渲染 LaTeX 数学表达式。 LaTeX 数学表达式默认使用 \(\KaTeX\) 渲染。直接在 Markdown 内容中使用即可,无需手动配置
无需手动激活,您可以直接在 Markdown 内容中开始使用 LaTeX 数学表达式。
## 示例 ## 使用方法
Markdown 内容中支持内联和独立段落的 LaTeX 数学表达式 LaTeX 既可用于行内表达式,也可用于大段文本
### 内联 ### 行内公式
要在文本行内插入表达式,用 `\(``\)` 包裹。
```markdown {filename="page.md"} ```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"} ```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"} ```latex {filename="page.md"}
$$ $$
@@ -53,11 +55,28 @@ $$
\end{aligned} \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] > [!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"} ```yaml {filename="hugo.yaml"}
markup: markup:
@@ -70,35 +89,46 @@ markup:
enable: true 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"} ```yaml {filename="hugo.yaml"}
$$\ce{Hg^2+ ->[I-] HgI2 ->[I-] [Hg^{II}I4]^2-}$$ 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][mathjax] 来渲染数学表达式。
要使用 MathJax请将以下内容添加到 `hugo.yaml` 配置文件中:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
params: params:
@@ -106,5 +136,10 @@ params:
engine: mathjax engine: mathjax
``` ```
> [!NOTE]
> 可通过在项目中覆盖 `layouts/_partials/scripts/mathjax.html` 模板进一步定制 MathJax如调整加载器选项或更改 CDN/源。Hugo 将优先使用你的版本而非主题默认配置。
[katex]: https://katex.org/ [katex]: https://katex.org/
[mathjax]: https://www.mathjax.org/ [mathjax]: https://www.mathjax.org/
[mhchem]: https://mhchem.github.io/MathJax-mhchem/
[hugo-transform-tomath]: https://gohugo.io/functions/transform/tomath/

View File

@@ -1,141 +1,183 @@
--- ---
title: مارک‌داون title: Markdown
weight: 2 weight: 2
--- ---
Hugo از سینتکس [مارک‌داون](https://en.wikipedia.org/wiki/Markdown) برای قالب‌بندی متن، ایجاد فهرست و موارد دیگر پشتیبانی می‌کند. این صفحه برخی از رایج‌ترین نمونه‌های سینتکس مارک‌داون را به شما نشان می‌دهد. Hugo از [Markdown](https://en.wikipedia.org/wiki/Markdown) برای قالب‌بندی متن، ایجاد لیست‌ها و موارد دیگر پشتیبانی می‌کند. این صفحه برخی از رایج‌ترین نمونه‌های نحوه استفاده از Markdown را به شما نشان می‌دهد.
<!--more--> <!--more-->
## مثال‌های مارک‌داون ## نمونه‌های Markdown
### ظاهر طراحی دادن به متن ### استایل‌دهی متن
| سبک | سینتکس | مثال | خروجی | | استایل | نحو | مثال | خروجی |
| -------- | -------- | ------ | ------ | | :------------ | :----------------------- | :-------------------------------------- | :------------------------------------ |
| توپر | `**متن توپر**` | `**متن توپر**` | **متن توپر** | | پررنگ | `**متن پررنگ**` | `**متن پررنگ**` | **متن پررنگ** |
| کج | `*متن کج*` | `*متن کج*` | *متن کج* | | مورب | `*متن مورب*` | `*متن مورب*` | _متن مورب_ |
| خط خورده | `~~متن خط خورده~~` | `~~متن خط خورده~~` | ~~متن خط خورده~~ | | خطخورده | `~~متن خطخورده~~` | `~~متن خطخورده~~` | ~~متن خطخورده~~ |
| پایین‌نویس | `<sub></sub>` | `این یک متن <sub>پایین‌نویس</sub> است` | این یک متن <sub>پایین‌نویس</sub> است | | زیرنویس | `<sub></sub>` | `این یک <sub>زیرنویس</sub> است` | این یک <sub>زیرنویس</sub> است |
| بالانویس | `<sup></sup>` | `این یک متن <sup>بالانویس</sup> است` | این یک متن <sup>بالانویس</sup> است | | بالانویس | `<sup></sup>` | `این یک <sup>بالانویس</sup> است` | این یک <sup>بالانویس</sup> است |
### بلوک نقل‌قول ### نقل‌قولها
بلوک نقل‌قول با ذکر منبع نقل‌قول با ذکر منبع
> با اشتراک‌گذاری حافظه ارتباط برقرار نکنید، حافظه را با برقراری ارتباط به اشتراک بگذارید.<br> > با اشتراک‌گذاری حافظه ارتباط برقرار نکنید، بلکه با ارتباط، حافظه را اشتراک بگذارید.<br>
> — <cite>راب پایک[^1]</cite> > — <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} ```markdown {filename=Markdown}
> با اشتراک‌گذاری حافظه ارتباط برقرار نکنید، حافظه را با برقراری ارتباط به اشتراک بگذارید.<br> > با اشتراک‌گذاری حافظه ارتباط برقرار نکنید، بلکه با ارتباط، حافظه را اشتراک بگذارید.<br>
> — <cite>راب پایک[^1]</cite> > — <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} ```markdown {filename=Markdown}
| نام | سن | > [!NOTE]
|--------|------| > اطلاعات مفیدی که کاربران باید بدانند، حتی هنگام مرور سریع محتوا.
| گودرز | ۳۰|
| آصف | ۳۴ | > [!TIP]
> توصیه‌های مفید برای انجام بهتر یا آسان‌تر کارها.
> [!IMPORTANT]
> اطلاعات کلیدی که کاربران برای رسیدن به هدف خود نیاز دارند.
> [!WARNING]
> اطلاعات فوری که نیاز به توجه فوری کاربر دارد تا از مشکلات جلوگیری شود.
> [!CAUTION]
> هشدار درباره خطرات یا نتایج منفی برخی اقدامات.
``` ```
#### مارک‌داون درون‌خطی درون جدول‌ها ### جداول
| کج | توپر | کد | جداول بخشی از مشخصه اصلی Markdown نیستند، اما Hugo به صورت پیش‌فرض از آن‌ها پشتیبانی می‌کند.
| -------- | -------- | ------ |
| *کج* | **توپر** | `کد` | | نام | سن |
| :---- | :-- |
| باب | ۲۷ |
| آلیس | ۲۳ |
```markdown {filename=Markdown} ```markdown {filename=Markdown}
| کج | توپر | کد | | نام | سن |
| -------- | -------- | ------ | | :---- | :-- |
| *کج* | **توپر** | `کد` | | باب | ۲۷ |
| آلیس | ۲۳ |
```
#### Markdown درون‌خطی در جداول
| مورب | پررنگ | کد |
| :-------- | :------- | :----- |
| _مورب_ | **پررنگ** | `کد` |
```markdown {filename=Markdown}
| مورب | پررنگ | کد |
| :-------- | :------- | :----- |
| _مورب_ | **پررنگ** | `کد` |
``` ```
### بلوک‌های کد ### بلوک‌های کد
{{< cards >}} {{< cards >}}
{{< card link="../../guide/syntax-highlighting" title="برجسته‌کردن سینتکس" icon="sparkles" >}} {{< card link="../../guide/syntax-highlighting" title="رنگ‌آمیزی نحوی" icon="sparkles" >}}
{{< /cards >}} {{< /cards >}}
### فهرست‌ها ### لیست‌ها
#### فهرست مرتب‌شده #### لیست مرتب
1. اولین آیتم ۱. مورد اول
2. دومین آیتم ۲. مورد دوم
3. سومین آیتم ۳. مورد سوم
```markdown {filename=Markdown} ```markdown {filename=Markdown}
1. اولین آیتم ۱. مورد اول
2. دومین آیتم ۲. مورد دوم
3. سومین آیتم ۳. مورد سوم
``` ```
#### فهرست مرتب‌نشده #### لیست نامرتب
* فهرست آیتم * مورد لیست
* یک آیتم دیگه * مورد دیگر
* و یک آیتم دیگه * و یک مورد دیگر
```markdown {filename=Markdown} ```markdown {filename=Markdown}
* فهرست آیتم * مورد لیست
* یک آیتم دیگه * مورد دیگر
* و یک آیتم دیگه * و یک مورد دیگر
``` ```
#### فهرست تو در تو #### لیست تو در تو
* میوه - میوه
* سیب - سیب
* پرتقال - پرتقال
* موز - موز
* لبنیات - لبنیات
* شیر - شیر
* پنیر - پنیر
```markdown {filename=Markdown} ```markdown {filename=Markdown}
* میوه - میوه
* سیب - سیب
* پرتقال - پرتقال
* موز - موز
* لبنیات - لبنیات
* شیر - شیر
* پنیر - پنیر
``` ```
### عکس‌ها ### تصاویر
![landscape](https://picsum.photos/800/600) ![منظره](https://picsum.photos/800/600)
```markdown {filename=Markdown} ```markdown {filename=Markdown}
![landscape](https://picsum.photos/800/600) ![منظره](https://picsum.photos/800/600)
``` ```
با توضیحات: با عنوان:
![landscape](https://picsum.photos/800/600 "یک چشم‌انداز Unsplash") ![منظره](https://picsum.photos/800/600 "Lorem Picsum")
```markdown {filename=Markdown} ```markdown {filename=Markdown}
![landscape](https://picsum.photos/800/600 "یک چشم‌انداز Unsplash") ![منظره](https://picsum.photos/800/600 "Lorem Picsum")
``` ```
برای عملکرد پیشرفته‌تر، از [shortcode Figure](https://gohugo.io/shortcodes/figure/) داخلی Hugo استفاده کنید.
## پیکربندی ## پیکربندی
Hugo از [Goldmark](https://github.com/yuin/goldmark) برای تجزیه مارک‌داون استفاده می‌کند. Hugo از [Goldmark](https://github.com/yuin/goldmark) برای تجزیه Markdown استفاده می‌کند.
رندر مارک‌داون را می‌توان در `hugo.yaml` تحت `markup.goldmark` پیکربندی کنید. رندر Markdown را می‌توان در `hugo.yaml` تحت `markup.goldmark` پیکربندی کرد.
در زیر پیکربندی پیش‌فرض هگزترا را می‌توانید ببینید: در زیر پیکربندی پیش‌فرض Hextra آمده است:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
markup: markup:
@@ -146,11 +188,11 @@ markup:
noClasses: false noClasses: false
``` ```
برای گزینه‌های پیکربندی بیشتر، به مستندات Hugo در [پیکربندی نشانه‌گذاری](https://gohugo.io/getting-started/configuration-markup/) مراجعه کنید. برای گزینه‌های پیکربندی بیشتر، مستندات Hugo در مورد [پیکربندی Markup](https://gohugo.io/getting-started/configuration-markup/) را ببینید.
## منابع یادگیری ## منابع یادگیری
* [راهنمای مارک‌داون](https://www.markdownguide.org/) - [راهنمای Markdown](https://www.markdownguide.org/)
* [برگه تقلب مارک‌داون](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) - [راهنمای سریع Markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
* [آموزش مارک‌داون](https://www.markdowntutorial.com/) - [آموزش Markdown](https://www.markdowntutorial.com/)
* [مرجع مارک‌داون](https://commonmark.org/help/) - [مرجع Markdown](https://commonmark.org/help/)

View File

@@ -3,104 +3,104 @@ title: Markdown
weight: 2 weight: 2
--- ---
Hugoはテキストのフォーマットやリスト作成などに[Markdown](https://ja.wikipedia.org/wiki/Markdown)構文をサポートしています。このページでは、最も一般的なMarkdown構文の例をいくつか紹介します。 Hugo はテキストの書式設定やリスト作成などに [Markdown](https://en.wikipedia.org/wiki/Markdown) 構文をサポートしています。このページでは、最も一般的な Markdown 構文の例を紹介します。
<!--more--> <!--more-->
## Markdownの例 ## Markdown の例
### テキストのスタイ ### テキストのスタイリング
| スタイル | 構文 | 例 | 出力 | | スタイル | 構文 | 例 | 出力 |
| -------- | -------- | ------ | ------ | | :------------ | :----------------------- | :------------------------------------ | :------------------------------------ |
| 太字 | `**太字テキスト**` | `**太字テキスト**` | **太字テキスト** | | 太字 | `**太字テキスト**` | `**太字テキスト**` | **太字テキスト** |
| 斜体 | `*斜体テキスト*` | `*斜体テキスト*` | *斜体テキスト* | | 斜体 | `*斜体テキスト*` | `*斜体テキスト*` | _斜体テキスト_ |
| 取り消し線 | `~~取り消し線テキスト~~` | `~~取り消し線テキスト~~` | ~~取り消し線テキスト~~ | | 打ち消し線 | `~~打ち消し線テキスト~~` | `~~打ち消し線テキスト~~` | ~~打ち消し線テキスト~~ |
| 下付き文字 | `<sub></sub>` | `これは<sub>下付き文字</sub>です` | これは<sub>下付き文字</sub>です | | 下付き文字 | `<sub></sub>` | `これは<sub>下付き文字</sub>です` | これは<sub>下付き文字</sub>です |
| 上付き文字 | `<sup></sup>` | `これは<sup>上付き文字</sup>です` | これは<sup>上付き文字</sup>です | | 上付き文字 | `<sup></sup>` | `これは<sup>上付き文字</sup>です` | これは<sup>上付き文字</sup>です |
### ブロッククォート ### ブロッククォート
引用元付きのブロッククォート 引用元付きのブロッククォート
> メモリを共有してコミュニケーションするのではなく、コミュニケーションしてメモリを共有せよ。<br> > メモリを共有することで通信するのではなく、通信することでメモリを共有しなさい。<br>
> — <cite>ロブ・パイク[^1]</cite> > — <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} ```markdown {filename=Markdown}
> メモリを共有してコミュニケーションするのではなく、コミュニケーションしてメモリを共有せよ。<br> > メモリを共有することで通信するのではなく、通信することでメモリを共有しなさい。<br>
> — <cite>ロブ・パイク[^1]</cite> > — <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" >}} {{< 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)がサポートされています。 [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] > [!NOTE]
> ユーザーが知っておくべき有用な情報で、内容をざっと見る際にも役立ちます > コンテンツをざっと見る際にもユーザーが知っておくべき有用な情報。
> [!TIP] > [!TIP]
> 物事をより良く、または簡単に行うための役立つアドバイス。 > 物事をより良く、または簡単に行うための役立つアドバイス。
> [!IMPORTANT] > [!IMPORTANT]
> ユーザーが目標を達成するために知っておくべき重要な情報。 > ユーザーが目標を達成するために知っておく必要がある重要な情報。
> [!WARNING] > [!WARNING]
> 問題を避けるために即座にユーザーの注意を引く必要がある緊急情報。 > 問題を回避するためにユーザーがすぐに対処する必要がある緊急情報。
> [!CAUTION] > [!CAUTION]
> 特定のアクションリスクやネガティブな結果についてのアドバイス > 特定のアクションによるリスクやネガティブな結果についての警告
```markdown {filename=Markdown} ```markdown {filename=Markdown}
> [!NOTE] > [!NOTE]
> ユーザーが知っておくべき有用な情報で、内容をざっと見る際にも役立ちます > コンテンツをざっと見る際にもユーザーが知っておくべき有用な情報。
> [!TIP] > [!TIP]
> 物事をより良く、または簡単に行うための役立つアドバイス。 > 物事をより良く、または簡単に行うための役立つアドバイス。
> [!IMPORTANT] > [!IMPORTANT]
> ユーザーが目標を達成するために知っておくべき重要な情報。 > ユーザーが目標を達成するために知っておく必要がある重要な情報。
> [!WARNING] > [!WARNING]
> 問題を避けるために即座にユーザーの注意を引く必要がある緊急情報。 > 問題を回避するためにユーザーがすぐに対処する必要がある緊急情報。
> [!CAUTION] > [!CAUTION]
> 特定のアクションリスクやネガティブな結果についてのアドバイス > 特定のアクションによるリスクやネガティブな結果についての警告
``` ```
### テーブル ### テーブル
テーブルはMarkdownのコア仕様には含まれていませんが、Hugoはデフォルトでサポートしています。 テーブルはコアMarkdown仕様の一部ではありませんが、Hugoはデフォルトでサポートしています。
| 名前 | 年齢 | | 名前 | 年齢 |
|--------|------| | :---- | :-- |
| ボブ | 27 | | Bob | 27 |
| アリス | 23 | | Alice | 23 |
```markdown {filename=Markdown} ```markdown {filename=Markdown}
| 名前 | 年齢 | | 名前 | 年齢 |
|--------|------| | :---- | :-- |
| ボブ | 27 | | Bob | 27 |
| アリス | 23 | | Alice | 23 |
``` ```
#### テーブル内のインラインMarkdown #### テーブル内のインラインMarkdown
| 斜体 | 太字 | コード | | 斜体 | 太字 | コード |
| -------- | -------- | ------ | | :-------- | :-------- | :-------- |
| *斜体* | **太字** | `コード` | | _斜体_ | **太字** | `コード` |
```markdown {filename=Markdown} ```markdown {filename=Markdown}
| 斜体 | 太字 | コード | | 斜体 | 太字 | コード |
| -------- | -------- | ------ | | :-------- | :-------- | :-------- |
| *斜体* | **太字** | `コード` | | _斜体_ | **太字** | `コード` |
``` ```
### コードブロック ### コードブロック
@@ -137,22 +137,22 @@ Hextraの最新バージョンと[Hugo v0.146.0](https://github.com/gohugoio/hug
#### ネストされたリスト #### ネストされたリスト
* 果物 - 果物
* りんご - りんご
* オレンジ - オレンジ
* バナナ - バナナ
* 乳製品 - 乳製品
* 牛乳 - 牛乳
* チーズ - チーズ
```markdown {filename=Markdown} ```markdown {filename=Markdown}
* 果物 - 果物
* りんご - りんご
* オレンジ - オレンジ
* バナナ - バナナ
* 乳製品 - 乳製品
* 牛乳 - 牛乳
* チーズ - チーズ
``` ```
### 画像 ### 画像
@@ -165,16 +165,18 @@ Hextraの最新バージョンと[Hugo v0.146.0](https://github.com/gohugoio/hug
キャプション付き: キャプション付き:
![風景](https://picsum.photos/800/600 "Unsplashの風景") ![風景](https://picsum.photos/800/600 "Lorem Picsum")
```markdown {filename=Markdown} ```markdown {filename=Markdown}
![風景](https://picsum.photos/800/600 "Unsplashの風景") ![風景](https://picsum.photos/800/600 "Lorem Picsum")
``` ```
より高度な機能が必要な場合は、Hugoの組み込み[Figureショートコード](https://gohugo.io/shortcodes/figure/)を使用してください。
## 設定 ## 設定
HugoはMarkdown解析に[Goldmark](https://github.com/yuin/goldmark)を使用しています。 HugoはMarkdown解析に[Goldmark](https://github.com/yuin/goldmark)を使用しています。
Markdownのレンダリングは`hugo.yaml`の`markup.goldmark`で設定できます。 Markdownのレンダリング設定は`hugo.yaml`の`markup.goldmark`で行えます。
以下はHextraのデフォルト設定です: 以下はHextraのデフォルト設定です:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
@@ -186,11 +188,11 @@ markup:
noClasses: false 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://www.markdownguide.org/)
* [Markdownチートシート](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) - [Markdownチートシート](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
* [Markdownチュートリアル](https://www.markdowntutorial.com/) - [Markdownチュートリアル](https://www.markdowntutorial.com/)
* [Markdownリファレンス](https://commonmark.org/help/) - [Markdownリファレンス](https://commonmark.org/help/)

View File

@@ -3,7 +3,7 @@ title: Markdown
weight: 2 weight: 2
--- ---
Hugo 支持使用 [Markdown](https://en.wikipedia.org/wiki/Markdown) 语法来格式化文本、创建列表等。本页将展示一些最常的 Markdown 语法示例。 Hugo 支持使用 [Markdown](https://en.wikipedia.org/wiki/Markdown) 语法来格式化文本、创建列表等。本页将展示一些最常的 Markdown 语法示例。
<!--more--> <!--more-->
@@ -11,28 +11,28 @@ Hugo 支持使用 [Markdown](https://en.wikipedia.org/wiki/Markdown) 语法来
### 文本样式 ### 文本样式
| 样式 | 语法 | 示例 | 输出 | | 样式 | 语法 | 示例 | 输出 |
| -------- | -------- | ------ | ------ | | :----- | :--------------- | :------------------------ | :---------------------- |
| 粗体 | `**粗体文本**` | `**粗体文本**` | **粗体文本** | | 粗体 | `**粗体文本**` | `**粗体文本**` | **粗体文本** |
| 斜体 | `*斜体文本*` | `*斜体文本*` | *斜体文本* | | 斜体 | `*斜体文本*` | `*斜体文本*` | _斜体文本_ |
| 删除线 | `~~删除线文本~~` | `~~删除线文本~~` | ~~删除线文本~~ | | 删除线 | `~~删除线文本~~` | `~~删除线文本~~` | ~~删除线文本~~ |
| 下标 | `<sub></sub>` | `这是一个<sub>下标</sub>文本` | 这是一个<sub>下标</sub>文本 | | 下标 | `<sub></sub>` | `这是<sub>下标</sub>文本` | 这是<sub>下标</sub>文本 |
| 上标 | `<sup></sup>` | `这是一个<sup>上标</sup>文本` | 这是一个<sup>上标</sup>文本 | | 上标 | `<sup></sup>` | `这是<sup>上标</sup>文本` | 这是<sup>上标</sup>文本 |
### 引用块 ### 引用块
带出处的引用 带出处的引用
> 不要通过共享内存来通信,而要通过通信来共享内存。<br> > 不要通过共享内存来通信,而要通过通信来共享内存。<br>
> — <cite>Rob Pike[^1]</cite> > — <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} ```markdown {filename=Markdown}
> 不要通过共享内存来通信,而要通过通信来共享内存。<br> > 不要通过共享内存来通信,而要通过通信来共享内存。<br>
> — <cite>Rob Pike[^1]</cite> > — <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) 或更高版本。 请确保您使用的是最新版本的 Hextra 和 [Hugo v0.146.0](https://github.com/gohugoio/hugo/releases/tag/v0.146.0) 或更高版本。
> [!NOTE] > [!NOTE]
> 用户应该知道的有用信息,即使是在浏览内容时 > 即使用户只是浏览内容,也应该知道的有用信息
> [!TIP] > [!TIP]
> 帮助用户更好地或更轻松完成任务的建议。 > 帮助用户更高效或更轻松完成任务的建议。
> [!IMPORTANT] > [!IMPORTANT]
> 用户需要了解的关键信息,以实现他们的目标。 > 用户需要了解的关键信息,以实现他们的目标。
> [!WARNING] > [!WARNING]
> 需要用户立即注的紧急信息,以避免问题。 > 需要用户立即注的紧急信息,以避免出现问题。
> [!CAUTION] > [!CAUTION]
> 关于某些操作风险或负面结果的建议 > 关于某些操作可能带来风险或负面结果的警告
```markdown {filename=Markdown} ```markdown {filename=Markdown}
> [!NOTE] > [!NOTE]
> 用户应该知道的有用信息,即使是在浏览内容时 > 即使用户只是浏览内容,也应该知道的有用信息
> [!TIP] > [!TIP]
> 帮助用户更好地或更轻松完成任务的建议。 > 帮助用户更高效或更轻松完成任务的建议。
> [!IMPORTANT] > [!IMPORTANT]
> 用户需要了解的关键信息,以实现他们的目标。 > 用户需要了解的关键信息,以实现他们的目标。
> [!WARNING] > [!WARNING]
> 需要用户立即注的紧急信息,以避免问题。 > 需要用户立即注的紧急信息,以避免出现问题。
> [!CAUTION] > [!CAUTION]
> 关于某些操作风险或负面结果的建议 > 关于某些操作可能带来风险或负面结果的警告
``` ```
### 表格 ### 表格
表格不是 Markdown 核心规范的一部分,但 Hugo 默认支持它们。 表格不是 Markdown 核心规范的一部分,但 Hugo 原生支持它们。
| 姓名 | 年龄 | | 姓名 | 年龄 |
|--------|------| | :--- | :--- |
| Bob | 27 | | 张三 | 27 |
| Alice | 23 | | 李四 | 23 |
```markdown {filename=Markdown} ```markdown {filename=Markdown}
| 姓名 | 年龄 | | 姓名 | 年龄 |
|--------|------| | :--- | :--- |
| Bob | 27 | | 张三 | 27 |
| Alice | 23 | | 李四 | 23 |
``` ```
#### 表格中的内联 Markdown #### 表格内的行内 Markdown
| 斜体 | 粗体 | 代码 | | 斜体 | 粗体 | 代码 |
| -------- | -------- | ------ | | :----- | :------- | :----- |
| *斜体* | **粗体** | `代码` | | _斜体_ | **粗体** | `代码` |
```markdown {filename=Markdown} ```markdown {filename=Markdown}
| 斜体 | 粗体 | 代码 | | 斜体 | 粗体 | 代码 |
| -------- | -------- | ------ | | :----- | :------- | :----- |
| *斜体* | **粗体** | `代码` | | _斜体_ | **粗体** | `代码` |
``` ```
### 代码块 ### 代码块
@@ -125,34 +125,34 @@ Hugo 支持使用 [Markdown](https://en.wikipedia.org/wiki/Markdown) 语法来
#### 无序列表 #### 无序列表
* 列表项 - 列表项
* 另一个项 - 另一个项
* 再一个项 - 再一个项
```markdown {filename=Markdown} ```markdown {filename=Markdown}
* 列表项 - 列表项
* 另一个项 - 另一个项
* 再一个项 - 再一个项
``` ```
#### 嵌套列表 #### 嵌套列表
* 水果 - 水果
* 苹果 - 苹果
* 橙子 - 橙子
* 香蕉 - 香蕉
* 乳制品 - 乳制品
* 牛奶 - 牛奶
* 奶酪 - 奶酪
```markdown {filename=Markdown} ```markdown {filename=Markdown}
* 水果 - 水果
* 苹果 - 苹果
* 橙子 - 橙子
* 香蕉 - 香蕉
* 乳制品 - 乳制品
* 牛奶 - 牛奶
* 奶酪 - 奶酪
``` ```
### 图片 ### 图片
@@ -165,16 +165,18 @@ Hugo 支持使用 [Markdown](https://en.wikipedia.org/wiki/Markdown) 语法来
带标题: 带标题:
![风景](https://picsum.photos/800/600 "Unsplash 风景") ![风景](https://picsum.photos/800/600 "Lorem Picsum")
```markdown {filename=Markdown} ```markdown {filename=Markdown}
![风景](https://picsum.photos/800/600 "Unsplash 风景") ![风景](https://picsum.photos/800/600 "Lorem Picsum")
``` ```
如需更高级的功能,请使用 Hugo 内置的 [Figure 短代码](https://gohugo.io/shortcodes/figure/)。
## 配置 ## 配置
Hugo 使用 [Goldmark](https://github.com/yuin/goldmark) 进行 Markdown 解析。 Hugo 使用 [Goldmark](https://github.com/yuin/goldmark) 进行 Markdown 解析。
Markdown 渲染可以在 `hugo.yaml` 中的 `markup.goldmark` 下进行配置。 Markdown 渲染可以在 `hugo.yaml` 中的 `markup.goldmark` 下配置。
以下是 Hextra 的默认配置: 以下是 Hextra 的默认配置:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
@@ -190,7 +192,7 @@ markup:
## 学习资源 ## 学习资源
* [Markdown 指南](https://www.markdownguide.org/) - [Markdown 指南](https://www.markdownguide.org/)
* [Markdown 速查表](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) - [Markdown 速查表](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)
* [Markdown 教程](https://www.markdowntutorial.com/) - [Markdown 教程](https://www.markdowntutorial.com/)
* [Markdown 参考](https://commonmark.org/help/) - [Markdown 参考](https://commonmark.org/help/)

View File

@@ -1,12 +1,13 @@
--- ---
title: سازماندهی پروندهها title: سازماندهی فایلها
weight: 1 weight: 1
prev: /docs/guide prev: /docs/guide
--- ---
## ساختار دایرکتوری ## ساختار دایرکتوری
به طور پیش‌فرض، Hugo پرونده‌های مارک‌داون را در فهرست `content` جستجو می‌کند و ساختار فهرست، ساختار خروجی نهایی وب‌سایت شما را تعیین می‌کند. همین سایت را به عنوان مثال در نظر بگیرید: بهطور پیش‌فرض، Hugo فایل‌های Markdown را در دایرکتوری `content` جستجو می‌کند و ساختار این دایرکتوری تعیین‌کننده ساختار نهایی خروجی وبسایت شماست.
این سایت را به عنوان مثال در نظر بگیرید:
<!--more--> <!--more-->
@@ -28,7 +29,7 @@ prev: /docs/guide
{{< /filetree/folder >}} {{< /filetree/folder >}}
{{< /filetree/container >}} {{< /filetree/container >}}
هر یک از پرونده‌های `_index.md` صفحه اصلی هر بخش هستند که برای هر بخش مجزا است. سایر پرونده‌های مارک‌داون صفحه‌های معمولی دیگه‌ای هستند. هر یک از فایل‌های `_index.md` صفحه اصلی مربوط به بخش خود هستند. سایر فایل‌های Markdown صفحات معمولی هستند.
``` ```
content content
@@ -46,15 +47,15 @@ content
## طرح‌بندی‌ها ## طرح‌بندی‌ها
هگزترا سه طرح‌بندی برای انواع مختلف محتوا ارائه می‌کند: Hextra سه طرح‌بندی برای انواع مختلف محتوا ارائه می‌دهد:
| طرح‌بندی | دایرکتوری | ویژگی‌ها | | طرح‌بندی | دایرکتوری | ویژگی‌ها |
| :-------- | :-------------------- | :--------------------------------------------------------------- | | :-------- | :----------------- | :----------------------------------------------------------- |
| `docs` | `content/docs/` | ایده‌آل برای مستندات ساختار یافته، مانند این بخش. | | `docs` | `content/docs/` | مناسب برای مستندات ساختاریافته، مشابه این بخش. |
| `blog` | `content/blog/` | برای نوشته‌های وبلاگ، با هر فهرست‌بندی و هم نمایش جزئیات مقاله. | | `blog` | `content/blog/` | برای پست‌های وبلاگ، با نمایش لیست و مقاله‌های تفصیلی. |
| `default` | همه دایرکتوری‌های دیگر | مشاهده مقاله تک صفحه‌ای بدون نوار کناری. | | `default` | سایر دایرکتوری‌ها | نمایش تکصفحه‌ای مقاله بدون نوار کناری. |
برای سفارشی کردن یک بخش برای منعکس کردن رفتار یک طرح داخلی، نوع طرح‌بندی مورد نظر را در قسمت بالایی قسمت _index.md` مشخص کنید. برای سفارشی‌سازی یک بخش به منظور تقلید رفتار یک طرح‌بندی داخلی، نوع مورد نظر را در front matter فایل `_index.md` بخش مشخص کنید.
```yaml {filename="content/my-docs/_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"} ```yaml {filename="content/docs/guide/_index.md"}
--- ---
@@ -78,18 +79,126 @@ weight: 2
``` ```
{{< callout emoji="">}} {{< callout emoji="">}}
توصیه می‌کنیم نوار کناری خیلی عمیق نباشد. اگر محتوای زیادی دارید، آنها را **به چند بخش تقسیم کنید**. توصیه می‌شود نوار کناری را خیلی عمیق نگه ندارید. اگر محتوای زیادی دارید، **آنها را به چند بخش تقسیم کنید**.
{{< /callout >}} {{< /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 برای ساخت سایت استفاده می‌شود. بهطور پیش‌فرض، دایرکتوری ریشه `content/` توسط Hugo برای ساخت سایت استفاده می‌شود.
اگر نیاز به استفاده از دایرکتوری متفاوتی برای محتوا دارید، برای مثال `docs/`، این کار را می‌توانید با تنظیم پارامتر [`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir) در پیکربندی سایت `hugo.yaml` انجام دهید. اگر نیاز به استفاده از دایرکتوری دیگری برای محتوا دارید، مثلاً `docs/`، این کار را می‌توان با تنظیم پارامتر [`contentDir`](https://gohugo.io/getting-started/configuration/#contentdir) در پیکربندی سایت `hugo.yaml` انجام داد.
## افزودن تصاویر ## اضافه کردن تصاویر
برای افزودن تصاویر، ساده‌ترین راه این است که پرونده‌های عکس‌ها را در همان دایرکتوری پرونده مارک‌داون قرار دهید. برای اضافه کردن تصاویر، ساده‌ترین راه این است که فایل‌های تصویر را در همان دایرکتوری فایل Markdown قرار دهید.
برای مثال، یک پرونده عکس `image.png` را در کنار پرونده `my-page.md` اضافه کنید: به عنوان مثال، یک فایل تصویر `image.png` را در کنار فایل `my-page.md` اضافه کنید:
{{< filetree/container >}} {{< filetree/container >}}
{{< filetree/folder name="content" >}} {{< filetree/folder name="content" >}}
@@ -100,13 +209,13 @@ weight: 2
{{< /filetree/folder >}} {{< /filetree/folder >}}
{{< /filetree/container >}} {{< /filetree/container >}}
سپس، می‌توانید از سینتکس مارک‌داون زیر برای افزودن عکس به محتوا استفاده کنید: سپس می‌توانیم از سینتکس Markdown زیر برای اضافه کردن تصویر به محتوا استفاده کنیم:
```markdown {filename="content/docs/my-page.md"} ```markdown {filename="content/docs/my-page.md"}
![](image.png) ![](image.png)
``` ```
همچنین می‌توانید از ویژگی [بسته‌های صفحه][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/container >}}
{{< filetree/folder name="content" >}} {{< filetree/folder name="content" >}}
@@ -123,7 +232,7 @@ weight: 2
![](image.png) ![](image.png)
``` ```
همچنین می‌توانید پرونده‌های عکس‌ها را در دایرکتوری `static` قرار دهید که عکس‌ها را برای همه صفحات در دسترس قرار می‌دهد: به‌عنوان جایگزین، می‌توانیم فایل‌های تصویر را در دایرکتوری `static` قرار دهیم، که تصاویر را برای تمام صفحات قابل دسترس می‌کند:
{{< filetree/container >}} {{< filetree/container >}}
{{< filetree/folder name="static" >}} {{< filetree/folder name="static" >}}
@@ -138,7 +247,7 @@ weight: 2
{{< /filetree/folder >}} {{< /filetree/folder >}}
{{< /filetree/container >}} {{< /filetree/container >}}
توجه داشته باشید که مسیر عکس با یک اسلش `/` شروع می‌شود و نسبت به دایرکتوری استاتیک است: توجه کنید که مسیر تصویر با یک اسلش `/` شروع می‌شود و نسبت به دایرکتوری static است:
```markdown {filename="content/docs/my-page.md"} ```markdown {filename="content/docs/my-page.md"}
![](/images/image.png) ![](/images/image.png)

View File

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

View File

@@ -1,5 +1,5 @@
--- ---
title: 组织文件 title: 文件组织
weight: 1 weight: 1
prev: /docs/guide prev: /docs/guide
--- ---
@@ -29,7 +29,7 @@ prev: /docs/guide
{{< /filetree/folder >}} {{< /filetree/folder >}}
{{< /filetree/container >}} {{< /filetree/container >}}
每个 `_index.md` 文件都是对应部分的索引页。其他 Markdown 文件则是常规页面。 每个 `_index.md` 文件都是对应部分的索引页。其他 Markdown 文件则是常规页面。
``` ```
content content
@@ -49,13 +49,13 @@ content
Hextra 为不同类型的内容提供了三种布局: Hextra 为不同类型的内容提供了三种布局:
| 布局 | 目录 | 特 | | 布局 | 目录 | 特 |
| :-------- | :------------------ | :----------------------------------------------------------- | | :-------- | :----------------- | :------------------------------------------------------------- |
| `docs` | `content/docs/` | 适合结构化文档,与本部分相同。 | | `docs` | `content/docs/` | 适合结构化文档,与本部分相同。 |
| `blog` | `content/blog/` | 用于博客文章,包含列表和详细文章视图。 | | `blog` | `content/blog/` | 用于博客文章,包含列表和详细文章视图。 |
| `default` | 其他所有目录 | 单页文章视图,无侧边栏。 | | `default` | 其他所有目录 | 单页文章视图,无侧边栏。 |
将某个部分自定义为与内置布局相同的行为,可以在该部分的 `_index.md`前言中指定所需的类型。 自定义一个部分以模仿内置布局的行为,可以在该部分的 `_index.md` front matter 中指定所需的类型。
```yaml {filename="content/my-docs/_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 文件的 front matter 中使用 `weight` 参数。
```yaml {filename="content/docs/guide/_index.md"} ```yaml {filename="content/docs/guide/_index.md"}
--- ---
@@ -79,14 +79,83 @@ weight: 2
``` ```
{{< callout emoji="">}} {{< callout emoji="">}}
建议不要让侧边栏过深。如果你有很多内容,考虑**将它们分成多个部分**。 建议不要让侧边栏过深。如果有大量内容,可以考虑**将其拆分为多个部分**。
{{< /callout >}} {{< /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` 例如,如果我们希望面包屑显示为 `Foo Bar` 而不是 `Organize Files`
@@ -112,7 +181,7 @@ title: 组织文件
### 隐藏面包屑 ### 隐藏面包屑
可以通过在页面的前言中指定 `breadcrumbs: false` 来完全隐藏面包屑: 可以通过在页面的 front matter 中指定 `breadcrumbs: false` 来完全隐藏面包屑:
```yaml {filename="content/docs/guide/organize-files.md"} ```yaml {filename="content/docs/guide/organize-files.md"}
--- ---
@@ -124,11 +193,11 @@ title: 组织文件
## 配置内容目录 ## 配置内容目录
默认情况下Hugo 使用根目录 `content/` 来构建网站。 默认情况下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` 文件放在一起: 例如,将图片文件 `image.png` 与 `my-page.md` 文件放在一起:
{{< filetree/container >}} {{< filetree/container >}}
@@ -140,13 +209,13 @@ title: 组织文件
{{< /filetree/folder >}} {{< /filetree/folder >}}
{{< /filetree/container >}} {{< /filetree/container >}}
然后,我们可以使用以下 Markdown 语法将图片添加到内容中: 然后,可以使用以下 Markdown 语法将图片添加到内容中:
```markdown {filename="content/docs/my-page.md"} ```markdown {filename="content/docs/my-page.md"}
![](image.png) ![](image.png)
``` ```
我们还可以利用 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/container >}}
{{< filetree/folder name="content" >}} {{< filetree/folder name="content" >}}
@@ -178,7 +247,7 @@ title: 组织文件
{{< /filetree/folder >}} {{< /filetree/folder >}}
{{< /filetree/container >}} {{< /filetree/container >}}
注意,图片路径以斜杠 `/` 开头,并且相对于静态目录: 注意,图片路径以斜杠 `/` 开头,并且相对于 static 目录:
```markdown {filename="content/docs/my-page.md"} ```markdown {filename="content/docs/my-page.md"}
![](/images/image.png) ![](/images/image.png)

View File

@@ -1,21 +1,29 @@
--- ---
title: کدهای کوتاه title: شورت‌کدها
weight: 9 weight: 9
prev: /docs/guide/diagrams 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 >}} {{< cards >}}
{{< card link="filetree" title="FileTree" icon="folder-tree" >}} {{< card link="callout" title="کالاوت" icon="warning" >}}
{{< 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="cards" title="کارت‌ها" icon="card" >}} {{< 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="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 >}} {{< /cards >}}

View File

@@ -5,18 +5,18 @@ prev: /docs/guide/diagrams
next: /docs/guide/shortcodes/callout next: /docs/guide/shortcodes/callout
--- ---
[Hugo ショートコード](https://gohugo.io/content-management/shortcodes/)は、コンテンツファイル内に埋め込まれるシンプルなスニペットで、組み込みまたはカスタムテンプレートを呼び出します。 [Hugo ショートコード](https://gohugo.io/content-management/shortcodes/)は、コンテンツファイル内に記述する簡潔なスニペットで、組み込みまたはカスタムテンプレートを呼び出します。
Hextra は、コンテンツを強化するための美しいショートコードのコレクションを提供します。 Hextra は、コンテンツを強化するための美しいショートコードのコレクションを提供します。
{{< cards >}} {{< cards >}}
{{< card link="callout" title="コールアウト" icon="warning" >}} {{< card link="callout" title="Callout" icon="warning" >}}
{{< card link="cards" title="カード" icon="card" >}} {{< card link="cards" title="Cards" icon="card" >}}
{{< card link="details" title="詳細" icon="chevron-right" >}} {{< card link="details" title="Details" icon="chevron-right" >}}
{{< card link="filetree" title="FileTree" icon="folder-tree" >}} {{< card link="filetree" title="FileTree" icon="folder-tree" >}}
{{< card link="icon" title="アイコン" icon="badge-check" >}} {{< card link="icon" title="Icon" icon="badge-check" >}}
{{< card link="steps" title="ステップ" icon="one" >}} {{< card link="steps" title="Steps" icon="one" >}}
{{< card link="tabs" title="タブ" icon="collection" >}} {{< card link="tabs" title="Tabs" icon="collection" >}}
{{< /cards >}} {{< /cards >}}
<div style="padding-top:4rem"></div> <div style="padding-top:4rem"></div>
@@ -25,5 +25,5 @@ Hugo と Hextra が提供する追加のショートコード:
{{< cards >}} {{< cards >}}
{{< card link="jupyter" title="Jupyter Notebook" icon="jupyter" tag="alpha" >}} {{< card link="jupyter" title="Jupyter Notebook" icon="jupyter" tag="alpha" >}}
{{< card link="others" title="その他" icon="view-grid" >}} {{< card link="others" title="Others" icon="view-grid" >}}
{{< /cards >}} {{< /cards >}}

View File

@@ -5,12 +5,12 @@ prev: /docs/guide/diagrams
next: /docs/guide/shortcodes/callout next: /docs/guide/shortcodes/callout
--- ---
[Hugo 短代码](https://gohugo.io/content-management/shortcodes/)是内容文件中的简单片段,用于调用内置或自定义模板。 [Hugo 短代码](https://gohugo.io/content-management/shortcodes/)是内容文件中调用内置或自定义模板的简单片段
Hextra 提供了一系列精美的短代码,以增强您的内容。 Hextra 提供了一系列精美的短代码增强您的内容。
{{< cards >}} {{< cards >}}
{{< card link="callout" title="标注" icon="warning" >}} {{< card link="callout" title="提示框" icon="warning" >}}
{{< card link="cards" title="卡片" icon="card" >}} {{< card link="cards" title="卡片" icon="card" >}}
{{< card link="details" title="详情" icon="chevron-right" >}} {{< card link="details" title="详情" icon="chevron-right" >}}
{{< card link="filetree" title="文件树" icon="folder-tree" >}} {{< card link="filetree" title="文件树" icon="folder-tree" >}}

View File

@@ -1,55 +1,60 @@
--- ---
title: کامپوننت فراخوانی title: کامپوننت Callout
linkTitle: فراخوانی linkTitle: Callout
aliases: aliases:
- فراخوانی‌ها - callouts
prev: /docs/guide/shortcodes
--- ---
یک کامپوننت داخلی برای نشان دادن اطلاعات مهم به خواننده. یک کامپوننت داخلی برای نمایش اطلاعات مهم به خواننده.
<!--more--> <!--more-->
> [!NOTE]
> [هشدارهای سبک GitHub](../../markdown#alerts) از [نسخه 0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0) پشتیبانی می‌شوند.
> این ویژگی از سینتکس Markdown برای رندر کردن callout استفاده می‌کند که باعث بهبود قابلیت حمل و خوانایی محتوا می‌شود.
## مثال ## مثال
{{< callout emoji="👾">}} {{< callout emoji="👾">}}
**فراخوانی** یک متن کوتاه است که برای جلب توجه در نظر گرفته شده است. یک **callout** متن کوتاهی است که برای جلب توجه طراحی شده است.
{{< /callout >}} {{< /callout >}}
{{< callout type="info" >}} {{< callout type="info" >}}
**فراخوانی** یک متن کوتاه است که برای جلب توجه در نظر گرفته شده است. یک **callout** متن کوتاهی است که برای جلب توجه طراحی شده است.
{{< /callout >}} {{< /callout >}}
{{< callout type="warning" >}} {{< callout type="warning" >}}
**فراخوانی** یک متن کوتاه است که برای جلب توجه در نظر گرفته شده است. یک **callout** متن کوتاهی است که برای جلب توجه طراحی شده است.
{{< /callout >}} {{< /callout >}}
{{< callout type="error" >}} {{< callout type="error" >}}
**فراخوانی** یک متن کوتاه است که برای جلب توجه در نظر گرفته شده است. یک **callout** متن کوتاهی است که برای جلب توجه طراحی شده است.
{{< /callout >}} {{< /callout >}}
## استفاده ## نحوه استفاده
### پیش‌فرض ### پیش‌فرض
{{< callout emoji="🌐">}} {{< callout emoji="🌐">}}
Hugo را می‌توانید برای ایجاد طیف گسترده‌ای از وب‌سایت‌ها، از جمله وبلاگ‌ها، نمونه‌کارها، سایت‌های مستندسازی و غیره استفاده کرد. Hugo می‌تواند برای ایجاد انواع مختلف وب‌سایت‌ها از جمله وبلاگ‌ها، نمونه‌کارها، سایت‌های مستندات و غیره استفاده شود.
{{< /callout >}} {{< /callout >}}
```markdown ```markdown
{{</* callout emoji="🌐" */>}} {{</* callout emoji="🌐" */>}}
Hugo را می‌توانید برای ایجاد طیف گسترده‌ای از وب‌سایت‌ها، از جمله وبلاگ‌ها، نمونه‌کارها، سایت‌های مستندسازی و غیره استفاده کرد. Hugo می‌تواند برای ایجاد انواع مختلف وب‌سایت‌ها از جمله وبلاگ‌ها، نمونه‌کارها، سایت‌های مستندات و غیره استفاده شود.
{{</* /callout */>}} {{</* /callout */>}}
``` ```
### اطلاعات ### اطلاعات
{{< callout type="info" >}} {{< callout type="info" >}}
لطفا برای مشاهده آخرین نسخه‌ها به گیت‌هاب مراجعه کنید. لطفاً برای مشاهده آخرین نسخه‌ها به GitHub مراجعه کنید.
{{< /callout >}} {{< /callout >}}
```markdown ```markdown
{{</* callout type="info" */>}} {{</* callout type="info" */>}}
لطفا برای مشاهده آخرین نسخه‌ها به گیت‌هاب مراجعه کنید. لطفاً برای مشاهده آخرین نسخه‌ها به GitHub مراجعه کنید.
{{</* /callout */>}} {{</* /callout */>}}
``` ```
@@ -68,11 +73,11 @@ aliases:
### خطا ### خطا
{{< callout type="error" >}} {{< callout type="error" >}}
مشکلی پیش آمد و اتفاقی رخ خواهد شد. مشکلی پیش آمده و قرار است منفجر شود.
{{< /callout >}} {{< /callout >}}
```markdown ```markdown
{{</* callout type="error" */>}} {{</* callout type="error" */>}}
مشکلی پیش آمد و اتفاقی رخ خواهد شد. مشکلی پیش آمده و قرار است منفجر شود.
{{</* /callout */>}} {{</* /callout */>}}
``` ```

View File

@@ -6,30 +6,30 @@ aliases:
prev: /docs/guide/shortcodes prev: /docs/guide/shortcodes
--- ---
読者に重要な情報を示すための組み込みコンポーネントです。 読者に重要な情報を示すための組み込みコンポーネントです。
<!--more--> <!--more-->
> [!NOTE] > [!NOTE]
> [GitHubスタイルのアラート](../../markdown#alerts)は[v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0)以降でサポートされています。 > [GitHubスタイルのアラート](../../markdown#alerts)は[v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0)以降でサポートされています。
> これはMarkdown構文を活用してコールアウトをレンダリング、コンテンツの移植性と可読性向上させます。 > これはMarkdown構文を活用してコールアウトをレンダリングするため、コンテンツの移植性と可読性向上ます。
## 例 ## 例
{{< callout emoji="👾">}} {{< callout emoji="👾">}}
**コールアウト**は、注意を引くための短いテキストです。 **コールアウト**は、注意を引くための短いテキストです。
{{< /callout >}} {{< /callout >}}
{{< callout type="info" >}} {{< callout type="info" >}}
**コールアウト**は、注意を引くための短いテキストです。 **コールアウト**は、注意を引くための短いテキストです。
{{< /callout >}} {{< /callout >}}
{{< callout type="warning" >}} {{< callout type="warning" >}}
**コールアウト**は、注意を引くための短いテキストです。 **コールアウト**は、注意を引くための短いテキストです。
{{< /callout >}} {{< /callout >}}
{{< callout type="error" >}} {{< callout type="error" >}}
**コールアウト**は、注意を引くための短いテキストです。 **コールアウト**は、注意を引くための短いテキストです。
{{< /callout >}} {{< /callout >}}
## 使用方法 ## 使用方法
@@ -37,24 +37,24 @@ prev: /docs/guide/shortcodes
### デフォルト ### デフォルト
{{< callout emoji="🌐">}} {{< callout emoji="🌐">}}
Hugoはブログ、ポートフォリオ、ドキュメントサイトなど、さまざまなウェブサイト作成するために使用できます。 Hugoはブログ、ポートフォリオ、ドキュメントサイトなど、様々な種類のウェブサイト作成に使用できます。
{{< /callout >}} {{< /callout >}}
```markdown ```markdown
{{</* callout emoji="🌐" */>}} {{</* callout emoji="🌐" */>}}
Hugoはブログ、ポートフォリオ、ドキュメントサイトなど、さまざまなウェブサイト作成するために使用できます。 Hugoはブログ、ポートフォリオ、ドキュメントサイトなど、様々な種類のウェブサイト作成に使用できます。
{{</* /callout */>}} {{</* /callout */>}}
``` ```
### 情報 ### 情報
{{< callout type="info" >}} {{< callout type="info" >}}
最新リリースを確認するには、GitHubをご覧ください。 最新リリースについてはGitHubをご覧ください。
{{< /callout >}} {{< /callout >}}
```markdown ```markdown
{{</* callout type="info" */>}} {{</* callout type="info" */>}}
最新リリースを確認するには、GitHubをご覧ください。 最新リリースについてはGitHubをご覧ください。
{{</* /callout */>}} {{</* /callout */>}}
``` ```
@@ -66,18 +66,18 @@ prev: /docs/guide/shortcodes
```markdown ```markdown
{{</* callout type="warning" */>}} {{</* callout type="warning" */>}}
**コールアウト**は、注意を引くための短いテキストです。 このAPIは次のバージョンで非推奨になります。
{{</* /callout */>}} {{</* /callout */>}}
``` ```
### エラー ### エラー
{{< callout type="error" >}} {{< callout type="error" >}}
何か問題が発生し、爆発しそうです。 問題が発生しました。まもなく爆発します。
{{< /callout >}} {{< /callout >}}
```markdown ```markdown
{{</* callout type="error" */>}} {{</* callout type="error" */>}}
何か問題が発生し、爆発しそうです。 問題が発生しました。まもなく爆発します。
{{</* /callout */>}} {{</* /callout */>}}
``` ```

View File

@@ -2,7 +2,7 @@
title: 提示框组件 title: 提示框组件
linkTitle: 提示框 linkTitle: 提示框
aliases: aliases:
- 提示框 - callouts
prev: /docs/guide/shortcodes prev: /docs/guide/shortcodes
--- ---
@@ -11,73 +11,73 @@ prev: /docs/guide/shortcodes
<!--more--> <!--more-->
> [!NOTE] > [!NOTE]
> 自 [v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0) 起支持 [GitHub 风格的提醒](../../markdown#alerts)。 > 自 [v0.9.0](https://github.com/imfing/hextra/releases/tag/v0.9.0) 起支持 [GitHub风格提示框](../../markdown#alerts)。
> 它利用 Markdown 语法渲染提示框,确保内容具有更好的可移植性和可读性。 > 它利用Markdown语法渲染提示框确保内容具有更好的可移植性和可读性。
## 示例 ## 示例
{{< callout emoji="👾">}} {{< callout emoji="👾">}}
**提示框** 是一段简短的文本,旨在吸引注意力。 **提示框**是一段旨在吸引注意力的简短文本
{{< /callout >}} {{< /callout >}}
{{< callout type="info" >}} {{< callout type="info" >}}
**提示框** 是一段简短的文本,旨在吸引注意力。 **提示框**是一段旨在吸引注意力的简短文本
{{< /callout >}} {{< /callout >}}
{{< callout type="warning" >}} {{< callout type="warning" >}}
**提示框** 是一段简短的文本,旨在吸引注意力。 **提示框**是一段旨在吸引注意力的简短文本
{{< /callout >}} {{< /callout >}}
{{< callout type="error" >}} {{< callout type="error" >}}
**提示框** 是一段简短的文本,旨在吸引注意力。 **提示框**是一段旨在吸引注意力的简短文本
{{< /callout >}} {{< /callout >}}
## ## 使用方
### 默认 ### 默认样式
{{< callout emoji="🌐">}} {{< callout emoji="🌐">}}
Hugo 可用于创建各种类型的网站,包括博客、作品集、文档站点等。 Hugo可用于创建各种类型的网站包括博客、作品集、文档站点等。
{{< /callout >}} {{< /callout >}}
```markdown ```markdown
{{</* callout emoji="🌐" */>}} {{</* callout emoji="🌐" */>}}
Hugo 可用于创建各种类型的网站,包括博客、作品集、文档站点等。 Hugo可用于创建各种类型的网站包括博客、作品集、文档站点等。
{{</* /callout */>}} {{</* /callout */>}}
``` ```
### 信息 ### 信息提示
{{< callout type="info" >}} {{< callout type="info" >}}
请访问 GitHub 查看最新版本。 请访问GitHub查看最新发布版本。
{{< /callout >}} {{< /callout >}}
```markdown ```markdown
{{</* callout type="info" */>}} {{</* callout type="info" */>}}
请访问 GitHub 查看最新版本。 请访问GitHub查看最新发布版本。
{{</* /callout */>}} {{</* /callout */>}}
``` ```
### 警告 ### 警告提示
{{< callout type="warning" >}} {{< callout type="warning" >}}
API 将在下一版本中弃用。 此API将在下一版本中弃用。
{{< /callout >}} {{< /callout >}}
```markdown ```markdown
{{</* callout type="warning" */>}} {{</* callout type="warning" */>}}
**提示框** 是一段简短的文本,旨在吸引注意力 此API将在下一版本中弃用
{{</* /callout */>}} {{</* /callout */>}}
``` ```
### 错误 ### 错误提示
{{< callout type="error" >}} {{< callout type="error" >}}
错了,系统即将崩溃。 现错误,系统即将崩溃。
{{< /callout >}} {{< /callout >}}
```markdown ```markdown
{{</* callout type="error" */>}} {{</* callout type="error" */>}}
错了,系统即将崩溃。 现错误,系统即将崩溃。
{{</* /callout */>}} {{</* /callout */>}}
``` ```

View File

@@ -6,59 +6,110 @@ linkTitle: کارت‌ها
## مثال ## مثال
{{< cards >}} {{< cards >}}
{{< card link="../callout" title="فراخوانی" icon="warning" >}} {{< card link="../callout" title="کال‌اوت" icon="warning" >}}
{{< card link="/fa" title="بدون آیکون" >}} {{< card link="../callout" title="کارت با تگ" icon="tag" tag="تگ سفارشی">}}
{{< card link="/" title="بدون آیکون" >}}
{{< /cards >}} {{< /cards >}}
{{< cards >}} {{< cards >}}
{{< card link="/" title="کارت تصویر" image="https://source.unsplash.com/featured/800x600?landscape" subtitle="یک چشم‌انداز Unsplash" >}} {{< 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/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="images/space.jpg" subtitle="تصویر در دایرکتوری assets، پردازش شده توسط هوگو." method="Resize" options="600x q80 webp" >}}
{{< /cards >}} {{< /cards >}}
## استفاده ## نحوه استفاده
``` ```
{{</* cards */>}} {{</* cards */>}}
{{</* card link="../callout" title="فراخوانی" icon="warning" */>}} {{</* card link="../callout" title="کال‌اوت" icon="warning" */>}}
{{</* card link="/fa" title="بدون آیکون" */>}} {{</* card link="../callout" title="کارت با تگ" icon="tag" tag= "تگ سفارشی" */>}}
{{</* card link="/" title="بدون آیکون" */>}}
{{</* /cards */>}} {{</* /cards */>}}
``` ```
``` ```
{{</* cards */>}} {{</* 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/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="images/space.jpg" subtitle="تصویر در دایرکتوری assets، پردازش شده توسط هوگو." method="Resize" options="600x q80 webp" */>}}
{{</* /cards */>}} {{</* /cards */>}}
``` ```
## پارامترهای کارت ## پارامترهای کارت
| پارامتر | توضیحات | | پارامتر | توضیحات |
|----------- |---------------------------------------| |----------- |-----------------------------------------------------------------|
| `link` | نشانی اینترنتی (داخلی یا خارجی). | | `link` | URL (داخلی یا خارجی). |
| `title` | عنوان برای کارت. | | `title` | عنوان کارت. |
| `subtitle` | عنوان زیرنویس (از مارک‌داون پشتیبانی می‌کند).. | | `subtitle` | زیرعنوان (پشتیبانی از Markdown). |
| `icon` | نام آیکون. | | `icon` | نام آیکون. |
| `tag` | متن تگ. |
| `tagColor` | رنگ تگ: `gray` (پیش‌فرض), `yellow`, `red` و `blue`. |
## کارت تصویر ## کارت تصویری
علاوه بر این، کارت از افزودن تصویر و پردازش از طریق این پارامترها پشتیبانی می‌کند: علاوه بر این، کارت از افزودن تصویر و پردازش آن از طریق این پارامترها پشتیبانی می‌کند:
| پارامتر | توضیحات | | پارامتر | توضیحات |
|----------- |---------------------------------------------| |----------- |---------------------------------------------|
| `image` | نشانی اینترنتی تصویر کارت را مشخص می‌کند. | | `image` | آدرس تصویر کارت را مشخص می‌کند. |
| `method` | روش پردازش تصویر Hugo را تنظیم می‌کند. | | `method` | روش پردازش تصویر هوگو را تنظیم می‌کند. |
| `options` | گزینه‌های پردازش تصویر Hugo را پیکربندی می‌کند. | | `options` | تنظیمات پردازش تصویر هوگو را پیکربندی می‌کند. |
کارت از سه نوع تصویر پشتیبانی می‌کند: کارت از سه نوع تصویر پشتیبانی می‌کند:
1. تصویر از راه دور: نشانی اینترنتی کامل در پارامتر `image`. 1. تصویر راهدور: URL کامل در پارامتر `image`.
2. تصویر استاتیک: از مسیر نسبی در دایرکتوری `static/` Hugo استفاده کنید. 2. تصویر استاتیک: از مسیر نسبی در دایرکتوری `static/` هوگو استفاده کنید.
3. تصویر پردازش شده: از مسیر نسبی در دایرکتوری `assets/` Hugo استفاده کنید. 3. تصویر پردازش شده: از مسیر نسبی در دایرکتوری `assets/` هوگو استفاده کنید.
هگزترا در صورت نیاز به پردازش تصویر در حین ساخت، به طور خودکار تشخیص می‌دهد و پارامتر `options` یا تنظیمات پیش‌فرض را اعمال می‌کند (تغییر اندازه، 800x، کیفیت 80، فرمت WebP). Hextra به صورت خودکار تشخیص می‌دهد که آیا پردازش تصویر در زمان ساخت نیاز است و پارامتر `options` یا تنظیمات پیش‌فرض (Resize، 800x، کیفیت 80، فرمت WebP) را اعمال می‌کند.
در حال حاضر این `method` را پشتیبانی می‌کند: `Resize`، `Fit`، `Fill` و `Crop`. در حال حاضر از این `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 */>}}
```

View File

@@ -13,8 +13,8 @@ linkTitle: カード
{{< cards >}} {{< cards >}}
{{< card link="/" title="画像カード" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="インターネット画像" >}} {{< 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/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/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み" method="Resize" options="600x q80 webp" >}}
{{< /cards >}} {{< /cards >}}
## 使用方法 ## 使用方法
@@ -30,8 +30,8 @@ linkTitle: カード
``` ```
{{</* cards */>}} {{</* 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="staticディレクトリ下の未加工画像" */>}} {{</* 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/space.jpg" subtitle="assetsディレクトリ下の画像、Hugoで処理済み" method="Resize" options="600x q80 webp" */>}}
{{</* /cards */>}} {{</* /cards */>}}
``` ```
@@ -42,18 +42,18 @@ linkTitle: カード
| `link` | URL内部または外部。 | | `link` | URL内部または外部。 |
| `title` | カードのタイトル見出し。 | | `title` | カードのタイトル見出し。 |
| `subtitle` | サブタイトル見出しMarkdown対応。 | | `subtitle` | サブタイトル見出しMarkdown対応。 |
| `icon` | アイコンの名前。 | | `icon` | アイコン。 |
| `tag` | タグのテキスト。 | | `tag` | タグのテキスト。 |
| `tagColor` | タグの色: `gray`(デフォルト)、`yellow``red``blue`。 | | `tagColor` | タグの色: `gray`(デフォルト)、`yellow``red``blue`。 |
## 画像カード ## 画像カード
さらに、カードは画像の追加と以下のパラメータを通じた処理サポートます: さらに、カードは画像の追加と以下のパラメータを通じた処理サポートされています:
| パラメータ | 説明 | | パラメータ | 説明 |
|----------- |---------------------------------------------| |----------- |---------------------------------------------|
| `image` | カードの画像URLを指定します。 | | `image` | カードの画像URLを指定します。 |
| `method` | Hugoの画像処理メソッドを設定します。 | | `method` | Hugoの画像処理方法を設定します。 |
| `options` | Hugoの画像処理オプションを設定します。 | | `options` | Hugoの画像処理オプションを設定します。 |
カードは3種類の画像をサポートします: カードは3種類の画像をサポートします:
@@ -62,14 +62,14 @@ linkTitle: カード
2. 静的画像: Hugoの`static/`ディレクトリ内の相対パスを使用。 2. 静的画像: Hugoの`static/`ディレクトリ内の相対パスを使用。
3. 処理済み画像: Hugoの`assets/`ディレクトリ内の相対パスを使用。 3. 処理済み画像: Hugoの`assets/`ディレクトリ内の相対パスを使用。
Hextraはビルド時に画像処理が必要かどうかを自動検出し、`options`パラメータまたはデフォルト設定Resize、800x、品質80、WebPフォーマット)を適用します。 Hextraはビルド時に画像処理が必要か自動検出し、`options`パラメータまたはデフォルト設定Resize、800x、品質80、WebP形式)を適用します。
現在サポートされている`method``Resize``Fit``Fill``Crop`です 現在サポートされている`method`: `Resize``Fit``Fill``Crop`
Hugoの組み込み画像処理コマンド、メソッド、オプションの詳細については、[画像処理ドキュメント](https://gohugo.io/content-management/image-processing/)を参照してください。 Hugoの組み込み画像処理コマンド、方法、オプションの詳細については、[画像処理ドキュメント](https://gohugo.io/content-management/image-processing/)を参照してください。
## タグ ## タグ
カードはタグの追加をサポートしており、追加のステータス情報を表示するのに役立ちます。 カードはタグの追加をサポートしており、追加のステータス情報を表示するのに便利です。
{{< cards >}} {{< cards >}}
{{< card link="../callout" title="デフォルトタグ付きカード" tag="タグテキスト" >}} {{< card link="../callout" title="デフォルトタグ付きカード" tag="タグテキスト" >}}
@@ -81,10 +81,10 @@ Hugoの組み込み画像処理コマンド、メソッド、オプションの
``` ```
{{</* cards */>}} {{</* cards */>}}
{{</* card link="../callout" title="デフォルトタグ付きカード" tag="タグテキスト" */>}} {{</* card link="../callout" title="デフォルトタグ付きカード" tag="タグテキスト" */>}}
{{</* card link="../callout" title="デフォルト赤タグ付きカード" tag="タグテキスト" tagType="error" */>}} {{</* card link="../callout" title="赤タグ付きカード" tag="タグテキスト" tagType="error" */>}}
{{</* card link="../callout" title="青タグ付きカード" tag="タグテキスト" tagType="info" */>}} {{</* card link="../callout" title="青タグ付きカード" tag="タグテキスト" tagType="info" */>}}
{{</* card link="../callout" title="黄タグ付きカード" tag="タグテキスト" tagType="warning" */>}} {{</* card link="../callout" title="黄タグ付きカード" tag="タグテキスト" tagType="warning" */>}}
{{</* /cards */>}} {{</* /cards */>}}
``` ```

View File

@@ -14,10 +14,10 @@ linkTitle: 卡片
{{< cards >}} {{< cards >}}
{{< card link="/" title="图片卡片" image="https://github.com/user-attachments/assets/71b7e3ec-1a8d-4582-b600-5425c6cc0407" subtitle="网络图片" >}} {{< 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/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 >}}
## ## 使用方
``` ```
{{</* cards */>}} {{</* cards */>}}
@@ -29,9 +29,9 @@ linkTitle: 卡片
``` ```
{{</* cards */>}} {{</* 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/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 */>}}
``` ```
@@ -39,37 +39,37 @@ linkTitle: 卡片
| 参数 | 描述 | | 参数 | 描述 |
|----------- |-----------------------------------------------------------------| |----------- |-----------------------------------------------------------------|
| `link` | URL(内部或外部)。 | | `link` | 链接地址(内部或外部)。 |
| `title` | 卡片的标题。 | | `title` | 卡片的标题。 |
| `subtitle` | 卡片的副标题(支持 Markdown。 | | `subtitle` | 卡片的副标题支持Markdown。 |
| `icon` | 图标名称。 | | `icon` | 图标名称。 |
| `tag` | 标签中的文本。 | | `tag` | 标签文本。 |
| `tagColor` | 标签颜色:`gray`(默认)、`yellow``red``blue`。 | | `tagColor` | 标签颜色:`gray`(默认)、`yellow``red``blue`。 |
## 图片卡片 ## 图片卡片
此外,卡片支持通过以下参数添加图片并进行处理: 此外,卡片支持通过以下参数添加图片并进行处理:
| 参数 | 描述 | | 参数 | 描述 |
|-----------|--------------------------------------| |----------- |---------------------------------------------|
| `image` | 指定卡片的图片 URL。 | | `image` | 指定卡片的图片URL。 |
| `method` | 设置 Hugo 的图片处理方法。 | | `method` | 设置Hugo的图片处理方法。 |
| `options` | 配置 Hugo 的图片处理选项。 | | `options` | 配置Hugo的图片处理选项。 |
卡片支持三种类型的图片: 卡片支持三种类型的图片:
1. 远程图片:`image` 参数中完整 URL。 1. 远程图片:`image`参数中填写完整URL。
2. 静态图片:使用 Hugo `static/` 目录的相对路径。 2. 静态图片使用Hugo`static/`目录的相对路径。
3. 处理后的图片:使用 Hugo `assets/` 目录的相对路径。 3. 处理后的图片使用Hugo`assets/`目录的相对路径。
Hextra 在构建时自动检测是否需要图片处理,并应用 `options` 参数或默认设置Resize800x质量 80WebP 格式)。 Hextra在构建时自动检测是否需要图片处理,并应用`options`参数或默认设置Resize800x质量80WebP格式
目前支持以下 `method``Resize``Fit``Fill``Crop` 目前支持`method``Resize``Fit``Fill``Crop`
有关 Hugo 内置图片处理命令、方法和选项的更多信息,请参阅其[图片处理文档](https://gohugo.io/content-management/image-processing/)。 有关Hugo内置图片处理命令、方法和选项的更多信息请参阅其[图片处理文档](https://gohugo.io/content-management/image-processing/)。
## 标签 ## 标签
卡片支持添加标签,这对于显示额外的状态信息非常有用 卡片支持添加标签,可用于显示额外的状态信息。
{{< cards >}} {{< cards >}}
{{< card link="../callout" title="带默认标签的卡片" tag="标签文本" >}} {{< card link="../callout" title="带默认标签的卡片" tag="标签文本" >}}
@@ -90,7 +90,7 @@ Hextra 在构建时自动检测是否需要图片处理,并应用 `options`
## 列数 ## 列数
可以通过`cols` 参数传递给 `cards` 短代码来指定卡片的最大列数。请注意,在较小的屏幕上列仍会折叠。 可以通过`cards`短代码传递`cols`参数来指定卡片的最大列数。请注意,在屏幕上列仍会折叠。
{{< cards cols="1" >}} {{< cards cols="1" >}}
{{< card link="/" title="顶部卡片" >}} {{< card link="/" title="顶部卡片" >}}

View File

@@ -2,7 +2,7 @@
title: جزئیات title: جزئیات
--- ---
یک کامپوننت داخلی برای نمایش محتوای قابل باز و بسته شدن. یک کامپوننت داخلی برای نمایش محتوای جمع‌شدنی.
<!--more--> <!--more-->
@@ -16,13 +16,13 @@ title: جزئیات
{{% /details %}} {{% /details %}}
{{% details title="برای نمایش روی من کلیک کنید" closed="true" %}} {{% details title="برای نمایش کلیک کنید" closed="true" %}}
این به طور پیش‌فرض پنهان می‌شود. این به‌صورت پیش‌فرض مخفی خواهد بود.
{{% /details %}} {{% /details %}}
## استفاده ## نحوه استفاده
````markdown ````markdown
{{%/* details title="جزئیات" */%}} {{%/* details title="جزئیات" */%}}
@@ -35,9 +35,9 @@ title: جزئیات
```` ````
````markdown ````markdown
{{%/* details title="برای نمایش روی من کلیک کنید"closed="true" */%}} {{%/* details title="برای نمایش کلیک کنید" closed="true" */%}}
این به طور پیش‌فرض پنهان می‌شود. این به‌صورت پیش‌فرض مخفی خواهد بود.
{{%/* /details */%}} {{%/* /details */%}}
```` ````

View File

@@ -2,7 +2,7 @@
title: 詳細 title: 詳細
--- ---
折りたたみ可能なコンテンツを表示するための組み込みコンポーネント。 折りたたみ可能なコンテンツを表示するための組み込みコンポーネントです
<!--more--> <!--more-->
@@ -12,7 +12,7 @@ title: 詳細
これは詳細のコンテンツです。 これは詳細のコンテンツです。
Markdown**サポートされています**。 Markdown**サポートされています**
{{% /details %}} {{% /details %}}
@@ -22,14 +22,14 @@ Markdownは**サポートされています**。
{{% /details %}} {{% /details %}}
## 使い方 ## 使用方法
````markdown ````markdown
{{%/* details title="詳細" */%}} {{%/* details title="詳細" */%}}
これは詳細のコンテンツです。 これは詳細のコンテンツです。
Markdown**サポートされています**。 Markdown**サポートされています**。
{{%/* /details */%}} {{%/* /details */%}}
```` ````

View File

@@ -12,7 +12,7 @@ title: 详情
这是详情的内容。 这是详情的内容。
支持 **Markdown** 支持 **Markdown** 格式
{{% /details %}} {{% /details %}}
@@ -22,14 +22,14 @@ title: 详情
{{% /details %}} {{% /details %}}
## ## 使用方
````markdown ````markdown
{{%/* details title="详情" */%}} {{%/* details title="详情" */%}}
这是详情的内容。 这是详情的内容。
支持 **Markdown**。 支持 **Markdown** 格式
{{%/* /details */%}} {{%/* /details */%}}
```` ````

View File

@@ -1,8 +1,6 @@
--- ---
title: کامپوننت FileTree title: کامپوننت FileTree
linkTitle: 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/folder name="docs" state="closed" >}}
{{< filetree/file name="_index.md" >}} {{< filetree/file name="_index.md" >}}
{{< filetree/file name="introduction.md" >}} {{< filetree/file name="introduction.md" >}}
{{< filetree/file name="introduction.fa.md" >}} {{< filetree/file name="introduction.fr.md" >}}
{{< /filetree/folder >}} {{< /filetree/folder >}}
{{< /filetree/folder >}} {{< /filetree/folder >}}
{{< filetree/file name="hugo.toml" >}} {{< filetree/file name="hugo.toml" >}}
{{< /filetree/container >}} {{< /filetree/container >}}
## استفاده ## نحوه استفاده
```text {filename="Markdown"} ```text {filename="Markdown"}
{{</* filetree/container */>}} {{</* filetree/container */>}}
@@ -28,7 +26,7 @@ next: /docs/guide/shortcodes/icon
{{</* filetree/folder name="docs" state="closed" */>}} {{</* filetree/folder name="docs" state="closed" */>}}
{{</* filetree/file name="_index.md" */>}} {{</* filetree/file name="_index.md" */>}}
{{</* filetree/file name="introduction.md" */>}} {{</* filetree/file name="introduction.md" */>}}
{{</* filetree/file name="introduction.fa.md" */>}} {{</* filetree/file name="introduction.fr.md" */>}}
{{</* /filetree/folder */>}} {{</* /filetree/folder */>}}
{{</* /filetree/folder */>}} {{</* /filetree/folder */>}}
{{</* filetree/file name="hugo.toml" */>}} {{</* filetree/file name="hugo.toml" */>}}

View File

@@ -17,7 +17,7 @@ linkTitle: 文件树
{{< filetree/file name="hugo.toml" >}} {{< filetree/file name="hugo.toml" >}}
{{< /filetree/container >}} {{< /filetree/container >}}
## ## 使用方
```text {filename="Markdown"} ```text {filename="Markdown"}
{{</* filetree/container */>}} {{</* filetree/container */>}}

View File

@@ -1,15 +1,15 @@
--- ---
title: آیکون title: آیکون
next: /docs/guide/shortcodes/steps
--- ---
برای استفاده از این کد کوتاه درون‌خطی، باید آن را در پیکربندی فعال کنید: برای استفاده از این شورت‌کد به صورت درون‌خطی، باید قابلیت شورت‌کدهای درون‌خطی در تنظیمات فعال شود:
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
enableInlineShortcodes: true 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--> <!--more-->
@@ -20,23 +20,23 @@ enableInlineShortcodes: true
{{< icon "gift" >}} {{< icon "gift" >}}
{{< icon "sparkles" >}} {{< icon "sparkles" >}}
## استفاده ## نحوه استفاده
``` ```
{{</* icon "github" */>}} {{</* 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"} ```yaml {filename="data/icons.yaml"}
your-icon: <svg>your icon svg content</svg> your-icon: <svg>محتوای SVG آیکون شما</svg>
``` ```
سپس می‌توان آن را در کد کوتاه مانند زیر استفاده کرد: سپس می‌توانید از آن در شورت‌کد به این صورت استفاده کنید:
``` ```
{{</* icon "your-icon" */>}} {{</* icon "your-icon" */>}}
@@ -44,4 +44,4 @@ your-icon: <svg>your icon svg content</svg>
{{</* card icon="your-icon" */>}} {{</* card icon="your-icon" */>}}
``` ```
نکته: [Iconify Design](https://iconify.design/) مکانی عالی برای پیدا کردن آیکون‌های SVG برای سایت شما است. نکته: [Iconify Design](https://iconify.design/) منبع خوبی برای یافتن آیکون‌های SVG برای سایت شماست.

View File

@@ -1,5 +1,6 @@
--- ---
title: アイコン title: アイコン
next: /docs/guide/shortcodes/steps
--- ---
このショートコードをインラインで使用するには、設定でインラインショートコードを有効にする必要があります: このショートコードをインラインで使用するには、設定でインラインショートコードを有効にする必要があります:
@@ -8,7 +9,7 @@ title: アイコン
enableInlineShortcodes: true 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--> <!--more-->
@@ -29,13 +30,13 @@ enableInlineShortcodes: true
### 独自のアイコンを追加する方法 ### 独自のアイコンを追加する方法
`data/icons.yaml` ファイルを作成し、以下の形式で独自のSVGアイコンを追加します: `data/icons.yaml` ファイルを作成し、以下の形式で独自の SVG アイコンを追加します:
```yaml {filename="data/icons.yaml"} ```yaml {filename="data/icons.yaml"}
your-icon: <svg>your icon svg content</svg> your-icon: <svg>your icon svg content</svg>
``` ```
その後、ショートコードで以下のように使用できます: 追加したアイコンは以下のようにショートコードで使用できます:
``` ```
{{</* icon "your-icon" */>}} {{</* icon "your-icon" */>}}
@@ -43,4 +44,4 @@ your-icon: <svg>your icon svg content</svg>
{{</* card icon="your-icon" */>}} {{</* card icon="your-icon" */>}}
``` ```
ヒント: [Iconify Design](https://iconify.design/) はサイト用のSVGアイコンを見つけるのに最適な場所です。 ヒント: [Iconify Design](https://iconify.design/) はサイト用の SVG アイコンを見つけるのに最適な場所です。

View File

@@ -1,14 +1,15 @@
--- ---
title: 图标 title: 图标
next: /docs/guide/shortcodes/steps
--- ---
要在行内使用此短代码,需在配置中启用行内短代码: 要在行内使用此短代码,需在配置中启用行内短代码功能
```yaml {filename="hugo.yaml"} ```yaml {filename="hugo.yaml"}
enableInlineShortcodes: true 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--> <!--more-->
@@ -19,23 +20,23 @@ enableInlineShortcodes: true
{{< icon "gift" >}} {{< icon "gift" >}}
{{< icon "sparkles" >}} {{< icon "sparkles" >}}
## ## 使用方
``` ```
{{</* icon "github" */>}} {{</* 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"} ```yaml {filename="data/icons.yaml"}
your-icon: <svg>your icon svg content</svg> your-icon: <svg>您的图标 SVG 内容</svg>
``` ```
然后可以在短代码中这样使用: 随后即可通过短代码调用:
``` ```
{{</* icon "your-icon" */>}} {{</* icon "your-icon" */>}}
@@ -43,4 +44,4 @@ your-icon: <svg>your icon svg content</svg>
{{</* card icon="your-icon" */>}} {{</* card icon="your-icon" */>}}
``` ```
提示:[Iconify Design](https://iconify.design/) 是寻找网站 SVG 图标的好地方 提示:[Iconify Design](https://iconify.design/) 是寻找网站 SVG 图标的优质资源平台

View 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

View File

@@ -6,15 +6,15 @@ sidebar:
exclude: true 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--> <!--more-->
## 使用方法 ## 使用方法
### ローカルノートブック使用する ### ローカルノートブック使用
Jupyter Notebook ショートコードを使用するには、プロジェクト内に Jupyter Notebook ファイルが必要です。[画像を追加する](../../organize-files#add-images)方法と同様に、Jupyter Notebook を `assets` フォルダに追加できます。 Jupyter Notebook ショートコードを使用するには、プロジェクト内に Jupyter Notebook ファイルが必要です。[画像を追加する](../../organize-files#add-images)方法と同様に、Jupyter Notebook を `assets` フォルダに追加できます。
@@ -29,11 +29,11 @@ Jupyter Notebook ショートコードを使用するには、プロジェクト
{{< /filetree/folder >}} {{< /filetree/folder >}}
{{< /filetree/container >}} {{< /filetree/container >}}
`jupyter` ショートコードを使用してページに Jupyter Notebook を含めます `jupyter` ショートコードを使用してページに Jupyter Notebook を組み込みます:
```markdown {filename="content/docs/my-page.md"} ```markdown {filename="content/docs/my-page.md"}
--- ---
title: My Page title: マイページ
math: true math: true
--- ---
@@ -55,16 +55,16 @@ math: true
```markdown {filename="content/docs/my-page/index.md"} ```markdown {filename="content/docs/my-page/index.md"}
--- ---
title: My Page title: マイページ
math: true math: true
--- ---
{{%/* jupyter "notebook.ipynb" */%}} {{%/* 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" */%}} {{%/* 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" %}} {{% jupyter "example.ipynb" %}}

View File

@@ -6,9 +6,9 @@ sidebar:
exclude: true 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--> <!--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/container >}}
{{< filetree/folder name="assets" >}} {{< filetree/folder name="assets" >}}
@@ -29,7 +29,7 @@ sidebar:
{{< /filetree/folder >}} {{< /filetree/folder >}}
{{< /filetree/container >}} {{< /filetree/container >}}
使用 `jupyter` 短代码将 Jupyter Notebook 包含在页面 使用 `jupyter` 短代码将笔记本嵌入页面:
```markdown {filename="content/docs/my-page.md"} ```markdown {filename="content/docs/my-page.md"}
--- ---
@@ -40,7 +40,7 @@ math: true
{{%/* jupyter "notebook.ipynb" */%}} {{%/* jupyter "notebook.ipynb" */%}}
``` ```
或者,你可以利用 Hugo 的[页面包][page-bundles]功能将 Jupyter Notebooks 与 Markdown 文件一起组织。 或者,你可以利用 Hugo 的[页面包][page-bundles]功能将 Jupyter Notebook 与 Markdown 文件组织在一起
{{< filetree/container >}} {{< filetree/container >}}
{{< filetree/folder name="content" >}} {{< 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" */%}} {{%/* 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" %}} {{% jupyter "example.ipynb" %}}

View 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" >}} &nbsp;
{{< badge content="هشدار" type="warning" >}} &nbsp;
{{< 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" >}}

View File

@@ -3,22 +3,23 @@ title: その他のショートコード
linkTitle: その他 linkTitle: その他
sidebar: sidebar:
exclude: true exclude: true
next: /docs/guide/deploy-site
--- ---
{{< callout emoji="" >}} {{< callout emoji="" >}}
これらの一部はHugo組み込みショートコードです。 これらの一部は Hugo 組み込みショートコードです。
これらのショートコードは安定性が低く、いつでも変更される可能性があります。 これらのショートコードは安定性が低く、いつでも変更される可能性があります。
{{< /callout >}} {{< /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 動画を埋め込みます。
``` ```
{{</* youtube VIDEO_ID */>}} {{</* youtube VIDEO_ID */>}}
@@ -56,17 +57,17 @@ YouTube動画を埋め込みます。
{{< youtube id=dQw4w9WgXcQ loading=lazy >}} {{< youtube id=dQw4w9WgXcQ loading=lazy >}}
詳細については、[HugoYouTubeショートコード](https://gohugo.io/content-management/shortcodes/#youtube)を参照してください。 詳細については、[HugoYouTube ショートコード](https://gohugo.io/content-management/shortcodes/#youtube)を参照してください。
## PDF ## PDF
PDFショートコードを使用すると、コンテンツ内にPDFファイルを埋め込むことができます。 PDF ショートコードを使用すると、コンテンツ内に PDF ファイルを埋め込むことができます。
``` ```
{{</* pdf "https://example.com/sample.pdf" */>}} {{</* pdf "https://example.com/sample.pdf" */>}}
``` ```
また、プロジェクトディレクトリ内にPDFファイルを配置し、相対パスを使用することもできます。 プロジェクトディレクトリ内に PDF ファイルを配置し、相対パスを使用することもできます。
``` ```
{{</* pdf "path/to/file.pdf" */>}} {{</* pdf "path/to/file.pdf" */>}}

View File

@@ -3,11 +3,12 @@ title: 其他短代码
linkTitle: 其他 linkTitle: 其他
sidebar: sidebar:
exclude: true exclude: true
next: /docs/guide/deploy-site
--- ---
{{< callout emoji="" >}} {{< callout emoji="" >}}
其中一些是 Hugo 内置短代码。 其中部分为Hugo内置短代码。
这些短代码被认为不太稳定,可能随时更 这些短代码稳定性较低,可能随时更。
{{< /callout >}} {{< /callout >}}
## 徽章 ## 徽章
@@ -16,7 +17,7 @@ sidebar:
{{</* badge "徽章" */>}} {{</* badge "徽章" */>}}
``` ```
果: 果:
{{< badge "徽章" >}} {{< badge "徽章" >}}
@@ -28,7 +29,7 @@ sidebar:
{{</* badge content="错误" type="error" */>}} {{</* badge content="错误" type="error" */>}}
``` ```
果: 果:
{{< badge content="信息" type="info" >}} &nbsp; {{< badge content="信息" type="info" >}} &nbsp;
{{< badge content="警告" type="warning" >}} &nbsp; {{< badge content="警告" type="warning" >}} &nbsp;
@@ -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视频。
``` ```
{{</* youtube 视频ID */>}} {{</* youtube 视频ID */>}}
``` ```
果: 果:
{{< youtube id=dQw4w9WgXcQ loading=lazy >}} {{< youtube id=dQw4w9WgXcQ loading=lazy >}}
@@ -60,13 +61,13 @@ sidebar:
## PDF ## PDF
使用 PDF 短代码,您可以在内容中嵌入 PDF 文件。 通过PDF短代码在内容中嵌入PDF文件。
``` ```
{{</* pdf "https://example.com/sample.pdf" */>}} {{</* pdf "https://example.com/sample.pdf" */>}}
``` ```
也可以将 PDF 文件放在项目目录中并使用相对路径。 也可PDF文件置于项目目录中并使用相对路径。
``` ```
{{</* pdf "path/to/file.pdf" */>}} {{</* pdf "path/to/file.pdf" */>}}

View File

@@ -1,6 +1,5 @@
--- ---
title: مراحل title: مراحل
next: /docs/guide/deploy-site
--- ---
یک کامپوننت داخلی برای نمایش یک سری مراحل. یک کامپوننت داخلی برای نمایش یک سری مراحل.
@@ -10,6 +9,7 @@ next: /docs/guide/deploy-site
{{% steps %}} {{% steps %}}
### مرحله ۱ ### مرحله ۱
این اولین مرحله است. این اولین مرحله است.
### مرحله ۲ ### مرحله ۲
@@ -23,9 +23,14 @@ next: /docs/guide/deploy-site
{{% /steps %}} {{% /steps %}}
## استفاده ## نحوه استفاده
سرتیتر مارک‌داون h3 را در کد کوتاه `steps` قرار دهید. {{< callout emoji="" >}}
لطفاً توجه داشته باشید که این شورتکد **فقط برای محتوای Markdown** طراحی شده است.
اگر محتوای HTML یا شورتکدهای دیگر را به عنوان محتوای مرحله قرار دهید، ممکن است به درستی نمایش داده نشود.
{{< /callout >}}
عنوان h3 مارک‌داون را درون شورتکد `steps` قرار دهید.
``` ```
{{%/* steps */%}} {{%/* steps */%}}

View File

@@ -2,7 +2,7 @@
title: ステップ title: ステップ
--- ---
ステップのシリーズを表示するための組み込みコンポーネント。 一連のステップを表示するための組み込みコンポーネントです
## 例 ## 例
@@ -22,14 +22,15 @@ title: ステップ
{{% /steps %}} {{% /steps %}}
## 使い方 ## 使い方
{{< callout emoji="" >}} {{< callout emoji="" >}}
このショートコードは**Markdownコンテンツ専用**であることに注意してください。 このショートコードは **Markdown コンテンツ専用** であることに注意してください。
HTMLコンテンツや他のショートコードをステップの内容として使用すると、期待通りにレンダリングされない場合があります。 HTML コンテンツや他のショートコードをステップの内容として含めると、期待通りにレンダリングされない場合があります。
{{< /callout >}} {{< /callout >}}
`steps` ショートコード内にMarkdownh3ヘッダーを配置します。 `steps` ショートコード内に Markdownh3 ヘッダーを配置します。
``` ```
{{%/* steps */%}} {{%/* steps */%}}

View File

@@ -23,14 +23,14 @@ title: 步骤
{{% /steps %}} {{% /steps %}}
## ## 使用方
{{< callout emoji="" >}} {{< callout emoji="" >}}
请注意,此短代码**仅适用于 Markdown 内容**。 请注意,此短代码**仅适用于Markdown内容**。
如果HTML 内容或其他短代码作为步骤内容,可能无法按预期渲染。 如果在步骤内容中放入HTML或其他短代码可能无法按预期渲染。
{{< /callout >}} {{< /callout >}}
`steps` 短代码放置 Markdown 的 h3 标题。 `steps`短代码放置Markdown的三级标题。
``` ```
{{%/* steps */%}} {{%/* steps */%}}

View File

@@ -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 >}}**macOS**: یک سیستم عامل دسکتاپ توسط اپل.{{< /tab >}}
{{< tab >}}**YAML**: یک زبان برای سریال‌سازی داده قابل-خواندن-برای-انسان است.{{< /tab >}} {{< tab >}}**Linux**: یک سیستم عامل متن‌باز.{{< /tab >}}
{{< tab >}}**TOML**: یک قالب پرونده پیکربندی که به هدف سادگی در خوانایی به کمک داشتن معانی مشخص با هدف «کمینه» و مینیمال بودن ارائه شده است.{{< /tab >}} {{< tab >}}**Windows**: یک سیستم عامل دسکتاپ توسط مایکروسافت.{{< /tab >}}
{{< /tabs >}} {{< /tabs >}}
## استفاده ## نحوه استفاده
### پیش‌فرض ### پیش‌فرض
``` ```
{{</* tabs items="JSON,YAML,TOML" */>}} {{</* tabs items="JSON,YAML,TOML" */>}}
{{</* tab */>}}**JSON**: جیسون معادل اختصاری عبارت JavaScript Object Notation به معنی «نمادگذاری اشیا در جاوا اسکریپت» است. جیسون یک قالب استاندارد باز است که امکان تبادل داده‌ها در وب با استفاده از جفت‌های خصوصیت-کلید را ممکن ساخته است.{{</* /tab */>}} {{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش داده‌های ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{</* /tab */>}}
{{</* tab */>}}**YAML**: یک زبان برای سریال‌سازی داده قابل-خواندن-برای-انسان است.{{</* /tab */>}} {{</* tab */>}}**YAML**: YAML یک زبان سریال‌سازی داده‌های قابل خواندن توسط انسان است.{{</* /tab */>}}
{{</* tab */>}}**TOML**: یک قالب پرونده پیکربندی که به هدف سادگی در خوانایی به کمک داشتن معانی مشخص با هدف «کمینه» و مینیمال بودن ارائه شده است.{{</* /tab */>}} {{</* tab */>}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{</* /tab */>}}
{{</* /tabs */>}} {{</* /tabs */>}}
``` ```
### مشخص کردن زبانه‌ پیش‌فرض ### مشخص کردن ایندکس انتخاب شده
از ویژگی `defaultIndex` برای مشخص کردن زبانه‌ پیش‌فرض استفاده کنید. این شاخص از 0 شروع می‌شود. از ویژگی `defaultIndex` برای مشخص کردن تب انتخاب شده استفاده کنید. ایندکس از 0 شروع می‌شود.
``` ```
{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}} {{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}
{{</* tab */>}}**JSON**: جیسون معادل اختصاری عبارت JavaScript Object Notation به معنی «نمادگذاری اشیا در جاوا اسکریپت» است. جیسون یک قالب استاندارد باز است که امکان تبادل داده‌ها در وب با استفاده از جفت‌های خصوصیت-کلید را ممکن ساخته است.{{</* /tab */>}} {{</* tab */>}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش داده‌های ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{</* /tab */>}}
{{</* tab */>}}**YAML**: یک زبان برای سریال‌سازی داده قابل-خواندن-برای-انسان است.{{</* /tab */>}} {{</* tab */>}}**YAML**: YAML یک زبان سریال‌سازی داده‌های قابل خواندن توسط انسان است.{{</* /tab */>}}
{{</* tab */>}}**TOML**: یک قالب پرونده پیکربندی که به هدف سادگی در خوانایی به کمک داشتن معانی مشخص با هدف «کمینه» و مینیمال بودن ارائه شده است.{{</* /tab */>}} {{</* tab */>}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{</* /tab */>}}
{{</* /tabs */>}} {{</* /tabs */>}}
``` ```
زبانه‌ `YAML` به طور پیش‌فرض انتخاب می‌شود. تب `YAML` به طور پیش‌فرض انتخاب خواهد شد.
{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}} {{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}
{{< tab >}}**JSON**: جیسون معادل اختصاری عبارت JavaScript Object Notation به معنی «نمادگذاری اشیا در جاوا اسکریپت» است. جیسون یک قالب استاندارد باز است که امکان تبادل داده‌ها در وب با استفاده از جفت‌های خصوصیت-کلید را ممکن ساخته است.{{< /tab >}} {{< tab >}}**JSON**: JavaScript Object Notation (JSON) یک فرمت متنی استاندارد برای نمایش داده‌های ساختاریافته بر اساس نحو شیء جاوااسکریپت است.{{< /tab >}}
{{< tab >}}**YAML**: یک زبان برای سریال‌سازی داده قابل-خواندن-برای-انسان است.{{< /tab >}} {{< tab >}}**YAML**: YAML یک زبان سریال‌سازی داده‌های قابل خواندن توسط انسان است.{{< /tab >}}
{{< tab >}}**TOML**: یک قالب پرونده پیکربندی که به هدف سادگی در خوانایی به کمک داشتن معانی مشخص با هدف «کمینه» و مینیمال بودن ارائه شده است.{{< /tab >}} {{< tab >}}**TOML**: TOML هدفش این است که یک فرمت فایل پیکربندی حداقلی باشد که به دلیل معناشناسی واضح، خواندنش آسان باشد.{{< /tab >}}
{{< /tabs >}} {{< /tabs >}}
### استفاده از مارک‌داون ### استفاده از Markdown
سینتکس مارک‌داون از جمله بلوک کد نیز پشتیبانی می‌شود: نحو Markdown شامل بلوک کد نیز پشتیبانی می‌شود:
```` ````
{{</* tabs items="JSON,YAML,TOML" */>}} {{</* tabs items="JSON,YAML,TOML" */>}}
{{</* tab */>}} {{</* tab */>}}
```json ```json
{ "سلام": "دنیا" } { "hello": "world" }
``` ```
{{</* /tab */>}} {{</* /tab */>}}
... زبانه‌های دیگر را به همین ترتیب اضافه کنید ... سایر تب‌ها را به همین ترتیب اضافه کنید
{{</* /tabs */>}} {{</* /tabs */>}}
```` ````
@@ -73,20 +74,52 @@ title: زبانه‌ها
{{< tab >}} {{< tab >}}
```json ```json
{ "سلام": "دنیا" } { "hello": "world" }
``` ```
{{< /tab >}} {{< /tab >}}
{{< tab >}} {{< tab >}}
```yaml ```yaml
سلام: دنیا hello: world
``` ```
{{< /tab >}} {{< /tab >}}
{{< tab >}} {{< tab >}}
```toml ```toml
سلام = "دنیا" hello = "world"
``` ```
{{< /tab >}} {{< /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 */>}}
```

View File

@@ -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 >}}**macOS**: Apple が提供するデスクトップオペレーティングシステム。{{< /tab >}}
{{< tab >}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{< /tab >}} {{< tab >}}**Linux**: オープンソースのオペレーティングシステム。{{< /tab >}}
{{< tab >}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}} {{< tab >}}**Windows**: Microsoft が提供するデスクトップオペレーティングシステム。{{< /tab >}}
{{< /tabs >}} {{< /tabs >}}
@@ -20,23 +20,23 @@ next: /docs/guide/deploy-site
``` ```
{{</* tabs items="JSON,YAML,TOML" */>}} {{</* 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 */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}}
{{</* tab */>}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}} {{</* tab */>}}**TOML**: TOML は、明なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
{{</* /tabs */>}} {{</* /tabs */>}}
``` ```
### 選択されたインデックス指定 ### 選択インデックス指定
`defaultIndex` プロパティを使用して選択されるタブを指定します。インデックスは 0 から始まります。 `defaultIndex` プロパティを使用して選択るタブを指定します。インデックスは 0 から始まります。
``` ```
{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}} {{</* 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 */>}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{</* /tab */>}}
{{</* tab */>}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}} {{</* tab */>}}**TOML**: TOML は、明なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{</* /tab */>}}
{{</* /tabs */>}} {{</* /tabs */>}}
``` ```
@@ -45,14 +45,14 @@ next: /docs/guide/deploy-site
{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}} {{< 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 >}}**YAML**: YAML は人間が読みやすいデータシリアライゼーション言語です。{{< /tab >}}
{{< tab >}}**TOML**: TOML は、明らかなセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}} {{< tab >}}**TOML**: TOML は、明なセマンティクスにより読みやすい最小限の設定ファイルフォーマットを目指しています。{{< /tab >}}
{{< /tabs >}} {{< /tabs >}}
### Markdown 使用 ### Markdown 使用
コードブロックを含む Markdown 構文もサポートされています: コードブロックを含む Markdown 構文もサポートされています:
@@ -91,3 +91,35 @@ next: /docs/guide/deploy-site
{{< /tab >}} {{< /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 */>}}
```

View File

@@ -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 >}}**macOS**: 苹果公司开发的桌面操作系统。{{< /tab >}}
{{< tab >}}**YAML**: YAML 是一种人类可读的数据序列化语言。{{< /tab >}} {{< tab >}}**Linux**: 一款开源操作系统。{{< /tab >}}
{{< tab >}}**TOML**: TOML 旨在成为一种最小化的配置文件格式,由于其明显的语义,易于阅读。{{< /tab >}} {{< tab >}}**Windows**: 微软公司开发的桌面操作系统。{{< /tab >}}
{{< /tabs >}} {{< /tabs >}}
## ## 使用方
### 默认 ### 默认
``` ```
{{</* tabs items="JSON,YAML,TOML" */>}} {{</* tabs items="JSON,YAML,TOML" */>}}
{{</* tab */>}}**JSON**: JavaScript 对象表示法JSON是一种基于 JavaScript 对象语法的标准文本格式,用于表示结构化数据。{{</* /tab */>}} {{</* tab */>}}**JSON**: JavaScript对象表示法JSON是一种基于JavaScript对象语法的标准文本格式用于表示结构化数据。{{</* /tab */>}}
{{</* tab */>}}**YAML**: YAML 是一种人类可读的数据序列化语言。{{</* /tab */>}} {{</* tab */>}}**YAML**: YAML是一种人类可读的数据序列化语言。{{</* /tab */>}}
{{</* tab */>}}**TOML**: TOML 旨在成为一种最小化配置文件格式,由于其明显的语义易于阅读。{{</* /tab */>}} {{</* tab */>}}**TOML**: TOML旨在成为一种易于阅读的最小化配置文件格式,其明显的语义易于理解。{{</* /tab */>}}
{{</* /tabs */>}} {{</* /tabs */>}}
``` ```
### 指定选中索引 ### 指定默认选中项
使用 `defaultIndex` 属性指定选中的标签页索引从 0 开始。 使用 `defaultIndex` 属性指定默认选中的标签页索引从0开始。
``` ```
{{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}} {{</* tabs items="JSON,YAML,TOML" defaultIndex="1" */>}}
{{</* tab */>}}**JSON**: JavaScript 对象表示法JSON是一种基于 JavaScript 对象语法的标准文本格式,用于表示结构化数据。{{</* /tab */>}} {{</* tab */>}}**JSON**: JavaScript对象表示法JSON是一种基于JavaScript对象语法的标准文本格式用于表示结构化数据。{{</* /tab */>}}
{{</* tab */>}}**YAML**: YAML 是一种人类可读的数据序列化语言。{{</* /tab */>}} {{</* tab */>}}**YAML**: YAML是一种人类可读的数据序列化语言。{{</* /tab */>}}
{{</* tab */>}}**TOML**: TOML 旨在成为一种最小化配置文件格式,由于其明显的语义易于阅读。{{</* /tab */>}} {{</* tab */>}}**TOML**: TOML旨在成为一种易于阅读的最小化配置文件格式,其明显的语义易于理解。{{</* /tab */>}}
{{</* /tabs */>}} {{</* /tabs */>}}
``` ```
默认情况下,`YAML` 标签页将被选中 默认会选中 `YAML` 标签页。
{{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}} {{< tabs items="JSON,YAML,TOML" defaultIndex="1" >}}
{{< tab >}}**JSON**: JavaScript 对象表示法JSON是一种基于 JavaScript 对象语法的标准文本格式,用于表示结构化数据。{{< /tab >}} {{< tab >}}**JSON**: JavaScript对象表示法JSON是一种基于JavaScript对象语法的标准文本格式用于表示结构化数据。{{< /tab >}}
{{< tab >}}**YAML**: YAML 是一种人类可读的数据序列化语言。{{< /tab >}} {{< tab >}}**YAML**: YAML是一种人类可读的数据序列化语言。{{< /tab >}}
{{< tab >}}**TOML**: TOML 旨在成为一种最小化配置文件格式,由于其明显的语义易于阅读。{{< /tab >}} {{< tab >}}**TOML**: TOML旨在成为一种易于阅读的最小化配置文件格式,其明显的语义易于理解。{{< /tab >}}
{{< /tabs >}} {{< /tabs >}}
### 使用 Markdown ### 使用Markdown
Markdown 语法,包括代码块,也受支持 支持包括代码块在内的Markdown语法
```` ````
{{</* tabs items="JSON,YAML,TOML" */>}} {{</* tabs items="JSON,YAML,TOML" */>}}
@@ -65,7 +65,7 @@ Markdown 语法,包括代码块,也受支持:
``` ```
{{</* /tab */>}} {{</* /tab */>}}
... 类似地添加其他标签页 ... 其他标签页类似添加
{{</* /tabs */>}} {{</* /tabs */>}}
```` ````
@@ -91,3 +91,35 @@ Markdown 语法,包括代码块,也受支持:
{{< /tab >}} {{< /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 */>}}
```

View File

@@ -1,69 +1,87 @@
--- ---
title: "برجسته‌کردن سینتکس" title: "رنگ‌آمیزی نحوی"
weight: 3 weight: 3
--- ---
هیوگو از [Chroma](https://github.com/alecthomas/chroma)، یک برجسته‌کننده سینتکس عمومی در Go خالص، برای برجسته‌سازی کردن سینتکس استفاده می‌کند. Hugo از [Chroma](https://github.com/alecthomas/chroma)، یک رنگ‌آمیزی نحوی همه‌منظوره در Go خالص، برای رنگ‌آمیزی نحوی استفاده می‌کند.
توصیه می‌شود از بک‌تیک برای بلوک‌های کد در محتوای مارک‌داون استفاده کنید. مثلا: توصیه می‌شود برای بلوک‌های کد در محتوای Markdown از بک‌تیک استفاده کنید. به عنوان مثال:
<!--more--> <!--more-->
````markdown {filename="Markdown"} ````markdown {filename="Markdown"}
```python ```python
def say_hello(): def say_hello():
print("سلام!") print("Hello!")
``` ```
```` ````
به صورت زیر رندر خواهد شد: به صورت زیر نمایش داده می‌شود:
```python ```python
def say_hello(): def say_hello():
print("سلام!") print("Hello!")
``` ```
## ویژگی‌ها ## ویژگی‌ها
### Filename ### نام فایل
برای افزودن نام پرونده یا عنوان به بلوک کد، `filename` را مشخص کنید: برای افزودن نام فایل یا عنوان به بلوک کد، ویژگی `filename` را تنظیم کنید:
````markdown {filename="Markdown"} ````markdown {filename="Markdown"}
```python {filename="hello.py"} ```python {filename="hello.py"}
def say_hello(): def say_hello():
print("سلام!") print("Hello!")
``` ```
```` ````
```python {filename="hello.py"} ```python {filename="hello.py"}
def say_hello(): 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"} ````markdown {filename="Markdown"}
```python {linenos=table,linenostart=42} ```python {linenos=table,linenostart=42}
def say_hello(): def say_hello():
print("سلام!") print("Hello!")
``` ```
```` ````
```python {linenos=table,linenostart=42} ```python {linenos=table,linenostart=42}
def say_hello(): def say_hello():
print("سلام!") print("Hello!")
``` ```
### برجسته کردن خطوط ### برجسته‌سازی خطوط
برای برجسته کردن خطوط، ویژگی `hl_lines` را به فهرستی از شماره خطوط تنظیم کنید: برای برجسته‌سازی خطوط، ویژگی `hl_lines` را به لیستی از شماره خطوط تنظیم کنید:
````markdown {filename="Markdown"} ````markdown {filename="Markdown"}
```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"} ```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
def say_hello(): def say_hello():
print("سلام!") print("Hello!")
def main(): def main():
say_hello() say_hello()
@@ -72,18 +90,25 @@ def main():
```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"} ```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"}
def say_hello(): def say_hello():
print("سلام!") print("Hello!")
def main(): def main():
say_hello() 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) مراجعه کنید.

View File

@@ -3,8 +3,8 @@ title: "シンタックスハイライト"
weight: 3 weight: 3
--- ---
Hugo、純粋なGoで書かれた汎用シンタックスハイライターである[Chroma](https://github.com/alecthomas/chroma)を使用してシンタックスハイライトを行います。 Hugo は構文強調表示に、純粋な Go で書かれた汎用シンタックスハイライタ [Chroma](https://github.com/alecthomas/chroma) を使用しています。
Markdownコンテンツ内のコードブロックにはバッククォートを使用することを推奨します。例えば Markdown コンテンツ内のコードブロックにはバッククォートを使用することを推奨します。例えば:
<!--more--> <!--more-->
@@ -15,7 +15,7 @@ def say_hello():
``` ```
```` ````
は次のようにレンダリングされます は次のようにレンダリングされます:
```python ```python
def say_hello(): def say_hello():
@@ -26,7 +26,7 @@ def say_hello():
### ファイル名 ### ファイル名
コードブロックにファイル名やタイトルを追加するには、`filename`属性を設定します コードブロックにファイル名やタイトルを追加するには、`filename` 属性を設定します:
````markdown {filename="Markdown"} ````markdown {filename="Markdown"}
```python {filename="hello.py"} ```python {filename="hello.py"}
@@ -44,7 +44,7 @@ def say_hello():
{{< new-feature version="v0.9.2" >}} {{< 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"} ````markdown {filename="Markdown"}
```python {linenos=table,linenostart=42} ```python {linenos=table,linenostart=42}
@@ -76,7 +76,7 @@ def say_hello():
### 行のハイライト ### 行のハイライト
行をハイライトするには、`hl_lines`属性に行番号のリストを設定します 特定の行をハイライト表示するには、`hl_lines` 属性に行番号のリストを設定します:
````markdown {filename="Markdown"} ````markdown {filename="Markdown"}
```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"} ```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"} ```yaml {linenos=table,linenostart=42,filename="hugo.yaml"}
params: params:
@@ -109,6 +109,6 @@ params:
display: hover display: hover
``` ```
## サポートされている言語 ## 対応言語
サポートされている言語のリストについては、[Chromaのドキュメント](https://github.com/alecthomas/chroma#supported-languages)を参照してください。 対応言語の一覧については、[Chroma のドキュメント](https://github.com/alecthomas/chroma#supported-languages)を参照してください。

View File

@@ -3,8 +3,7 @@ title: "语法高亮"
weight: 3 weight: 3
--- ---
Hugo 使用 [Chroma](https://github.com/alecthomas/chroma),这是一个用纯 Go 编写的通用语法高亮器,用于语法高亮。 Hugo 使用纯 Go 编写的通用语法高亮工具 [Chroma](https://github.com/alecthomas/chroma) 来实现代码高亮。建议在 Markdown 内容中使用反引号标记代码块,例如:
建议在 Markdown 内容中使用反引号来标记代码块。例如:
<!--more--> <!--more-->
@@ -15,18 +14,18 @@ def say_hello():
``` ```
```` ````
渲染为: 将渲染为:
```python ```python
def say_hello(): def say_hello():
print("Hello!") print("Hello!")
``` ```
## 功能 ## 功能特性
### 文件名 ### 文件名标注
要为代码块添加文件名或标题,请设置 `filename` 属性: 通过设置 `filename` 属性可为代码块添加文件名或标题
````markdown {filename="Markdown"} ````markdown {filename="Markdown"}
```python {filename="hello.py"} ```python {filename="hello.py"}
@@ -44,9 +43,7 @@ def say_hello():
{{< new-feature version="v0.9.2" >}} {{< new-feature version="v0.9.2" >}}
你可以使用 `base_url` 属性提供一个基础 URL它将与文件名合生成一个链接 通过 `base_url` 属性可设置基础 URL该 URL 会与文件名合生成可点击的链接。文件名可包含相对路径以指定文件在基础路径中的位置
如果文件名指定了文件在基础路径中的位置,则可以包含相对路径。
````markdown {filename="Markdown"} ````markdown {filename="Markdown"}
```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="exampleSite/hugo.work"} ```go {base_url="https://github.com/imfing/hextra/blob/main/",filename="exampleSite/hugo.work"}
@@ -58,9 +55,9 @@ go 1.20
go 1.20 go 1.20
``` ```
### 行号 ### 行号显示
设置行号,请将 `linenos` 属性设置为 `table`,并可选地设置 `linenostart` 起始行号: 设置 `linenos=table` 可启用行号,并通过 `linenostart` 指定起始行号:
````markdown {filename="Markdown"} ````markdown {filename="Markdown"}
```python {linenos=table,linenostart=42} ```python {linenos=table,linenostart=42}
@@ -74,9 +71,9 @@ def say_hello():
print("Hello!") print("Hello!")
``` ```
### 高亮 ### 高亮
要高亮特定行,请将 `hl_lines` 属性设置为行号列表 通过 `hl_lines` 属性可高亮指定行号(支持数组格式)
````markdown {filename="Markdown"} ````markdown {filename="Markdown"}
```python {linenos=table,hl_lines=[2,4],linenostart=1,filename="hello.py"} ```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"} ```yaml {linenos=table,linenostart=42,filename="hugo.yaml"}
params: params:
@@ -109,6 +106,6 @@ params:
display: hover display: hover
``` ```
## 支持语言 ## 支持语言
有关支持的语言列表请参阅 [Chroma 文档](https://github.com/alecthomas/chroma#supported-languages)。 完整支持的语言列表请参阅 [Chroma 文档](https://github.com/alecthomas/chroma#supported-languages)。

View File

@@ -0,0 +1,132 @@
---
title: ショーケース
description: "Hextra で構築されたオープンソースプロジェクト"
toc: false
layout: wide
---
<div class="hx:mt-4"></div>
<p class="hx:mb-12 hx:text-center hx:text-lg hx:text-gray-500 hx:dark:text-gray-400">
Hextra で構築されたオープンソースプロジェクト
</p>
{{< cards >}}
{{< card
link="https://beginnerprivacy.com"
title="Beginner Privacy"
image="https://github.com/user-attachments/assets/a72582a8-7c54-40cd-b8e3-8fd77164687c"
imageStyle="object-fit:cover; aspect-ratio:16/9;"
>}}
{{< card
link="https://github.com/claceio/clace"
title="Clace"
image="https://github.com/user-attachments/assets/af4dbd21-a492-48dd-96fd-8542c548bd03"
imageStyle="object-fit:cover; aspect-ratio:16/9;"
>}}
{{< card
link="https://github.com/regolith-linux/regolith-desktop.com"
title="Regolith Desktop"
image="https://github.com/user-attachments/assets/4bbedd7d-67ef-4363-91f1-acb4a0c5f8d0"
imageStyle="object-fit:cover; aspect-ratio:16/9;"
>}}
{{< card
link="https://github.com/modelcontextprotocol/specification"
title="Model Context Protocol Specification"
image="https://github.com/user-attachments/assets/1bb4f952-b8fc-43b5-9cbd-cd7213c2ba90"
imageStyle="object-fit:cover; aspect-ratio:16/9;"
>}}
{{< card
link="https://github.com/jonaspleyer/cellular_raza"
title="cellular_raza"
image="https://github.com/user-attachments/assets/f24c6455-b70a-419b-b025-e3d60101b673"
imageStyle="object-fit:cover; aspect-ratio:16/9;"
>}}
{{< card
link="https://github.com/mightymoud/sidekick"
title="Sidekick"
image="https://github.com/user-attachments/assets/4ae2a9d7-77b6-42eb-a9d7-5c4599f0f812"
imageStyle="object-fit:cover; aspect-ratio:16/9;"
>}}
{{< card
link="https://github.com/welding-torch/installc"
title="Install C"
image="https://github.com/user-attachments/assets/c9a85327-c7e7-40f1-830a-b4190a5e47bd"
imageStyle="object-fit:cover; aspect-ratio:16/9;"
>}}
{{< card
link="https://github.com/axivo/website"
title="AXIVO Docs"
image="https://github.com/imfing/hextra/assets/19806136/f22f0710-23a0-430b-8bad-616283b8a3e5"
imageStyle="object-fit:cover; aspect-ratio:16/9;"
>}}
{{< card
link="https://github.com/infracourse/web"
title="Stanford CS 40"
image="https://github.com/imfing/hextra/assets/5097752/8c29470b-3994-41c8-be9a-5b41476e6f3c"
imageStyle="object-fit:cover; aspect-ratio:16/9;"
>}}
{{< card
link="https://github.com/helixml/docs"
title="Helix Docs"
image="https://github.com/imfing/hextra/assets/5097752/78045af0-4922-4358-ae73-624770909db6"
imageStyle="object-fit:cover; aspect-ratio:16/9;"
>}}
{{< card
link="https://developers.clever-cloud.com/"
title="Clever Cloud Documentation"
image="https://cellar-c2.services.clever-cloud.com/documentation/doc-screenshot.png" imageStyle="object-fit:cover; aspect-ratio:16/9;"
>}}
{{< card
link="https://owaspai.org/"
title="OWASP AI Security and Privacy Guide"
image="https://github.com/imfing/hextra/assets/5097752/fbb1d3a5-a0e8-4cfc-88cf-3523b0176c89"
imageStyle="object-fit:cover; aspect-ratio:16/9;"
>}}
{{< card
link="https://developers.osuny.org"
title="Osuny"
image="https://raw.githubusercontent.com/noesya/osuny-developers/main/static/images/showcase-hextra/screenshot.png"
imageStyle="object-fit:cover; aspect-ratio:16/9;"
>}}
{{< card link="https://porter.sh/"
title="Porter"
image="https://github.com/imfing/hextra/assets/5097752/401abc3a-b4c3-4336-b95a-a6dd9afbc1de"
imageStyle="object-fit:cover; aspect-ratio:16/9;"
>}}
{{< card
link="https://hoa.moe/"
title="HITSZ OpenAuto"
image="https://raw.githubusercontent.com/HITSZ-OpenAuto/hoa.moe/main/static/images/showcase-new.png"
imageStyle="object-fit:cover; aspect-ratio:16/9;"
>}}
{{< card
link="https://github.com/remysheppard/lutheran-confessions"
title="LutheranConfessions"
image="https://github.com/imfing/hextra/assets/5097752/ad6625e4-88cd-4cad-b102-5399997d0359"
imageStyle="object-fit:cover; aspect-ratio:16/9;"
>}}
{{< card
link="https://github.com/imfing/hextra-starter-template/"
title="Hextra Starter Template"
image="https://user-images.githubusercontent.com/5097752/263551418-c403b9a9-a76c-47a6-8466-513d772ef0b7.jpg"
imageStyle="object-fit:cover; aspect-ratio:16/9;"
>}}
{{< /cards >}}