🏕 2022 独立开发者训练营(全栈)开营啦 ~~,查看介绍 / 立即报名(早鸟优惠) →

使用 Nuxt 与 Nuxt Content 构建静态网站应用

昨天发布了新的训练营网站,添加了几个静态的落地页,主要是为了介绍训练营与训练内容,另外我希望能通过文档,更好地辅助大家完成训练。虽然是几个简单的静态页面,不过从设计,准备内容,技术选型,再到具体实现还是用了挺长时间的,下在给大家总结一下技术与流程,给有需要同样类型网站的同学提供一份技术参考,能帮大家节省一些时间。

根据同学提的建议,一开始,我的需求就是创建几个页面介绍一些独立开发者训练营。因为不想使用内容管理系统,又需要考虑到搜索引擎优化,所以静态网页生成器是首选文案。

应用

首先我试用了 VuePress,默认的主题很适合做文档类型的网站,不过除了文档内容,我还需要做几个落地页,想要修改或是定制 VuePress 的主题并不容易。后来我看 Nuxt 3.0 发布了 RC 版,基于 Nuxt 3.0 的 Nuxt Content 2.0 正式版也发布了,之前并没有使用经验,大概看了下文档与演示以后,我认为应该可以满足我的需求。

Nuxt 框架在 Vue 框架的基础上做了很多优化,新版本的 Nuxt 有自己的服务端渲染引擎。Nuxt Content 可以方便制作内容类型的网站,比如它可以根据 markdown 文件生成页面,页面的主题是由我们自己设计的。比如 https://ninghao.co/docs,这个页面里的文档内容就是由 markdown 文件提供的。Nuxt Content 提供了一些方法可以查询或是搜索 markdown 文档内容。

部署

因为有服务端渲染,所以部署 Nuxt 应用时需要准备服务端的环境,不过我用的方法是用 Nuxt 命令行工具生成一个静态网站,Nuxt 会扫描应用的所有路由,自动生成对应的静态文件,这样部署时只需要准备一个普通的 Web 服务器就行了。

训练营网站分成了两个部分,其实是两个独立的前端应用,一个用 Nuxt 做的落地页与文档,另一个是用 Vue 做的视频应用。我希望它们在同一域名下提供服务,比如访问 https://ninghao.co 时,展示的是用 Nuxt 做的落地页,访问 https://ninghao.co/c 时,打开的就是观察训练视频用的 Vue 应用。在部署时,可以使用 Nginx 定义一个服务器,然后通过 location 指令设置具体提供内容的位置与配置。

 location / {
    root /www/nid-camp/dist;
    index index.html;
    try_files $uri $uri/ /index.html;
  }

  location /c {
    alias /www/nid-camp-2/dist;
    index index.html;
    try_files $uri $uri/ /c/index.html;
  }

因为有一个 Vue 应用要在子目录下提供服务,所以需要配置 Vue 与 Vue Router。

vue.config.js

module.exports = {
  publicPath: '/c',
};

在应用里创建路由器的时候,记得给 createWebHistory 提供一个参数,它的值就是子目录的名字。

/**
 * 创建路由器
 */
const router = createRouter({
  history: createWebHistory('/c/'),
  routes: [
    ...
  ],
});

样式

网站的界面组件全部是我手工创建的,设计这些组件时,我用到了 Tailwind 这款样式库,与其它的样式框架或者组件库不同,Tailwind 只负责样式部分,它不强制我们的界面结构,主要提供的是样式工具类,所以使用它的时候跟直接写 css 差不多,但是会方便得多。

动画

有几个页面需要加点动画效果,这些动画我用到了 Gsap,它的 ScrollTrigger 插件很好用,可以方便地处理页面滚动行为,根据页面的滚动位置触发设计好的动画效果。

技术参考

  • 演示:https://ninghao.co
  • 框架:Nuxt 与 Nuxt Content
  • 样式:Tailwind
  • 动画:Gsap
  • 视频:Plyr

Vue 是一款前端应用框架,Nuxt 也是一个框架,它的内核是 Vue,但是在 Vue 的基础之上做了一些优化并添加了一些新的东西。Nuxt Content 可以看成是 Nuxt 框架的一个插件,它可以方便我们创建内容类型的网站应用。

幕后

在使用 Gsap 处理页面动画时,有个问题消耗掉了我两天的工作时间,最终只用了一行代码解决了那个问题。本来我是想写个小文,说明一下我是如何通过细微的线索一步一点解决那个问题的,也想吹吹自己有多么坚持。又过了一天,我发现解决问题的那行代码会带来新的问题,于是我又用了两天解决了这个新的问题。“困于心,衡于虑,而后作”,有发现很多问题都是在我经受世大的精神折磨,就在我要放弃的时候得到了解决。

大家如果需要开发同样类型的网站应用,可以加上我的微信,我能帮大家快速解决一些问题,不至于两天写一行代码:)



微信好友

用微信扫描二维码,
加我好友。



微信公众号

用微信扫描二维码,
订阅宁皓网公众号。



240746680

用 QQ 扫描二维码,
加入宁皓网 QQ 群。

统计

13799
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点