DD Story Hub 文章搬運指南 🚚

嗨嗨 DD Story Hub 的各位～雖然網站上線時間一再延拓 XD，但在規劃會議的一個月之後，我們終於來到了網站準備正式上線的階段了🎉！

這篇文章原本是想教大家如何在我們的網站上發布文章，但這樣資訊量可能一次會太多，所以我們就先從「如何上稿」開始吧！

這篇文章的 markdown 檔案也同步發布在HackMD上！各位可以參考對照一些語法/元件上的使用方式～

文章的基本檔案結構

如果在 DD Story Hub 要發表一篇文章，我們只需要準備：

• 一份以 文章slug 為檔名的 .md 檔案
• 一個以 文章slug 為名稱的資料夾，用來放這篇文章會用到的一些檔案（圖片 … 等）
• 一張 1200 * 630 的封面圖片，並將此圖片命名為 cover.xxx

以現在這篇來說，目錄結構會長成像這樣：

/
│ guideline.md
│  
├──── guideline
│         cover.png
│         2.png
│         3-left.png
│         3-right.png
│          ...
│          ...
│        

看起來很簡單ㄅ！

Markdown 撰寫注意事項

這邊我覺得大家需要注意的地方只會有一個，就是做任何事情 「多多換行絕對不事件壞事，但不換行就有可能會出事」 ！

舉例來說，如果這個段落只有按一次 Enter 文章中其實是不會分段的！（請對照 Markdown 檔案來看，就會明白了！）

但像是這個段落，不管我在 Markdown 檔案中換多少行

它只會把這段當成獨立的一段！不會因為換比較多行，段與段之間的空白就變多，所以不要怕，當你想要分段的時候請盡量按 Enter 吧。

而這種需要換行的概念不只用在段落而已，使用接下來介紹的各種元件時，也請多多注意這件事～

各式各樣的元件介紹

目前我和T編根據各位在 Medium 上的使用習慣，製作了兩種主要類型的元件：

• 基本款元件：像是一般的文章段落、連結 … 等，我們都有做一些基本的風格化處理，大家只需要正常寫 Markdown 語法就好了
• 特製款元件：功能多變，但使用時需要引入特殊語法

基本款元件 👀

以下元件的使用示範請對照這篇的 Markdown檔案～

H2 標題

H3 標題

一般的文字段落

引言

如果要在引言中分段，也請記得換行嘿

引言中加入連結也是沒問題的！

使用粗體字

打一點 code 在段落中

• 列表1
• 列表2
• 列表3

分隔線⬇️

特製款元件 ✨

特製款元件，需要寫一些些類似像 html 的 code，但請別擔心，這些使用上都還算簡單(?)

目前我們有以下這幾種特製款元件：

• Img ：圖片嵌入元件，可以依據編輯需求，使用4種不一樣的圖片嵌入模式
• Bookmark ：書籤元件，用來放一些參考資料的連結，它的好處是可以顯示連結的一部分預覽圖以及文字
• LittleGreyBox ： 小灰盒元件，嗯，就是另一種文字方塊
• TableOfContents ：文章目錄元件，通常會像這篇一樣擺在文章開頭處，但不一定強制要放

現在就馬上來介紹各種元件的使用方式！以下元件的使用示範也請對照這篇的 Markdown檔案～

🌟文章目錄🌟

.

🌟小灰盒🌟

🌟Bookmark🌟

🌟圖片🌟

圖片會稍微小小複雜一點，所以先用文字說明一下需要注意的地方：

• type 參數總共有4種可以設定，分別是 base(預設)、cover、base-text、side-by-side，它會影響圖片的 layout
• src 開頭參數的 input 都是 路徑，圖片的路徑目前要寫成：../../assets/article/slug名稱/圖片檔名 or 圖片檔名 都可以
• alt 開頭的參數都是圖說，跟一般的 img tag 寫法一樣

👊圖片：一般圖片👊

如果要使用一般類型的圖片，type="base" 會是預設值，所以不用特別填！也可以選擇要不要加上圖說，但要記得 <Img> 中的 / 要不要加～（直接參考 Markdown 檔案）

👊圖片：圖左文右👊

👊圖片：在左右兩旁站好👊

👊圖片：滿版就是讚👊

😼iframe😼

大家可能會常用一些線上工具作圖，這邊也可以直接使用 iframe 的 html code 來嵌入

如何從 Medium 搬運文章？

這次上傳部分我會先負責處理，要麻煩各位的是搬運、上稿的部分，步驟如下：

1. 先建立一個以自己 id 為名稱的資料夾
2. 並在這個資料夾中以一開始介紹的檔案結構來放文章進去，所以這個資料夾中會有很多個 202x-xxxx.md 檔案和202x-xxxx 資料夾，
3. 把 Medium 文章內的圖片下載到對應的 202x-xxxx 資料夾中，我試過以滑鼠檔案拖曳的方式可以挺快的，建議圖片的檔名可以重新命名成比較單純的名稱，這可以加速後面的上稿
4. 上稿，以這篇的格式來對這些文章進行上稿，上稿建議可以直接使用 HackMD 來當作編輯器，有一些地方可以做簡單的 debug（例如分段），最後再用 HackMD 右上角的輸出功能，直接把檔案輸出成 .md 檔
5. 重複 2-4 的動作後，將以自己 id 名稱命名的資料夾進行壓縮，上傳到這個空間，可能要登入 DD 的 google 帳號～

以上，如果有不清楚的地方，請隨時來問 Steven！最後再次感謝大家！