屬性

名稱: Crystal
作業系統: Linux; MacOS; Windows
版本: 1.11.2

程式碼

<dl class="attributes">
  <dt>Name</dt>
  <dd>Crystal</dd>
  <dt>OS</dt>
  <dd>Linux</dd>
  <dd>MacOS</dd>
  <dd>Windows</dd>
  <dt>Version</dt>
  <dd>1.11.2</dd>
</dl>

書籍作者

包含部分： _includes/components/book-authors.html

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia quos autem veniam libero! Deleniti nemo quas optio voluptas voluptatibus sint ratione. Id vel error quia ipsam sit saepe hic at amet excepturi ea.

程式碼

<div class="book-authors">
    <div class="book-author">
      <img class="book-author-icon" src="/assets/learning/george.png" alt="Author's picture" />
      <p class="small">Lorem ipsum dolor sit amet.

      </p>
    </div>
    <div class="book-author">
      <img class="book-author-icon" src="/assets/learning/guilherme.jpg" alt="Author's picture" />
      <p class="small">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia quos autem
veniam libero! Deleniti nemo quas optio voluptas voluptatibus sint ratione.
Id vel error quia ipsam sit saepe hic at amet excepturi ea.

      </p>
    </div>
</div>

書籍展示

包含部分： _includes/components/book-presenter.html

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia quos autem veniam libero! Deleniti nemo quas optio voluptas voluptatibus sint ratione. Id vel error quia ipsam sit saepe hic at amet excepturi ea.

您可以從這些供應商處取得

在 Amazon 上購買

在 Packt 上購買

Voluptas sunt ratione consequatur optio porro eaque nam quod ex illum modi id animi fugiat vero explicabo illo officiis assumenda nulla rerum, dignissimos sed dicta pariatur quis eum. Beatae ea cumque alias ducimus quos maxime sed, modi illum at repellendus, ex deleniti nesciunt tempore placeat in accusantium!

程式碼

<div class="book-presenter">
  <div class="cover">
    <img src="/assets/learning/crystal_programming.png" alt="" aria-label="Book cover" />
  </div>

  <div class="description">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia quos autem
veniam libero! Deleniti nemo quas optio voluptas voluptatibus sint ratione.
Id vel error quia ipsam sit saepe hic at amet excepturi ea.

    </p>

    <p>You can get it from these vendors:</p>
      <div class="link-item">
        <a class="link-item__main" href="https://www.amazon.com/Crystal-Programming-project-based-introduction-applications/dp/1801818673/ref=sr_1_2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960">
  <path d="M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h480q33 0 56.5 23.5T800-800v640q0 33-23.5 56.5T720-80H240Zm0-80h480v-640h-80v280l-100-60-100 60v-280H240v640Zm0 0v-640 640Zm200-360 100-60 100 60-100-60-100 60Z"/>
</svg>

          Buy on Amazon</a>
      </div>
      <div class="link-item">
        <a class="link-item__main" href="https://www.packtpub.com/product/crystal-programming/9781801818674"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960">
  <path d="M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h480q33 0 56.5 23.5T800-800v640q0 33-23.5 56.5T720-80H240Zm0-80h480v-640h-80v280l-100-60-100 60v-280H240v640Zm0 0v-640 640Zm200-360 100-60 100 60-100-60-100 60Z"/>
</svg>

          Buy on Packt</a>
      </div>
  </div>

  <div class="details">Voluptas sunt ratione consequatur optio porro eaque nam quod ex illum modi
id animi fugiat vero explicabo illo officiis assumenda nulla rerum,
dignissimos sed dicta pariatur quis eum. Beatae ea cumque alias ducimus quos
maxime sed, modi illum at repellendus, ex deleniti nesciunt tempore placeat
in accusantium!

  </div>
</div>

麵包屑

包含部分： _includes/site/breadcrumbs.html

基本

主要區塊

非連結項目

無區塊

程式碼

<strong>Basic</strong>

<nav class="breadcrumbs" aria-label="Breadcrumbs"><span class="breadcrumb">
    <a href="/" rel="index up">Home</a>
  </span>

  <span aria-hidden="true">/</span>

      <div class="breadcrumb"><a href="/community/" rel="up">Community</a>
      </div>
</nav>

<nav class="section-links" aria-label="Section links"><ul>
    <li>
      <a href="/team/" 
        >Team</a>
    </li>
    <li>
      <a href="/sponsors/" 
        >Sponsors</a>
    </li>
    <li>
      <a href="/community/#events" 
        >Events</a>
    </li>
    <li>
      <a href="/used_in_prod/" 
        >Used in production</a>
    </li>
    <li>
      <a href="/community/governance/" 
        >Governance</a>
    </li>
</ul>

</nav>


<strong>Section Main</strong>

<nav class="breadcrumbs" aria-label="Breadcrumbs"><span class="breadcrumb">
    <a href="/" rel="index up">Home</a>
  </span>

  <span aria-hidden="true">/</span>

    <span class="breadcrumb">
      <a href="/community/" aria-current="page">Community</a>
    </span>
</nav>

<nav class="section-links" aria-label="Section links"><ul>
    <li>
      <a href="/team/" 
        >Team</a>
    </li>
    <li>
      <a href="/sponsors/" 
        >Sponsors</a>
    </li>
    <li>
      <a href="/community/#events" 
        >Events</a>
    </li>
    <li>
      <a href="/used_in_prod/" 
        >Used in production</a>
    </li>
    <li>
      <a href="/community/governance/" 
        >Governance</a>
    </li>
</ul>

</nav>


<strong>Non-link Item</strong>

<nav class="breadcrumbs" aria-label="Breadcrumbs"><span class="breadcrumb">
    <a href="/" rel="index up">Home</a>
  </span>

  <span aria-hidden="true">/</span>

      <div class="breadcrumb"><span>Archive</span>
      </div>
</nav>

<nav class="section-links" aria-label="Section links"><ul>
</ul>

</nav>


<strong>No section</strong>

<nav class="breadcrumbs" aria-label="Breadcrumbs"><span class="breadcrumb">
    <a href="/" rel="index up">Home</a>
  </span>

  
</nav>

<nav class="section-links" aria-label="Section links"><ul>
</ul>

</nav>

卡片

Crystal

為人類和電腦設計的語言。

版本 1.7.3

程式碼

<div class="card">
  <img src="/assets/icon.svg" alt="">
  <a href="/" class="name">Crystal</a>

  <div>
    A language for humans and computers.
  </div>

  <div>
    Version 1.7.3
  </div>
</div>

卡片列表

包含部分： _includes/pages/sponsors/top_sponors.html

84codes 自 2018 年 4 月 1 日起每月 €22,000 €523,000
Manas.Tech 自 2009 年 6 月 19 日起每月 $5,000 $1,335,000

程式碼

<ul class="cards-list">
    <li class="sponsor-card">
      <a href="https://www.84codes.com/" class="name" rel="sponsored nofollow">84codes</a>
      <img src="/assets/sponsors/84.png" alt="Logo of 84codes">
      <span class="last-payment" title="Last payment">€22,000 per month since Apr 1, 2018</span>
      <span class="all-time" title="All-time total">€523,000</span>
    </li>
    <li class="sponsor-card">
      <a href="https://manas.tech/" class="name" rel="sponsored nofollow">Manas.Tech</a>
      <img src="/assets/manas-orange.svg" alt="Logo of Manas.Tech">
      <span class="last-payment" title="Last payment">$5,000 per month since Jun 19, 2009</span>
      <span class="all-time" title="All-time total">$1,335,000</span>
    </li>
</ul>

複製動作

此元件會將複製按鈕新增至元素（主要用於程式碼區塊），將元素內容寫入剪貼簿。

puts "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
  has been the industry's standard dummy text ever since the 1500s, when an unknown printer."

程式碼

This component adds a copy button to an element (primarily intended for code blocks)
which writes the content of the element to the clipboard.

<div class="enable-copy-action">
{% highlight crystal %}
puts "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
  has been the industry's standard dummy text ever since the 1500s, when an unknown printer."
{% endhighlight %}
</div>

<script src="/assets/js/copy-action.js"></script>
<script>
document.querySelectorAll(".enable-copy-action pre").forEach(copy_action)
</script>

圖片列表

包含部分： _includes/components/image-list.html

Lorem ipsum dolor sit amet consectetur, adipisicing elit

Quia quos autem veniam libero!

程式碼

<div class="image-list">
    <div class="item"><div class="hex-icon">
  <div class="inner"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960">
  <path d="M664-160 440-384v-301L336-581l-57-57 201-201 200 200-57 57-103-103v269l200 200-56 56Zm-368 1-56-56 127-128 57 57-128 127Z"/>
</svg>

  </div>
</div>

      <div class="small">Lorem ipsum dolor sit amet consectetur, adipisicing elit
      </div>
    </div>
    <div class="item"><div class="hex-icon">
  <div class="inner"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960">
  <path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z"/>
</svg>

  </div>
</div>

      <div class="small">Quia quos autem veniam libero!
      </div>
    </div>
</div>

連結動作

一起顯示的一組連結。附加的圖示會自動從目標 URL 衍生。

API 文件變更日誌原始碼無描述連結

Linux

程式碼

<div class="link-actions">
  <a href="https://crystal.dev.org.tw/api/">API Docs</a>
  <a href="https://github.com/crystal-lang/crystal/releases/tag/1.11.1">Changelog</a>
  <a href="https://github.com/crystal-lang/crystal/tree/1.11.1">Source</a>
  <a href="https://example.com/">Nondescript Link</a>
  <a href="#top"><img src="/assets/install/linux.svg" alt=""> Linux</a>
</div>

連結項目

新聞

主要連結

主要連結 (輔助連結)

Lorem ipsum dolor sit amet.

無醒目標示的連結

程式碼

<div class="link-items">
  <h3>News</h3>

  <div class="link-item">
    <a class="link-item__main" href="#top">
      {%- include icons/newsletter.svg %}
      Main link
    </a>
  </div>

  <div class="link-item">
    <a class="link-item__main" href="#top">
      {%- include icons/rss.svg %}
      Main Link
    </a> (<a href="#top">aux link</a>)
    <p>Lorem ipsum dolor sit amet.</p>
  </div>

  <div class="link-item">
    <a href="#top">
      {%- include icons/announce.svg %}
      Link without highlight
    </a>
  </div>
</div>

合作夥伴圖片

程式碼

{% include components/partner-images.html images=page.partner_images2 %}

{% include components/partner-images.html images=page.partner_images3 %}

文章卡片

84codes LavinMQ：了解程式碼以獲得最佳效能

Bright Security Crystal：Bright 的通用語

PlaceOS 使用 Crystal 自動化智慧建築

程式碼

{% include components/posts-list.html posts=site.categories.success limit=3 %}

文章預覽

包含部分： _includes/posts/meta.html

2021 年 8 月 13 日

Johannes Müller Beta Ziliani

安裝 Crystal 二進位套件的特定版本

Lorem ipsum dolor sit amet consectatur elit.

程式碼

<div class="post-teaser"><time class="post-date" pubdate datetime="2021-08-13"
  >13 Aug 2021</time
>

<ul class="avatar-list" aria-hidden="true">
  <li>
    <a title="Johannes Müller">
      <img
        src="/assets/authors/straight-shoota.jpg"
        alt=""
      />
    </a>
  </li>
  <li>
    <a title="Beta Ziliani">
      <img
        src="/assets/authors/beta-ziliani.jpg"
        alt=""
      />
    </a>
  </li>
</ul>
<div class="author-names">
  <span class="author-name" title="straight-shoota">Johannes Müller</span>
  <span class="author-name" title="beta-ziliani">Beta Ziliani</span>
</div>

<div class="taxonomy">
</div>


  <a href="/2021/08/13/install-specific-versions/" class="post-title">Installing specific versions of Crystal's binary packages</a>
  <div class="excerpt">Lorem ipsum dolor sit amet consectatur elit.
</div>
</div>

包含部分： _includes/components/profile-card.html

程式碼

<div class="profile-card" itemscope itemtype="https://schema.org/Person">
  <strong class="name" itemprop="name">Beta Ziliani</strong>
  <span class="handle">@beta-ziliani</span>
  <img src="/assets/authors/beta-ziliani.jpg" itemprop="image" alt="Photo of Beta Ziliani" alt="Profile picture of " />

  <div class="roles">
    <span class="role" itemprop="jobTitle">Team lead, Steering Council</span>
    <span class="affiliation" itemprop="affiliation">Manas.Tech</span>
  </div>

  <div class="profiles">
    <a href="https://github.com/beta-ziliani" itemprop="url" title="beta-ziliani on GitHub" class="icon" aria-label="GitHub profile"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24.13 23.03">
  <path fill="currentColor" d="M12.11 0C5.61-.19.21 4.91 0 11.41c-.2 5.3 3.2 10 8.3 11.6.3.1.7-.1.8-.4v-2.2c-3.3.7-4-1.6-4-1.6-.2-.7-.7-1.3-1.3-1.7-1.1-.7.1-.7.1-.7.8.1 1.4.6 1.8 1.2.7 1.2 2.2 1.6 3.4 1 .1-.6.3-1.2.8-1.6-2.7-.3-5.5-1.3-5.5-5.8 0-1.2.4-2.3 1.2-3.2-.4-1-.3-2.1.1-3.1 0 0 1-.3 3.3 1.2 2-.5 4-.5 6 0 2.3-1.5 3.3-1.2 3.3-1.2.4 1 .5 2.1.1 3.1.8.9 1.2 2 1.2 3.2 0 4.5-2.8 5.5-5.5 5.8.6.6.9 1.4.8 2.2v3.2c0 .3.3.6.6.6h.3c6.2-1.9 9.7-8.5 7.8-14.7-1.49-5.1-6.19-8.5-11.49-8.31Z"/>
</svg>

    </a>
    <a href="https://forum.crystal-lang.org/u/beta-ziliani" itemprop="url" title="beta-ziliani on the Crystal Forum" class="icon" aria-label="Crystal Forum profile"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 40 39.95">
  <path d="M0 30V2.1c0-.47.22-.93.65-1.4S1.53 0 2 0h25.95c.5 0 .97.22 1.4.68.43.45.65.92.65 1.42v17.8c0 .47-.22.93-.65 1.4s-.9.7-1.4.7H8l-8 8Zm10.05 2c-.47 0-.93-.23-1.38-.7-.45-.47-.68-.93-.68-1.4V25h25V8h5c.47 0 .92.23 1.35.7.43.47.65.95.65 1.45v29.8L32.04 32H10.05Z"/>
</svg>

    </a>
  </div>
</div>

側邊區塊

側邊 1

內容 1

側邊 2（反轉）

內容 2

程式碼

<section class="side-section">
  <h2>Aside 1</h2>
  <aside class="info">
    <p>The Core Team manages the development of Crystal and its ecosystem.</p>
  </aside>

  <div style="background-color: #ddd; min-width: 35ch;">
    BODY 1
  </div>
</section>

<section class="side-section reversed">
  <h2>Aside 2 (Reversed)</h2>
  <div style="background-color: #ddd; min-width: 35ch;">
    BODY 2
  </div>
  <aside class="info">
    <p>The Core Team manages the development of Crystal and its ecosystem.</p>
  </aside>
</section>

主題

贊助

僅需透過 OpenCollective 3 個簡單步驟，即可成為 Crystal 的贊助者

貢獻

企業支援

贊助 Crystal 為您的品牌創造絕佳的跳板

取得支援

聘請我們來處理您的專案

您可以利用該語言創建者的專業知識，指導您完成實作。

聘請我們

程式碼

{% include components/sponsorship.html %}

六角形圖示

包含部分： _includes/elements/hex-icon.html

程式碼

<div class="hex-icon">
  <div class="inner"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960">
  <path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z" />
</svg>

  </div>
</div>

六角形按鈕

立即取得 Crystal！！！

程式碼

<a href="/" class="hex">Get Crystal Now!!!</a>

<a href="/" class="hex bordered">Get Crystal Now!!!</a>

基本概念

Crystal 的語法深受 Ruby 的啟發。

因此，閱讀起來很自然且容易撰寫，而且對於經驗豐富的 Ruby 開發人員來說，它還具有學習曲線較低的優點：cat [crystal](https://) > /dev/brain。

簡潔的語法讓人類很容易閱讀，但它在機器上也很快速。

在Crystal 論壇上，您可以認識對 Crystal 感興趣的人類。

按 Ctrl+C 結束進程。

程式碼

**Crystal’s** syntax is *heavily* inspired by [Ruby’s](https://ruby-lang.org/).

So it feels natural to read and ***easy*** to write, and has the added benefit of
a lower learning curve for experienced Ruby devs: `cat [crystal](https://) > /dev/brain`.

The **slick** syntax makes it easy to `read` for humans, but it's also [**fast** on machines](/).

On [the *Crystal Forum* you can meet `humans` interested in Crystal](https://forum.crystal-lang.org).

Press <kbd>Ctr+C</kbd> to end the process.

引用區塊

謝謝！Crystal 太棒了！

我總是很高興閱讀發佈說明。很棒的工作，各位！

我們正在發佈一個包含數個錯誤修正和改進的新版本。以下我們列出最重要或有趣的變更，未提及數個錯誤修正和較小的增強功能。如需更多詳細資訊，請瀏覽變更日誌。

重大變更會以 ⚠️ 標示。

重點 1

重點 2

多重指定 = 天堂.

程式碼

> Thank you! [Crystal](https://crystal.dev.org.tw) is awesome!

> I am always happy to read the release notes. Awesome work, guys!

> We are delivering a new release with several bugfixes and improvements. Below we list the most important or interesting changes, without mentioning several bugfixes and smaller enhancements. For more details, visit the [changelog](https://github.com/crystal-lang/crystal/releases/tag/1.3.0).
>
> Breaking changes are marked with ⚠️.
>
> * Point 1
> * Point 2

> `Multi assign = heaven`.

標註：一般（含標題）

重要聲明

若要使用這個新版本，您需要從原始碼建置 shards，或使用 nightly Crystal 版本，直到標記 1.0.0-pre1 為止。

程式碼

> **NOTE:** Important notice
> To use this new release you will need to build shards from sources or use a nightly Crystal release until 1.0.0-pre1 is tagged.

標註：一般

注意

一般標註使用這個新版本，您需要從 nightly Crystal 版本建置 shards，直到標記 1.0.0-pre1 為止。

使用巢狀引用區塊。耶！

注意：注意，無巢狀標註。

程式碼

> **NOTE:**
> Generic callout use this new release you will need to build shards from
> nightly Crystal release until 1.0.0-pre1 is tagged.
>
> > With nested blockquote. Ye’a!
>
> ---
>
> > **NOTE:** Attention
> > No nested callout.

標註：類型

注意

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

警告

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

資訊

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla. Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa, nec semper lorem quam in massa.

程式碼

> **NOTE:**
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla.
> Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa,
> nec semper lorem quam in massa.

> **WARNING:**
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla.
> Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa,
> nec semper lorem quam in massa.

> **INFO:**
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla.
> Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa,
> nec semper lorem quam in massa.

程式碼區塊

# A very basic HTTP server
require "http/server"

server = HTTP::Server.new do |context|
  context.response.content_type = "text/plain"
  context.response.print "Hello world, got #{context.request.path}!"
end

puts "Listening on http://127.0.0.1:8080"
server.listen(8080)

name: my-project
version: 0.1
license: MIT

crystal: 1.3.0

dependencies:
  mysql:
    github: crystal-lang/crystal-mysql

所有類型在 Crystal 中都是不可為空的，且可為空的變數表示為類型和 nil 之間的聯集。

if rand(2) > 0
  my_string = "hello world"
end

puts my_string.upcase

$ crystal build hello-world.cr
$ ./hello-world
Hello World!

class Object
  def has_instance_var?(name) : Bool{{ @type.instance_vars.map &.name.stringify }}.includes? name
  end
end

class Person
  property name : String

  def initialize(@name)
  end
end

person = Person.new "John"
p! person.has_instance_var?("name") # => true
p! person.has_instance_var?("birthday") # => false

程式碼

```crystal
# A very basic HTTP server
require "http/server"

server = HTTP::Server.new do |context|
  context.response.content_type = "text/plain"
  context.response.print "Hello world, got #{context.request.path}!"
end

puts "Listening on http://127.0.0.1:8080"
server.listen(8080)
```

```yaml
name: my-project
version: 0.1
license: MIT

crystal: 1.3.0

dependencies:
  mysql:
    github: crystal-lang/crystal-mysql
```

All types are non-nilable in Crystal, and nilable variables are represented as a union between the type and nil.

```
if rand(2) > 0
  my_string = "hello world"
end

puts my_string.upcase
```

```terminal
$ crystal build hello-world.cr
$ ./hello-world
Hello World!
```

```crystal
class Object
  def has_instance_var?(name) : Bool
    {{- "{{" }} @type.instance_vars.map &.name.stringify }}.includes? name
  end
end

class Person
  property name : String

  def initialize(@name)
  end
end

person = Person.new "John"
p! person.has_instance_var?("name") # => true
p! person.has_instance_var?("birthday") # => false
```

圖表

  tmp = some_exp1
  if tmp
    tmp
  else
    some_exp2
  end

Crystal 程式碼

程式碼

<figure markdown="1">

  ```crystal
  tmp = some_exp1
  if tmp
    tmp
  else
    some_exp2
  end
  ```

  <figcaption>Crystal code</figcaption>
</figure>

註腳

Lorem ipsum dolor sit amet consectetur adipisicing elit.¹ Quod labore suscipit animi² consequatur. Accusantium quibusdam dolorum at a, numquam deserunt。

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia quos autem veniam libero!¹ Deleniti nemo quas optio voluptas voluptatibus sint ratione. Id vel error quia ipsam sit saepe hic at amet excepturi ea. Voluptas sunt ratione consequatur optio porro eaque nam quod ex illum modi id animi fugiat vero explicabo illo officiis assumenda nulla rerum, dignissimos sed dicta pariatur quis eum. Beatae ea cumque alias ducimus quos maxime sed, modi illum at repellendus, ex deleniti nesciunt tempore placeat in accusantium!

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet voluptas dicta dolor. ↩ ↩²
Voluptas sunt ratione consequatur optio porro eaque nam quod ex illum modi. ↩

程式碼

Lorem ipsum dolor sit amet consectetur adipisicing elit.[^foo] Quod labore suscipit animi[^bar] consequatur. Accusantium quibusdam dolorum at a, numquam deserunt.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia quos autem veniam libero![^foo] Deleniti nemo quas optio voluptas voluptatibus sint ratione. Id vel error quia ipsam sit saepe hic at amet excepturi ea. Voluptas sunt ratione consequatur optio porro eaque nam quod ex illum modi id animi fugiat vero explicabo illo officiis assumenda nulla rerum, dignissimos sed dicta pariatur quis eum. Beatae ea cumque alias ducimus quos maxime sed, modi illum at repellendus, ex deleniti nesciunt tempore placeat in accusantium!

[^foo]: Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet voluptas dicta dolor.
[^bar]: Voluptas sunt ratione consequatur optio [porro eaque](#top) nam quod ex illum modi.

標題

標題 1

標題 2

標題 3