Next Feature Note

發表於 2000-01-01 更新於 2023-08-22 分類於 NexT 閱讀次數：閱讀次數： Disqus：文章字數： 4.5k 所需閱讀時間 ≈ 4 分鐘

個人的 NexT Feature tag 筆記。

前陣子升級了 next 8.0 版本，而在升級的過程中有爬到一個功能統整文章
感覺有更多技巧是之前沒有被用上的，於是想整理一些特殊 tag 來幫助自己查閱。

Next Feature

居中引用

1
2
3

{% cq %}
居中引用效果
{% endcq %}

居中引用效果

Note

1
2
3

<div class="note default"><p>default html</p></div>

{% note class_name %} Content (md partial supported) {% endnote %}

[class_name] : default | primary | success | info | warning | danger.
config 可以修改樣式，例如 simple, morden (決定大小)、icon 等等

primary 效果

info 效果

warning 效果

LABEL

1	{% label [class]@Text %}

[class] : default | primary | success | info | warning | danger.
測試 : abcdefg 這邊是 Text，這邊是 Text，這邊是 Text，這邊是 Text，這邊是 Text，這邊是 Text

Tabs

{% tabs 標籤頁, 1 %}
<!-- tab 標題 1 -->
**標籤頁 1**
<!-- endtab -->
<!-- tab 標題 2 -->
**標籤頁 2**
<!-- endtab -->
<!-- tab 標題 3 -->
**標籤頁 3**
<!-- endtab -->
{% endtabs %}

要在 config 中打開。
使用上印象中有一些缺陷所以我比較少用，如果我想到了會再來補充

標籤頁 1

標籤頁 2

標籤頁 3

立體的 Button

很酷，從沒用過。

{% button url, text, icon [class], [title] %}
或者
{% btn url, text, icon [class], [title] %}
例如
{% btn #, Text %}{% btn #, Text & Title,, Title %}

Text Text & Title

<div>{% btn #,, home fa-5x %}{% btn #,, home fa-5x %}{% btn #,, home fa-5x %}</div>
<div>{% btn #,, home fa-4x %}{% btn #,, home fa-4x %}{% btn #,, home fa-4x %}</div>
<div>{% btn #,, home fa-3x %}{% btn #,, home fa-3x %}{% btn #,, home fa-3x %}</div>
<div>{% btn #,, home fa-2x %}{% btn #,, home fa-2x %}{% btn #,, home fa-2x %}</div>
<div>{% btn #,, home fa-lg %}{% btn #,, home fa-lg %}{% btn #,, home fa-lg %}</div>
<div>{% btn #,, home %}{% btn #,, home %}{% btn #,, home %}</div>

Text & Icon (buggy)Text & Icon (fixed width)

1
2
3

<div class="text-center"><div>{% btn #,, header %}{% btn #,, edge %}{% btn #,, times %}{% btn #,, circle-o %}</div>
<div>{% btn #,, italic %}{% btn #,, scribd %}</div>
<div>{% btn #,, google %}{% btn #,, chrome %}{% btn #,, opera %}{% btn #,, diamond fa-rotate-270 %}</div></div>

1	<div class="text-center">{% btn #, Previous Chapter, arrow-left fa-fw fa-lg, Previous Chapter (Full Image) %} {% btn #, Next Chapter, arrow-right fa-fw fa-lg, Next Chapter (Label) %}</div>

Previous Chapter Next Chapter

Group Pictures

1
2
3

{% grouppicture [group]-[layout] %}{% endgrouppicture %}
或者
{% gp [group]-[layout] %}{% endgp %}

[group] : 有幾張圖片要加入 group
[layout] : Default picture under the group to show.

{% grouppicture 6-3 %}
  ![](/images/docs/github.png)
  ![](/images/docs/github.png)
  ![](/images/docs/github.png)
  ![](/images/docs/github.png)
  ![](/images/docs/github.png)
  ![](/images/docs/github.png)
{% endgrouppicture %}

將文章標籤的# 改成圖案

在 config.yml 改

1 2	# Use icon instead of the symbol # to indicate the tag at the bottom of the post tag_icon: true

Style 相關

自定義NOTE

https://zenreal.github.io/posts/44730/#%E8%87%AA%E5%AE%9A%E7%BE%A9note

自定義文字色塊

https://zenreal.github.io/posts/44730/#%E8%87%AA%E5%AE%9A%E7%BE%A9%E6%96%87%E5%AD%97%E8%89%B2%E5%A1%8A

<span id="inline-blue">主題配置文件</span>
<span id="inline-purple">主題配置文件</span>
<span id="inline-yellow">主題配置文件</span>
<span id="inline-green">主題配置文件</span>

主題配置文件
主題配置文件
主題配置文件
主題配置文件

h1,h2,h3標題前圖示

https://zenreal.github.io/posts/44730/#h1-h2-h3%E6%A8%99%E9%A1%8C%E5%89%8D%E5%9C%96%E7%A4%BA

自訂無序列表

<ul style='list-style-position:inside;'> 
  <li>第一個項目<br>第一項目的第二行 
  <li>第二個項目 
</ul>

第一個項目
第一項目的第二行
第二個項目

<ul style='list-style-position:outside;'> 
  <li>第一個項目<br>第一項目的第二行 
  <li>第二個項目 
</ul>

第一個項目
第一項目的第二行
第二個項目

插入音樂與影片

1	{% video https://example.com/sample.mp4 %}

以及參考這篇 https://zenreal.github.io/posts/61856/

懸浮於文字時跳出提示框

https://kushagra.dev/lab/hint/

Gitalk

https://zenreal.github.io/posts/10105/

End

2023.08.22