这是一款基于 vitepress 打造的适合图文资源分享的博客主题。不改动原有布局的大方向的基础上,做了列表和一些视觉上的调整。这款主题更加适合设计或者开发人员进行资源的整理和分享。
我选择 vitepress就是因为它的速度够快,加上部署到vercel免费无需服务器,整体来说经济实惠又好用,值得大家使用。
- 修复烟花兼容
- 搜索使用pagefind插件
- 复制页面内容时添加版权尾巴
- 基于路由实现标签、分类、存档、分页功能。方便用户通过页面域名进行分页或者相关内容的查看;
- 存档实现年和年+月的形式;
- 文章列表分为宫格和列表两种样式,方便用户根据喜好切换;
- 内页增加标签、分类面包屑导航等;
- 增加阅读时长等常用功能;
- 文章内增加一个资源汇总组件。方便资源的出处跳转、 github资源数据获取等;
- Feed订阅
- 根据标签获取相关文章
- 一个工具导航页面
- 一个关于页面
- 文章列表可嵌入一个博主卡片,可配置是否显示
- 博主卡片可配置选择放置音乐播放和打赏咖啡
- 背景音乐可配置音乐清单
- 打赏咖啡可配置一个二维码图片
- 音乐播放器基于pinia管理播放状态
- 一个春节灯笼挂件,可配置灯笼文字以及是否显示
- 侧栏一个烟花许愿挂件,可配置标题、内容以及是否显示等
- 暗黑模式下可配置雪花特效
- 轮播组件
- 提示组件
- 弹层组件
- 消息框组件
- VueUse 复制文本、缓存
- pinia状态管理
- 时间友好化组件
- git clone克隆或者直接下载这个仓库到你的本地电脑
- 本地电脑需要安装 node.js和 npm或者 yarn。不会的百度如何安装
- 最好电脑安装 Visual Studio Code这个开发者工具,方便管理代码
- 用上面这个开发工具导入刚下载的这个仓库
- 工具菜单选择终端 > 新建终端,输入命令 npm install 回车开始安装本仓库用到的依赖,可能需要几分钟时间
- 安装完成依赖,会生成 node_modules目录
- 打开 package.json这个文件,文件里有个三角箭头+调试,点击后会看到工具上方出现dev,build等选项,点击 dev进行本地运行看效果
- 可以看到 app比比的完整博客页面效果
- 打开docs/.vitepress/config.ts文件进行全局配置,已经注明了各个参数的用途,试着改一下,然后刚刚运行的博客页面会自动变内容
- 所有前端显示的文章放在 docs/posts/目录下,自己试着新建一个页面,跟着比比的文章格式写一篇文章,自己实践才是真理
- docs/pages/目录下放的是功能页面,一般无需修改
- 工具导航数据放在 docs/.vitepress/toolsdata.js里。按照格式添加新的即可
- docs/prepare/目录下放的是临时存放的还不想发布的文章
- public和 static目录放一些不会被转义的资源
- 其他的自行摸索代码
- 后续公众号【比比工房】会放一些教程,有问题的可以在公众号回复留言问题
我是上传到 github后,使用 vercel进行免费部署的。可以百度如何 vercel部署 github项目。然后买一个域名解析到 vercel就可以了
这个基础问题自行百度或者后续前往微信公众号【比比工房】看教程
可能我的教程没考虑新手,如果你是个完全不懂代码的小白,目前仅仅是爱好搭建玩一下,建议先百度问题。然后关注我的公众号找教程,还不会可免费在公众号找到我的联系方式进群和群友交流学习,最后还是不会可以找我付费解决。
只有 star了这个项目,我的更新就能随时提醒你升级。不然错过了就找不到这么好的开源主题了。就在右上角看到那个 star按钮了吗?动动你修长的小手轻轻点一下就 ok了
这个开源主题,我借鉴了一些大佬的经验,请看这个贴:https://juejin.cn/post/7322633033227517991 特此感谢。
这个公众号是比比原创作品的发布、教程内容
点击关注公众号以及联系我:https://mp.weixin.qq.com/s/iCf-QOnKk2WPjVqL6jJ8WA