很多的朋友有自己整理Youtube影片的需求，大部份的朋友直接使用Youtube上的播放清單，把自己喜歡的影片都放在清單中，日後可以直接透過這個播放清單就可以看到自己整理的影片列表。但是，如果你整理這些清單的目的，是為了和其它的網友分享，有自己的網頁版面，可能更能突顯您想要表達的訴求。
建立一個網頁，把這些影片整理在你自己的網頁中，既然是自己的網頁，那麼想要在網頁中放哪些廣告或內容，就可以自己決定，彈性比較大。這篇文章，何老師就要教大家，只要利用這樣現成的TubeLists模板，不需要會Javascript以及jQuery等網頁技術，就可以整理自己喜歡的影片清單，加入自己的廣告內容，變成自己的宣傳網頁或是影片訊息整合網頁。首先，還是請大家先看【賀寶芙影片集】和【旗艦手機影片集】這兩個網站。
有沒有發現這兩個檔案內容模板一模一樣但是影片內容完全不一樣？！對了，這就是我們要介紹的範本！這個範本主要是以Javascript和jQury寫成的，為了方便大家使用，裡面主要的元素「影片」是放在Javascript的陣列中，所以，你只要把這個網站中的其中兩個檔案index.html以及main.css下載回去，然後使用文字編輯器打開index.html這個檔案，找到檔案中的說明，然後再把你要放在網站中的影片標題程影片的Youtube ID放進去，就大功告成了。沒錯，你只要會編輯文字檔，你就可以把這個網站改為你自己的！下載檔案的連結如下：
[wpdm_package id=’2414′]
當然，第一個步驟就是要有自己的網址。便宜的網址，可以在這裡：【BuyName4.me】或是這裡：【中華虛擬主機網】中購買，挑一個正在促銷中便宜的就好了。當然您可以使用免費的，不過，免費的網址比較沒那麼漂亮，也比較不穩定。另外，您可以可直接跟有送網址的主機商購買，一次擁有網址和主機空間。有送網址的主機商包括【iPage】、【GreenGeeks】、【Arvixe】【iMaxNOW】等等。
TubeLists必須放在一台虛擬主機中，Linux或是Windows主機均可。當然也有免費的主機可以選擇，如【Yabi.Me】以及【000webhost】等，但是如果要有比較好的效能，還是以前面所介紹的幾個付費主機商為主。另外，如果您已經有了網址（例如【在PCHOME買國內網址】），那麼可以考慮【HostGator】這個主機，它們在國外的主機評比還算不錯。【什麼是虛擬主機】以及【如何選擇虛擬主機】也請參考這兩篇文章。
假設你已經有主機以及網址，而且可以登入主機的主控台的話，請把在前面下載完的檔案在你的電腦中解壓縮，就會出現2個檔案，分別是index.html以及main.css。請利用您的文字編輯器（推薦使用Sublime Text），找出index.html中以下的程式片段：
您要改的地方大到就是兩個，一個是變數webtitle後的文字，那是在網站右上角處的網站標題，另外，在vieolist中，也就是我們用紅色線框起來的地方，就是Youtube影片的連結文字和影片ID，而其中影片ID就是Youtube在播放影片時，網址處我們用紅色線框起來的地方，如下：
所有在這些列表中的影片，前面8支影片會被放在主選單中連結，而其它的部份則被放在左側邊欄，如下所示：
另外，我們在範本中還放了3個廣告位置，分別放在上方的橫幅，寬度為728×90，左側邊欄下方，格式是336×280，還有一個是影片的下方，是468×60的廣告格式。您可以置換成自己的Google Adsense廣告單元，或是換成同等大小的圖片內容，做為自己的網站訊息。
全部改好之後，請直接進入虛擬主機的控制台中，找到檔案管理員，如下所示（在此我們以iMaxNOW的cPanel為例）：
我們這個帳戶的網址是cash.oo.gd，因為在此之前已經建立好一個子網域叫做make.cash.oo.gd，而且把此子網域指向public_html底下的make目錄，所以檔案結構看起來像是下面這個樣子：
在這裡我們只要確認你目前的目錄是make，然後按下【上傳】按鈕，然後把我們之前改好的那兩個檔案index.html以及main.css分別上傳到目錄中，如下所示：
基本上就大功告成了。您可以使用http://make.cash.oo.gd或是http://cash.oo.gd/make這兩個網址來連結上我們的影片集網站。在這裡，如果還需要再個別修改影片資料的話，只要點選程式碼編輯器，也可以直接在此編輯，非常方便。
下一篇文章，我們再來教大家這個模版網頁的編寫Javascript以及jQuery原理，敬請期待。
(776)
近期留言