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/') // 发送数据
    })
})
相关推荐
y先森1 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy1 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189111 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿2 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡3 小时前
commitlint校验git提交信息
前端
虾球xz4 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇4 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒4 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员4 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐4 小时前
前端图像处理(一)
前端