徒手撸了个markdown笔记平台
大家好，我是若川。今天分享一篇markdown筆記平臺的項(xiàng)目文章。
點(diǎn)擊下方卡片關(guān)注我、加個(gè)星標(biāo)，或者查看源碼等系列文章。學(xué)習(xí)源碼整體架構(gòu)系列、年度總結(jié)、JS基礎(chǔ)系列
一、前言
作為開發(fā)者，我覺的用markdown寫文檔是一件很酷的事情。在之前，想找一款合適自己的markdown平臺做筆記，嘗試用了有道云、印象筆記、作業(yè)部落等平臺，挺多功能需要收費(fèi)或者滿足不了，另外在產(chǎn)品設(shè)計(jì)上也不是自己想要的style，于是就想著打造一個(gè)屬于自己風(fēng)格的markdown筆記平臺。
二、各平臺markdown筆記差異
1.印象筆記
印象筆記印象筆記主要專注于word文本編輯，目前web端是不支持markdown語法編寫的。在2018年，印象筆記客戶端開始支持markdown語法。
使用markdown過程中的一些缺陷：
編輯器主題太少
文檔區(qū)域代碼不支持主題設(shè)置
外鏈訪問有限，僅支持移動端打開，并且下載app才能預(yù)覽。
不支持導(dǎo)出md文件、批量導(dǎo)出
2.有道云筆記
有道云筆記有道云也是專注于word文本編輯，支持markdown語法開發(fā)。界面相比印象筆記會美觀一點(diǎn)。
使用markdown過程中的一些缺陷：
編輯、預(yù)覽區(qū)域滾動相對體驗(yàn)不太友好，有點(diǎn)生硬。
預(yù)覽區(qū)域代碼不支持主題設(shè)置
不支持批量導(dǎo)出
3.其它平臺
比如作業(yè)部落，主要專注markdown筆記編寫，由個(gè)人開發(fā)的平臺，另外一些功能需要收費(fèi)才能夠使用，功能也比較局限。
總是來說，每個(gè)平臺的比較各有各的優(yōu)勢，同時(shí)也存在一些缺陷，由此也萌生了Hbook筆記這個(gè)平臺。
三、Hbook筆記
1.介紹
Hbook筆記是一款專注于Markdown筆記的平臺。
頭像圖片特性：
支持編輯器、文檔區(qū)域主題任意切換
支持編輯、文檔區(qū)域調(diào)整窗口大小
支持單個(gè)、批量導(dǎo)出md文件
支持文檔截圖
文檔目錄
文章支持分類
支持控制外鏈訪問
擁有自己的個(gè)人主頁
2.如何實(shí)現(xiàn)?
這是整個(gè)項(xiàng)目的一個(gè)架構(gòu)圖：
技術(shù)架構(gòu)圖完成這么個(gè)項(xiàng)目，你需要具備的一些基本能力和條件：
[x] 一個(gè)域名
[x] 一臺服務(wù)器（阿里云、騰訊云）
[x] web開發(fā)
[x] nodejs開發(fā)
[x] 安裝node
[x] 安裝pm2
[x] 安裝nginx
[x] 安裝mysql
[x] 安裝redis
看著好像有點(diǎn)多？我已經(jīng)為你準(zhǔn)備好了教程，一步步教你如何安裝部署。
安裝部署教程[1]
前臺實(shí)現(xiàn)
前臺頁面的核心實(shí)現(xiàn)其實(shí)就是編輯器，這里選用的是第三方 brace[2] 插件 ，brace支持各種語言的編輯器，這里選用 markdown 語法。
核心基礎(chǔ)配置：
import?ace?from?'brace' import?'brace/mode/markdown' editor?=?ace.edit('editor'); editor.focus();//?設(shè)置字體?請勿用亂用字體，否則會影響光標(biāo)位置問題， editor.setOption('fontFamily',?'Menlo,?'Ubuntu?Mono',?Consolas,?'Courier?New',?'Microsoft?Yahei',?'Hiragino?Sans?GB',?'WenQuanYi?Micro?Hei',?'sans-serif'); //?設(shè)置字體大小 editor.setOption('fontSize',?'18px'); //?設(shè)置內(nèi)容 editor.setValue(editContent); //?清除選中 editor.clearSelection(); //?設(shè)置編輯器語言模式 editor.getSession().setMode('ace/mode/markdown'); //?設(shè)置皮膚 vm.changeEditorSkin(vm.themeData.editor) //自動換行,設(shè)置為off關(guān)閉 editor.setOption('wrap',?'free') //?設(shè)置是否只讀 editor.setReadOnly(true?||?false);? //?是否展示行號 editor.setOption('showGutter',?false); editor.setOption('autoScrollEditorIntoView',?true); //?使用軟標(biāo)簽 editor.getSession().setUseSoftTabs(false); //?線條 editor.renderer.setShowPrintMargin(false); //?設(shè)置編輯器左右邊距 editor.renderer.setPadding(35);在用的過程中值得注意的事：
請勿用亂用字體，建議用默認(rèn)就行，否則會影響光標(biāo)位置問題。
編輯器內(nèi)容保存后出現(xiàn)xss問題，需要對文章內(nèi)容相應(yīng)的標(biāo)簽進(jìn)行處理。
另外拿到文本之后，你需要把markdown語法轉(zhuǎn)化成html展示，這里選用第三方 showdown[3] ?插件，詳情文檔可點(diǎn)擊查看。
使用示例：
import?showdown?from?'showdown' const?converter?=?new?showdown.Converter({tables:true,tasklists:true,ghCodeBlocks:true,simpleLineBreaks:true,openLinksInNewWindow:true,backslashEscapesHTMLTags:true }); const?content?=?converter.makeHtml(val);預(yù)覽展示已經(jīng)實(shí)現(xiàn)了，自然目錄也少不了，目錄只要把相應(yīng)的標(biāo)題標(biāo)簽全部找出來就行了，然后給每個(gè)不同的標(biāo)題做一些不同層級的樣式間距即可，大概實(shí)現(xiàn)方式：
const?vm?=?this; vm.anchorDom?=?[];const?anchorList??=?rc.querySelectorAll('h1,h2,h3,h4,h5,h6');anchorList.forEach(function(elem,index){const?tag?=?elem.localName;vm.anchorDom.push({index:index,tag:tag,text:elem.innerText})elem.setAttribute('id','anchor-'+index); })另外編輯器滾動的時(shí)候預(yù)覽區(qū)域也要相應(yīng)的滾動到相應(yīng)到位置，這邊采用比較簡單的方式，算出2個(gè)區(qū)域的高度比。
//?計(jì)算2邊高度的占比 getScale()?{const?rightDiff?=?rc.offsetHeight?-?right.offsetHeight?+?50;?//預(yù)覽內(nèi)容高度減去盒子固定的高度const?leftDiff?=?editor.renderer.layerConfig.maxHeight?-?left.offsetHeight;?//編輯內(nèi)容高度減去該盒子固定的高度return?rightDiff?/?leftDiff; }然后監(jiān)聽2邊的滾動事件做相應(yīng)的處理：
//?編輯區(qū)滾動 editScroll()?{const?scale?=?this.getScale();right.scrollTop?=?left.scrollTop?*?scale } //?展示區(qū)滾動 showScroll()?{const?scale?=?this.getScale();editor.getSession().setScrollTop(right.scrollTop?/?scale); }另外考慮到編輯器、預(yù)覽區(qū)域大小靈活問題，在中間滾動條也實(shí)現(xiàn)了可縮小或者擴(kuò)大區(qū)域，根據(jù)自己喜好來調(diào)整，具體實(shí)現(xiàn)方式就是監(jiān)聽 mousemove 事件然后改變左右2邊的寬度即可。
左邊菜單獲取到文章列表時(shí)需要生成樹結(jié)構(gòu)，實(shí)現(xiàn)方式：
/***?無限分類格式化成樹*/ function?toTree(data){//?刪除?所有?children,以防止多次調(diào)用data.forEach(function(item)?{delete?item.children;});//?將數(shù)據(jù)存儲為?以?id?為?KEY?的?map?索引數(shù)據(jù)列var?map?=?{};data.forEach(function(item,?index)?{map[item.id]?=?item;});var?val?=?[];data.forEach(function(item)?{//?以當(dāng)前遍歷項(xiàng)，的pid,去map對象中找到索引的idvar?parent?=?map[item.parent_id];//?如果找到索引，那么說明此項(xiàng)不在頂級當(dāng)中,那么需要把此項(xiàng)添加到，他對應(yīng)的父級中if?(parent)?{(parent.children?||?(parent.children?=?[])).push(item);}?else?{//如果沒有在map中找到對應(yīng)的索引ID,那么直接把?當(dāng)前的item添加到?val結(jié)果集中，作為頂級val.push(item);}});return?val; }后臺實(shí)現(xiàn)
后臺技術(shù)這里主要采用nodejs，核心主要在表結(jié)構(gòu)設(shè)計(jì)上，其它的相對還好。
這個(gè)項(xiàng)目的一個(gè)表結(jié)構(gòu)設(shè)計(jì)，僅夠大家參考了解：
用戶表
| id | Number | 是 | id |
| username | String | 是 | 用戶名 |
| password | String | 是 | 密碼 |
| String | 否 | 郵件 | |
| nickname | String | 是 | 昵稱 |
| mobile | String | 否 | 手機(jī) |
| desc | String | 否 | 描述 |
| avatar | String | 否 | 頭像 |
| province | String | 否 | 省份 |
| city | String | 否 | 城市 |
| source | String | 是 | 來源 |
| status | Number | 是 | 狀態(tài) |
文章分類表
| id | Number | 是 | id |
| user_id | Number | 是 | 用戶ID |
| parent_id | Number | 是 | 父級分類ID，0為第一級 |
| category_name | String | 是 | 分類名稱 |
文章表
| id | Number | 是 | id |
| title | String | 是 | 標(biāo)題 |
| content | TEXT | 否 | 文章內(nèi)容 |
| state | Number | 是 | 文章狀態(tài) 0 未對外開放 1 對外開放 2 禁止文章 |
| password | String | 否 | 文章訪問密碼 |
| browser_num | INTEGER | 是 | 閱讀數(shù) |
另外可對文章內(nèi)容設(shè)置的標(biāo)簽進(jìn)行更細(xì)一步進(jìn)行分類，通過標(biāo)簽篩選出相對應(yīng)的文章，這個(gè)實(shí)現(xiàn)邏輯比較復(fù)雜就不講了，有興趣的可以交流下。
基本上滿足以上3個(gè)表就可以搭建自己的一個(gè)文章庫了。
3.后續(xù)優(yōu)化
實(shí)現(xiàn)文章密碼訪問權(quán)限
新增導(dǎo)出pdf文件
編輯器文本過濾非法標(biāo)簽
兩邊滾動區(qū)域更加精準(zhǔn)
4.愿景
愿景：讓筆記成為一種習(xí)慣，讓分享成為一種快樂。
5.最后
原本的初心弄個(gè)筆記出來玩玩，但沒想到自己做出來后卻養(yǎng)成了一個(gè)寫筆記的習(xí)慣，記錄了工作上的點(diǎn)點(diǎn)滴滴，讓自己也收獲匪淺。
最后歡迎體驗(yàn)該產(chǎn)品，提出您寶貴的建議。Hbook[4]
建議四、總結(jié)
通過上面的講解，相信你對整個(gè)流程也基本熟悉，自己也可以嘗試動起來，有啥問題歡迎一起交流。
參考資料
[1]
安裝部署教程: http://bookcss.com/note/12/14
[2]brace: https://github.com/thlorenz/brace
[3]showdown: https://github.com/showdownjs/showdown
[4]Hbook: http://bookcss.com
最近組建了一個(gè)江西人的前端交流群，如果你也是江西人可以加我微信 ruochuan12 拉你進(jìn)群。
·················?若川出品?·················
今日話題
大家都知道項(xiàng)目經(jīng)驗(yàn)很重要，如果有空不妨也試著做一個(gè)筆記平臺，或者簡歷平臺，相信能學(xué)到很多。歡迎在下方留言~? 歡迎分享、收藏、點(diǎn)贊、在看我的公眾號文章~
一個(gè)愿景是幫助5年內(nèi)前端人走向前列的公眾號
可加我個(gè)人微信?ruochuan12，長期交流學(xué)習(xí)
推薦閱讀
我在阿里招前端，我該怎么幫你？（現(xiàn)在還能加我進(jìn)模擬面試群）
若川知乎問答：2年前端經(jīng)驗(yàn)，做的項(xiàng)目沒什么技術(shù)含量，怎么辦？
點(diǎn)擊上方卡片關(guān)注我、加個(gè)星標(biāo)，或者查看源碼等系列文章。
學(xué)習(xí)源碼整體架構(gòu)系列、年度總結(jié)、JS基礎(chǔ)系列
總結(jié)
以上是生活随笔為你收集整理的徒手撸了个markdown笔记平台的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 深度操作系统 V15.11发布——心随意
- 下一篇： Taro+react开发（5）--tor