本周再来翻译一些技术文章，本次估量翻译三篇文章如下：

04.[译]使用Nuxt生成静态网站(Generate Static Websites with Nuxt)

05.[译]Web网页内容是如何影响电池功耗的(How Web Content Can Affect Power Usage)

06.[译]在现代JavaScript中编写异步任务(https://web.dev/off-main-thread/)

我翻译的技术文章都放在一个github货仓中，如果感受有用请点击star保藏。我为什么要创建这个git货仓？目的是通过翻译国外的web相关的技术文章来学习和跟进web成长的新思想和新技术。git货仓地点：

静态网站如今再次风行起来了。信息站和品牌宣传站不再需要使用WordPress之类的内容打点系统来动态更新。

使用静态网站生成器，您可以从无源CMS，API等动态源以及Markdown文件等文件中获取内容。

Nuxt是基于Vue.js的超卓的静态网站生成器，可轻松用于构建静态网站。使用Nuxt，从动态内容构建静态网站所需要做的就是创建模板，以从API和Markdown文件等动态源动态显示内容。然后，在Nuxt配置文件中，我们静态界说路由，以便它可以通过不异的路由将内容生成为静态文件。

在本文中，我们将使用Nuxt构建新闻网站，并将使用https://newsapi.org/的News API 作为内容。您必需先了解Vue.js，然后才华使用Nuxt成立网站，因为Nuxt是基于Vue.js的框架。

首先，我们在News API网站上注册API密钥。如果我们只想获取头条新闻，它是免费的。我们开始来使用Nuxt CLI构建网站。我们通过键入以下命令来运行：

npx create-nuxt-app news-website

这将在news-website文件夹中创建初始项目文件。运行该向导时，我们不为处事器端框架选择任何内容，不为UI框架选择任何内容，不为测试框架选择任何内容，不为Nuxt模式选择通用文件，最后按照您的情况选择是否包罗Axios请求库，使用lint进行代码整理和prettify进行代码美化。

接下来，我们需要安置一些软件包。我们需要@nuxtjs/dotenv用于在本地读取环境变量的措施包和country-list用于在我们的网站上获取国家列表的库。要安置它们，我们运行：

npm i @nuxtjs/dotenv country-list

此刻我们可以开始成立我们的网站了。在default.vue文件中，我们将现有代码替换为：

<template> <div> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <nuxt-link class="navbar-brand" to="/">News Website</nuxt-link> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <nuxt-link class="nav-link" to="/">Home</nuxt-link> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" >Headliny by Country</a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <nuxt-link class="dropdown-item" :to="`/headlines/${c.code}`" v-for="(c, i) of countries" :key="i" >{{c.name}}</nuxt-link> </div> </li> </ul> </div> </nav> <nuxt /> </div> </template> <script> import { requestsMixin } from "~/mixins/requestsMixin"; const { getData } = require("country-list"); export default { mixins: [requestsMixin], data() { return { countries: getData() }; } }; </script> <style> .bg-light { background-color: lightcoral !important; } </style>

这是用于界说我们网站构造的文件。我们在此处添加了Bootstrap导航栏。该栏包罗主页链接和国家列表的下拉列表。这些nuxt-link组件都是指向页面的链接，这些页面用于在生成静态文件时获取国家/地区的标题。可以通过挪用函数从该部分的country-list包中获取国家。在本节中，我们通过笼罩类的默认颜色来变动导航栏的配景颜色。本部分底部的组件将显示我们的内容。

scriptgetDatastyle.bg-lightnuxttemplate

接下来，我们创建一个mixins文件夹并创建一个名为requestsMixin.jsfile的文件。在此中，我们添加：

const APIURL = "https://newsapi.org/v2"; const axios = require("axios"); export const requestsMixin = { methods: { getHeadlines(country) { return axios.get( `${APIURL}/top-headlines?country=${country}&apiKey=${process.env.VUE_APP_APIKEY}` ); }, getEverything(keyword) { return axios.get( `${APIURL}/everything?q=${keyword}&apiKey=${process.env.VUE_APP_APIKEY}` ); } } };

该文件包罗用于从News API获取按国家/地区和关键字作为标题的代码。