Hope: [技術] 如何在Blogger文章內加入書籤交互連結

● 在同一篇文章中，若想要快速跳到某個段落，可以如下設定，先展示結果範例：

正文一：引用書籤一

正文二：引用書籤二

正文三：引用空白文字書籤

......

書籤一

......

書籤二

......

(空白文字書籤的位置)

● 接下來展示程式碼：

正文一：<a href="#bm1">引用書籤一</a>

正文二：<a href="#書籤2">引用書籤二</a>

正文三：<a href="#書籤3">引用空白文字書籤</a>

● 說明：

在要加入書籤的文字前後，以<a id="bm1">書籤一</a>包夾，把id=""內的文字，也就是bm1，置換為自己想要的書籤ID；紅字的部分則是要顯示的書籤文字，也可以放空白，放空白就是不顯示文字，但在那個位置還是有放一個書籤。
　　書籤ID可以用中文也可以用英文或數字，這邊要注意的是ID就跟身分證字號一樣，每個人的身份證字號都是不一樣的，因此在同一個網頁中，「ID也要不同，不可重複」，ID是作為「唯一識別碼」的概念，若ID重複使用，會不知道該跳到哪個ID。

○ 書籤範例1：<a id="bm1">書籤一</a>，說明：這是一個「id=bm1」的書籤，顯示的文字是「書籤一」。
○ 書籤範例2：<a id="書籤2">書籤二</a>，說明：這是一個「id=書籤2」的書籤，顯示的文字是「書籤二」。
○ 書籤範例3：<a id="書籤3"></a>，說明：這是一個「id=書籤3」的書籤，沒有要顯示的文字，也就是讀者在網頁上是看不到那個書籤的，但是作者知道那個位置有放一個書籤可以超連結過去。
連結到同一篇文章中的書籤，以<a href="#bm1">引用書籤一</a>包夾，把href=""內的文字，置換為前面定義的書籤id，注意id前面要多加一個#字號，才可以正確的連結。紅字部分是這個書籤連結的說明文字，以這個例子來說，我想要表達這是一個引用書籤一的連結，因此我的超連結文字是「引用書籤一」。

○ 跳至書籤範例1：<a href="#bm1">引用書籤一</a>，說明：這個連結參照到「id=bm1」的書籤，要讓讀者看到的超連結說明文字是「引用書籤一」。
○ 跳至書籤範例2：<a href="#書籤二">引用書籤二</a>，說明：這個連結參照到「id=書籤二」的書籤，要讓讀者看到的超連結說明文字是「引用書籤二」。
○ 跳至書籤範例3：<a href="#書籤三">引用空白文字書籤</a>，說明：這個連結參照到「id=書籤三」的書籤，要讓讀者看到的超連結說明文字是「引用空白文字書籤」。

● 跨頁面的書籤連結：

　　其實就跟一般的超連結一樣，一般的超連結是連結至指定的網址，比如說連到本部落格的這篇文章：文鳥球球看病記(羽蝨,疥癬,呼吸道發炎)，該文的網址是：https://javasparrowk.blogspot.com/2019/09/blog-post_28.html。

在該文中，我有建立一個書籤放在「20200713」的段落：
建立書籤的語法：<a id="20200713">20200713</a>
連結至該書籤的語法：<a href="#20200713">20200713 因呼吸急促就醫</a>

　　那麼，若想要從這篇文章跳到那篇文章的「20200713」書籤呢？只要把網址連結改成：原網址+#書籤id即可，也就是把網址改成這樣：https://javasparrowk.blogspot.com/2019/09/blog-post_28.html#20200713，這邊展示書籤的效果，可以看到此連結直接跳至文章中該書籤的位置。

● 延伸閱讀：

HTML 超連結 <a> 標籤 (tag) @ Foolish程式技術
文章中有說明a href的作用

Hope

2021年10月23日星期六

[技術] 如何在Blogger文章內加入書籤交互連結

沒有留言:

2021年10月23日 星期六

[技術] 如何在Blogger文章內加入書籤交互連結

沒有留言:

2021年10月23日星期六