mdnice 是啥

参考官方站点 https://mdnice.com/

可以很方便地用markdown编写各种文章，并支持复制到公众号等平台。

不过官方的需要登录，还需要会员。

查了下，这个是开源的，不过很久没更新了。 具体开源的版本支持什么可以部署起来看下。开源地址：https://github.com/mdnice/markdown-nice

基本环境信息

这个开源的版本上一次更新都是2019年左右了。这期间，nodejs已经更新到20版本了，里面的很多包还是很老的，在node20的版本安装会各种错误。

笔者实验了20，18，16还有14的很多版本，都出现包依赖错误（本身也不是前端出生，所以没有去调原始的代码）

最终测试了，node 14.18.2 版本可以将git上master的这个分支代码部署起来。

整个环境的信息如下：

硬件：windows wsl2

操作系统：ubuntu 22.04

node版本：v14.18.2

npm版本：6.14.15

部署步骤

1. git上拉取代码

git clone https://mirror.ghproxy.com/https://github.com/mdnice/markdown-nice.git

拉取下来，目录结构如下

2. 安装

cd markdown-nice
# 很多文章直接写了npm install，但是我这里出现软件包的安装报错
# 这里单独安装了husky这个包
npm install husky@3.1.0 --ignore-scripts

npm install

3. 启动

npm run start

启动成功之后，可以通过http://ip:3000端口来进行访问

但是这里发现一个问题，没有主题。只有默认的主题，官方参考的各种各主题都没有。

主题补全

参考这里，进行主题补全。

1. 下载对应主题文件localThemeList.json
2. 工程本地新建主题文件 在src目录下，新建一个json目录，将下载到的主题文件放到这里
3. 
   
4. 修改目录配置，引入这里的主题数据编辑src--> Menuleft--> Theme.js文件：在第10行以后，插入如下代码
5. 
   

// eslint-disable-next-line import/extensions
import localThemeData from "../../json/localThemeList";

在60行左右，主题数据部分：

      } else {
     
        // 否则默认主题
        response = await axios.get(THEME_API());
         if (!response.data.success) {
           throw new Error();
        }
        remoteThemelist = response.data.data.themeList;
      }

这部分修改为如下，将从互联网请求主题改成本地导入的主题

      } else {
        remoteThemelist = localThemeData
        // 否则默认主题
        // response = await axios.get(THEME_API());
        // if (!response.data.success) {
        //   throw new Error();
        // }
        // remoteThemelist = response.data.data.themeList;
      }

然后重新npm install即可看到各种可选的主题了。

nginx部署

1. 打包 前面通过npm install安装了所有依赖的包，接下来执行

npm run build

即可完成打包，打包完成之后，生成build目录，目录下内容如下：

2. nginx配置 将上一步中打包的所有文件，放到/usr/share/nginx/mdnice/(这个目录是nginx配置的，可以根据实际情况修改)下。

root@localhost:/usr/share/nginx/mdnice# ls -lrt
total 64
-rwxr-xr-x 1 root root   329 Mar 30  2021 manifest.json
-rw-rw-r-- 1 root root  4253 Mar 30  2021 favicon.svg
drwxr-xr-x 2 root root  4096 Mar 30  2021 workbox-v3.6.3
drwxr-xr-x 4 root root  4096 Mar 30  2021 static
-rw-r--r-- 1 root root  1635 Mar 30  2021 service-worker.js
-rw-r--r-- 1 root root 11891 Mar 30  2021 precache-manifest.94758d437f0fb198ac94873d546c4d07.js
-rw-r--r-- 1 root root  4558 Mar 30  2021 index.html
-rw-r--r-- 1 root root 18935 Mar 30  2021 asset-manifest.json

新建mdnice.conf的nginx配置

cat /etc/nginx/conf.d/mdnice.conf
server {
  listen 18000;   # 端口换成你自己的
  server_name localhost;
  charset  utf-8;

  location / {
    root /usr/share/nginx/mdnice/;  # mdnice的目录，根据实际情况修改
    index index.html index.htm;
  }
}

然后浏览器访问：http://ip:18000即可访问了（端口换成你自己的）。

如果觉得自己折腾麻烦的，可以给我留言，我把打包好的发布版本发给你。