TopDocs：一款美观实用的在线文档编辑系统，支持Markdown语法

博主： james
发布时间：2020 年 04 月 08 日
88 次浏览
暂无评论
6440字数
分类：建站知识

说明：最近博主对文档程序小有需求，找了很久发现都是单页，而且还不支持移动端，不是很理想，所以<a href="https://moejj.com/" target="_blank" rel="noopener noreferrer">萌JJ</a>大雕就专门花了半天时间，给博主写了一个，该文档程序基于<code>graphql</code>、<code>nuxtjs</code>、<code>mongodb</code>、<code>keystonejs</code>的实时在线文档编辑系统，可用作各种在线文档编辑和展示，支持<code>markdown</code>语法，对移动端特别友好，这里就开源分享出来，给对文档有需求的人。
<div data-unique="截图"></div>
<h2>截图</h2>
<a class="light-link" href="http://www.502435.com/usr/uploads/2020/04/c746a-TopDocs(1).png" data-fancybox="gallery" data-type="image" data-caption="请输入图片描述"><img title="请输入图片描述" src="http://www.502435.com/usr/uploads/2020/04/c746a-TopDocs(1).png" alt="请输入图片描述" style=""></a>
<a class="light-link" href="http://www.502435.com/usr/uploads/2020/04/d03a0-TopDocs(2).png" data-fancybox="gallery" data-type="image" data-caption="请输入图片描述"><img title="请输入图片描述" src="http://www.502435.com/usr/uploads/2020/04/d03a0-TopDocs(2).png" alt="请输入图片描述" style=""></a>
<div data-unique="安装"></div>
<h2>安装</h2>
Gitee地址：<a href="https://gitee.com/quazero/topdocs" target="_blank" rel="noopener noreferrer">https://gitee.com/quazero/topdocs</a>

所需环境：<code>NodeJS</code>、<code>MongoDB</code>。

1、安装NodeJS
<pre><code class="hljs nginx">#Debian/Ubuntu系统
curl -sL https://deb.nodesource.com/setup_10.x | bash -
apt install -y git nodejs

#CentOS系统
curl -sL https://rpm.nodesource.com/setup_10.x | bash -
yum install nodejs git -y
</code></pre>
2、安装Mongodb
<pre><code class="hljs php">#CentOS 6系统，将下面命令一起复制进SSH客户端运行
cat &lt;&lt;EOF &gt; /etc/yum.repos.d/mongodb.repo
[mongodb-org-4.0]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/6/mongodb-org/4.0/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-4.0.asc
EOF
yum -y install mongodb-org

#CentOS 7系统，将下面命令一起复制进SSH客户端运行
cat &lt;&lt;EOF &gt; /etc/yum.repos.d/mongodb.repo
[mongodb-org-4.0]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/7/mongodb-org/4.0/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-4.0.asc
EOF
yum -y install mongodb-org

#Debian 8系统
apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 9DA31620334BD75D9DCB49F368818C72E52529D4
echo "deb http://repo.mongodb.org/apt/debian jessie/mongodb-org/4.0 main" | tee /etc/apt/sources.list.d/mongodb-org-4.0.list
apt update -y
apt install -y mongodb-org

#Debian 9系统
curl https://www.mongodb.org/static/pgp/server-4.0.asc | apt-key add -
echo "deb http://repo.mongodb.org/apt/debian stretch/mongodb-org/4.0 main" | tee /etc/apt/sources.list.d/mongodb-org-4.0.list
apt-get update -y
apt-get install -y mongodb-org

#Debian 10系统
curl https://www.mongodb.org/static/pgp/server-4.2.asc | apt-key add -
echo "deb http://repo.mongodb.org/apt/debian buster/mongodb-org/4.2 main" | tee /etc/apt/sources.list.d/mongodb-org-4.2.list
apt update -y
apt install -y mongodb-org

#Ubuntu 16.04系统
apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 9DA31620334BD75D9DCB49F368818C72E52529D4
echo "deb https://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/4.0 multiverse" | tee /etc/apt/sources.list.d/mongodb-org-4.0.list
apt update -y
apt install -y mongodb-org

#Ubuntu 18.04、18.10、19.04系统
apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv 9DA31620334BD75D9DCB49F368818C72E52529D4
echo "deb https://repo.mongodb.org/apt/ubuntu bionic/mongodb-org/4.0 multiverse" | tee /etc/apt/sources.list.d/mongodb-org-4.0.list
apt update -y
apt install -y mongodb-org
</code></pre>
如果导入公匙时出现<code>gnupg, gnupg2 and gnupg1 do not seem to be installed</code>错误，使用<code>apt install -y gnupg2</code>，然后重新导入即可。

启动<code>Mongodb</code>并设置开机自启：
<pre><code class="hljs nginx">#CentOS 6系统
service mongod start
chkconfig mongod on

#CentOS 7、Debian、Ubuntu系统
systemctl start mongod
systemctl enable mongod
</code></pre>
3、新建数据库
<pre><code class="hljs css">#数据库用户名和密码均为topdocs，将下面命令一起复制进SSH客户端运行
cat &lt;&lt;EOF &gt; createdb
use topdocs
db.createUser( { user: "topdocs", pwd: "topdocs", roles: [ { role: "readWrite", db: "topdocs" } ] } )
EOF
mongo&lt;createdb &amp;&amp; rm -rf createdb
</code></pre>
4、安装TopDocs
<pre><code class="hljs shell">#拉取源码
git clone https://gitee.com/quazero/topdocs /opt/topdocs
cd /opt/topdocs
#安装yarn和依赖
npm i -g yarn
yarn
#编辑index.js
vi index.js</code></pre>
修改以下代码：
<pre><code class="hljs python">endpoint: 'http://127.0.0.1:3000/admin/api',

#如果我后面使用docs.502435.com域名反代本地地址127.0.0.1:3000，那么修改为：
endpoint: 'http://docs.502435.com/admin/api',
或
endpoint: 'https://docs.502435.com/admin/api',

#如果我后面直接使用ip地址1.2.3.4访问，那么修改为：
endpoint: 'http://1.2.3.4:3000/admin/api',</code></pre>
<code>vi</code>编辑步骤：使用<code>i</code>进入编辑状态，编辑完成使用<code>esc</code>退出编辑状态，再输入<code>:wq</code>，然后<code>Enter</code>确定退出。

开始打包并运行：
<pre><code class="hljs sql">yarn build
yarn start

#后台运行
nohup yarn start&amp;
</code></pre>
这里访问地址为<code>index.js</code>中修改域名或<code>http://服务器ip:3000</code>。

对于<code>IP</code>访问的，如果<code>CentOS</code>系统打不开的话，可能还需要开启<code>3000</code>端口，使用命令：
<pre><code class="hljs nginx">#CentOS 6
iptables -I INPUT -p tcp --dport 3000 -j ACCEPT
service iptables save
service iptables restart

#CentOS 7
firewall-cmd --zone=public --add-port=3000/tcp --permanent
firewall-cmd --reload
</code></pre>
像阿里云等服务器，还需要去安全组那里开放下端口。
<div data-unique="绑定域名"></div>
<h2>绑定域名</h2>
如果你在上面编辑<code>index.js</code>的时候填的域名，那么就需要绑定下域名，反代下<code>http://127.0.0.1:3000</code>即可，反之，使用的<code>ip</code>就不用。

这里依旧使用<code>Caddy</code>，如果你安装过<code>Nginx</code>或者<code>Apache</code>，就自行搜索反代教程了。

安装<code>Caddy</code>：
<pre><code class="hljs nginx">wget -N --no-check-certificate https://raw.githubusercontent.com/ToyoDAdoubiBackup/doubi/master/caddy_install.sh &amp;&amp; chmod +x caddy_install.sh &amp;&amp; bash caddy_install.sh
#备用地址
wget -N --no-check-certificate https://www.502435.com/download/shell/caddy_install.sh &amp;&amp; chmod +x caddy_install.sh &amp;&amp; bash caddy_install.sh
</code></pre>
配置<code>Caddy</code>：
<pre><code class="hljs bash">#以下全部内容是一个整体，请修改域名后一起复制到SSH运行！

#http访问，该配置不会自动签发SSL
echo "docs.502435.com {
 gzip
 proxy / 127.0.0.1:3000 {
 websocket
 header_upstream Host {host}
 header_upstream X-Real-IP {remote}
 header_upstream X-Forwarded-For {remote}
 header_upstream X-Forwarded-Port {server_port}
 header_upstream X-Forwarded-Proto {scheme}
 }
}" &gt; /usr/local/caddy/Caddyfile

#https访问，该配置会自动签发SSL，请提前解析域名到VPS服务器
echo "docs.502435.com {
 gzip
 tls admin@502435.com
 proxy / 127.0.0.1:3000 {
 websocket
 header_upstream Host {host}
 header_upstream X-Real-IP {remote}
 header_upstream X-Forwarded-For {remote}
 header_upstream X-Forwarded-Port {server_port}
 header_upstream X-Forwarded-Proto {scheme}
 }
}" &gt; /usr/local/caddy/Caddyfile
</code></pre>
<code>tls</code>参数会自动帮你签发<code>ssl</code>证书，如果你要使用自己的<code>ssl</code>，改为<code>tls /root/xx.crt /root/xx.key</code>即可。后面为<code>ssl</code>证书路径。

启动<code>Caddy</code>：
<pre><code class="hljs sql">/etc/init.d/caddy start
</code></pre>
就可以打开域名进行访问了。
<div data-unique="开机自启"></div>
<h2>开机自启</h2>
这里新建一个简单的<code>Systemd</code>配置文件，只适用于<code>CentOS 7</code>、<code>Debian 8+</code>、<code>Ubuntu 16+</code>等。
<pre><code class="hljs cs">#新建systemd配置文件，将以下代码一起复制到SSH运行
cat &gt; /etc/systemd/system/topdocs.service &lt;&lt;EOF
[Unit]
Description=topdocs
After=network.target

[Service]
Type=simple
WorkingDirectory=/opt/topdocs
ExecStart=$(command -v yarn) start
Restart=on-failure

[Install]
WantedBy=multi-user.target
EOF</code></pre>
如果你使用的宝塔，还需要做下软连接，不然启动可能会失败，反之不需要，使用命令：
<pre><code class="hljs nginx">ln -sf $(which node) /usr/bin/node
</code></pre>
开始启动并设置开机自启：
<pre><code class="hljs sql">systemctl start topdocs
systemctl enable topdocs
</code></pre>
<div data-unique="使用教程"></div>
<h2>使用教程</h2>
后台地址<code>/admin</code>，账号为<code>admin@admin.com</code>，密码为<code>adminadmin</code>，自己进后台修改。

设置中<code>index</code>中是首页的展示内容，需要注意的是：
<pre><code class="hljs php">-logo-/logo.png-logo-
-title-跨世代文档编辑系统-title-
-subtitle-实时动态markdown文档编辑系统，基于graqhql、mongodb、keystonejs、nuxtjs开发的移动优先的服务端渲染文档系统。-subtitle-
-button-查看文档$https://gitee.com/quazero/topdocs-button-
===header===
header下面就是完全的markdown语法的编写区域，编辑完成之后，首页可查看变化。</code></pre>
参数大致意思：
<pre><code class="hljs xml">-logo-之间的是LOGO图片，可链接也可路径。
-title-之间的是首页展示大标题。
-subtitle-之间的是首页展示的项目介绍。
-button-是首页展示按钮需要的内容。其中&lt;按钮名&gt;$&lt;链接&gt;，链接可链接也可路径，按需更改。
===header===下面的就是正常的markdown语句，自己根据需要编写。</code></pre>
最后如果要上传图片或者文件的话，需要从后台左侧<code>Images</code>处上传并获取地址。
<div id="gtx-trans" style="position: absolute; left: 350px; top: 5760.83px;">
<div class="gtx-trans-icon"></div>
</div>

最后修改：2022 年 08 月 02 日

如果觉得我的文章对你有用，请随意赞赏

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

评论 *

私密评论

名称 *

🎲

邮箱 *

地址

TopDocs：一款美观实用的在线文档编辑系统，支持Markdown语法

james • 2020 年 04 月 08 日

所需环境：<code>NodeJS</code>、<code>MongoDB</code>。

开始打包并运行：
<pre><code class="hljs sql">yarn build
yarn start

#后台运行
nohup yarn start&amp;
</code></pre>
这里访问地址为<code>index.js</code>中修改域名或<code>http://服务器ip:3000</code>。

这里依旧使用<code>Caddy</code>，如果你安装过<code>Nginx</code>或者<code>Apache</code>，就自行搜索反代教程了。

[Service]
Type=simple
WorkingDirectory=/opt/topdocs
ExecStart=$(command -v yarn) start
Restart=on-failure

TopDocs：一款美观实用的在线文档编辑系统，支持Markdown语法

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

BBR+BBR魔改+Lotsever(锐速)一键脚本 for Centos/Debian/Ubuntu

快速清理Docker垃圾文件，释放硬盘空间

Linux VPS安装Google Authenticator实现SSH登陆二次验证

阿里云CentOS 7系统一键净化脚本，可优化并净化阿里云ECS实例

一个可以观看斗鱼/虎牙/熊猫/B站/全民等直播平台的第三方客户端：Moon Light v0.5

VPS Web控制面板：wdcp_v3.2正式版安装教程

Debian快速安装MariaDB Server教程

Bitly：一个可以还原短网址链接的网站

Goimg.io：一个免费的在线智能图片压缩瘦身工具

Linux VPS使用MinIO Client客户端实时同步备份文件

TopDocs：一款美观实用的在线文档编辑系统，支持Markdown语法

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

TopDocs：一款美观实用的在线文档编辑系统，支持Markdown语法

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款