× 說心事 政治時事 生活 運動 汽車 機車 自行車 相機 科技 理財 旅遊美食 娛樂 健康 美麗時尚 人際關係 文學故事 關於《思書》
吃喝玩樂 關於《思書》

Rails HTML 錨點 Anchor 怎麼用?外加如何微調錨點降落地點

紅寶鐵軌客
來關注...
關注:紅寶鐵軌客
關注有什麼好處?:當作者有新文章發佈時,「思書日報」就會匯總自動通知您,讓您更容易與作者互動。
x
紅寶鐵軌客
Rails 使用中,折磨中,享受中......
Victorian vintage round cut ruby engagement ring in 14k yellow gold 7mm center vs g h 984
    很久以前就是個「寫程式的」,其實,什麼程式都不熟⋯⋯
     
    就,這會一點點,那會一點點⋯⋯
作者最新發佈的文章:
  • Rails 如何檢查 URL 是否存在?
  • Rails 為什麼要使用 escape_javascript?
  • Rails 使用 Javascript Ajax 很簡單
作者最近參與的討論:
  • Rails 常見資安陷阱與解決方法
現在就加入《思書》,你就可以關注本作者了!
《思書》是一個每個人的寫作與論壇平台,特有的隱私管理,讓你寫作不再受限,討論更深入真實,而且免費。 趕快來試試!
還未加入《思書》? 現在就登錄! 已經加入《思書》── 登入
Rails 使用中,折磨中,享受中......
2017/05/31
150   0  

要讓使用者好用,錨點,也就是HTML 中的 Anchor 是少不了的。

設定錨點,就是給一個 division ID:

<div id="blog_id-<%= blog.id %>" style="padding-top: 4em;margin-top: -4em;"></div>

那後面這東東是什麼? 這就是調錨點降落地點的好物,各位可以改改看看,我的這個例子大概是讓網頁往下移4行,寫成inline因為可以省一點CSS,我覺得也不要太反對inline CSS,畢竟,一個正常上線的網站,都是上千行的CSS,像這樣只是為了Anchor位置上下調,又要多加好幾行CSS,再說,我覺得微調可以重複使用的機率不大。

Link_to 寫法如下:

link_to user_path(anchor: "blog_id-"+ blog.id.to_s)

Redirect_to 如下:

redirect_to blog_path(id: @blog.id, anchor: "blog_id-"+@blog.id.to_s) 

簡單好用就是美。

當使用 Turbolinks 5 時,就還有一點要注意的,link <a> 會讓 Turbolink 重新整頁網頁 reload,這很討厭,所以就要加上 data-turbolinks="false",把 Turbolinks 關了:

link_to "abc", blogs_path(id: blog, anchor: "blog_id-"+pc_blog.id.to_s), data: { turbolinks: false }

或是:

link_to "abc", "#blog_id-"+pc_blog.id.to_s, data: { turbolinks: false }

後面就會轉譯為:

<a data-turbolinks="false" href="#blog_id-305">abc</a>

這就是把 Turbolinks 關了,網頁內跳來跳去,就不會每次網頁 refresh 了。

關於作者
很久以前就是個「寫程式的」,其實,什麼程式都不熟⋯⋯
 
就,這會一點點,那會一點點⋯⋯


標籤: turbolinks link_to x 1 html 微調 anchor 位置 x 1 anchor x 1 rails x 27

分享:


參與討論!
x
現在就加入《思書》,馬上參與討論!
《思書》是一個每個人的寫作與論壇平台,特有的隱私管理,用筆名來區隔你討論內容,讓你的討論更深入,而且免費。 趕快來試試!
還未加入《思書》? 現在就登錄! 已經加入《思書》── 登入