秉持深度、開放、非營利精神，《報導者》自創立以來，每個數位新聞專題作品的原始碼皆公開於 GitHub 平台供社會大眾自由使用，在一次次的數位敘事實驗與研究中，我們發現有些功能適合單獨取出、應用在個別報導中，因此著手開發易於使用的新聞小工具（網頁元件），並公開釋出技術，讓不會寫程式的使用者也能透過《報導者》開發的「產生器」取得直接置入網頁中的程式碼，不必額外撰寫程式碼。
你的好故事可以有更多元的敘事選擇！「報導者開放實驗室」將陸續推出能夠「隨插即用」的網頁元件，有《報導者》過去經驗的再造，也不乏全新的敘事方法。
如何圖文並陳，讓資訊圖表變的更有深度？本文要介紹的元件「報導者／左右互搏版型」，是由《報導者》多次嘗試的多媒體敘事方式，所提煉出的版型，以下依序介紹使用步驟及操作範例。
﹡相關程式採 MIT 授權條款，程式碼公開在我們的 GitHub 上。
看圖說故事的網頁版型
為了提升使用者體驗，報導者嘗試過不少以「圖」為主，以「文」為輔的說故事方式。包括：
- 到了 2018 年才 22K！曾經凍漲十年的基本工資
- 台灣勞工職業病圖譜－新興的風險與隱藏的黑數
- 【圖解篇】被隱藏的醫療帳單：一年 600 億住院看護費誰該埋單？
- 網路聲量＝實際選票？24 張圖解密六都市長的網路聲量戰爭
- 從武漢到世界 ──COVID-19（武漢肺炎）疫情即時脈動
透過這些不同的嘗試，讓我們收斂出「報導者／左右互搏版型」（「左右互搏」取自金庸武俠小說中，周伯通自創的武功）。
會取名「報導者／左右互搏版型」，是因為此版型，分左（放圖）右（放字）兩邊，圖和字的變化有不同邏輯，但卻牽動彼此。
《網路聲量＝實際選票？24 張圖解密六都市長的網路聲量戰爭》和《從武漢到世界 ──COVID-19（武漢肺炎）疫情即時脈動》兩篇即是使用「報導者／左右互搏版型」。
此版型主要針對桌機和手機載具設計。
在桌機版本，版型分成左右兩半，左邊走圖、右邊走文，在走文時，圖是固定在瀏覽器左側，讓讀者能夠同時讀文也讀圖（見下圖1.）。
在手機版本上，版型分成上下兩區塊，上區塊置圖、下區塊走文，在走文時，圖固定佔據瀏覽器上方一半的位置，讓文走於其下，讀者同時讀文讀圖（見下圖2.）。此版型主要是「以圖走文」，所以視覺重心的部位（瀏覽器左方和上方）皆是以圖為主。
使用教學
步驟1. 版型名詞介紹
在「報導者／左右互搏版型」中，將呈現資料分成「章節」和「區塊」。
如圖3. 所示，深咖啡色的方框是章節，淺咖啡色的方框則是區塊。
一個區塊擁有一個標題、一張圖片和文章段落。
一個章節則擁有一個標題和數個區塊。
舉《武漢到世界 ──COVID-19（武漢肺炎）疫情即時脈動 》這篇為例，總共有5個章節，分別為「世紀之疫」、「台灣確診情況」、「臨床14大症狀」、「邊境嚴陣以待」和「抗疫持久戰」（註：由於該篇文章將隨疫情變化不斷調整，現在點進去看，不一定是上述這5個章節）。
在每個章節裡，又分別有不同的區塊；以「台灣確診情況」章節來說，共有4個區塊，呈現了4個標題、4張圖和4個文章段落。
在理解版型配置後，就可以嘗試透過「章節」和「區塊」的概念來編寫試算表。
步驟2. 建立你的試算表
我們採用 Google 試算表來串接「報導者／左右互搏版型」的文、圖和動畫效果等資訊。
點此建立範例試算表副本（此為 Google Drive 連結，會將範例試算表複製到你的 Google 雲端硬碟）（見圖4.）
步驟3. 按照試算表上的格式說明，填入資料
注意在修改資料時，不要改到試算表內的欄位順序，也不要改到有底色的保護儲存格。
試算表與「報導者／左右互搏版型」的對應如下（見圖5.）：
- 試算表的工作表（sheet）對應到「章節」，工作表名稱 = 章節名稱
- 工作表的一列（row）對應到「一個區塊」
- 每一列包含四個儲存格，依序是：圖片、圖片動畫效果（選填）、標題（選填）和文章段落。
（ ⚠️ 注意：儲存格的順序不能更動。）
填寫儲存格時應注意事項：
- 工作表名稱 = 章節名稱
- 圖片動畫效果：目前僅支援 fadeIn 和 slideUp 兩個效果（請注意英文字大小寫），若不想要有動畫效果，此欄可留空不填。
- 圖片：目前僅支援 html code（若不清楚如何填寫，可以複製範本裡的 html code 來改，將圖片網址置換成你要的即可）。
在下一個更新版本，使用者只需輸入手機圖片網址和桌機圖片網址，由系統自動產生響應式圖片。 - 標題：目前僅支援純文字，若該區塊不需要標題，可留空不填。
- 文章段落：目前支援純文字，也支援 html code。
步驟4. 設定共用、授權「機器人」讀資料
編輯完資料，下一步就是產出可嵌入程式碼，但此之前得先讓報導者機器人知道這份試算表。
有兩種方式可授權機器人，第一種是在 [共用] 設定中開啟與他人共用，無論是設為「公開」、「知道連結的人均可檢視」、「知道連結的人均可編輯」或「知道連結的人均可評論」，都能有效授權機器人，見圖6.。
第2種情形是，若你不想開放共用，希望維持試算表只有特定授權使用者可以看到，請記得輸入報導者機器人的email，授權報導者機器人帳號讀取： dual-channel@cloud-functions-268910.iam.gserviceaccount.com
⚠️ 請注意，授權機器人帳號讀取時，要記得將「通知邀請對象」打勾（見圖7.），如果沒有勾選通知，會跳出警告，因為機器人帳號和一般帳號不同，沒有辦法作登入動作，若略過傳送邀請，將會無法給予權限。
步驟5. 產生鑲嵌程式碼
請根據以下步驟產生「鑲嵌程式碼」（見圖8.）：
- 點此打開「報導者／左右互搏版型」產生器頁面
- 在第一個欄位中，填入你的試算表網址
- 依序填入你想要出現在網頁上的工作表 ID（註 1）
- 若不填工作表 ID，程式會自動抓取試算表上所有的章節。
- 點
Build按鈕 - 稍等一下，頁面會產生出「鑲嵌程式碼」
- 點選
一鍵複製按鈕，即可將程式碼貼到你的網頁裡。 - 若想在頁面上預覽結果，請點選「預覽」鍵。
註 1：點了試算表下方的工作表後（見圖9.），該網址的最後會出現 #gid=492967532， 492967532是該工作表的 ID，將此 ID 填入產生器中，即可產生該章節的內容。
步驟6. 複製程式碼片段（embedded code），貼至目標網頁的 HTML 中你想要顯示的位置。
注意事項
由於「報導者／左右互搏版型」是以圖為主，為了避免圖片被裁切、效果打折，請參照以下格式製圖。
桌機版
請以寬 415px，長 453px 的長方形來設計。
手機版
請以長 375px、寬 375px 的正方形來設計。
常見問題
1. 我可以將圖片上傳到哪裡呢？
可以將圖片上傳到有提供圖片託管服務的網路空間，並取得圖片的公開網址。
下面是幾個推薦用來上傳圖片的平台以及操作指引：
- Google 雲端硬碟
- Dropbox
- imgur.com
2. 若是我不熟 HTML 和 CSS，我該如何使用「報導者／左右互搏版型」？
現階段可以複製「報導者／左右互搏版型」測試資料 — Google 試算表來進行修改。
我們會根據使用者的回饋進行調整，希望之後的版本可以滿足你的需求，
為了進一步了解你的需求，請各位給予我們回饋。
回饋表單：https://forms.gle/qaKvMD2Ar2X4H2x37。
3. 如果我用 Infogram 產生圖（或圖表），我可以套用在「報導者／左右互搏版型」之中嗎？
Yes，你可以這麼做，你可以將 Infogram 產生給你的鑲嵌程式碼，輸入在試算表的圖片儲存格裡，
如此一來，即可套用 Infogram 在你的作品中。
4.「報導者／左右互搏版型」 支援哪些瀏覽器？
我們主要用來開發瀏覽器是 Google Chrome，經過測試，在 Firefox、Safari、Internet Explorer (IE 10 以上，含 IE 10)、Edge 都能夠正常運作。
5.「報導者／左右互搏版型」是否免費提供商業使用？
是，「報導者／左右互搏版型」使用 MIT 授權條款，可供商業使用且不需要支付任何費用，如您使用時能一併標明出處我們會非常感謝。
詳細授權資訊請見MIT授權條款頁。
給點意見回饋吧！
如果覺得小工具很實用，請給我們拍拍手 👏，鼓勵一下~
如果使用後有疑問，您可以透過以下任何管道給我們回饋意見：
2. 在《報導者》的 GitHub 上開 issue 或 open PR
3. 來信至報導者工程部信箱 developer@twreporter.org，我們將有專人為你服務 😘。
ABOUT 報導者開放實驗室 The Reporter Lab
「報導者開放實驗室」的任務之一，是提供開源的數位敘事小工具，增加說故事的方式，並且幫助減少資訊產製過程中不必要的重複工作，讓內容生產者能專注在生產優質的內容。
「報導者／左右互搏版型！」是我們所製作的各種小工具其中之一，若您對更多數位敘事及新聞幕後有興趣，歡迎追蹤我們的頁面👉 報導者開放實驗室 The Reporter Lab
⭐️ 新聞小工具系列：
之一、「橫著滾吧照片」產生器
之二、「大事記」圖表產生器
之三、「左右互搏網頁版型」產生器
之四、「捲動式影片」產生器
有你，才有《報導者》，邀您用行動支持！
優質深度報導必須投入優秀記者、足夠時間與大量資源⋯⋯我們需要細水長流的小額贊助，才能走更長遠的路。竭誠歡迎認同《報導者》理念的朋友贊助支持我們！
☛贊助報導者官網：https://www.twreporter.org/
臉書：https://www.facebook.com/twreporter/
