5分鐘搭建豐富的內(nèi)容平臺(tái)(Markdown)

一、摘 要

目前內(nèi)容產(chǎn)業(yè)比較火，輸出更高質(zhì)量的內(nèi)容將變得越來越重要，因?yàn)榛ヂ?lián)網(wǎng)一直都在潛移默化地影響著我們。在各大自媒體平臺(tái)發(fā)布圖文/視頻固然是一個(gè)不錯(cuò)的選擇，但是Ofter可能要求較高，不希望有發(fā)布次數(shù)限制，無(wú)緣無(wú)故被審核不通過，修改內(nèi)容有限制，無(wú)法發(fā)布動(dòng)圖等等。

因此，Ofter痛下決心學(xué)習(xí)搭建自己的系統(tǒng)化知識(shí)平臺(tái)。之前Ofter介紹過如何使用布局和如何搭建網(wǎng)站，確實(shí)比較基礎(chǔ)也比較繁瑣。目前在各大平臺(tái)發(fā)布內(nèi)容，基本上都使用Markdown編輯器，線下編輯好markdown文件，發(fā)布到互聯(lián)網(wǎng)上豈不很舒服？

二、Markdown

我們經(jīng)常看到的md文件就是markdown，寫起來確實(shí)挺方便。

如何能將md文件內(nèi)容呈現(xiàn)在網(wǎng)上呢？如下圖：

首先，我們需要了解下markdown的一些使用規(guī)范。

1.標(biāo)題（需空格）一級(jí)標(biāo)題二級(jí)標(biāo)題 三級(jí)標(biāo)題依次類推2.目錄（單獨(dú)一行）[TOC]3.字體（不要空格）** **:加粗* *:斜體*** ***:斜體加粗~~ ~~:刪除線4.引用>5.分割線（需空格）--- 和 ***6.圖片7.超鏈接[鏈接名稱](鏈接路徑)//例如：[百度鏈接](www.baidu.com)8.列表（需空格）有序列表:1.無(wú)序列表:*或-9.代碼```代碼```三、搭建項(xiàng)目

開發(fā)工具：Pycharm

開發(fā)語(yǔ)言：React

安裝包工具：Node

1.創(chuàng)建項(xiàng)目

在左下角terminal執(zhí)行如下命令

npminstall-gcreate-react-appcreate-react-app XXX //項(xiàng)目名cd XXX //項(xiàng)目名2.安裝包

此次解析markdown，我們用markdown-it包，通用布局使用antd包，路由用react-router-dom，代碼的復(fù)制功能用clipboard。

npminstallantd clipboard highlight.js markdown-it markdown-it-anchor markdown-it-multimd-tablemarkdown-it-task-lists markdown-it-toc-done-rightreact-router-dom3.創(chuàng)建頁(yè)面js

在src目錄下創(chuàng)建js, css, md文件

四、解析Markdown1.js代碼

在MDEcharts.js中復(fù)制如下代碼

import React fromreact;import MarkdownIt frommarkdown-it;import hljs fromhighlight.js;import toc from"markdown-it-toc-done-right";import anchor frommarkdown-it-anchor;import lists frommarkdown-it-task-lists;import table frommarkdown-it-multimd-table;import Echarts from../document/echarts.mdimport./md.css;import Clipboard fromclipboard;import {message} fromantd;class MDEcharts extends React.Component { state = { markdown:, current:mail, };componentDidMount() { fetch(Echarts) .then(res => res.text()) .then(text => this.setState({markdown: text})); const clipboard = new Clipboard(.copy-btn) // 復(fù)制成功失敗的提示 clipboard.on(success, (e) => { message.success(復(fù)制成功) }) clipboard.on(error, (e) => { message.error(復(fù)制失敗) }) }render() { const {markdown} = this.state const md = new MarkdownIt({ html:true, linkify:true, typographer:true, highlight:function(str, lang) { // 當(dāng)前時(shí)間加隨機(jī)數(shù)生成唯一的id標(biāo)識(shí) const codeIndex = parseInt(Date.now()) + Math.floor(Math.random() * 10000000) // 復(fù)制功能主要使用的是 clipboard.jslethtml = `

本文標(biāo)題：5分鐘搭建豐富的內(nèi)容平臺(tái)(Markdown)
URL地址：http://www.muchs.cn/news30/309280.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、外貿(mào)建站、云服務(wù)器、動(dòng)態(tài)網(wǎng)站、面包屑導(dǎo)航、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)