# Twitch 聊天室連動 StreamLabs 套用至 OBS(追隨訂閱音效教學篇尚未完成)

## 介紹
提供實況介面更好的表現, 對於英文苦手者一篇相對易懂的教學

## 聊天室語法提供
* [炙燒鯊小](https://www.twitch.tv/nemuiii_) @nemuiii_
* [海底仙人](https://www.twitch.tv/hiroii_) @hiroii_
* [下載連結](https://1nem5u.booth.pm/items/2444227)
> **請勿二次上傳或說是自己製作的**

## 事前準備需求
* Twitch 帳號
* 原生 OBS 或是 StreamLab OBS

## 詳細步驟

### 1. 連動 twitch & streamlabs(已擁有StreamLabs帳號的可跳到第2步驟)
* 進入 https://streamlabs.com/login?r=https://streamlabs.com/dashboard
* 選擇 twitch


* 進去後授權連動


* 跳過選擇實況來源


* 跳過抖內設定(有需要者可事後自行研究)


* 選擇一般免費計畫即可(若是願意支持 StreamLabs 也可選擇付費方案, 將可有更多支援可用)


### 2. 設定聊天室語法

* 完成後會跳至總覽頁面, 選擇紅色框框的地方


* 點進去後 滑到最下方 將Disable 選成 Enabled


* 將下方大框框內的程式碼全部刪除, 並下載連結中所提供的程式碼貼於對應區塊
* 下載壓縮檔後 解壓縮, 會看到 HTML&CSS 兩個檔案


* 分別將對應的內文, 透過記事本打開並複製下來, 貼至下方圖片顯示的框框內(兩個檔案內容要分別貼對唷)


* CSS 設定中有預設一個聊天室徽章


* 若是想更改那個預設的徽章, 可至 https://cappuccicons.com/ 內尋找喜歡的圖案並記下代碼,複製下方程式碼貼進裡面, 並於 content 內把 \ec8e 刪掉並貼上自己剛剛複製的代碼即可


.name:before{
  content:'\ec8e   ';
  font-family:'honeybee';
  font-size:{font_size};
  color: {color};
  /* add whatever styles you want */
}

* 完成後記得儲存設定(按下 Save Settings)

### 3. 套用至 OBS

* 滑到上面, 複製 URL


* 打開 OBS
* 於來源欄位-> 點選新增-> 瀏覽器


* 名稱可以自訂, 例如: 聊天室 命名完成後點選確定


* 把剛剛複製的網址, 貼進網址列的地方, 並按下確定


* 完成後就可以到自己的頻道留言, 看看OBS有沒有正常顯示唷


## 後續說明

* 以上教學使用 StreamLabs 提供的便利工具來做顯示頁面設計, 網頁內有文字顏色和底色框框的設定可以細個人化設定

* **聊天室語法提供**
* [炙燒鯊小](https://www.twitch.tv/nemuiii_) @nemuiii_
* [海底仙人](https://www.twitch.tv/hiroii_) @hiroii_
> **請勿二次上傳或說是自己製作的**

* 追隨提示和訂閱通知也都是同樣的形式可於 StreamLabs 內去做設定, 若是有需求反饋再考慮做第二篇教學文

## 教學文撰寫者 雨日晴夜