在網頁後台中的 dirty hacking

敝校原本的系所網頁可能是很多年前找資訊廠商撰寫的。看了一下後台管理系統和 code 判斷,那時候還是傳統的介面,固定左 欄的選單,中間是主要資訊呈現框架,上方有個仿效目前大圖輪播的設計(但只有 700 px 左右的寬度)。整體而言要更動不是很方便,後來聽計中說她們每天光是要應付各系所寫爛的 html 就沒時間了,遑論是再加上新功能。某天接到學校公文說有個系所網頁比賽,希望各系在原本的「大圖輪播」區呈現招生亮點,原本覺得這種比賽很無聊,但看在系辦小姐更新網頁已經愁眉苦臉的狀況下,加上前三名還有獎金(雖然區區幾千塊,但可以請人來演講或是課程帶學生出去有經費,我覺得在經費逐年遞減下不無小補),就開始研究怎麼用大圖輪播的功能,研究了半小時,我決定放棄 XD 因為後台只有 Internet Explorer 可以正常運作,用Chrome 或是其他瀏覽器都只有部分功能可用,所以就想說這種偏靜態的網頁可使用 jekyll + bootstrap 來解決,可是學校後台無法直接改 css,我就使用 github pages 當做大圖輪播的 server,然後在學校網頁對應大圖輪播的區塊嵌入 iframe 作為解決方案,當然也可以同時有響應式網頁設計(但這個後來我就沒空做的比較細緻,老實說我是前端苦手,html5/css3/js 都只會一點點)。

一開始其實沒有很順利,因為版型的關係,無法修改。後來在計中辦的教育訓練中,剛好和隔壁資訊系同學聊天(忘了問你的名字,如果你有看到這篇我請你吃個飯感謝你 XDD),他們系上也是碰到類似問題,是嵌入在「公告事項」中,大概長這樣:

<style>
    #iframe {
    border: 0px;
    left:0px; }
</style>
<iframe id="iframe" src="https://ncyubrd.github.io" width="100%" height="500px" style="overflow: hidden;" scroll="no">
</iframe>

以下是個懶惰簡單的 how-to:

關鍵字: jekyll, github pages, bootstrap (因為都是 workaround,有興趣自己查一下資料 XD)

  1. 我找了個 landing page 的 jekyll 範例 https://github.com/swcool/landing-page-theme
  2. 修改大圖輪播的 code,其他不相關的部份就刪除
  3. 在 _layout 目錄中修改 default.html
    <!DOCTYPE html>
    <html>
        {% include head.html %}
        <body>
            {% include header.html %}
            {% include carousel.html data=site.data.carousel %}
        ...略...
        </body>
    </html>
    
  4. 在 _include 中新增 carousel.html,並設計會出現 picture.title (大圖輪播的每個頁面標題)、picture.caption (大圖輪播的說明) 等變數,這些資訊是寫在一個 json 檔裡頭,之後要維護比較方便。
 <div class="item active">                                                                    
   <img class="first-slide" src="img/{{ picture.imgurl }}" alt="{{ picture.title }}"> 
   <div class="container">                                     
     <div class="carousel-caption">                                              
       <h1>{{ picture.title }}</h1>                   
       {{ picture.caption }}                                             
       <br/>                                      
       {% if picture.urldesc %}                                         
       <p><a class="btn btn-lg btn-primary" href="{{ picture.url }}" target="_blank" role="button">{{ picture.urldesc }}</a></p>                     
       {% endif %}                                 
     </div> 
   </div>                                                  
 </div> 
  1. 新增 data 目錄,裡頭的放 carousel.json,內容大概就是
    {
      "title": "特色講座:野望影展",
      "caption": "本系每學期都會和臺灣野望自然傳播學社合作,搭配環境教育學程,
        播放國內外相關的野生動植物生態紀錄片,並由系上老師導讀",
      "imgurl": "wildfilms.jpg",
      "url": "http://www.wildviewtaiwan.org.tw/festival",
      "urldesc": "更多資訊"
    },
    
  2. 把照片放在 img 目錄內(附檔名要對)
  3. 剩下設定看一下 [Using jekyll as a static site generator with github pages)(https://help.github.com/articles/using-jekyll-as-a-static-site-generator-with-github-pages/) 就可以了

不過以上都是 dirty hacks,正本之道應該是整體網頁後台系統換成 wordpress 或是 drupal 之類的開源內容管理系統(如果有經費的話)

相關資訊

  1. 敝系網頁
  2. 大圖輪播的頁面

Comments

comments powered by Disqus