mirror of
https://github.com/imfing/hextra.git
synced 2025-08-23 08:06:35 -04:00
Compare commits
10 Commits
main
...
v0.10-docs
Author | SHA1 | Date | |
---|---|---|---|
![]() |
d35a471e7b | ||
![]() |
b9bcf5b470 | ||
![]() |
24debf9b0c | ||
![]() |
f79b1d262c | ||
![]() |
8773081fae | ||
![]() |
273e1e3db9 | ||
![]() |
477b98e151 | ||
![]() |
d6dd2550b1 | ||
![]() |
cc6d7e6e94 | ||
![]() |
7d9d07bfdf |
20
exampleSite/content/about/index.ja.md
Normal file
20
exampleSite/content/about/index.ja.md
Normal 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/)
|
@@ -3,18 +3,18 @@ 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/)
|
||||||
- [Heroicons](https://heroicons.com/)
|
- [Heroicons](https://heroicons.com/)
|
||||||
- [Nextra](https://nextra.vercel.app/)
|
- [Nextra](https://nextra.vercel.app/)
|
||||||
- [Next.js](https://nextjs.org/)
|
- [Next.js](https://nextjs.org/)
|
@@ -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>
|
10
exampleSite/content/blog/_index.ja.md
Normal file
10
exampleSite/content/blog/_index.ja.md
Normal 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>
|
@@ -7,4 +7,4 @@ title: "博客"
|
|||||||
<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>
|
@@ -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
|
||||||

|

|
||||||
```
|
```
|
||||||
|
|
||||||

|

|
||||||
|
|
||||||
### پیوندها
|
### پیوندها
|
||||||
|
|
||||||
```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)
|
157
exampleSite/content/blog/markdown.ja.md
Normal file
157
exampleSite/content/blog/markdown.ja.md
Normal 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
|
||||||
|

|
||||||
|
```
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### リンク
|
||||||
|
|
||||||
|
```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)
|
@@ -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)
|
247
exampleSite/content/blog/v0.10.fa.md
Normal file
247
exampleSite/content/blog/v0.10.fa.md
Normal 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"
|
||||||
|
```
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### تجربه جستجوی بهبودیافته
|
||||||
|
|
||||||
|
- **جستجو در تمام سرتیترها**: یافتن محتوا در تمام سطوح سرتیترها، نه فقط عنوان صفحات
|
||||||
|
- **دقت بهتر نتایج**: مدیریت بهتر عنوانها و دقت پیونددهی
|
||||||
|
- **ناوبری ثابت نتایج**: نتایج جستجو اکنون به بخشهای صحیح صفحه پیوند میخورند
|
||||||
|
|
||||||
|
با تشکر ویژه از [@ldez](https://github.com/ldez) برای پیشبرد قابلیتهای جستجو!
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### پشتیبانی از llms.txt
|
||||||
|
|
||||||
|
Hextra اکنون از فرمت خروجی [llms.txt](https://llmstxt.org/) برای سایت شما پشتیبانی میکند، که سایت شما را برای ابزارهای هوش مصنوعی و مدلهای زبانی برای زمینه و مرجع قابل دسترستر میسازد.
|
||||||
|
|
||||||
|
```yaml {filename="hugo.yaml"}
|
||||||
|
outputs:
|
||||||
|
home: [html, llms]
|
||||||
|
```
|
||||||
|
|
||||||
|
این یک فایل `llms.txt` در ریشه سایت شما ایجاد میکند.
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### هایلایت کردن اسکرول فهرست مطالب
|
||||||
|
|
||||||
|
فهرست مطالب اکنون بهطور خودکار بخش فعلی را هنگام اسکرول صفحه هایلایت میکند، که ناوبری را شهودیتر میسازد.
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### تبدیل همگام تبها
|
||||||
|
|
||||||
|
تبهایی با موارد یکسان اکنون در سراسر صفحه همگام میشوند. هنگامی که همگامسازی فعال است، انتخاب یک تب تمام گروههای تب که لیست موارد یکسانی دارند را بهروزرسانی میکند (و انتخاب شما به خاطر سپرده میشود).
|
||||||
|
|
||||||
|
```yaml {filename="hugo.yaml"}
|
||||||
|
params:
|
||||||
|
page:
|
||||||
|
tabs:
|
||||||
|
sync: true
|
||||||
|
```
|
||||||
|
|
||||||
|
### صفحهبندی لیست وبلاگ
|
||||||
|
|
||||||
|
کنترلهای صفحهبندی پایه به صفحات لیست وبلاگ اضافه شدهاند.
|
||||||
|
|
||||||
|
```yaml {filename="hugo.yaml"}
|
||||||
|
params:
|
||||||
|
blog:
|
||||||
|
list:
|
||||||
|
pagerSize: 20 # پستها در هر صفحه
|
||||||
|
```
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### پشتیبانی از 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
|
247
exampleSite/content/blog/v0.10.ja.md
Normal file
247
exampleSite/content/blog/v0.10.ja.md
Normal 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"
|
||||||
|
```
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### 検索機能の強化
|
||||||
|
|
||||||
|
- **すべての見出しを検索**: ページタイトルだけでなく、すべてのレベルの見出しからコンテンツを検索
|
||||||
|
- **検索結果の精度向上**: タイトル処理とリンク精度の改善
|
||||||
|
- **結果ナビゲーションの修正**: 検索結果が正しいページセクションにリンクするようになりました
|
||||||
|
|
||||||
|
検索機能の強化に貢献してくださった [@ldez](https://github.com/ldez) に感謝します!
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### llms.txt サポート
|
||||||
|
|
||||||
|
Hextra はサイトの [llms.txt](https://llmstxt.org/) 出力形式をサポートし、AIツールや言語モデルがコンテキストや参照のためにサイトをよりアクセスしやすくします。
|
||||||
|
|
||||||
|
```yaml {filename="hugo.yaml"}
|
||||||
|
outputs:
|
||||||
|
home: [html, llms]
|
||||||
|
```
|
||||||
|
|
||||||
|
これにより、サイトのルートに `llms.txt` ファイルが生成されます。
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### 目次のスクロールハイライト
|
||||||
|
|
||||||
|
ページをスクロールする際に、目次が現在のセクションを自動的にハイライトするようになり、ナビゲーションがより直感的になりました。
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### タブの同期切り替え
|
||||||
|
|
||||||
|
同じ項目を持つタブはページ全体で同期されるようになりました。同期が有効な場合、タブを選択すると同じ項目リストを共有するすべてのタブグループが更新されます(選択内容は記憶されます)。
|
||||||
|
|
||||||
|
```yaml {filename="hugo.yaml"}
|
||||||
|
params:
|
||||||
|
page:
|
||||||
|
tabs:
|
||||||
|
sync: true
|
||||||
|
```
|
||||||
|
|
||||||
|
### ブログ一覧のページネーション
|
||||||
|
|
||||||
|
ブログ一覧ページに基本的なページネーションコントロールが追加されました。
|
||||||
|
|
||||||
|
```yaml {filename="hugo.yaml"}
|
||||||
|
params:
|
||||||
|
blog:
|
||||||
|
list:
|
||||||
|
pagerSize: 20 # 1ページあたりの投稿数
|
||||||
|
```
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### 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
|
@@ -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"
|
||||||
|
```
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### 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!
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### 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.
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### 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.
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### 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
|
||||||
|
```
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### 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
|
||||||
|
247
exampleSite/content/blog/v0.10.zh-cn.md
Normal file
247
exampleSite/content/blog/v0.10.zh-cn.md
Normal 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"
|
||||||
|
```
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### 增强搜索体验
|
||||||
|
|
||||||
|
- **全标题搜索**:可搜索所有层级标题内容,不限于页面标题
|
||||||
|
- **提升结果精度**:改进标题处理和链接准确性
|
||||||
|
- **修复结果导航**:搜索结果现在能正确跳转到对应章节
|
||||||
|
|
||||||
|
特别感谢 [@ldez](https://github.com/ldez) 推动搜索功能升级!
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### llms.txt 支持
|
||||||
|
|
||||||
|
现支持生成 [llms.txt](https://llmstxt.org/) 格式输出,使站点内容更便于 AI 工具和语言模型获取上下文参考。
|
||||||
|
|
||||||
|
```yaml {filename="hugo.yaml"}
|
||||||
|
outputs:
|
||||||
|
home: [html, llms]
|
||||||
|
```
|
||||||
|
|
||||||
|
这将在站点根目录生成 `llms.txt` 文件。
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### 目录滚动高亮
|
||||||
|
|
||||||
|
滚动页面时,目录会自动高亮当前章节,使导航更加直观。
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### 同步标签页切换
|
||||||
|
|
||||||
|
相同内容的标签页现在支持跨组同步。启用同步后,选择某个标签会更新所有包含相同项目的标签组(且会记住选择状态)。
|
||||||
|
|
||||||
|
```yaml {filename="hugo.yaml"}
|
||||||
|
params:
|
||||||
|
page:
|
||||||
|
tabs:
|
||||||
|
sync: true
|
||||||
|
```
|
||||||
|
|
||||||
|
### 博客列表分页
|
||||||
|
|
||||||
|
为博客列表页面添加基础分页控件。
|
||||||
|
|
||||||
|
```yaml {filename="hugo.yaml"}
|
||||||
|
params:
|
||||||
|
blog:
|
||||||
|
list:
|
||||||
|
pagerSize: 20 # 每页文章数
|
||||||
|
```
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
### 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
|
@@ -3,39 +3,39 @@ 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/
|
||||||
[flex-search]: https://github.com/nextapps-de/flexsearch
|
[flex-search]: https://github.com/nextapps-de/flexsearch
|
||||||
[tailwind-css]: https://tailwindcss.com/
|
[tailwind-css]: https://tailwindcss.com/
|
@@ -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はそのフットプリントを最小限に抑えています。JavaScriptやNode.jsは必要ありません。
|
- **高速で軽量** - 単一のバイナリファイルで提供される超高速な静的サイトジェネレータ Hugo を採用しており、Hextra はフットプリントを最小限に抑えています。JavaScript や Node.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/
|
||||||
|
@@ -1,40 +1,40 @@
|
|||||||
---
|
---
|
||||||
linkTitle: "文档"
|
linkTitle: "文档"
|
||||||
title: 介绍
|
title: 简介
|
||||||
---
|
---
|
||||||
|
|
||||||
👋 你好!欢迎来到 Hextra 文档!
|
👋 你好!欢迎来到 Hextra 文档中心!
|
||||||
|
|
||||||
<!--more-->
|
<!--more-->
|
||||||
|
|
||||||
## 什么是 Hextra?
|
## 什么是 Hextra?
|
||||||
|
|
||||||
Hextra 是一个现代、快速且功能齐全的 [Hugo][hugo] 主题,基于 [Tailwind CSS][tailwind-css] 构建。专为构建美观的文档、博客和网站而设计,它提供了开箱即用的功能和灵活性,以满足各种需求。
|
Hextra 是一个基于 [Tailwind CSS][tailwind-css] 构建的现代化、高性能且开箱即用的 [Hugo][hugo] 主题。专为打造文档、博客和网站而设计,它提供丰富的内置功能和灵活配置,满足多样化需求。
|
||||||
|
|
||||||
## 特性
|
## 核心特性
|
||||||
|
|
||||||
- **精美设计** - 灵感源自 Nextra,Hextra 利用 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/
|
||||||
[flex-search]: https://github.com/nextapps-de/flexsearch
|
[flex-search]: https://github.com/nextapps-de/flexsearch
|
||||||
[tailwind-css]: https://tailwindcss.com/
|
[tailwind-css]: https://tailwindcss.com/
|
@@ -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 >}}
|
@@ -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-->
|
||||||
|
|
||||||
|
@@ -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 >}}
|
@@ -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
|
||||||
---
|
---
|
||||||
```
|
```
|
@@ -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
|
||||||
---
|
---
|
||||||
```
|
```
|
@@ -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 中为特定页面启用或禁用评论:
|
||||||
|
|
||||||
|
@@ -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/
|
@@ -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/
|
@@ -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:
|
||||||
|
@@ -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/
|
@@ -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/)
|
@@ -4,13 +4,13 @@ weight: 1
|
|||||||
prev: /docs/advanced
|
prev: /docs/advanced
|
||||||
---
|
---
|
||||||
|
|
||||||
Hextraは、Hugoの[多言語モード](https://gohugo.io/content-management/multilingual/)を使用して、複数の言語でサイトを作成することをサポートしています。
|
Hextra は Hugo の [多言語モード](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/)
|
@@ -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/)
|
||||||
|
@@ -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" >}} [imfing/hextra-starter-template](https://github.com/imfing/hextra-starter-template)
|
{{< icon "github" >}} [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 >}}
|
@@ -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" >}} [imfing/hextra-starter-template](https://github.com/imfing/hextra-starter-template)
|
{{< icon "github" >}} [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" >}}
|
||||||
|
@@ -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" >}} [imfing/hextra-starter-template](https://github.com/imfing/hextra-starter-template)
|
{{< icon "github" >}} [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 %}}
|
||||||
|
|
||||||
|
@@ -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 >}}
|
@@ -7,7 +7,7 @@ sidebar:
|
|||||||
open: true
|
open: true
|
||||||
---
|
---
|
||||||
|
|
||||||
Hextraの使い方を学ぶために、以下のセクションを探索してください:
|
Hextra の使い方を学ぶには、以下のセクションを参照してください:
|
||||||
|
|
||||||
<!--more-->
|
<!--more-->
|
||||||
|
|
||||||
|
@@ -7,7 +7,7 @@ sidebar:
|
|||||||
open: true
|
open: true
|
||||||
---
|
---
|
||||||
|
|
||||||
探索以下部分,了解如何使用 Hextra:
|
通过以下章节了解如何使用 Hextra:
|
||||||
|
|
||||||
<!--more-->
|
<!--more-->
|
||||||
|
|
||||||
|
@@ -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
|
@@ -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"
|
||||||
```
|
```
|
@@ -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,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` - 一级和二级标题
|
- `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
|
||||||
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` - 索引所有可能的组合
|
||||||
|
|
||||||
要从搜索索引中排除页面,请在页面的 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"
|
||||||
```
|
```
|
@@ -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** تنظیم کنید:
|
||||||

|

|
||||||
{{< /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` تنظیم کنید.
|
||||||
|
|
||||||

|

|
@@ -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** に設定してください:
|
||||||

|

|
||||||
{{< /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リポジトリ(GitHub、GitLabなど)にプッシュします。
|
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リポジトリ(GitHub、GitLabなど)にプッシュします。
|
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` に設定
|
||||||
|
|
||||||

|

|
@@ -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**:
|
||||||

|

|
||||||
{{< /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 仓库(GitHub、GitLab 等)
|
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 仓库(GitHub、GitLab 等)
|
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`
|
||||||
|
|
||||||

|

|
@@ -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/#/) مراجعه کنید.
|
@@ -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 はフローチャート、シーケンス図、円グラフなどをレンダリングできます。
|
||||||
|
|
||||||
HextraでMermaidを使用するのは、言語を`mermaid`に設定したコードブロックを書くのと同じくらい簡単です:
|
Hextra で Mermaid を使用するには、言語を `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/#/)を参照してください。
|
@@ -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/#/)。
|
@@ -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/
|
@@ -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/
|
@@ -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/
|
@@ -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}
|
||||||
* میوه
|
- میوه
|
||||||
* سیب
|
- سیب
|
||||||
* پرتقال
|
- پرتقال
|
||||||
* موز
|
- موز
|
||||||
* لبنیات
|
- لبنیات
|
||||||
* شیر
|
- شیر
|
||||||
* پنیر
|
- پنیر
|
||||||
```
|
```
|
||||||
|
|
||||||
### عکسها
|
### تصاویر
|
||||||
|
|
||||||

|

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

|

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

|

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

|

|
||||||
```
|
```
|
||||||
|
|
||||||
|
برای عملکرد پیشرفتهتر، از [shortcode Figure](https://gohugo.io/shortcodes/figure/) داخلی Hugo استفاده کنید.
|
||||||
|
|
||||||
## پیکربندی
|
## پیکربندی
|
||||||
|
|
||||||
Hugo از [Goldmark](https://github.com/yuin/goldmark) برای تجزیه مارکداون استفاده میکند.
|
Hugo از [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/)
|
@@ -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
|
|||||||
|
|
||||||
キャプション付き:
|
キャプション付き:
|
||||||
|
|
||||||

|

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

|

|
||||||
```
|
```
|
||||||
|
|
||||||
|
より高度な機能が必要な場合は、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/)
|
@@ -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) 语法来
|
|||||||
|
|
||||||
带标题:
|
带标题:
|
||||||
|
|
||||||

|

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

|

|
||||||
```
|
```
|
||||||
|
|
||||||
|
如需更高级的功能,请使用 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/)
|
||||||
|
@@ -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"}
|
||||||

|

|
||||||
```
|
```
|
||||||
|
|
||||||
همچنین میتوانید از ویژگی [بستههای صفحه][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
|
|||||||

|

|
||||||
```
|
```
|
||||||
|
|
||||||
همچنین میتوانید پروندههای عکسها را در دایرکتوری `static` قرار دهید که عکسها را برای همه صفحات در دسترس قرار میدهد:
|
بهعنوان جایگزین، میتوانیم فایلهای تصویر را در دایرکتوری `static` قرار دهیم، که تصاویر را برای تمام صفحات قابل دسترس میکند:
|
||||||
|
|
||||||
{{< filetree/container >}}
|
{{< filetree/container >}}
|
||||||
{{< filetree/folder name="static" >}}
|
{{< filetree/folder name="static" >}}
|
||||||
@@ -138,10 +247,10 @@ 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"}
|
||||||

|

|
||||||
```
|
```
|
||||||
|
|
||||||
[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles
|
[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles
|
@@ -6,8 +6,8 @@ prev: /docs/guide
|
|||||||
|
|
||||||
## ディレクトリ構造
|
## ディレクトリ構造
|
||||||
|
|
||||||
デフォルトでは、Hugoは`content`ディレクトリ内のMarkdownファイルを検索し、ディレクトリの構造がウェブサイトの最終的な出力構造を決定します。
|
デフォルトでは、Hugo は `content` ディレクトリ内の Markdown ファイルを検索し、ディレクトリの構造がウェブサイトの最終的な出力構造を決定します。
|
||||||
このサイトを例に取ります:
|
このサイトを例に挙げます:
|
||||||
|
|
||||||
<!--more-->
|
<!--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"}
|
||||||

|

|
||||||
```
|
```
|
||||||
|
|
||||||
また、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
|
|||||||

|

|
||||||
```
|
```
|
||||||
|
|
||||||
または、画像ファイルを`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"}
|
||||||

|

|
||||||
|
@@ -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"}
|
||||||

|

|
||||||
```
|
```
|
||||||
|
|
||||||
我们还可以利用 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"}
|
||||||

|

|
||||||
|
@@ -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 >}}
|
{{< /cards >}}
|
||||||
|
|
||||||
|
<div style="padding-top:4rem"></div>
|
||||||
|
|
||||||
|
شورتکدهای اضافی ارائه شده توسط Hugo و Hextra:
|
||||||
|
|
||||||
|
{{< cards >}}
|
||||||
|
{{< card link="jupyter" title="نوتبوک Jupyter" icon="jupyter" tag="alpha" >}}
|
||||||
|
{{< card link="others" title="سایر" icon="view-grid" >}}
|
||||||
|
{{< /cards >}}
|
@@ -5,18 +5,18 @@ prev: /docs/guide/diagrams
|
|||||||
next: /docs/guide/shortcodes/callout
|
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 >}}
|
@@ -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" >}}
|
||||||
|
@@ -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 */>}}
|
||||||
```
|
```
|
@@ -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 */>}}
|
||||||
```
|
```
|
@@ -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 */>}}
|
||||||
```
|
```
|
@@ -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 */>}}
|
||||||
|
```
|
@@ -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 */>}}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@@ -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` 参数或默认设置(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="标签文本" >}}
|
||||||
@@ -90,7 +90,7 @@ Hextra 在构建时自动检测是否需要图片处理,并应用 `options`
|
|||||||
|
|
||||||
## 列数
|
## 列数
|
||||||
|
|
||||||
您可以通过将 `cols` 参数传递给 `cards` 短代码来指定卡片的最大列数。请注意,在较小的屏幕上,列仍会折叠。
|
可以通过向`cards`短代码传递`cols`参数来指定卡片的最大列数。请注意,在小屏幕上列数仍会折叠。
|
||||||
|
|
||||||
{{< cards cols="1" >}}
|
{{< cards cols="1" >}}
|
||||||
{{< card link="/" title="顶部卡片" >}}
|
{{< card link="/" title="顶部卡片" >}}
|
||||||
|
@@ -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 */%}}
|
||||||
````
|
````
|
@@ -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 */%}}
|
||||||
````
|
````
|
||||||
|
@@ -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 */%}}
|
||||||
````
|
````
|
||||||
|
@@ -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,9 +26,9 @@ 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 */>}}
|
||||||
```
|
```
|
@@ -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 */>}}
|
||||||
|
@@ -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 برای سایت شماست.
|
@@ -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 アイコンを見つけるのに最適な場所です。
|
@@ -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 图标的优质资源平台。
|
79
exampleSite/content/docs/guide/shortcodes/jupyter.fa.md
Normal file
79
exampleSite/content/docs/guide/shortcodes/jupyter.fa.md
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
---
|
||||||
|
title: "کامپوننت Jupyter Notebook"
|
||||||
|
linktitle: "Jupyter Notebook"
|
||||||
|
math: true
|
||||||
|
sidebar:
|
||||||
|
exclude: true
|
||||||
|
---
|
||||||
|
|
||||||
|
{{< callout >}}ویژگی آزمایشی برای گنجاندن Jupyter Notebookها از طریق یک شورتکد. توجه داشته باشید که همه انواع سلولها پشتیبانی نمیشوند.{{< /callout >}}
|
||||||
|
|
||||||
|
[Jupyter Notebook](https://jupyter.org/) یک برنامه نوتبوک HTML مستقل از زبان برای [پروژه Jupyter](https://jupyter.org/) است. این برنامه به شما امکان میدهد اسنادی ایجاد و به اشتراک بگذارید که شامل کد زنده، معادلات، تصاویر و متن روایی هستند.
|
||||||
|
|
||||||
|
<!--more-->
|
||||||
|
|
||||||
|
## نحوه استفاده
|
||||||
|
|
||||||
|
### استفاده از یک نوتبوک محلی
|
||||||
|
|
||||||
|
برای استفاده از شورتکد Jupyter Notebook، باید یک فایل Jupyter Notebook در پروژه خود داشته باشید. مشابه روشی که برای [افزودن تصاویر](../../organize-files#add-images) به پروژه استفاده میکنید، میتوانید Jupyter Notebookها را به پوشه `assets` اضافه کنید.
|
||||||
|
|
||||||
|
{{< filetree/container >}}
|
||||||
|
{{< filetree/folder name="assets" >}}
|
||||||
|
{{< filetree/file name="notebook.ipynb" >}}
|
||||||
|
{{< /filetree/folder >}}
|
||||||
|
{{< filetree/folder name="content" >}}
|
||||||
|
{{< filetree/folder name="docs" >}}
|
||||||
|
{{< filetree/file name="my-page.md" >}}
|
||||||
|
{{< /filetree/folder >}}
|
||||||
|
{{< /filetree/folder >}}
|
||||||
|
{{< /filetree/container >}}
|
||||||
|
|
||||||
|
نوتبوک Jupyter را در صفحه با استفاده از شورتکد `jupyter` قرار دهید:
|
||||||
|
|
||||||
|
```markdown {filename="content/docs/my-page.md"}
|
||||||
|
---
|
||||||
|
title: صفحه من
|
||||||
|
math: true
|
||||||
|
---
|
||||||
|
|
||||||
|
{{%/* jupyter "notebook.ipynb" */%}}
|
||||||
|
```
|
||||||
|
|
||||||
|
بهعنوان جایگزین، میتوانید از ویژگی [بستههای صفحه][page-bundles] هوگو استفاده کنید تا Jupyter Notebookها را همراه با فایل Markdown سازماندهی کنید.
|
||||||
|
|
||||||
|
{{< filetree/container >}}
|
||||||
|
{{< filetree/folder name="content" >}}
|
||||||
|
{{< filetree/folder name="docs" >}}
|
||||||
|
{{< filetree/folder name="my-page" >}}
|
||||||
|
{{< filetree/file name="index.md" >}}
|
||||||
|
{{< filetree/file name="notebook.ipynb" >}}
|
||||||
|
{{< /filetree/folder >}}
|
||||||
|
{{< /filetree/folder >}}
|
||||||
|
{{< /filetree/folder >}}
|
||||||
|
{{< /filetree/container >}}
|
||||||
|
|
||||||
|
```markdown {filename="content/docs/my-page/index.md"}
|
||||||
|
---
|
||||||
|
title: صفحه من
|
||||||
|
math: true
|
||||||
|
---
|
||||||
|
|
||||||
|
{{%/* jupyter "notebook.ipynb" */%}}
|
||||||
|
```
|
||||||
|
|
||||||
|
### استفاده از یک نوتبوک راهدور
|
||||||
|
|
||||||
|
همچنین میتوانید از یک نوتبوک راهدور با ارائه URL به فایل نوتبوک استفاده کنید. بهعنوان مثال، برای گنجاندن نوتبوک [Jupyter Notebook چیست](https://github.com/jupyter/notebook/blob/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb) در صفحه، میتوانید از شورتکد زیر استفاده کنید:
|
||||||
|
|
||||||
|
```
|
||||||
|
{{%/* jupyter "https://raw.githubusercontent.com/jupyter/notebook/main/docs/source/examples/Notebook/What%20is%20the%20Jupyter%20Notebook.ipynb" */%}}
|
||||||
|
```
|
||||||
|
|
||||||
|
## نمونه نوتبوک
|
||||||
|
|
||||||
|
{{< callout type="info" >}}مثال زیر یک نمونه از فایل نوتبوک است که در پوشه assets پروژه گنجانده شده است.{{< /callout >}}
|
||||||
|
|
||||||
|
{{% jupyter "example.ipynb" %}}
|
||||||
|
|
||||||
|
[page-bundles]: https://gohugo.io/content-management/page-bundles/#leaf-bundles
|
@@ -6,15 +6,15 @@ sidebar:
|
|||||||
exclude: true
|
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" %}}
|
||||||
|
|
||||||
|
@@ -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" %}}
|
||||||
|
|
||||||
|
78
exampleSite/content/docs/guide/shortcodes/others.fa.md
Normal file
78
exampleSite/content/docs/guide/shortcodes/others.fa.md
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
---
|
||||||
|
title: سایر شورتکدها
|
||||||
|
linkTitle: سایر
|
||||||
|
sidebar:
|
||||||
|
exclude: true
|
||||||
|
next: /docs/guide/deploy-site
|
||||||
|
---
|
||||||
|
|
||||||
|
{{< callout emoji="ℹ️" >}}
|
||||||
|
برخی از اینها شورتکدهای داخلی Hugo هستند.
|
||||||
|
این شورتکدها کمتر پایدار در نظر گرفته میشوند و ممکن است هر زمان تغییر کنند.
|
||||||
|
{{< /callout >}}
|
||||||
|
|
||||||
|
## نشان
|
||||||
|
|
||||||
|
```
|
||||||
|
{{</* badge "نشان" */>}}
|
||||||
|
```
|
||||||
|
|
||||||
|
نتیجه:
|
||||||
|
|
||||||
|
{{< badge "نشان" >}}
|
||||||
|
|
||||||
|
انواع مختلف:
|
||||||
|
|
||||||
|
```
|
||||||
|
{{</* badge content="اطلاعات" type="info" */>}}
|
||||||
|
{{</* badge content="هشدار" type="warning" */>}}
|
||||||
|
{{</* badge content="خطا" type="error" */>}}
|
||||||
|
```
|
||||||
|
|
||||||
|
نتیجه:
|
||||||
|
|
||||||
|
{{< badge content="اطلاعات" type="info" >}}
|
||||||
|
{{< badge content="هشدار" type="warning" >}}
|
||||||
|
{{< badge content="خطا" type="error" >}}
|
||||||
|
|
||||||
|
با لینک و آیکون:
|
||||||
|
|
||||||
|
```
|
||||||
|
{{</* badge content="انتشارها" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
|
||||||
|
```
|
||||||
|
|
||||||
|
نتیجه:
|
||||||
|
|
||||||
|
{{< badge content="انتشارها" link="https://github.com/imfing/hextra/releases" icon="github" >}}
|
||||||
|
|
||||||
|
## یوتیوب
|
||||||
|
|
||||||
|
تعبیه یک ویدیوی یوتیوب.
|
||||||
|
|
||||||
|
```
|
||||||
|
{{</* youtube VIDEO_ID */>}}
|
||||||
|
```
|
||||||
|
|
||||||
|
نتیجه:
|
||||||
|
|
||||||
|
{{< youtube id=dQw4w9WgXcQ loading=lazy >}}
|
||||||
|
|
||||||
|
برای اطلاعات بیشتر، به [شورتکد یوتیوب Hugo](https://gohugo.io/content-management/shortcodes/#youtube) مراجعه کنید.
|
||||||
|
|
||||||
|
## پیدیاف
|
||||||
|
|
||||||
|
با شورتکد پیدیاف، میتوانید یک فایل پیدیاف را در محتوای خود تعبیه کنید.
|
||||||
|
|
||||||
|
```
|
||||||
|
{{</* pdf "https://example.com/sample.pdf" */>}}
|
||||||
|
```
|
||||||
|
|
||||||
|
همچنین میتوانید فایل پیدیاف را در دایرکتوری پروژه خود قرار دهید و از مسیر نسبی استفاده کنید.
|
||||||
|
|
||||||
|
```
|
||||||
|
{{</* pdf "path/to/file.pdf" */>}}
|
||||||
|
```
|
||||||
|
|
||||||
|
مثال:
|
||||||
|
|
||||||
|
{{< pdf "https://upload.wikimedia.org/wikipedia/commons/1/13/Example.pdf" >}}
|
@@ -3,22 +3,23 @@ title: その他のショートコード
|
|||||||
linkTitle: その他
|
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 >}}
|
||||||
|
|
||||||
詳細については、[HugoのYouTubeショートコード](https://gohugo.io/content-management/shortcodes/#youtube)を参照してください。
|
詳細については、[Hugo の YouTube ショートコード](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" */>}}
|
||||||
|
@@ -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" >}}
|
{{< badge content="信息" type="info" >}}
|
||||||
{{< badge content="警告" type="warning" >}}
|
{{< badge content="警告" type="warning" >}}
|
||||||
@@ -37,22 +38,22 @@ sidebar:
|
|||||||
带链接和图标:
|
带链接和图标:
|
||||||
|
|
||||||
```
|
```
|
||||||
{{</* badge content="发布" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
|
{{</* badge content="版本发布" link="https://github.com/imfing/hextra/releases" icon="github" */>}}
|
||||||
```
|
```
|
||||||
|
|
||||||
结果:
|
效果:
|
||||||
|
|
||||||
{{< badge content="发布" link="https://github.com/imfing/hextra/releases" icon="github" >}}
|
{{< badge content="版本发布" link="https://github.com/imfing/hextra/releases" icon="github" >}}
|
||||||
|
|
||||||
## YouTube
|
## YouTube
|
||||||
|
|
||||||
嵌入 YouTube 视频。
|
嵌入YouTube视频。
|
||||||
|
|
||||||
```
|
```
|
||||||
{{</* 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" */>}}
|
||||||
|
@@ -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 */%}}
|
||||||
@@ -39,4 +44,4 @@ next: /docs/guide/deploy-site
|
|||||||
این دومین مرحله است.
|
این دومین مرحله است.
|
||||||
|
|
||||||
{{%/* /steps */%}}
|
{{%/* /steps */%}}
|
||||||
```
|
```
|
@@ -2,7 +2,7 @@
|
|||||||
title: ステップ
|
title: ステップ
|
||||||
---
|
---
|
||||||
|
|
||||||
ステップのシリーズを表示するための組み込みコンポーネント。
|
一連のステップを表示するための組み込みコンポーネントです。
|
||||||
|
|
||||||
## 例
|
## 例
|
||||||
|
|
||||||
@@ -22,14 +22,15 @@ title: ステップ
|
|||||||
|
|
||||||
{{% /steps %}}
|
{{% /steps %}}
|
||||||
|
|
||||||
|
|
||||||
## 使い方
|
## 使い方
|
||||||
|
|
||||||
{{< callout emoji="ℹ️" >}}
|
{{< callout emoji="ℹ️" >}}
|
||||||
このショートコードは**Markdownコンテンツ専用**であることに注意してください。
|
このショートコードは **Markdown コンテンツ専用** であることに注意してください。
|
||||||
HTMLコンテンツや他のショートコードをステップの内容として使用すると、期待通りにレンダリングされない場合があります。
|
HTML コンテンツや他のショートコードをステップの内容として含めると、期待通りにレンダリングされない場合があります。
|
||||||
{{< /callout >}}
|
{{< /callout >}}
|
||||||
|
|
||||||
`steps` ショートコード内にMarkdownのh3ヘッダーを配置します。
|
`steps` ショートコード内に Markdown の h3 ヘッダーを配置します。
|
||||||
|
|
||||||
```
|
```
|
||||||
{{%/* steps */%}}
|
{{%/* steps */%}}
|
||||||
|
@@ -23,14 +23,14 @@ title: 步骤
|
|||||||
{{% /steps %}}
|
{{% /steps %}}
|
||||||
|
|
||||||
|
|
||||||
## 用法
|
## 使用方法
|
||||||
|
|
||||||
{{< callout emoji="ℹ️" >}}
|
{{< callout emoji="ℹ️" >}}
|
||||||
请注意,此短代码**仅适用于 Markdown 内容**。
|
请注意,此短代码**仅适用于Markdown内容**。
|
||||||
如果将 HTML 内容或其他短代码作为步骤内容,可能无法按预期渲染。
|
如果在步骤内容中放入HTML或其他短代码,可能无法按预期渲染。
|
||||||
{{< /callout >}}
|
{{< /callout >}}
|
||||||
|
|
||||||
在 `steps` 短代码中放置 Markdown 的 h3 标题。
|
在`steps`短代码内放置Markdown的三级标题。
|
||||||
|
|
||||||
```
|
```
|
||||||
{{%/* steps */%}}
|
{{%/* steps */%}}
|
||||||
|
@@ -1,70 +1,71 @@
|
|||||||
---
|
---
|
||||||
title: زبانهها
|
title: تبها
|
||||||
|
next: /docs/guide/deploy-site
|
||||||
---
|
---
|
||||||
|
|
||||||
## مثال
|
## مثال
|
||||||
|
|
||||||
{{< tabs items="JSON,YAML,TOML" >}}
|
{{< tabs items="macOS,Linux,Windows" >}}
|
||||||
|
|
||||||
{{< tab >}}**JSON**: جیسون معادل اختصاری عبارت JavaScript Object Notation به معنی «نمادگذاری اشیا در جاوا اسکریپت» است. جیسون یک قالب استاندارد باز است که امکان تبادل دادهها در وب با استفاده از جفتهای خصوصیت-کلید را ممکن ساخته است.{{< /tab >}}
|
{{< tab >}}**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 */>}}
|
||||||
|
```
|
@@ -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 構文もサポートされています:
|
||||||
|
|
||||||
@@ -90,4 +90,36 @@ 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 */>}}
|
||||||
|
```
|
@@ -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 */>}}
|
||||||
````
|
````
|
||||||
@@ -90,4 +90,36 @@ 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 */>}}
|
||||||
|
```
|
@@ -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) مراجعه کنید.
|
@@ -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)を参照してください。
|
@@ -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)。
|
132
exampleSite/content/showcase/index.ja.md
Normal file
132
exampleSite/content/showcase/index.ja.md
Normal 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 >}}
|
Reference in New Issue
Block a user