|
本周再來翻譯一些技術(shù)文章，本次預計翻譯三篇文章如下：
靜態(tài)網(wǎng)站如今再次流行起來了。信息站和品牌宣傳站不再需要使用WordPress之類的內(nèi)容管理系統(tǒng)來動態(tài)更新。 使用靜態(tài)網(wǎng)站生成器，您可以從無源CMS，API等動態(tài)源以及Markdown文件等文件中獲取內(nèi)容。 Nuxt是基于Vue.js的出色的靜態(tài)網(wǎng)站生成器，可輕松用于構(gòu)建靜態(tài)網(wǎng)站。使用Nuxt，從動態(tài)內(nèi)容構(gòu)建靜態(tài)網(wǎng)站所需要做的就是創(chuàng)建模板，以從API和Markdown文件等動態(tài)源動態(tài)顯示內(nèi)容。然后，在Nuxt配置文件中，我們靜態(tài)定義路由，以便它可以通過相同的路由將內(nèi)容生成為靜態(tài)文件。 在本文中，我們將使用Nuxt構(gòu)建新聞網(wǎng)站，并將使用 首先，我們在News API網(wǎng)站上注冊API密鑰。如果我們只想獲取頭條新聞，它是免費的。我們開始來使用Nuxt CLI構(gòu)建網(wǎng)站。我們通過鍵入以下命令來運行： npx create-nuxt-app news-website復制代碼這將在news-website文件夾中創(chuàng)建初始項目文件。運行該向?qū)r，我們不為服務器端框架選擇任何內(nèi)容，不為UI框架選擇任何內(nèi)容，不為測試框架選擇任何內(nèi)容，不為Nuxt模式選擇通用文件，最后根據(jù)您的情況選擇是否包含Axios請求庫，使用lint進行代碼整理和prettify進行代碼美化。 接下來，我們需要安裝一些軟件包。我們需要 現(xiàn)在我們可以開始建立我們的網(wǎng)站了。在default.vue文件中，我們將現(xiàn)有代碼替換為： <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>復制代碼這是用于定義我們網(wǎng)站布局的文件。我們在此處添加了Bootstrap導航欄。該欄包含主頁鏈接和國家列表的下拉列表。這些nuxt-link組件都是指向頁面的鏈接，這些頁面用于在生成靜態(tài)文件時獲取國家/地區(qū)的標題?？梢酝ㄟ^調(diào)用函數(shù)從該部分的country-list包中獲取國家。在本節(jié)中，我們通過覆蓋類的默認顏色來更改導航欄的背景顏色。本部分底部的組件將顯示我們的內(nèi)容。 接下來，我們創(chuàng)建一個mixins文件夾并創(chuàng)建一個名為requestsMixin.jsfile的文件。在其中，我們添加： const APIURL = 'https:///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獲取按國家/地區(qū)和關(guān)鍵字作為標題的代碼。 然后，在pages文件夾中，我們創(chuàng)建headlines文件夾，然后在文件headlines夾中，創(chuàng)建_countryCode.vue文件。在文件中，我們添加： 在該文件中，我們接受route參數(shù)，countryCode然后從該位置調(diào)用我們之前制作并包含在此組件中的 接下來，index.vue在pages文件夾中，將現(xiàn)有代碼替換為： <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參數(shù)來根據(jù)URL獲得來自不同國家/地區(qū)的頭條新聞。 接下來，我們create-env.js在項目的根文件夾中創(chuàng)建一個，并添加以下內(nèi)容： 這使我們可以部署到Netlify，因為我們需要.env根據(jù)輸入的環(huán)境變量動態(tài)創(chuàng)建文件。另外，我們.env手動創(chuàng)建文件，然后將API_KEY鍵作為鍵，將News API API鍵作為值。 接下來的nuxt.config.js，我們將現(xiàn)有代碼替換為： 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./bootstrap/4.0.0/css/bootstrap.min.css' } ], script: [ { src: 'https://code./jquery-3.3.1.slim.min.js' }, { src: 'https://cdnjs./ajax/libs/popper.js/1.14.7/umd/popper.min.js' }, { src: 'https://stackpath./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./usage '@nuxtjs/axios', '@nuxtjs/dotenv' ], /* ** Axios module configuration ** See https://axios./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的依賴項。由于我們要構(gòu)建靜態(tài)站點，因此不能使用BootstrapVue，因為它是動態(tài)的。我們不希望在生成的輸出中使用任何動態(tài)JavaScript，因此我們必須使用普通的Bootstrap。在modules中，我們添加'@nuxtjs/dotenv'了從.env創(chuàng)建到Nuxt應用程序的文件中讀取環(huán)境變量的功能。我們還進行了添加，require('dotenv').config();以便我們可以將process.env.API_KEY其添加到此配置文件中。我們必須這樣做，所以我們不必檢入.env文件。在里面env部分，我們有了apiKey: process.env.API_KEY || ''，這是通過使用讀取.env文件中的API KEY而獲得的dotenv。 在router中，我們定義了動態(tài)路由，以便當用戶單擊具有給定URL的鏈接或單擊具有此類URL的鏈接時可以查看它們。Nuxt還使用這些路由來生成靜態(tài)文件。在generate中，我們定義了Nuxt遍歷的路徑，以生成靜態(tài)網(wǎng)站的靜態(tài)文件。在這種情況下，路由數(shù)組由我們之前創(chuàng)建的標題頁面的路由組成。它將遍歷它們以獲取它們的數(shù)據(jù)，然后渲染它們并從渲染的結(jié)果生成文件。文件夾結(jié)構(gòu)將與路線相對應。因此，由于我們path是/headlines/:countryCode，因此生成的工件將具有該headlines文件夾以及所有國家/地區(qū)代碼作為子文件夾的名稱，并且在每個文件夾內(nèi)將有一個index.html 與呈現(xiàn)的內(nèi)容。 現(xiàn)在，我們準備將我們的網(wǎng)站部署到Netlify。通過轉(zhuǎn)到 之后，將.env文件中的API密鑰輸入到網(wǎng)站設置的“環(huán)境變量”部分，您可以通過單擊“構(gòu)建和部署”菜單上的“環(huán)境”鏈接來進入。輸入API_KEY作為密鑰，然后輸入News API API密鑰作為值。然后單擊保存按鈕。 一旦將所有內(nèi)容提交并推送到由GitHub，Gitlab或Bitbucket托管的Git存儲庫中，Netlify將自動構(gòu)建和部署。 原文鏈接：/aumayeung/g… |
|
|
