0
点赞
收藏
分享

微信扫一扫

使用nodejs搭建一个基于md的简易博客

伊人幽梦 2024-10-15 阅读 16

1. 安装node js

1.1 去官网 https://nodejs.org/zh-cn 下载安装
1.2 验证

node -v

2. 建立项目文件夹

2.1 文件夹 NodeJSWeb
2.2 创建server.js
内容如下

const express = require('express');
const http = require('http');
const fs = require('fs');
const path = require('path');

const app = express();
const PORT = 3000;

// 提供静态文件服务
app.use(express.static('public'));

// 路由:主页
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'index.html'));
});

// 服务器监听指定端口
app.listen(PORT, () => {
    console.log(`服务器正在运行,访问地址为 http://localhost:${PORT}/`);
});

3. 安装模块express

3.1 在当前文件夹下打开cmd
3.2 安装 Express: 使用 npm 安装 Express.js,可以执行以下命令:

npm install express

4. 创建index.html

内容如下

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/css/bootstrap.min.css">  
    <link rel="stylesheet" href="/editormd/css/editormd.preview.css" />        
    <title>公告板</title>
</head>
<body>

    <div class="container">
        
        <div class="container main_con">
            
            <div id="view_node">
                <div id="test-editormd-view">
        
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.staticfile.net/jquery/2.1.1/jquery.min.js"></script>     
    <script src="/editormd/editormd.min.js"></script>
    <script src="/editormd/lib/marked.min.js"></script>
    <script src="/editormd/lib/prettify.min.js"></script>    
    <script src="https://cdn.staticfile.net/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script type="text/javascript">
        var testEditormdView = undefined
        var view_parent = $("#view_node");

        function getMdInfo(name){
            $.get(name, function(result){
                console.log(result);
                var view = document.getElementById("test-editormd-view");
                if(view)
                {
                    view.remove();
                    view_parent.append("<div id=\"test-editormd-view\"></div>");
                }

                testEditormdView = editormd.markdownToHTML("test-editormd-view", {
                            markdown        : result,//+ "\r\n" + $("#append-test").text(),
                            //htmlDecode      : true,       // 开启 HTML 标签解析,为了安全性,默认不开启
                            //htmlDecode      : "style,script,iframe",  // you can filter tags decode
                            //toc             : false,
                            tocm            : true,    // Using [TOCM]
                            //tocContainer    : "#custom-toc-container", // 自定义 ToC 容器层
                            //gfm             : false,
                            //tocDropdown     : true,
                            //markdownSourceCode : true, // 是否保留 Markdown 源码,即是否删除保存源码的 Textarea 标签
                            //emoji           : true,
                            //taskList        : true,
                            //tex             : true,  // 默认不解析
                            //flowChart       : true,  // 默认不解析
                            //sequenceDiagram : true,  // 默认不解析
                        });
            });
        }

        document.addEventListener("DOMContentLoaded", function() {
            console.log("ready!");
            getMdInfo("/about.md");
        });
    </script>
</body>
</html>

5. 创建静态文件夹

5.1 创建文件夹public

在这里插入图片描述
5.2 public文件夹下放about.mdeditormd
在这里插入图片描述

  • about.md 是网页内容,md格式
  • editormd Editor.md 是一款开源的、可嵌入的 Markdown 在线编辑器(组件),基于 CodeMirror、jQuery 和 Marked 构建。
  • Download:

Github download

6. 运行服务器

node .\server.js

服务器正在运行,访问地址为 http://localhost:3000/

在这里插入图片描述

举报

相关推荐

0 条评论