有架設的相關工具服務

假圖產生器

基本用法

• <img src="https://fimg.yuaner.tw/300/">
• <img src="https://fimg.yuaner.tw/250x100/">
• <img src="https://fimg.yuaner.tw/250x100/ff0000/">
• <img src="https://fimg.yuaner.tw/350x200/ff0000/000">
• <img src="https://fimg.yuaner.tw/350x200/ff0000,128/000,255">
• <img src="https://fimg.yuaner.tw/350x200/?text=Hello">
• <img src="https://fimg.yuaner.tw/200x100/?retina=1&text=こんにちは&font=noto">
• <img src="https://fimg.yuaner.tw/350x200/?text=World&font=lobster">

本站CSS相關

以下內容已經整理過，可獨立使用，不依賴theme提供的功能。

排版

檔案：　grid.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div class="post-content">
<div class="xg-grid">
<div class="xg-col-8 xg-col-sm-12">

左邊主文
* 主文條列1
* 主文條列2
* 主文條列3

</div>
<div class="xg-col-4 xg-col-sm-12">

右側放置處（可放圖片）
![圖片放置處](https://fimg.yuaner.tw/300)

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

預覽

alertbar

檔案：　alertbar.css

額外使用render引擎：

• markdown-it-attrs
• markdown-it-container

原生HTML寫法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!-- 原生HTML寫法 -->
<div class="xg-alertbar xg-alertbar-warning">
    這是 <strong>.xg-alertbar-warning</strong> 樣式，原生HTML寫法
</div>

<!-- 原生HTML混Markdown寫法 -->
<div class="xg-alertbar xg-alertbar-info">
<div>

這是 **xg-alertbar-info** 樣式，原生HTML混Markdown寫法

* 並產生多行
* 並產生多行
* 並產生多行
</div>
</div>

Markdown引擎簡化寫法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!-- 使用div render寫法，有用到markdown-it-container -->
::: xg-alertbar xg-alertbar-success
這是 **xg-alertbar-success** 樣式，使用div render寫法，有用到markdown-it-container
:::

<!-- 使用div render寫法，有用到markdown-it-container，多行多要素 -->
::: xg-alertbar xg-alertbar-error
這是 **xg-alertbar-error** 樣式，原生HTML混Markdown寫法

* 並產生多行
* 並產生多行
* 並產生多行
:::

<!-- 有用到markdown-it-attrs，跑在p要素裡 -->
這是 **xg-alertbar-info** 樣式，有用到markdown-it-attrs，跑在&lt;p&gt;要素裡 {.xg-alertbar .xg-alertbar-info}

預覽

這是 xg-alertbar-info 樣式，有用到markdown-it-attrs，跑在<p>要素裡

spoiler

檔案：　spoiler.css

spoiler Heimu 黑幕

• 取自於: https://dev.fandom.com/wiki/Heimu
• Release status: Experimental
• Description: Hide contents in spoiler bars and reveal the contents when the cursor is hovering over the spoiler bars
• Author(s): HyperNervie
• Scope: Site-wide
• Updated: October 29, 2022
• 此部份授權：Community content is available under CC-BY-SA unless otherwise noted.
• 額外有對Dark Mode模式與新增
  標籤支援的需求有做小改動

寫法

1
2
3
4
5

這段字是[防止被劇透的黑幕設計]{.heimu}測試

直接做整段防止被劇透的黑幕設計測試 {.heimu}

![圖片放置處](https://fimg.yuaner.tw/100) {.heimu}

預覽

spoiler Blur 模糊

• 取自於: https://dev.fandom.com/wiki/SpoilerBlur
• Release status: Stable
• Description: Blurs spoiler section or word(s)
• Author(s): Sprye
• Scope: Site-wide
• Updated: July 20, 2024
• 此部份授權：Community content is available under CC-BY-SA unless otherwise noted.
• 額外有新增class語法糖 .hovers-blur ，比照萌娘百科。並調整動畫時間成.50s，不延遲播放動畫。

寫法

1
2
3
4
5

這段字是[防止被劇透的模糊文字設計]{.hovers-blur}測試

直接做整段防止被劇透的模糊文字設計測試 {.hovers-blur}

![圖片放置處](https://fimg.yuaner.tw/100) {.hovers-blur}

Echo Server

curl -d "param1=value1&param2=value2" -X POST https://echo.yuaner.tw/send-data

不過因為有掛Reverse Proxy，不確定回傳偵測到的IP位址是否正確，我暫時沒有心力確認，所以請自行判斷。