我忍野喵有一个梦想，就是要用 Vue 开发一个个人博客
前言
注意：该博客在 v1.2.0 版本前为纯 Vue 打造的SPA，而在 v1.2.0+ 版本后引入 Nuxt 实现了SSR，尽管版本号继承，但他们是不同的项目
该博客性质偏向于自用，而且个人也认为有点非主流。但是一想到有可能有人想用，我还是在开发过程中留了条后路，尽量把可配置的部分都独立出来，并且写了这篇教程。但尽管如此该博客的部署还是比较繁琐的，还请怕麻烦的的同学悉知。
另外，该博客的前后端代码均开源，项目链接在最后，欢迎学习讨论
这个博客是我个人第一个大型 Vue 项目，前后端完全分离，初版总计用时5个月 （寒暑假+学校10周） 才撸出来。现在想起来还真的有点惊讶，网上大把漂亮的 WordPress 主题我不用，竟然一个个地费劲地自个儿造轮子。其实原因我很清楚，就是执念而已，就是不愿放弃而已，要谈这个就是另一个故事了，这里还是不扯了。
从一年前的前端小白到现在的全栈开发，知识的开源真的非常重要，非常感谢B站和各路大佬的博客。还有，谢谢你，那个一直努力到了现在的自己
唠叨就此打住，讲回博客的事吧。
特点/功能
其实就丰富度来说我觉得是比不过 WordPress 的，毕竟别人可加插件，而我这个。。。。所幸我还有这双手，只要我还剩一口气和我的执着，功能想加就加 (咕咕咕警告)
演示网站：就是你现在所看到的网站
随机封面
需要在 /site/bg 下编写 bg.json 文件，指定每张插图的位置，作者名，作者链接，作者头像，作品名和作品链接，格式如下
[
{
"imgSrc":"/site/bg/bg1.jpg",
"workName":"吸血怪異接吻打",
"workLink":"https://www.pixiv.net/member_illust.php?mode=medium&illust_id=69767294",
"authorName":"荻pote",
"authorLink":"https://www.pixiv.net/member.php?id=2131660",
"avatar":"/site/bg/au1.gif"
}
]前端会自动请求 bg.json 文件并随机选取一张图片
Lazyload
用原生 js 结合 Vue 的事件监听写了个非常粗略的 lazyload。除了正文中的图片的其他图片都启用了lazyload，优先加载缩略图和加载图，等待图片进入视野才加载原图
登录及个人空间
登录看上去有点简陋，但是后面的加密是很足的，未来还想加个机器人验证和试错次数限制
个人空间也就是后台，需要登录进入，仿的是B站的个人空间(个人美感设计实在蹩脚)。
登录入口可能比较难找？进入 /login 页面或者点击网站右下角的 SETTING 面板的左下角的 ‘I’ 即可。还可以拉到网站最下面点击你的 brand 进入
评论区
评论区支持常用 Markdown ，支持在线预览。支持输入qq号（不会保存，只作为中间变量）拉取头像。支持通过邮件进行回复提醒
从B站扒了些表情并且仿制了B站的表情包组件，目前图片形式的的表情包有2233娘和小黄脸。可以手动添加更多表情，需要编辑 /static/emo/emo.json 文件，格式如下
[
{
"emoSeries": "2233",
"path": "/static/emo/2233/",
"thumbnail": "4402e6e2322eb29cd52dcf9240af6ed6.webp",
"emoList": [{"des": "无语", "imgSrc": "27df619585afad4c65eebe95ba98d085.webp"}],
"pic": true
},
{
"emoSeries": "颜文字",
"path": "/static/emo/",
"thumbnail": "kaomoji.png",
"emoList": ["(⌒▽⌒)","（￣▽￣）"],
"pic": false
}
]emoSeries 为表情包系列名；path 为表情包图片的父目录路径（从网站根目录开始，必须以斜杠开头结尾），将与 thumbnail 和 emoList 中的 imgSrc 拼接形成对应的真实路径；thumbnail 为表情系列选择菜单中的图片的文件名（如上图下面的四个表情系列）；emoList 有两种格式
- 当
pic为 true 时是图片表情包，emoList是对象数组，每个对象对应一个图片表情，其中des为该表情的描述，imgSrc为该表情对应文件名 - 当
pic为 false 时是文字表情包，emoList是字符串数组，每个值对应一个文字表情
文章目录
目录会根据阅读位置动态跟随，子目录会折叠（你可以在这篇文章里随便滚滚看看）。目前只能为二级和三级标题生成目录，并且目录最大只能一层嵌套，原谅我js代码太烂 (其实是懒)
Lumi Box 灯箱
全名是 Luminous Box，个人用Vue实现的简单灯箱。点击正文的图片或相册图片自动进入灯箱模式，可以自动播放或手动切换图片。按 Esc 退出
Aplayer
支持 Aplayer 音乐播放器，修改了一些样式，以 mini 模式隐藏在左下角。如果要导入歌单，需要在 /music 下编写 music.json，指定 每首歌的名字，歌手，歌曲链接，封面链接，歌词链接，格式如下（没有歌词不设lrc字段）
[
{
"name":"人恋し、秋恋し",
"artist":"野宮あゆみ",
"url":"/music/songs/人恋し、秋恋し.mp3",
"cover":"/music/covers/人恋し、秋恋し.jpg",
"lrc":"/music/lrcs/人恋し、秋恋し.lrc"
}
]如果你懒得写 json 文件，这里还有一个我编写的 python 脚本能从网易云下载歌词和音乐并且自动生成 music.json 文件。详细用法请下载解压后查看其中的 readme.txt（等待整理上传）。
其他的功能特点就不多介绍了，很普通也没有要值得注意的地方，自行体验
安装&使用
篇幅有限，请前往项目页查看
FAQ
Nothing Yet
Comments | ?? 条评论