「站內搜尋」節目頻道功能上線
![](https://resources.blogblog.com/img/icon18_edit_allbkg.gif)
![search-program.jpg-站內搜尋節目頻道功能上線](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8nJakHMsB3mgeZdicwF3v8tuGJYfQdlt7dMJE5YfZFHe6HtxlKdAD-XtVLMDSAEAuEgdTZcrfp3D_S7DFVtjxAFVS4XlJ-Vi-42kr8jHDjxxotqUdqpGorSxYWqNDMeZ9nW8XWu9L6CmE/s1600/search-program.jpg)
一開始的權宜之計是請使用者先進入「節目頻道一覽」頁面,然後按 Ctrl-F 搜尋節目名稱,當然這種操作方式沒那麼方便,不會是最終解決方案。
而現在終於把這個功能做出來了,以下會說明使用方式,以及為何要這麼久才能實現這個功能。
一、製作原理
本站是架設在 Blogger 這個免費部落格平台,有使用過、逛過部落格網站就會知道,「站內搜尋」是部落格平台的基本功能,算不上難事,那為何「線上看電視」遲遲做不出搜尋功能呢?
相信愛用者都知道,本站在首頁就能收看所有近千個節目頻道,所有節目都不需切換、重整頁面,在一個頁面就能完成所有操作,這也代表本站只需要一個頁面(首頁)就能保持日常的運作。
然而「站內搜尋」的作用是搜尋站內的文章,如果一個網站什麼文章都沒有,那要如何搜尋呢?
所以要能夠快速搜尋本站收錄了哪些節目、頻道,就得跟部落格文章一樣,把一個節目做成一篇文章的頁面,也就是把近千個頁面一個個做出來,大家可以想像這個工程有多大了。
當然前端工程師不會傻傻全部手動操作,能用程式跑的部分還是會交給程式處理,不過還是有需要手動的部分,因此仍要花不少時間就是了。
二、使用說明
![search-program-1.jpg-站內搜尋節目頻道功能上線](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMBbAjNv5WkwoP2iy9YQ7B2Bk13FRNHvGcN2JCkgdQ9HcPiNjnO9WBvhl3vXNeFDJ-SIN3BdQFwcQpy2ld1rChiex14oAEixntg_tGCBwtryu7ndlAe8ZfJlj96wfIxpJNoMzo84EGdUrM/s1600/search-program-1.jpg)
請見上圖紅框處,搜尋框目前先放在導覽列右側。
![search-program-2.jpg-站內搜尋節目頻道功能上線](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiH93YkZpczJwwsLZYr1u79SgAK4upf3KYZ6BM8yW8OyjbuHVtx6_3p6Uma2m_-A9UOpTEbba-ltmPgGpRNT-z5naOsGnVDDLd6dyiWw-ndWbtE9_U2vYgzoKhOCBd0GnymroPN4ytVz2kj/s1600/search-program-2.jpg)
上圖為搜尋字串 "三立" 的結果,會列出所有包含該字串的節目,而這個搜尋效果是「節目一覽」頁面所做不到的。
假設我們點擊「三立 iNEWS 新聞(直播)線上看」進入這個頁面──
![search-program-3.jpg-站內搜尋節目頻道功能上線](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhM6txUtk9ryQNjqZvJDM3Q39Mt37hnw1hZsmpQV2XKzY9fjOf8JwxEtg3BuhLUhBcxja79UF40eHI3wgvSFFEW_s2xoaggHnKVUcxd7rZwdfOQ48XSi9OgzUKWAHA5sWxkjcAHoJ1ou19R/s1600/search-program-3.jpg)
- A:在文章標題下方顯示麵包屑導航路徑,可看到該節目位於「政經」群組
- B:左側分類節目清單可看到目前的節目在哪個分類
- C:文末可看到該節目所屬的標籤有哪些
- 其他的操作跟首頁一樣,可隨時切換其他群組、分類、節目
三、手機頁面
![search-program-4.jpg-站內搜尋節目頻道功能上線](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBD9ZgV3q2Jp7xJXjX2FYJwGJpabCOFLs7u5wPsued-vMztAk2ImlgaDUR-Xx6i4aM5j9kSrUdBlQdGJjcWXojqACMNGWRMqaxFWMOrm2cl7ZC8mXAr3Op04j5G8lC4krX2K228Gi1Q7ni/s1600/search-program-4.jpg)
行動版的搜尋功能在右上角紅框處,請點擊搜尋圖示。
![search-program-5.jpg-站內搜尋節目頻道功能上線](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMa5eJbvbiBExp12ydwTAFo3KmHDDDw4zQrjgfBHcIzmPXrGeO03xxFRxEy88ks9jW5b71rC4Y_k0UVN7MrFN3vSbFA1hqZE66AlwoFyrtYh3hEldVhL55Wo_I0NgUFcYtP5Doqo1jkp6N/s1600/search-program-5.jpg)
會出現搜尋框,輸入搜尋字串即可,例如 "食尚玩家"。
![search-program-6.jpg-站內搜尋節目頻道功能上線](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidPujpgvrYaTxck9QrufMCP_DgLzJuuLt1eaAMvcteTJhGFoqCxqQX365qrUvOOf1D4kOVeOsrNsNrfPdxf5WoWSUjzV8cu3PHn8iutqpb1JALMYt5BfUJqQ3eJ4ih0HXc9mYtT4CxiO7B/s1600/search-program-6.jpg)
這是搜尋結果畫面,列出所有相關節目。
四、補充說明
由於我只針對可在 YouTube 播放的節目製作文章頁面,以下分類的節目是無法搜尋到的:
- 音樂(這個群組嚴格來看不算節目)
- 外部(這個群組的頻道都是連到外部網站)
因此這兩個分類要搜尋的話,還是得進入「節目頻道一覽」頁面才行。
![](https://resources.blogblog.com/img/icon18_edit_allbkg.gif)
沒有留言:
張貼留言