我忍野喵有一个梦想,就是要用 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

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 为表情包图片的父目录路径(从网站根目录开始,必须以斜杠开头结尾),将与 thumbnailemoList 中的 imgSrc 拼接形成对应的真实路径;thumbnail 为表情系列选择菜单中的图片的文件名(如上图下面的四个表情系列);emoList 有两种格式

  • pic 为 true 时是图片表情包,emoList 是对象数组,每个对象对应一个图片表情,其中 des 为该表情的描述,imgSrc 为该表情对应文件名
  • pic 为 false 时是文字表情包,emoList 是字符串数组,每个值对应一个文字表情

文章目录

文章目录

目录会根据阅读位置动态跟随,子目录会折叠(你可以在这篇文章里随便滚滚看看)。目前只能为二级和三级标题生成目录,并且目录最大只能一层嵌套,原谅我js代码太烂 (其实是懒)

Lumi Box 灯箱

LumiBox 灯箱

全名是 Luminous Box,个人用Vue实现的简单灯箱。点击正文的图片或相册图片自动进入灯箱模式,可以自动播放或手动切换图片。按 Esc 退出

Aplayer

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

    添加新评论 | #

    Markdown Supported
    简单数学题:NaN + NaN =
    表情

    Comments | ?? 条评论

    • 单身为狗 22 年

    • 朝循以始 夜继以终

    • Blog: Von by Bersder

    • Alive: 0 天 0 小时 0 分

    Support:

    frame ssr server DNS music player

    © 2019-2021 ᛟᛊᚺᛁᚾᛟ

    back2top