gpt4 book ai didi

使用nuxt3开发简约优雅的个人blog

转载 作者:我是一只小鸟 更新时间:2023-06-27 14:31:37 27 4
gpt4 key购买 nike

起因

很早前我就有过搭建个人博客的想法,但是我希望使用纯前端实现,这样就不需要付出额外的后端维护成本,维护成本又低,而且更加安全。网上也有很多博客框架但是也不符合我的需求,所以我使用了nuxt3 + ts搭建了自己的个人博客,更加贴合个人需求,在功能和样式也能做到随心所欲 。

前端的同学一定不会陌生antfu,作为活跃的前端开源开发者的博客自然也是少不了光顾 antfu.me 。

他的博客风格我非常喜欢,简约精致没有赘余的部分,所以我模仿了antfu的风格基于nuxt3 + unocss + Ts搭建了一个博客站点 。

访问地址: https://www.iamsee.top/ 。

Github: https://github.com/chansee97/nuxt-blog 。

特点

  • nuxt3技术栈,ssr渲染,对seo更加友好
  • 适配移动端布局
  • 页面载入、暗色模式过渡动画简约优雅
  • 使用markdown作为文章格式
  • 基于md文档元数据的tag分类功能
  • 文章搜索功能
  • 基于giscus的文章评论功能
  • 在antfu的基础上修改了一些布局样式
  • 抽离网站信息配置,减少修改心智负担
  • 引入 51LA 站点统计,网站访问流量一目了然

页面预览

pc

image.png

image.png

image.png

image.png

image.png

移动端

image.png

image.png

如何使用

  1. 克隆仓库到本地
  2. 修改site.config网站信息和社交链接
  3. 根据需要修改或删除 nuxt.config.ts 中的引入的访问统计脚本( 51LA )
  4. 修改content文件夹内的文章
  5. 提交至自己的仓库
  6. 部署至vercel等托管网站(确保每次提交自动构建)
  7. 访问托管网站配置的地址,有条件可以配置自己的域名

至此博客部署完成,后续只要每次向content添加文章并提交仓库便可以更新博客,也可以根据需要开发合适自己的功能 。

无论你是有学习nuxt3开发或者是博客搭建的需求,这个项目都是一个不错的学习内容 。

最后此篇关于使用nuxt3开发简约优雅的个人blog的文章就讲到这里了,如果你想了解更多关于使用nuxt3开发简约优雅的个人blog的内容请搜索CFSDN的文章或继续浏览相关文章,希望大家以后支持我的博客! 。

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com