这是凝神长老的个人简历页面。
我提供了 3 份详细程度不同的说明，请根据你的需要，随意使用我的代码：
-
面向中级用户的使用说明 (For Intermediate Level)
-
面向高级用户的使用说明 (For Advanced Users)
-
面向初级用户的使用说明 (For Beginners)
-
复制
/assets/data-sample/中的所有文件到/assets/data/，复制/static/data-sample/中的所有文件到/static/data/ -
根据需要修改这些
.json文件，并将需要的资源复制到/static/目录下，在.json文件中的src都是相对于/static/的位置注意
.json文件中不存在的属性使用null而不是""，逻辑值使用true或false而不是1、"1"等 -
运行，或者生产静态文件
# install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for production and launch server $ npm run build $ npm run start # generate static project $ npm run generate
-
如果你不需要某些页面，删除
/components/Navigation.vue中的菜单项翻译在
/assets/lang/目录下 -
你可以使用
npm run build && npm run start运行，你可以修改默认端口，或者使用 Nginx 等工具进行反向代理、端口转发也可以使用
npm run generate生成静态文件，然后将dist目录下的所有文件上传到你的服务器目录中如果需要部署到 GitHub Pages，你还需要在
/static/目录下创建一个.nojekyll的文件如果你需要部署到子目录，你需要修改
setting.json中的deployDir字段，注意，当你采用npm run start方式运行时，这个参数不起作用 -
更新时，只需要下载（或者克隆）最新的项目文件，将
/assets/data/和/static/data/复制到新的项目文件夹中，重新运行这些命令即可，无需再次编辑数据
-
只使用 Vue.js，就没有办法 SEO 了，所以选择了 Nuxt.js，提供了有限的 SEO
-
使用 JSON 文件存放数据，而不是数据库的方式，是为了方便部署在类似于 GitHub Pages 这样不支持后端环境的平台上
一般来说，个人简历的信息很少更新，所以可以不需要数据库的支持，而且个人简历的信息是完全公开的，不涉及用户权限的问题（无登录、无鉴权），可以全部展示，也不需要数据库的参与
如果数据是存放在数据库中，可以使用脚本提前导出，
sql_to_json_converter.js提供了一个脚本，将.sql文件转化为.json文件，你只需要使用mysqldump这样的命令导出相应的表然后运行这个脚本，注意\转义已经被消除，如果你的需要转义后的\，你可以自己修改stringify前后的代码考虑到 MySQL 中没有原生数组的支持，所以很多文件都是采用了
,分隔，然后调用.split(',')得到数组，如果你使用的是 MongoDB 这样的数据库，你可以修改对应的代码，直接使用数组你也可以安装
Sequelize或者Mongoose这样的模块，并修改/assets/reader.js以便从数据库获取数据或者采用前后端分离的部署方法，利用
axios等手段获取数据 -
如果需要部署到 GitHub Pages，你还需要在
/static/目录下创建一个.nojekyll的文件如果你需要部署到子目录，你需要修改
setting.json中的deployDir字段 -
关于 DevOps (CI/CD)，可以参考
.gitlab-ci.yml文件，你也可以使用.travis.yml文件.gitlab.yml中，load_resources是获取资源，deploy中实现了本地部署（上传到服务器）、GitHub Pages（利用 pull 和 push），以及 GitLab Pages（利用 GitLab Runner 的自动部署）setting.json中的updated可以自动修改，利用命令sed搜索匹配的内容，并完成替换在
.gitlab-ci.yml中，这个命令是sed \"s/\\\"updated\\\":[ ]*\\\"[0-9]\\{4\\}-[0-9]\\{2\\}-[0-9]\\{2\\}\\\"/\\\"updated\\\":\\\"${RESUME_DATE}\\\"/g\"使用不同的
yml工具可能会有不同的转义\的次数 -
你可以随意修改代码，删除你不需要的内容，或者增加、修改其他的功能
-
如果你需要
matomo，你可以直接修改/assets/data/matomo.json，项目已包含vue-matomo模块 -
如果需要个性化的地图需求，你可以将高德地图和 MapBox 的 API KEY 添加到代码中，这里使用的是官方提供的 DEV KEY
-
轻博客是直接从 WordPress 的wp_posts表中导出的，所以包含了较多的 WordPress 相关的字段，如果你不需要某些字段，请随意删改 JSON 文件的格式（当然可能需要修改代码以适应） -
更新时，只需要下载（或者克隆）最新的项目文件，将
/assets/data/和/static/data/复制到新的项目文件夹中，重新运行这些命令即可，无需再次编辑数据 -
（暂时）没有做移动端适配（没有响应式布局），你可以自己修改
-
在 https://nodejs.org/en/ 下载 LTS 版的 Node.js
-
按照说明完成 Node.js 的安装，如果你不清楚设置选项，请全部保留默认，注意勾选
添加到环境变量(Add to PATH) 选项，你甚至可以勾选自动安装必要的工具(Automatically install the necessary tools) -
安装完成后，你可以重启电脑，确保环境变量生效
-
下载并解压（或者克隆）这个项目，进入项目目录，然后执行
npm install，等待安装完成 -
复制
/assets/data-sample/中的所有文件到/assets/data/，复制/static/data-sample/中的所有文件到/static/data/ -
执行
npm run dev，等待开发环境启动 -
你可以在浏览器中访问
localhost:3000查看页面，如果默认端口 3000 被占用，程序会使用其他端口，你可以在刚才的窗口中看到实际使用的端口 -
编辑
/assets/data/settings.json，修改updated为当天的日期 -
编辑
/assets/data/中除了matomo.json以外的.json文件，仿照样例的格式，输入你想要展示的内容例如对
introduction.json做如下修改{ "location": "上海", "role": "学生", "email": null, "qq": "12345", "qq_qr": "/data/introduction/qrcode_qq.jpg" }又比如在
study.json文件中，在[]之间增加其他的记录[ { "school": "中学", "date": "2011-09-01", "end": "2011-10-01", "content": "某中学录取" }, { "school": "大学", "date": "2011-10-01", "end": null, "content": "位于上海，至今，附加说明……" }, { "school": "小学", "date": "2010-11-10", "end": null, "content": "增加的记录" } ]明确不需要的字段，例如没有内容、不适用，这样的字段请设置为
null如果你不清楚某些字段的作用，或者你不需要这些字段，例如，也许你的轻博客不需要跳转到正式博客，那么，这些内容可以保留为
null或者"" -
将图片等资源复制到
/static/data/中对应的文件夹类似于
"/data/introduction/qrcode_qq.jpg"这样的内容表示文件路径，你在填写值后，还需要将对应文件复制到/static/的对应文件夹下面注意文件夹都是相对
/static/目录开始的，即"/data/introduction/qrcode_qq.jpg"中，qrcode_qq.jpg这个文件应该被复制到/static/data/introduction/这个文件夹中，文件名为qrcode_qq.jpg -
如果有些页面你不需要，例如你不是程序员，你可能不需要
编程题页面，那你可以编辑/components/Navigation.vue文件，将对应的菜单项删除，例如删除以下 3 行，就不会在菜单中出现编程题了<MenuItem name="coding" to="coding"> {{ $t('navigation.coding') }} </MenuItem>
同时，你还应该删除
/pages/目录下的coding.vue这个文件 -
保存后，
localhost:3000会自动加载刷新如果你的修改没有错误的话，修改后的内容已经显示在页面上了，点击不同的菜单，查看是否一切正常
如果你的修改错误的话，再次修改，然后重复这个过程
-
当一切准备就绪后，同时按下
CtrlC停止开发环境，并运行npm run build和npm run start你可以通过 IP:3000、域名:3000 这样的方式访问这个页面（你可能需要在服务器提供商处开放 3000 端口）
你也可以使用 Nginx 这样的工具完成代理，将你的域名转发到 3000 端口上
注意这种情况下，
npm run start服务需要处于运行状态，如果你打算关掉 SSH，这个服务可能也会被关闭，因此，你最好使用screen这样的工具确保，或者使用npm run start &确保服务在后台运行请自行搜索关键词为
服务器维护、Nginx 端口转发、域名配置相关的教程 -
如果你不想运行这样一个服务（例如内存不足），或者你的服务器只支持静态页面，你还可以运行
npm run generate，等待静态文件生成如果遇到问题，你可以先尝试反复多次运行这些命令，大多数情况下，二次运行会解决奇怪的问题，这通常是由于第一次运行时花费时间太久而被终止了
这些文件就是最终的页面，部署它们
-
将
/dist/文件夹下的所有内容（不包括/dist/文件夹本身），复制（上传）到你的服务器域名对应目录中，然后访问域名（例如www.jxtxzzw.com）就可以了，你可能需要了解你的站点文件是存放在何处，以及你可能需要给这些文件授予读取的权限，请自行搜索教程，或者咨询服务器提供商 -
如果你的服务器提供商给你的站点是子目录，或者你需要部署到某个子目录中，例如
www.jxtxzzw.com/zzw方式访问，那么你需要在执行generate步骤前，将settings.json中的deployDir修改为子目录/zzw/，注意，当你采用npm run start方式运行时，这个参数不起作用如果你没有自己的服务器或者空间，你也可以使用 GitHub Pages
-
首先注册 GitHub 账号，假设账号名是
jxtxzzw -
然后新建一个仓库，仓库名必须是
XXX.github.io的形式，其中XXX是你的用户名，例如jxtxzzw.github.io- 你可以搜索关键词为
GitHub Pages的相关教程，注意，有些 GitHub Pages 的教程是指导使用hexo，这需要安装额外的软件，或者要在仓库设置中进行一些配置，我们不需要这些步骤
- 你可以搜索关键词为
-
将
/dist/文件夹下的所有内容（不包括/dist/文件夹本身），上传到这个仓库，注意，当你需要部署到 GitHub Pages 时，请检查/dist/目录下应该有一个.nojekyll的文件，如果没有，你应该创建它-
你可以下载 GitHub Desktop 完成这个操作
-
你也可以下载安装 git 软件，利用
git push操作将这些文件推送到远端仓库 -
你可以搜索关键词为
git tutorial、git pull push、git remote的相关教程
-
-
你可以访问
https://XXX.github.io，例如https://jxtxzzw.github.io，查看你的页面
- 更新时，只需要下载（或者克隆）最新的项目文件，将
/assets/data/和/static/data/复制到新的项目文件夹中，重新运行这些命令即可，无需再次编辑数据