簡要教學: 「協助編輯」 @ 小說首頁

此文章是基於我在 ESJ 編輯小說資訊的個人經驗(所以內容可能有誤), 主要是分享給新手, 以增進新手在 ESJ 上編輯小說首頁的技術水準。
(畢竟偶爾會有人在留言版提出相關問題~)

其他參考連結: (點擊展開)

前置知識

注意, 本文為了解釋各種機制、 概念, 使用了一些我自定義的名詞, 並非正規使用的專有名詞。
(例如「篇章」、 「細節(<details>)」等等)

  • 絕對路徑網址(Absolute URL): 簡略的說法, 就是含通訊協定類型、 伺服器名稱等等完整資訊的網址(URL)
    例如: https://www.esjzone.one/forum/1234567890/123456.html
  • 相對路徑網址(Relative URL): 簡略的說法, 就是省略通訊協定類型、 伺服器名稱等等部分資訊的網址(URL)
    例如: /forum/1234567890/123456.html
  • 小說首頁: 是指網址類似 https://www.esjzone.one/detail/1234567890.html 的頁面, 內容就是小說的相關資訊、 章節列表、 用戶評論、 用戶回應等等。
  • 協助編輯: 是指小說相關設定的編輯頁面/視窗。 設定範圍主要但不限於小說首頁的內容。
  • Froala 編輯器: ESJ 主要的內容編輯器。 例如小說內文、 用戶回應等。
    一般運作下, 一個 Enter 會生成一個 HTML 的段落(<p>)元素(Element)
  • 開發者工具: 本文內的「開發者工具」, 主要是指瀏覽器(Browser)內建的網站開發者工具(Web Developer Tools)

關於「協助編輯」

  • 若用戶有小說的管理權限, 則會在小說首頁看到協助編輯的功能按鈕。
  • 在「協助編輯」視窗下, 你可以修改小說的資訊、 設定、 章節。

「基本資料」分頁:

  • 書名: 這裡放的是會在小說列表(例如:「一週更新」)與論壇中所顯示的名稱。
    有些人會放與小說名稱或譯名相差甚遠的自訂名稱; 原因很多, 要嘛是自己看得順眼、 要嘛以閃避糾紛等等。
  • 其他書名: 這裡可放小說原名(例: 日文原名、 韓文原名)、 譯名(例: 中文譯名、 英文譯名)等, 分隔方式隨意; 我個人習慣半形逗號(,)或分號(;)
  • 封面: 這裡可放小說的封面、 人物等相關圖片的網址。
    例如: https://host.name/path/to/Image.webp
    (我個人目前在 ESJ 偏好使用流浪图床; 在使用圖床時, 請注意各圖床的使用規範, 以避免意外狀況。)
  • 作者: 這裡可放小說的作者名稱。
  • Web生肉: 這裡可放小說的原文網址。
  • 其他連結: 這裡可放小說相關的網址, 例如官方網站、 漫畫網站、 Wiki 等等。
    若內容(「名稱」或「連結」)留空, 在按下送出後, 該無效項目會被清除。
  • 內容類型: 這裡供放小說的關聯標籤(Tag), 以半形逗號(,)分隔。
    例如: 冒險,奇幻,主角(男),原作完結,漫畫化,韓輕
    除了可參考旁附的「小說Tag參考」外, 雖不建議, 但亦可放自訂的。

「進階設定」分頁:

  • 開放編輯: 是否讓「任何會員」修改「協助編輯」。 建議關閉。
  • 開放評論, 顯示評論: 評論是指給「星等」的「評論(Review)」。
  • 開放發文: 是否讓用戶在小說論壇發布文章。 建議關閉。
  • 開放留言, 顯示留言: 留言是指小說首頁下方的用戶「回應(Reply)」。
  • 小說下架: 設定是否讓小說供用戶閱覽。

其他在此分頁的設定, 我就不贅述了。


「小說簡介」分頁:

這裡是使用 Froala 編輯器來編撰小說簡介的地方, 可放故事概要、 公告事項、 補充說明等等。


「章節整合」分頁:

  • 最新一話(紅色半透背景區塊):
    • 這區塊是設定小說的「最後更新」之資訊, 主要用途在「一週更新」等需要知道小說更新狀態的頁面。
    • 第一個欄位是設定最後更新的章節標題, 不必與文章的標題相同。
      (例: 若文章標題「第十三章 趁你病, 要你命!」, 在這裡可輸入「13: 落井下石」也沒差~)
    • 第二個欄位是設定最後更新的章節網址, 必須使用完整的「絕對網址」, 不可使用「相對網址」; ESJ 會自動轉換網域名的 ccmeone
      (我很久以前的測試是不能用相對網址。 對我來說相對網址比較方便且直觀, 我不知這裡為何只能用絕對網址。)
  • 章節列表: 這區塊是放章節列表, 使用 Froala 編輯器

關於章節列表的編輯:

章節列表中, 使用「絕對網址」連結(<a>)的「段落(<p>)」, 會被視為一個「篇章」:

  • 篇章: 在閱覽小說內文時, 篇章用作導航功能之上一篇下一篇跳轉的選用。
  • 「篇章」的段落, 需至少使用一個「絕對網址」連結; 若內含兩個以上的連結, 則會使用「第一個」「絕對網址」作為篇章的連結。
  • 「非篇章」的段落(例: 後續篇章的前置說明短文), 若有需要時, 僅可使用「相對網址」連結; 若用上含有絕對網址連結, 則會被視為篇章

章節列表中, 使用 HTML 的「細節(<details>)」作為可收折區塊的實作:

  • 細節(<details>)區塊常被用作大型章節的劃分、 或是數量上的劃分, 預設是收折的狀態。
  • 在編輯章節列表時, 細節(<details>)區塊的展開狀態會被儲存, 但在小說首頁上不會被正常設定。
  • 若想要在小說首頁上預設展開一個細節(<details>)區塊, 需要透過開發者工具(inspector), 設定細節(<details>)元素的屬性(Attribute) open="open"

章節列表在長時間的編輯下, 可能產生結構混亂。 若想要檢查或編修內容結構, 可利用開發者工具(inspector)編輯。
(例如: 刪除無法編輯的、 隱藏的、 或空的 HTML 元素(Element))


關於插入圖片:

  • 有些的網站會過濾 HTTP-header:Referer 而導致圖片在 ESJ 上無法顯示:
    當瀏覽器要求圖片等資源時, 正常程序會附上 referer 以表明要求的來源網址
    有的網站為降低負載等各種原因, 會過濾來源網址是否為自家網站或授權的網址, 據以判定是否要提供資料。
    (例如 i.pximg.net 就會檢查 referer 是否為 pixiv 的相關網站)

關於 Froala 編輯器:

  • Froala 編輯器的編輯內容之主要架構是基於 HTML, 所以可透過瀏覽器的開發者相關功能(inspector)來進行有限的內容編輯。
    (編輯器或伺服端會編修內容的原始程式碼, 所以開發者相關功能只能進行有限的內容編輯; 另, 過度濫用可能會導致伺服器異常而讓管理員盯上你~ 不論內容如何)

你的回應