![how-to-use-wfublog-如何使用本站](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwo1KAcCRqAHPlONGTp9HnEZhRCjpXPZHpoPgcDfRVmKgPzvU7zELCh-2XuEE0vQsnmoRZIdpRxopmDlVguDf6h0MTbLxXIOUXXGeQOZsx5285DKgxfWCaXPNbk9cAn7fhyphenhyphendbE4K3uFaSz/s790/how-to-use-wfublog.jpg)
(圖片出處: pixabay.com)
一、導覽列
![menu-guide-1-如何使用本站](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZPpChP-N4mQlpNPD1UAdg_IKf91Mv5Ob6NCuxxvNSfmb1WZY2GbL22unLSPqQu91QrczD7iebrQ2n_Lx-sve_axrw5kyeeH2ydBHTHIAApxSmX6YSjTV8U4hoDDuB5e4QDPG24pfqR9xW/s790/menu-guide-1.jpg)
- 網站上方的浮動導覽列,在頁面往下捲時會自動隱藏,增加文章可視面積。
- 頁面往上捲時,代表讀者已看完文章,可能要尋找導航工具,那麼此時導覽列會自動浮現。
- 導覽列支援下拉選單,滑鼠移到重要的大分類項目時,會出現熱門的標籤分類。
- 如果對本站還不太熟悉,建議可從導覽列認識本站大致的文章資訊內容及方向。
![menu-guide-2-如何使用本站](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg422LdwnLjtLBi_xIM_iefwoRqSyYzbDNxgCh_fEoZ2XtZ0rEm-38UL3gUgAS5iTzSdSzzGOuVEbkWjBXiK7gZyCKiHX_emf9quQgy9P_iKppb6L5ThTz2fXIiBM29z9KbK-ZdGJibXUSQ/s790/menu-guide-2.jpg)
如果使用平板、或手機,當網頁寬度不夠時,導覽列會自動縮小,成為上圖左上角的選單圖示。
![menu-guide-3-如何使用本站](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0JzUWPSEHvK7p32Sb7X6Ui2dS938HjiqHVnT4lz-nLI0xPKF4JyPs8ziB_1N943PbpzhLZnst3iUTpOpuKAKGnET8PWg8zajcVIK9c3bDVn8DELlFl4IwW83UTM0DR-ZTZYIH2APy44RL/s790/menu-guide-3.png)
點擊選單圖示後,就會出現網頁版的導覽列架構,使行動裝置一樣有導航的功能。
二、搜尋、文章分類
如果對本站已經有一定程度的瞭解,建議使用側邊欄最上方的「搜尋」及「文章分類」這兩個工具,可以快速找到你需要的資訊。
![search-guide-1-如何使用本站](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV1nzyyoBCYXPmghXQSDneOPKDuS0MFqhO0g4I7-7QLmdjtrub5u40qE_1BuFrxszAPy4Uc7-9sgB25cCX_WiJF_p-uXHd8cO9SZF269S-lPhNFGyBUdVIjnfkEog1MvKNki9vvCkYUD9I/s790/search-guide-1.png)
這是網頁版的搜尋工具,搜尋結果使用動態載入的技術,秒搜尋秒出現,不需重整頁面。
![search-guide-2-如何使用本站](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjX8SVKE8qGFVOJG5mDFTPwWGYeMR02uKDCxbWEniXBegP5hqetwUxzieBP2P8RhHIWHGRseONlCCe3XCVhysBzz-2U4LdlWkg5GaSY-ya3h102XywETiOH42M3blyp49tCXcxyqUngQBi7/s790/search-guide-2.jpg)
網頁寬度不夠時,搜尋框會在螢幕右上方浮動,更方便搜尋
![label-guide-如何使用本站](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6rW9iIStdlBNSB2ERquDcFvOLyHx7tEIXBNUhGCUMnocrsGE_gKkR2WBT0y40Syf6MHkWwjQUKZS1T8uGS_jIBbOj-_DZZXFI5rbCy43GDivI__aQLXh8jlynsjjTpqlbY5RqfvmxGH6D/s790/label-guide.jpg)
這是 Blogger 最好用的文章分類工具「樹狀標籤」,除了基本的展開、收合功能,請見上圖紅框,還有「圖文」、「標題」模式可以切換。
可參考「樹狀標籤 V2.1」的說明,使用「標題」模式時,文章標題會以動態載入的方式顯示,不會重整頁面,WFU 都是用這個模式來搜尋自己的文章。
三、留言
在本站留言有兩種方式:
![comment-guide-1-如何使用本站](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsL8j7qr9UMvmd8QRXv1TRa-u8LvNAOcapuZQWtt9ncGQv16xxVPKqs5biq86oFhmL4cgABkN5Rp1jZwklXrH6-rS14LDkVoEjbpGPNxNxKxLkUheczy5wB14IW2K9Yz5DeWzFlEG6kjYp/s790/comment-guide-1.png)
每篇文章後面都有 Blogger 官方留言板,留言之前請閱讀一下注意事項,重點都在畫面上了。
![comment-guide-2-如何使用本站](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx1n5TxdUmDgt1c3gvYElb_bSM_9xswP4U6Dw-KyP83cRiL1u_aCLAxCx9CNcW5RtnmZ60xCXwd-hxueeRYWNC5y9lCvC3__Mcby_fG35ldHnWpW9b-xOFVk2OOJ5E8m9xicqziZP5KfOW/s790/comment-guide-2.png)
如果留言內容不方便公開,側邊欄也有聯絡表單可以填寫。可詢問的範圍都已註明,請留意一下。
另外,有 Blogger 相關的諮詢、架站、提案合作等,要與我聯繫的話,也可參考這個頁面「諮詢服務項目」。
四、快捷按鈕
為了方便讀者快速前往以上這些功能的區塊,我設計了一些常駐在螢幕上的快捷按鈕:
![shortcut-guide-1-如何使用本站](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLALPbsNGsLNxKFdFRRcS_iHU03pfD8tuiYlAswp22huOpLRIpdHvHU2R2iucyDw99AeELz9T0hQF7lm6-XvmS-usc846OZiaol3Ub4Ey_i9hBKQO1tepNoHEiXK9j2S07kz0C4kffoYUt/s790/shortcut-guide-1.jpg)
浮動導覽列的最右邊,紅框處的 4 個按鈕,由左到右按下後,可以迅速跳到「聯絡表單」、「文章分類」、「網頁最上方」、「搜尋工具」,這 4 個重要區域。
![shortcut-guide-2-如何使用本站](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhd7X0MJeAgIjOb9cz0D6P423rXZjHDw3TeD6La1uqZ12oXYN_YSmUhWXmIf7ajdvm9JHuS7bvM1r8Agjl5b0i6bElecnxcW-IlXmreLEti3MLZvgpj9Gii21574YJSNnIknGASwsFPdnTu/s790/shortcut-guide-2.jpg)
如果覺得滑鼠移動到導覽列太遠,側邊欄的浮動區塊,上圖底部紅框處,同樣設計了 4 個快捷按鈕可以使用。
![shortcut-guide-3-如何使用本站](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ef7UDfy6sI-TGWF0rd3yNKG4WLjnyEx-nPZmcRrhmEP6Fh-VypBH2jlqgMsoToJQpjfZXSnpsd3as9YAREgkfQTGh088A9bVyJUW_QvfrL0qxhFoa2BySmjvtePuR4sZKeYrvKfoFuOH/s790/shortcut-guide-3.jpg)
當網頁寬度不夠時,網頁底部會自動出現上圖紅框的浮動區塊,有 3 個快捷按鈕可用(搜尋按鈕在右上方浮動)。
五、訂閱
為了方便讀者追蹤本站最新文章資訊,側邊欄有浮動區塊,提供各種訂閱、追蹤的管道:
![subscribe-guide-如何使用本站](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglww0ZEE6_bDlDISSHRkyj5_mpDeevzQDn2HBRPXXFqgWPMWBpoiMnNtaN0TdtytNAckWovSAI9bgXEmerux33gKrKIRkmSdLw_VIPZiSy4RU3Sfr_S5FQ1w7GesDnY6JMDFYzGSwqq6MU/s790/subscribe-guide.jpg)
六、友善閱讀按鈕
對於特定族群,需要更為友善的網頁閱讀環境時,WFU 設計了以下兩個工具。
![user-friendly-guide-如何使用本站](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGULqvcobtYWVduC-ZH-fadW2-fmpAi1-_QL-1Ax1okcnJ3o9AgD3RuZI8vdZOACwQUKNdc-WAhFprhDS5N0m8QGqJUuLgKWFuYZf2EUj3CTbF4LkZuBaFExNBYVBp6ATx6lzyN4Hg48HU/s790/user-friendly-guide.jpg)
如上圖紅框,在文章標題右下方有兩個按鈕:
- 「A+」:這個按鈕可改變循環字體大小,詳細說明請參考「讓訪客能自行放大網頁文字,提升友善閱讀體驗」。
- 「色」:這個按鈕可以幫助色盲、色弱人士閱讀,詳細說明請參考「有助於色盲使用者的友善體驗」。
七、Blogger 資源
以上是網站介面的操作說明,如果來到本站主要目的為尋找 Blogger 相關資源,那麼可參考以下資訊。
1. 尋找本站使用的 hack 及工具
如果在本站的版面看到任何有興趣的功能或外掛,請看此篇導覽:「本站使用的 hack 及工具」。
因為本站最近改版,許多工具已經不展示了,不過以前寫的 Blogger 工具,仍可在我的展示網站看到 DEMO 效果,請前往「Blogger 工具效果展示」網站。
2. 尋找本站 Blogger 文章
從側邊欄「文章分類」這個工具:
- 「電腦」→「Blogger」
- 「電腦」→「部落格」
以上兩個大分類,可以找到本站所有的相關文章及標籤。
3. 尋找各種 Blogger 資源
本站彙整許多網路 Blogger 資源,依不同用途整理了多篇筆記,Blogger 新手可參考這些文章:
- Blogger 新手入門
- Blogger 側邊欄相關工具及技巧
- Blogger 文章相關工具及技巧
- Blogger 小技巧
- Blogger 小工具
- 部落格廣告商及使用技巧整理
- Blogger 留言相關工具及技巧
- Blogger 能見度、SEO 相關技巧
- Blogger 周邊產物
- Blogger 知識
八、文章列表
有幾種方式可看到本站的文章列表一覽:
看來要改改 六、其他 這個部分了... ^^
回覆刪除<2639778988732435053>(以上內容請勿刪除,從括號之後開始留言)謝謝提醒,隨機文章有更新版時還是會補回來的。
回覆刪除原本已經更漂亮簡潔用上了新的RWD範本介面更漂亮快速了
回覆刪除謝謝~
刪除我想請問一下!版面為何會已經儲存 發佈了!為何 版面檢示時 會出現 小螺絲起子 扳手的圖示!?
回覆刪除這是編輯小工具的快速按鈕
刪除