【技术翻译】使用Nuxt生成静态网站

这周会翻译一些技术文章。这次打算翻译三篇文章如下：04.翻译：用Nuxt生成静态网站（GenerateStaticWebsiteswithNuxt）05.翻译：WebHowWebContentCanAffectPowerUsage都放在一个github仓库里。如果觉得有用，欢迎点star收藏。我为什么要创建这个git存储库？目的是通过翻译国外与Web相关的技术文章，学习和跟进Web开发的新思想、新技术。Git仓库地址：https://github.com/yzsunlei/javascript-article-translate这几天又开始流行静态网站了。信息和品牌站不再需要使用像WordPress这样的内容管理系统来动态更新。使用静态网站生成器，您可以从CMS、API和Markdown文件等被动来源获取内容。Nuxt是一个优秀的基于Vue.js的静态站点生成器，可以很容易地用于构建静态网站。使用Nuxt，从动态内容构建静态网站所需要做的就是创建模板以动态显示来自API和Markdown文件等动态来源的内容。然后，在Nuxt的配置文件中，我们静态定义路由，使其可以通过相同的路由生成静态文件的内容。在本文中，我们将使用Nuxt构建一个新闻网站，并将使用https://newsapi.org/的新闻API作为内容。在使用Nuxt构建网站之前，您必须了解Vue.js，因为Nuxt是一个基于Vue.js的框架。首先，我们在NewsAPI网站上注册一个API密钥。如果我们只是想获得头条新闻，它是免费的。让我们从使用NuxtCLI构建一个网站开始。我们通过键入以下命令来运行它：npxcreate-nuxt-appnews-website这将在news-website文件夹中创建初始项目文件。运行向导的时候，服务端框架什么都不选，UI框架什么都不选，测试框架什么都不选，Nuxt模式的常用文件什么都不选，最后根据你的情况选择是否包含axios请求库,使用lint进行代码整理，使用prettify进行代码美化。接下来，我们需要安装一些包。我们需要@nuxtjs/dotenv包来读取本地环境变量，需要country-list库来获取我们网站上的国家列表。要安装它们，我们运行：npmi@nuxtjs/dotenvcountry-list现在我们可以开始构建我们的网站了。在default.vue文件中，我们将有代码替换为：这是用于确定我们的网站我们添加Bootstrap导航栏的布局文件。此列包含主页链接的下拉列表和国家/地区列表。这些nuxt-link组件都是指向页面的链接，用于在生成静态文件时获取国家标题。可以通过调用该函数从本节的country-list包中获取国家。在本节中，我们通过覆盖类的默认颜色来更改导航栏的背景颜色。本节底部的组件将显示我们的内容。scriptgetDatastyle.bg-lightnuxttemplate接下来，我们创建一个mixins文件夹，并创建一个名为requestsMixin.js的文件。在其中，我们添加：constAPIURL="https://newsapi.org/v2";constaxios=require("axios");exportconstrequestsMixin={methods:{getHeadlines(country){returnaxios.get(`${APIURL}/top-headlines?country=${country}&apiKey=${process.env.VUE_APP_APIKEY}`);},getEverything(keyword){returnaxios.get(`${APIURL}/everything?q=${keyword}&apiKey=${process.env.VUE_APP_APIKEY}`);}}};此文件包含从新闻API中按国家和关键字获取标题的代码。然后，在pages文件夹中，我们创建headlines文件夹，然后在文件headlines文件夹中，创建_countryCode.vue文件。在文件中，我们添加：在这个文件中，我们获取路由参数、国家代码和我们之前从那个位置调用，并在这个组件中包含this.getHeadlines函数，requestsMixin从新闻API获取头条新闻，然后结果将显示在模板部分中的引导卡。在模板中，我们通过从国家列表数据中查找国家名称来获取国家名称。如果找不到标题，我们会显示一条消息。通常，如果你想制作一个接受URL参数的页面，你必须制作一个以下划线作为第一个字符和所需URL参数的变量名的文件。所以，在这个例子中，在_countryCode.vue中我们使用参数this.$route.params.countryCode作为countryCode。接下来，index.vue在pages文件夹中，将现在有代码替换为：这样我们就可以在首页及其作品中显示美国的头条，类似于_countryCode.vue页面，只是我们只获取美国的头条，而不是接受URL参数，根据URL获取来自不同国家的标题。接下来，我们在项目的根文件夹中创建一个create-env.js，并添加以下内容：constfs=require('fs')fs.writeFileSync('./.env',`API_KEY=${process.env.API_KEY}`)这允许我们部署到Netlify，因为我们需要根据输入的环境变量动态创建.env文件。此外，我们手动创建.env文件，然后使用API??_KEY键作为键，使用NewsAPIAPI键作为值。在接下来的nuxt.config.js中，我们将现有代码替换为：require("dotenv").config();const{getData}=require("国家列表");exportdefault{mode:"universal",/***页面标题*/head:{title:"NewsWebsite",meta:[{charset:"utf-8"},{name:"viewport",content:"width=device-width,initial-scale=1"},{hid:"description",name:"description",content:process.env.npm_package_description||""}],链接:[{rel:"icon",type:"image/x-icon",href:"/favicon.ico"},{rel:"stylesheet",href:"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"}],脚本:[{src:"https://code.jquery.com/jquery-3.3.1.slim.min.js"},{src:"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"},{src:"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"}]},/***自定义进度条颜色*/loading:{color:"#fff"},/***全局CSS*/css:[],/***在安装App之前加载的插件*/plugins:[],/***Nuxt.jsdev-modules*/buildModules:[],/***Nuxt.js模块*/modules:[//Doc:https://axios.nuxtjs.org/usage"@nuxtjs/axios","@nuxtjs/dotenv"],/***Axios模块配置**参见https://axios.nuxtjs.org/options*/axios:{},/***构建配置*/build:{/***你可以在这里扩展webpack配置*/extend(config,ctx){}},env:{apiKey:process.env.API_KEY||""},router:{routes:[{name:"index",path:"/",component:"pages/index.vue"},{name：“他adlines-id",路径:"/headlines/:countryCode?",组件:"pages/headlines/_countryCode.vue"}]},生成:{routes(){returngetData().map(d=>`headlines/${d.code}`);}}};在head对象中，我们更改标题，以便显示所需的标题而不是默认标题在链接中，我们添加BootstrapCSS，在脚本中，我们添加BootstrapJavaScript文件和jQuery，它们是Bootstrap的依赖项。由于我们构建的是静态站点，因此我们不能使用BootstrapVue，因为它是动态的。我们不希望生成的输出中有任何动态JavaScript，因此我们必须使用普通的Bootstrap。在模块，我们添加了“@nuxtjs/dotenv”以从创建到Nuxt应用程序中的.env文件中读取环境变量。我们还添加了require(“dotenv”).config();这样我们就可以将process.env.API_KEY添加到此配置文件。我们必须这样做，这样我们就不必签入.env文件。在env部分中，我们有apiKey：process.env.API_KEY||""，它是通过使用dotenvwhic获得的h读取.env文件中的APIKEY。在router中我们定义了动态路由，这样当用户点击一个给定URL的链接或者点击一个带有这样一个URL的链接时，他们就可以被查看到。Nuxt也使用这些路由来生成静态文件。在generate中，我们定义了Nuxt为静态网站生成静态文件所经过的路径。在这种情况下，路由数组是由标题页创建的路由组成的。它将遍历它们以获取它们的数据，然后渲染它们并根据渲染结果生成文件。文件夹结构将与路线相对应。因此，由于我们的路径是/headlines/:countryCode，因此生成的工件将包含headlines文件夹，其中包含所有国家/地区代码作为子文件夹名称，并且在每个文件夹内将有一个包含呈现内容的index.html。现在，我们准备将我们的网站部署到Netlify。通过转到https://www.netlify.com/创建一个Netlify帐户。免费计划将满足我们的需求。然后将代码提交到托管在GitHub、Gitlab或Bitbucket上的Git存储库。然后，当您登录到Netlify时，单击NewsiteinGit。从那里，您可以添加托管在其中一项服务中的Git存储库。然后，当要求输入BuildCommand时，输入node./create-env.js&&npmrungenerate，发布目录将是dist。之后，将.env文件中的API密钥输入网站设置的“环境变量”部分，您可以通过单击“构建和部署”菜单上的“环境”链接来访问它。输入API_KEY作为键，输入NewsAPIAPI键作为值。然后单击保存按钮。一旦所有内容都提交并推送到由GitHub、Gitlab或Bitbucket托管的Git存储库，Netlify将自动构建和部署。