Markdown文章编写神器MdNice,如何私有化部署

大家好,我是羊先生,一个几乎怎么没有上过学,误打误撞进入前端开发领域

Mdnice

墨滴社区是一个看颜值的文章社区,技术、数学、文学文章汇集,极具趣味性,其开发的 mdnice 编辑器是一款 Markdown 微信编辑器,拥有良好的兼容性、海量主题样式、免费的图床一个公共的编写文章平台

官方地址

今天的重点是如何私有化部署

下载源码

GitHub-Mdnice

GitHub-zip下载

目录结构如下

安装依赖

这里我建议你使用node-v14的版本,进入目录,镜像源地址选择腾讯或者淘宝

原因是依赖webpack4.0以下的插件,不支持高版本的Node.js

npm 复制代码
npm install

执行完依赖后,执行

npm 复制代码
npm run start 或者 npm start

打开浏览器访问如下,http://localhost:3000/

修改配置

图片上传

默认配置,阿里云配置

本人亲测,无效,主要一点是在阿里云后台配置,设置权限,因为它是前端直接发起请求,需要设置跨域,以及授权用户权限,这块我昨天试了下,没有生效,可能是我配置有问题,还有可能就是这个程序没有更新,带来了一些问题

自定义配置

为了最小的改动,我们修改他的默认配置就好了,如实我在这里开发了一个后端接口,对阿里云OSS,也很简单,使用Egg.js的代码也就几行代码

js 复制代码
'use strict';

const Controller = require('egg').Controller;
const OSS = require('ali-oss');
const fs = require('fs/promises');

const client = new OSS({
    region: 'oss-cn-beijing',
    accessKeyId: 'LTAI5uucRuucRuucRuucRtruucRNq',
    accessKeySecret: '0x6ZuI1JJI1JJI1JJPibz',
    bucket: '0q',
});
class UploadController extends Controller {
    async images() {
        const { ctx } = this;
        const file = ctx.request.files[0];
        let result;
        try {
            result = await client.put(file.filename, file.filepath);
        } finally {
            await fs.unlink(file.filepath);
        }
        ctx.body = ctx.resultData({ data: result });
    }
}

module.exports = UploadController;

修改源代码处

本地调试,增加代理

测试效果如下

主题配置

此时我们会发现没有主题可以选择,需要在项目的src\json目录下添加localThemeList.json用于定义主题

Githu文件地址

注释该代码即可

打包

npm 复制代码
npm run build

上传服务器

我的服务器,基本用宝塔搭建的,能帮我解决php、node、mysql、nginx等等环境问题

最终效果如下

最后,大家可能觉的,完成部署后,跟官方感觉不太一样,原因是官方那个版本后续是私有化了,并没有公开了,但是基本的功能都已经很好用了

项目中使用

效果如下

我是使用的iframe嵌入的,使用postMessage解决跨域通信问题

修改代码

js 复制代码
window.parent.postMessage({content}, "*"); //向主页面发送数据
js 复制代码
window.addEventListener("message", (event) => {  // 接受主页面传过来的数据
    if (event.data.conent) {  
        this.props.content.setContent(event.data.conent);  
    }  
});

主页面代码

js 复制代码
onMounted(()=>{
    window.addEventListener('message', function (e) {
        try {
            console.log(e.data.content) // 接受过来的参数
        } catch (error) {
            console.log(error)
        }
    })
    let authIframe = document.getElementById('authIframe')
    authIframe.addEventListener('load', function (e) {
        authIframe.contentWindow.postMessage({conent:'1'}, 'http://127.0.0.1:3000/') // 发送数据
    })
})
相关推荐
10年前端老司机1 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程5 小时前
2025前端面试题
前端·面试
前端小趴菜056 小时前
React - createPortal
前端·vue.js·react.js
晓13137 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo7 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴8 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7899 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼9 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原9 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf9 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js