組專題首頁製作

數位媒體實作 組專題首頁製作

一個專題會有一個專題首頁及多篇子文章,以下說明專題的呈現方式。

by 郁彬

必要資訊

  • 出刊時的期別ID
  • 專題首頁文章ID
  • 子文章ID
  • 子文章縮圖連結

取得相關資訊

新增好專題首頁及其他子文章後,必須觀察這些文章的ID。

如何觀察文章ID?

每個文章在新增後,即會有屬於該篇文章的文章ID,這個ID會一直跟著這篇文章,除非將文章刪除。

可以把文章的預覽打開,觀察他的網址,例如有一篇文章的預覽網址是:

http://castnet.nctu.edu.tw/castnet/article/16666?preview=1

則他的文章ID就是16666

如何觀察期別ID?

跟文章ID一樣,期別ID在期別產生後就決定了。

到喀報首頁點選『最新這期』的期別。

可以看到最新期別的所有文章,該網址是:

http://castnet.nctu.edu.tw/castnet/issue/690

觀察可得知,第287期的期別ID是690

那下一期的期別ID就是往後推1號,推算得知第288期的期別ID是691
(大家直接用上用的方式來查看ID就好,不用真的去算)

如何觀察縮圖連結?

文章在設定好縮圖後,點『預覽』,然後右鍵『檢視網頁原始碼』

在HTML的頂部尋找<meta property="og:image" content="http://...">
(如上圖第19行)
該標籤的content值就是該文章的縮圖連結,之後會用到。
圖片中的縮圖連結為

http://castnet.nctu.edu.tw/files/article/607/thumb/20180429055434_1524952474_eAa9Vidiwj.png

專題首頁

一篇專題首頁需要有
– 主標題
– 專題前言
– 各篇作品縮圖+摘要之超連結

上述相關規範以上課公告為主,不確定的人請向組長或總編或老師確認。(請不要找我)

標題跟專題前言就像寫文章那樣,重點要說的是帶出其他子文章的方法。

因為多多沒有相應的設計,所以編輯的時候要切換到『原始碼』模式,寫相應的HTML。

專題首頁帶出一篇子文章

基本HTML架構

<div class="topic-box" data-link="{文章ID}?issueID={該文章的期別ID}">
    <img src="{該文章的縮圖連結}" />
    <h2>子文章</h2>
    <p>子文章的摘要</p>
</div>
  • 文章ID,就是上面提到的文章ID,是一串數字
  • 該文章的期別ID,這篇文章的上稿期別ID,通常是目前最新期別+1 (目前最新的下一期)
  • 文章的縮圖連結,每篇文章上傳縮圖後該縮圖會有自己的連結
  • 注意,不用打上大括號 {},可以參考下面範例

範例

<div class="topic-box" data-link="12656?issueID=690">
    <img src="https://castnet.nctu.edu.tw/files/article/475/thumb/20180428132731_1524893251_9gdBSXLYnM.png" />
    <h2>女力爆發 MS聶小倩的遊戲旅程</h2>
    <p>看MS怪獸的聶小倩,從比賽初次展露頭角,一直到經營遊戲實況的心路歷程。</p>
</div>

預覽效果(mouseover)

點擊該區塊可以連結到該篇子文章。

子文章

子文章就像平常寫喀報文章一樣,唯一不同的是子文章的文章末端,加上回到專題首頁的連結。方便讀者返回專題首頁觀看其他文章。

HTML結構

<span>▶</span>
<a class="topic-back" href="{專題首頁文章ID}?issueID={期別ID}" target="_self"> 
    回到【XXXXX】專題 
</a>
  • 專題首頁文章ID,顧名思義,恩,一串數字
  • 期別ID,跟上面提到的期別ID一樣(也就是即將要出刊的期別ID)
  • 注意,不用打上大括號 {},可以參考下面範例

範例

<span>▶</span>
<a class="topic-back" href="18787?issueID=691" target="_self">
    回到【XXXXX】專題
</a>

預覽效果


大致上Joe4John

檢查重點

  • 注意期別ID需要寫即將出刊的期別,不是目前的最新期別
  • 文章ID、期別ID不要搞錯,因為該文章還沒出刊,所以點了看不到(會出現404頁面),建議可以先把這些資訊整理起來,方便查找
  • 在喀報的頁面之間跳轉,a標籤的target使用_self,不要新開分頁

有什麼其他檢查或常出現的錯誤,再麻煩編輯補上,這份文件是可以自行編輯的!