亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

讀取所有 .md 文件，將它們轉換為 html 并發送

讀取所有 .md 文件，將它們轉換為 html 并發送

郎朗坤 2023-03-18 16:52:17
我用來fs讀取 .md 格式的文件，我想將其轉換為 html 文件。到目前為止，這是我的代碼：fs = require('fs');fs.readFile(__dirname + '/posts/react-v16.13.0.md', 'utf8', function (err, data) {  if (err) {    return console.log(err);  }  console.log(data);});該文件位于該文件夾中并具有該名稱。此函數將 .md 文件的內容放入控制臺。為了將它轉換為 html，我添加了這個：const showdown = require('showdown');converter = new showdown.Converter();...fs = require('fs');fs.readFile(__dirname + '/posts/react-v16.13.0.md', 'utf8', function (  err,  data) {  if (err) {    return console.log(err);  }  text = data;  html = converter.makeHtml(text);  console.log(html);});它將文件作為 html 放在日志中，這很好。我的問題是如果文件夾中有多個文件/posts/，如何讀取和發送這些文件？我想使用 POST 方法將它們發送到前端。是否可以從文件夾中讀取所有文件，轉換并發送它們？
查看完整描述

4 回答

?
汪汪一只貓

TA貢獻1898條經驗 獲得超8個贊

從問題下方的評論線程看來，您想要執行以下操作的內容：

  • 將給定目錄中的所有降價文件轉換為 HTML

  • 將它們全部發送到一個請求中

  • 可用于單頁應用程序

這是滿足所有這些要求的方法。每個帖子的 HTML 都被插入到一個template元素中，其內容可以在 SPA 腳本中被克隆和操作。

服務器.js

// with `.promises`, we can use `async/await`

const fs = require("fs").promises;


// ...


const getHtmlByFilename = async filename => {

? const md = await fs.readFile(

? ? path.join(__dirname, "posts", filename),

? ? "utf-8"

? );


? return converter.makeHtml(md);

};


app.get("/", async (request, response) => {

? const filenames = await fs.readdir(path.join(__dirname, "posts"));


? // we can also use Promise.all

? // to map over the filenames in parallel

? const htmls = await Promise.all(

? ? filenames.map(async filename => {

? ? ? const html = await getHtmlByFilename(filename);


? ? ? return { filename, html };

? ? })

? );


? response.send(

? ? htmlBoilerplate(

? ? ? htmls

? ? ? ? .map(

? ? ? ? ? ({ filename, html }) =>

? ? ? ? ? ? `<template id="${filename}">${html}</template>`

? ? ? ? )

? ? ? ? .join("\n"),

? ? ? "<h1>SPA</h1>",

? ? ? '<script src="/public/spa.js"></script>'

? ? )

? );

});

公共/spa.js

[...document.querySelectorAll("template")].forEach(template => {

? const clone = template.content.cloneNode(true);


? const filename = template.id;


? const details = document.createElement("details");

? const summary = document.createElement("summary");


? summary.textContent = filename;


? details.appendChild(summary);

? details.appendChild(clone);


? document.querySelector(".markdown-body").appendChild(details);

});


查看完整回答
反對 回復 2023-03-18
?
手掌心

TA貢獻1942條經驗 獲得超3個贊

const {readdir, readFile} = require('fs');

const showdown  = require('showdown');

const axios = require('axios');


let fileHtmlList = [];


const converter = new showdown.Converter();


readdir(`${__dirname}/posts`, 'utf8', (fsDirError, fileNameList) => {

    if(!fsDirError) {

        fileNameList.forEach((fileName) => {

            readFile(`${__dirname}/posts/${fileName}`, 'utf8', (fsReadError, fileContent) => {

                if(!fsReadError) {

                    fileHtmlList.push({

                        fileName: `${__dirname}/posts/${fileName}`,

                        htmlContent: converter.makeHtml(fileContent)

                    }); 

                } else {

                    return console.error(fsReadError);

                }  

            });    

        });

    } else {

        return console.error(fsDirError);

    }

});


/* I'm guessing this part from your description, if the content needs to be rendered then the code needs change */


let sendFrontEnd = async (data) => {

    try {

        const response = await axios.post(`urlToSend`, data);

        console.log(response);

    } catch (error) {

        console.error(error);

    }

};


fileHtmlList.forEach((item) => {

    sendFrontEnd(item.htmlContent);

});


查看完整回答
反對 回復 2023-03-18
?
胡子哥哥

TA貢獻1825條經驗 獲得超6個贊

我建議使用 readdir 和 readFile 的同步變體


const basePath = __dirname + '/posts/';

const htmls = [];


fs.readdirSync(basePath).forEach(file => {

  const text = fs.readFileSync(basePath + file, 'utf8');

  htmls.push({

    file,

    html: converter.makeHtml(text)

  });

});


// upload htmls with axios/fetch/ ....


查看完整回答
反對 回復 2023-03-18
?
寶慕林4294392

TA貢獻2021條經驗 獲得超8個贊

試試這個 js 庫


<!-- Lightweight client-side loader that feature-detects and load polyfills only when necessary -->

<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2/webcomponents-loader.min.js"></script>

<!-- Load the element definition -->

<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@1/src/zero-md.min.js"></script>


    <div class="markdown-body">

        <zero-md src="README.md"> </zero-md>

    </div>

我強烈建議在 html 文件中使用零降價，因為


從您的 readme.md 文件自動更新。

如果您使用將自述文件轉換為 html，則每次更新自述文件（或更多代碼）時都必須手動轉換。

我源代碼中的完整 html


<!DOCTYPE html>

<html>

  <head>

    <title>API Get link Zing Mp3</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>

      .markdown-body {

        box-sizing: border-box;

        min-width: 200px;

        max-width: 980px;

        margin: 0 auto;

        padding: 45px;

      }

    

      @media (max-width: 767px) {

        .markdown-body {

          padding: 15px;

        }

      }

    </style>

    <!-- Lightweight client-side loader that feature-detects and load polyfills only when necessary -->

<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2/webcomponents-loader.min.js"></script>


<!-- Load the element definition -->

<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@1/src/zero-md.min.js"></script>


<!-- Simply set the `src` attribute to your MD file and win -->


  </head>

  <body>

    <div class="markdown-body">

      <zero-md src="README.md">

      </zero-md>

    </div>

    </body>

</html>

如果你使用 nodejs，你可以在你的 readme.md 文件中添加一個路由器


app.get('/README.md', function (req, res) {

    res.sendFile(path.join(__dirname, "README.md"));

})


查看完整回答
反對 回復 2023-03-18
  • 4 回答
  • 0 關注
  • 452 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號