[技術翻譯]使用Nuxt生成靜態網站

来源:https://www.cnblogs.com/yzsunlei/archive/2020/01/06/12159076.html
-Advertisement-
Play Games

本周再來翻譯一些技術文章，本次預計翻譯三篇文章如下： "04.[譯]使用Nuxt生成靜態網站" ( "Generate Static Websites with Nuxt" ) "05.[譯]Web網頁內容是如何影響電池功耗的" ( "How Web Content Can Affect Power ...


本周再來翻譯一些技術文章，本次預計翻譯三篇文章如下：

我翻譯的技術文章都放在一個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/的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獲取按國家/地區和關鍵字作為標題的代碼。

然後，在pages文件夾中，我們創建headlines文件夾，然後在文件headlines夾中，創建_countryCode.vue文件。在文件中，我們添加：

<template>  
  <div class="container">  
    <h1 class="text-center">Headlines in {{getCountryName()}}</h1>  
    <div v-if="headlines.length > 0">  
      <div class="card" v-for="(h, i) of headlines" :key="i">  
        <div class="card-body">  
          <h5 class="card-title">{{h.title}}</h5>  
          <p class="card-text">{{h.content}}</p>  
          <button class="btn btn-primary" :href="h.url" target="_blank" variant="primary">Read</button>  
        </div>  
        <img :src="h.urlToImage" class="card-img-bottom" />  
      </div>  
    </div>  
    <div v-else>  
      <h2 class="text-center">No headlines found.</h2>  
    </div>  
  </div>  
</template>

<script>  
import { requestsMixin } from "~/mixins/requestsMixin";  
const { getData } = require("country-list");

export default {  
  mixins: [requestsMixin],  
  data() {  
    return {  
      headlines: [],  
      countries: getData()  
    };  
  },  
  beforeMount() {  
    this.getHeadlinesByCountry();  
  },  
  methods: {  
    async getHeadlinesByCountry() {  
      this.country = this.$route.params.countryCode;  
      const { data } = await this.getHeadlines(this.country);  
      this.headlines = data.articles;  
    }, 

    getCountryName() {  
      const country = this.countries.find(  
        c => c.code == this.$route.params.countryCode  
      );  
      return country ? country.name : "";  
    }  
  }  
};  
</script>

在該文件中，我們接受route參數，countryCode然後從該位置調用我們之前製作並包含在此組件中的this.getHeadlines函數，requestsMixin以從News API獲取標題。然後結果將顯示在該template部分的Bootstrap卡中。在模板中，我們通過從country-list數據中找到國家名稱來獲得國家名稱。如果找不到標題，我們會顯示一條消息。通常，如果要製作一個接受URL參數的頁面，則必須製作一個帶有下劃線作為第一個字元以及所需URL參數的變數名的文件。因此，在此示例中，_countryCode.vue中我們將countryCode使用該參數this.$route.params.countryCode。

接下來，index.vue在pages文件夾中，將現有代碼替換為：

<template>  
  <div class="container">  
    <h1 class="text-center">Home</h1>  
    <div class="card" v-for="(h, i) of headlines" :key="i">  
      <div class="card-body">  
        <h5 class="card-title">{{h.title}}</h5>  
        <p class="card-text">{{h.content}}</p>  
        <button class="btn btn-primary" :href="h.url" target="_blank" variant="primary">Read</button>  
      </div>  
      <img :src="h.urlToImage" class="card-img-bottom" />  
    </div>  
  </div>  
</template>  
<script>  
import { requestsMixin } from "~/mixins/requestsMixin";  
const { getData } = require("country-list");

export default {  
  mixins: [requestsMixin],  
  data() {  
    return {  
      headlines: []  
    };  
  },  
  beforeMount() {  
    this.getHeadlinesByCountry();  
  },  
  methods: {  
    async getHeadlinesByCountry() {  
      const { data } = await this.getHeadlines("us");  
      this.headlines = data.articles;  
    }  
  }  
};  
</script>

<style>  
</style>

這使我們可以在主頁上顯示美國的標題。它的工作原理與_countryCode.vue頁面相似，不同之處在於，我們僅獲得美國的頭條新聞，而不接受URL參數來根據URL獲得來自不同國家/地區的頭條新聞。

接下來，我們create-env.js在項目的根文件夾中創建一個，並添加以下內容：

const fs = require('fs')  
fs.writeFileSync('./.env', `API_KEY=${process.env.API_KEY}`)

這使我們可以部署到Netlify，因為我們需要.env根據輸入的環境變數動態創建文件。另外，我們.env手動創建文件，然後將API_KEY鍵作為鍵，將News API API鍵作為值。

接下來的nuxt.config.js，我們將現有代碼替換為：

require("dotenv").config();  
const { getData } = require("country-list");

export default {  
  mode: "universal",  
  /*  
   ** Headers of the page  
   */  
  head: {  
    title: "News Website",  
    meta: [  
      { charset: "utf-8" },  
      { name: "viewport", content: "width=device-width, initial-scale=1" },  
      {  
        hid: "description",  
        name: "description",  
        content: process.env.npm_package_description || ""  
      }  
    ],  
    link: [  
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" },  
      {  
        rel: "stylesheet",  
        href:  
         "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"  
      }  
    ],  
    script: [  
      { 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"  
      }  
    ]  
  },  
  /*  
   ** Customize the progress-bar color  
   */  
  loading: { color: "#fff" },  
  /*  
   ** Global CSS  
   */  
  css: [],  
  /*  
   ** Plugins to load before mounting the App  
   */  
  plugins: [],  
  /*  
   ** Nuxt.js dev-modules  
   */  
  buildModules: [],  
  /*  
   ** Nuxt.js modules  
   */  
  modules: [  
    // Doc: https://axios.nuxtjs.org/usage    
    "@nuxtjs/axios",  
    "@nuxtjs/dotenv"  
  ],  
  /*  
   ** Axios module configuration  
   ** See https://axios.nuxtjs.org/options
   */  
  axios: {},  
  /*  
   ** Build configuration  
   */  
  build: {  
    /*  
     ** You can extend webpack config here  
     */  
    extend(config, ctx) {}  
  },  
  env: {  
    apiKey: process.env.API_KEY || ""  
  },  
  router: {  
    routes: [  
      {  
        name: "index",  
        path: "/",  
        component: "pages/index.vue"  
      },  
      {  
        name: "headlines-id",  
        path: "/headlines/:countryCode?",  
        component: "pages/headlines/_countryCode.vue"  
      }  
    ]  
  },  
  generate: {  
    routes() {  
      return getData().map(d => `headlines/${d.code}`);  
    }  
  }  
};

在head對象中，我們更改了title以便顯示所需的標題而不是預設標題。在link中，我們添加了Bootstrap CSS，在script中，我們添加了Bootstrap JavaScript文件和jQuery，它們是Bootstrap的依賴項。由於我們要構建靜態站點，因此不能使用BootstrapVue，因為它是動態的。我們不希望在生成的輸出中使用任何動態JavaScript，因此我們必須使用普通的Bootstrap。在modules中，我們添加"@nuxtjs/dotenv"了從.env創建到Nuxt應用程式的文件中讀取環境變數的功能。我們還進行了添加，require("dotenv").config();以便我們可以將process.env.API_KEY其添加到此配置文件中。我們必須這樣做，所以我們不必檢入.env文件。在裡面env部分，我們有了apiKey: process.env.API_KEY || ""，這是通過使用讀取.env文件中的API KEY而獲得的dotenv。

在router中，我們定義了動態路由，以便當用戶單擊具有給定URL的鏈接或單擊具有此類URL的鏈接時可以查看它們。Nuxt還使用這些路由來生成靜態文件。在generate中，我們定義了Nuxt遍歷的路徑，以生成靜態網站的靜態文件。在這種情況下，路由數組由我們之前創建的標題頁面的路由組成。它將遍歷它們以獲取它們的數據，然後渲染它們並從渲染的結果生成文件。文件夾結構將與路線相對應。因此，由於我們path是/headlines/:countryCode，因此生成的工件將具有該headlines文件夾以及所有國家/地區代碼作為子文件夾的名稱，並且在每個文件夾內將有一個index.html 與呈現的內容。

現在，我們準備將我們的網站部署到Netlify。通過轉到https://www.netlify.com/創建一個Netlify帳戶。免費計劃將滿足我們的需求。然後將代碼提交到托管在GitHub，Gitlab或Bitbucket上的Git存儲庫。然後，當您登錄Netlify時，單擊Git中的New site。從那裡，您可以添加托管在其中一項服務中的Git存儲庫。然後，當要求您輸入Build Command時，輸入node ./create-env.js && npm run generate，發佈目錄將為dist。

之後，將.env文件中的API密鑰輸入到網站設置的“環境變數”部分，您可以通過單擊“構建和部署”菜單上的“環境”鏈接來進入。輸入API_KEY作為密鑰，然後輸入News API API密鑰作為值。然後單擊保存按鈕。

一旦將所有內容提交並推送到由GitHub，Gitlab或Bitbucket托管的Git存儲庫中，Netlify將自動構建和部署。

原文鏈接：https://dev.to/aumayeung/generate-static-websites-with-nuxt-1ia1


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • MySQL常用命令.md
    ## 鏈接資料庫 ``` ## -h/-u這些後面沒有空格 ./bin/mysql -h[ip地址] -P[埠號] -u[用戶名] -p[密碼] ``` ## 查看建表語句 ```sql show create table [table_name] ``` ## 列出所有的資料庫 ```sql s... ...
  • ora.vip 1 ONLINE INTERMEDIAT
    問題出現情景： 三節點12C rac某次擴存儲，兩個節點同時重啟,其中一個節點 ora.rac1.vip 1 ONLINE INTERMEDIATE rac2 FAILED OVER 出現原因可能是同時啟動造成VIP資源搶奪所致。重啟集群監聽，解決 srvctl stop listener -l L ...
  • MySQL基礎篇(04)：存儲過程和視圖，用法和特性詳解
    本文源碼： "GitHub·點這裡" || "GitEE·點這裡" 一、存儲過程 1、概念簡介 存儲程式是被存儲在伺服器中的組合SQL語句，經編譯創建並保存在資料庫中，用戶可通過存儲過程的名字調用執行。存儲過程核心思想就是資料庫SQL語言層面的封裝與重用性。使用存儲過程可以較少應用系統的業務複雜性， ...
  • Android中通過ImageSwitcher實現相冊滑動查看照片功能(附代碼下載)
    場景 效果 註： 博客： https://blog.csdn.net/badao_liumang_qizhi 關註公眾號 霸道的程式猿 獲取編程相關電子書、教程推送與免費下載。 實現 將需要滾動查看的照片複製到res/drawable下 這裡只准備了兩張bg01.jpg和bg02.jpg 在滾動時需 ...
  • Android中點擊按鈕獲取星級評分條的評分
    場景 效果 註： 博客： https://blog.csdn.net/badao_liumang_qizhi 關註公眾號 霸道的程式猿 獲取編程相關電子書、教程推送與免費下載。 實現 將佈局改為LinearLayout，並通過android:orientation="vertical">設置為垂直布 ...
  • Android中使用SeekBar拖動條實現改變圖片透明度
    場景 效果 註： 博客： https://blog.csdn.net/badao_liumang_qizhi 關註公眾號 霸道的程式猿 獲取編程相關電子書、教程推送與免費下載。 實現 將佈局改為LinearLayout，並通過android:orientation="vertical">設置為垂直布 ...
  • Android 日期選擇框 簡潔常用
    效果 核心代碼 >方法 /** * @description 選擇日期彈出框 * @param listener 選擇日期確定後執行的介面 * @param curDate 當前顯示的日期 * @return * @author wqy * @time 2020-1-6 14:23 */ publi ...
  • HTML連載61-焦點圖、固定定位
    一、焦點圖 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D156_PictureOfFocus</title> <style> *{ margin:0; padding:0; } div{ width: ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類