NodeBB實踐-手把手教你搭建一個本身的論壇

時間 2019-11-05

標籤 nodebb 實踐手把手搭建一個本身論壇简体版

原文原文鏈接

論壇這個東西出現的挺久了，如今也並不是新潮的事，可是一個公司，有了不少的客戶，要是有個論壇的話，能讓客戶或者員工在本身的論壇上吐吐槽、反饋下意見，那也是一件挺加分的事。html

搭建一個本身的論壇又不難，跟着下面教程來吧，只須要半天時間，給本身的公司加加分吧：）node

1.Nodebb介紹

NodeBB是Design Create Play開發的一款使用Node.js構建的論壇系統，使用redis或mongoDB數據庫，採用web socket技術實現即時交互和實時通知，具備許多開箱即用的現代功能，如社交網絡集成和流媒體討論。ios

在github上有不少其餘開源的論壇，nodebb不敢說最受歡迎也能夠說最受歡迎之一了，最收歡迎的緣由，可能就是可以靈活擴展三方插件的特性了。nginx

名詞解釋：BB=bulletin board(電子公告牌)git

優勢
- 一、樣式漂亮、現代化
- 二、有插件機制
案例
- 青雲社區 community.qingcloud.com/categories
- 使用nodebb的全球網站列表參見:Websites using NodeBB
- 使用nodebb的中國區網站列表參見:Websites using NodeBB in China

2.Nodebb安裝與部署

太囉嗦的忽略，只講有價值的部分以Ubuntu環境爲例，參見官網Installing on Ubuntugithub

2.1.前置條件

【必要條件】node環境要求8.0版本以上
【必要條件】mongodb數據庫或者redis數據
【可選】nginx，若是須要域名訪問時則要經過nginx作代理；若是僅僅練手，經過http://host:port便可，不要用到nginx

2.2.nodebb setup

nodebb軟件的安裝很是簡單，就是一個setup命令web

git clone https://github.com/NodeBB/NodeBB.git nodebb
cd nodebb
./nodebb setup
複製代碼

中間要求確認和輸入一些參數，其它不重要，惟一關鍵的是 mognodb uri，格式爲mongodb://test:test@127.0.0.1:13722/lcz_test1redis

安裝完畢後，會提示下面語句，記住這個用戶名和密碼，登陸時用mongodb

An administrative user was automatically created for you:
    Username: admin
    Password: 76b44905

NodeBB Setup Completed. Run "./nodebb start" to manually start your NodeBB server.
複製代碼

2.2.1.查看配置信息

nodebb setup執行完畢後，產生的配置參數能夠經過cat config.json查看:數據庫

{
    "url": "http://localhost:4567",
    "secret": "dde91a41-27ca-4c72-bba8-924cc4346851",
    "database": "mongo",
    "port": "4567",
    "mongo": {
        "host": "127.0.0.1",
        "port": 27017,
        "username": "",
        "password": "",
        "database": "nodebb",
        "uri": "mongodb://test:test@127.0.0.1:13722/lcz_test1"
    }
}
複製代碼

2.3.啓動並訪問

經過下面命令啓動：

./nodebb start
複製代碼

而後瀏覽器用經過：http://localhost:4567 進行訪問

沒有任務配置的論壇首頁以下：

2.4.關於報錯：「與 NodeBB 的鏈接斷開，咱們正在嘗試重連，請耐心等待」

在config.json中增長

"socket.io":{
    "origins":"*:*"
        }
複製代碼

而後部署並重啓就能夠解決這個報錯，命令以下

./nodebb upgrade
./nodebb restart
複製代碼

3.Nodebb的基礎配置

通過下面幾個配置，論壇看起來纔有點像本身的論壇

3.1.語言、站點標題、主題和皮膚

主題配置路徑：/admin/appearance/themes
皮膚配置路徑：/admin/appearance/skins
語言配置路徑：admin/general/languages
」站點標題「配置路徑：admin/settings/general

3.2.窗口部件

3.2.1.右側窗口部件-使用教程提示

在配置路徑(admin/extend/widgets-->categories.tpl / sidebar),從「可用的窗口部件」中選擇HTML，而後編輯要顯示的內容以下

<li>
    <a href="http://www.baidu.com">
        <strong>榕樹下論壇支持視頻播放啦</strong>
        <br/>使用教程、精彩課程
        <br/>期待更多內容吧~
    </a>
</li>
複製代碼

其中 Container內容填寫：

<div class="alert alert-danger">{{body}}</div>
複製代碼

3.2.2.右側窗口部件-最近訪問用戶展現

在配置路徑(admin/extend/widgets-->categories.tpl / sidebar)：從「可用的窗口部件」中選擇,"latest users"，而後修改參數以下

Title填寫爲：最近訪問

其中 Container內容填寫：

<div class="panel panel-primary">
   <div class="panel-heading">
     <h3 class="panel-title">{{title}}</h3>
   </div>
   <div class="panel-body">{{body}}</div>
</div>
複製代碼

3.3.頂部窗口部件-最近主題

在配置路徑(admin/extend/widgets-->categories.tpl / sidebar),從選擇recent cards( 能夠參照下節插件安裝 )，這個插件不用改參數，直接使用默認參數便可

部署完畢後的首頁以下，看起來有點像本身的樣子了吧：）

4.插件安裝

4.1.典型安裝：以安裝recent-cards爲例

尋找插件，輸入'recent','cards'：（admin/extend/plugins#download）
選擇安裝
啓動插件: （admin/extend/plugins#installed）
部署並重啓，
- 經過 ./nodebb upgrade 和 ./nodebb restart
- 或者點擊右上角的「部署並重啓論壇」
才能夠admin/extend/widgets頁面的」可用的窗口部件「下拉列表中看到這個名字

4.2.非典型安裝：上傳文件到阿里雲OSS的插件

論壇建立後，在一個帖子粘貼圖片，能夠看到下面內容,這種方式是保存在本地，默認圖片存儲路徑：./public/uploads/files/

![9790b9eb-e330-47fc-a0dd-d49535d0f443-image.png](/assets/uploads/files/1567754565220-9790b9eb-e330-47fc-a0dd-d49535d0f443-image.png)
複製代碼

有個第三方插件能夠把圖片上傳到阿里雲，插件的名字是nodebb-plugin-alioss-uploads

不過這個插件的啓動方式比較特殊，部署安裝後，還須要經過export參數的方式，把參數傳遞給插件。

須要在執行nodebb start以前，先export參數，以下

export OSS_ACCESS_KEY_ID="LTAI9ziVIDTcSb**"
export OSS_SECRET_ACCESS_KEY="fsITkWUPxjfljcS3lEsdZSlGBlGh**"
export OSS_DEFAULT_REGION="oss-cn-hangzhou"
export OSS_UPLOADS_BUCKET="jfjun4test"
export OSS_UPLOADS_HOST="http://jfjun4test.oss-cn-hangzhou.aliyuncs.com"
export OSS_UPLOADS_PATH="temp-nodebb"
複製代碼

這個插件部署成功後，再圖片上傳後地址以下，發現圖片地址就已是阿里雲上的地址了

![34e65e5f-583b-44e5-855d-953b4e9c7fee-image.png](http://jfjun4test.oss-cn-hangzhou.aliyuncs.com/temp-nodebb/dd09d788-fb77-4d70-a610-5d9ab4c5b5a8.png)
複製代碼