如何快速從 Blogger 的Html編輯器找到頁頭尾巴的小技巧

先將結論寫最上面,簡單條列如何快速從 Blogger 的Html編輯器找到頁頭尾巴的小技巧的步驟:


  • 1. 打開 Html 編輯器
  • 2. 找到 <head> 的行數旁邊的小箭頭
  • 3. 滑鼠點擊小箭頭將整理頁頭結構收合
  • 4. 確認頁頭結構到第行結束,譬如2954,就先記住
  • 5. 展開後,找到第 2954 行的程式碼,確認 </head>的位置

正題開始,在 Blogger 的修改過程中,尤其是想增加各式功能的同時,打開內建的 Html編輯器,常會在茫茫的程式碼大海中漂流不足所措。

最近想安裝一個功能,按照外面大師的步驟走時,卻發現卡關,不論是中文還是英文資料都沒找到解答,一開始還以為是之前安裝自訂範本版型時弄亂掉,後來才發現....是自己沒注意到。

其實部落格的原始編碼,都是以 HTML 為基礎,這邊簡單提一下,就是在 HTML 架構下,一個頁面可以主要分3個部分


1. 頁頭: 以 <head>  開始, </head> 做結尾

2. 頁身:以 <body> 開始,</body>做結尾

3. 頁尾:以 <footer>開始,</footer>做結尾


原則上只要搞清楚這個基本架構,要安裝各種客制插件就不成問題,按照各家大神的步驟去套用就可以順利達成目標,結果這次卡在找不到 </head> 這個結尾的程式碼,用 CTRL+ F 找半天也沒有,後來才發現,是因為網頁版的原始碼編輯器,可能是程式碼太多,沒有辦法一口氣顯示所有編碼,導致用CTRL + F 的快速搜尋熱鍵也找不到目標。

研究一陣子後才想到一個簡單的處理方式,來,這邊先上圖

Html編輯器找頁頭尾巴
Html編輯器找頁頭尾巴


圈起來的部分,會寫程式的人應該很熟悉,在第4行這邊可以找到頁頭的開始部分,也可以看到有一個小箭頭,可以用來收合頁頭架構,收合起來會變成這樣子: 

Html編輯器收合頁頭
Html編輯器收合頁頭

可以看到收合後,原本第4行下面,本來是第5行的 5 直接變成 2955,這個就代表整個HTML的 頁頭結構是在第 2954 行收尾,換句話說,之前一直找不到的 </head> 頁頭結尾就是在第2954行,展開後,往下卷再確認一下

HTML 編輯器頁頭結尾位置
HTML 編輯器頁頭結尾位置

好的,找了好幾天,終於找到了 </head> 這個調皮的頁頭尾巴,只能說半路出家的功力還是有待加強啊,下次準備來安裝延伸閱讀的程式碼了,最後再簡單條列如何快速從 Blogger 的Html編輯器找到頁頭尾巴的小技巧的步驟:


1. 打開 Html 編輯器

2. 找到 <head> 的行數旁邊的小箭頭

3. 滑鼠點擊小箭頭將整理頁頭結構收合

4. 確認頁頭結構到第行結束,譬如2954,就先記住

5. 展開後,找到第 2954 行的程式碼,確認 </head>的位置


這樣終於可以往下一步邁進了


PS:  後來發現,如果先把滑鼠游標,弄到在HTML 編輯器裡面,再壓 CTRL + F ,會在編輯器的上方出現另外一個視窗,在這裡其實就可以搜尋整段編碼,也是另外一個搜尋的方式

HTML編輯器的內部搜尋工具
HTML編輯器的內部搜尋工具



相關閱讀

留言

  1. 相關閱讀的圖片糊掉了

    找到下面這段程式碼
    tmb = thumburl[r].replace('s72-c/','s300-c/');

    改成如下 ~

    tmb = thumburl[r].replace('s72','');

    回覆刪除

張貼留言

謝謝你的回饋

liker coins

這個網誌中的熱門文章

汽車過戶費用,證件和流程

iRent 汽車加油要錢嗎?常見 QA一次告訴你

【網路轉貼】台灣的各大學特色

Irent共享機車解開限速實測和感想

新北市youbike服務中心怎麼去交10元欠費

快車肉乾不算推薦的介紹

捷運捷運, 總有天等到你