時(shí)間：2023-07-26 01:36:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-07-26 01:36:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)
手摸手教你擼一個(gè)靜態(tài)網(wǎng)站生成器：
在線咨詢
fs.readFileSync(path, 'utf-8')fs.writeFileSync('blog1.html', rawHtml, 'utf8');生成html文件// 遍歷一個(gè)文件夾下所有文件 ，生產(chǎn)的時(shí)候，不用排序function readFolder(filePath){ var files = fs.readdirSync(filePath); files.forEach(function(filename){ if(filename.indexOf('.md') === -1) return; // 無(wú)后綴文件名 let targetFileName = filename.replace('.md',''); let markdownContent = readFileAndParse(filePath + '/' + filename); writeHtml(targetFileName, markdownContent); });}// 讀取一個(gè)文件內(nèi)容function readFileAndParse(path){ text = fs.readFileSync(path, 'utf-8') try { var result = marked(text).replace(/buildAssetPath/g,'./assets'); return result; } catch (err) { console.error('解析文件出錯(cuò)：'+path); }}// 文章詳情頁(yè)把內(nèi)容寫(xiě)入模板htmlfunction writeHtml(fileName,content) { let rawHtml = readFileAndParse('./src/index.html'); let headDOM = fs.readFileSync('./src/components/TopNav/nav.html', 'utf-8'); let headCSS = readCssFile('./src/components/TopNav/nav.css'); let headJS = fs.readFileSync('./src/components/TopNav/nav.js', 'utf-8'); let dryTitle = /<!--<title>(.*)<//title>-->/.exec(content); let dryIntro = /<!--<intro>(.*)<//intro>-->/.exec(content); // 讀取模板 ，把markdown內(nèi)容注入 let html = rawHtml .replace('<!-- content -->', blogTopBanner(dryTitle && dryTitle[1] ||fileName)+' <div class="markdown-body">' + content + '</div>') .replace('<!-- title -->', dryTitle && dryTitle[1] ) .replace('mdblog描述', dryIntro && dryIntro[1]) .replace('<!-- header DOM -->', headDOM) .replace('<!-- header CSS -->', '<style>' + headCSS + '</style>') .replace('<!-- header JS -->', '<script>' + headJS + '</script>') ; fs.writeFileSync('./'+ outputFold +'/' + fileName + '.html', html, 'utf8'); console.log('文章網(wǎng)頁(yè)生成成功：' + fileName + '.html');}總共三個(gè)函數(shù)：一個(gè)遍歷文件，一個(gè)讀文件，一個(gè)寫(xiě)文件。其中writeHtml()函數(shù)那些花里胡哨的代碼就是把動(dòng)態(tài)把內(nèi)容（Html DOM,js,css）注入到下面的html模板里，然后產(chǎn)出html。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="description" content="mdblog描述"> <title> <!-- title --> </title> <!-- header CSS --> <!-- homepage CSS --> <!-- postsPageCSS CSS --></head><body> <!-- header DOM --> <!-- homepage DOM --> <!-- content --> <!-- header JS --> <!-- homepage JS --> <!-- posts JS --></body></html>上面有一個(gè)feature是支持組件的本地開(kāi)發(fā)模式，三個(gè)支持可自定義的組件為如圖所示的結(jié)構(gòu)components目錄import './components/HomePage/homepage.css';import './components/TopNav/nav.css';import './components/Posts/posts.css';import homePageDom from './components/HomePage/homepage.html';import topNavDom from './components/TopNav/nav.html';import postsDom from './components/Posts/posts.html';document.write(topNavDom);document.write('<h1 ><div>FBI WARNING</div>溫馨提示：本頁(yè)把src/components 目錄下的三個(gè)組件導(dǎo)入在一個(gè)頁(yè)面，如果你也了解一些前端知識(shí)，可用它來(lái)進(jìn)行頁(yè)面DRY，進(jìn)行本地調(diào)試。</h1>');document.write('<div>homePageDom 組件樣式 start</div>');document.write(homePageDom);document.write('<div>homePageDom 組件樣式 end</div>');document.write('<div>postsDom 組件樣式 start</div>');document.write(postsDom);document.write('<div>postsDom 組件樣式 start</div>');import './components/TopNav/nav.js';import './components/HomePage/homepage.js';博客列表頁(yè)博文列表信息展現(xiàn)支持自定義（包括文章配圖，標(biāo)題，介紹，標(biāo)簽，日期），在markdown頭部采用html注釋的方式標(biāo)識(shí)，構(gòu)建的時(shí)候正則匹配取值<!--<img-url>./assets/default.jpeg</img-url>--> <!--<title> mdblog 說(shuō)明文檔 </title>--> <!--<intro> 介紹mdblog </intro>--> <!--<tag>README</tag>--><!--<date>2018-08-20</date>-->所以大致比較關(guān)鍵的就以上幾點(diǎn)，如果你對(duì)源碼感興趣，可以訪問(wèn)github mdblog源碼地址,歡迎各位在評(píng)論區(qū)多多交流。關(guān)鍵詞：成器,靜態(tài)
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
