《VitePress 簡易速速上手小冊》第7章 高級功能與動態內容（2024 最新版）

在這里插入圖片描述

文章目錄

  • 7.1 動態路由與 API 集成
    • 7.1.1 基礎知識點解析
    • 7.1.2 重點案例：技術博客
    • 7.1.3 拓展案例 1：電商網站
    • 7.1.4 拓展案例 2：事件管理網站
  • 7.2 狀態管理與 Vuex 使用
    • 7.2.1 基礎知識點解析
    • 7.2.2 重點案例：用戶認證系統
    • 7.2.3 拓展案例 1：購物車功能
    • 7.2.4 拓展案例 2：多語言切換
  • 7.3 PWA 支持與離線功能
    • 7.3.1 基礎知識點解析
    • 7.3.2 重點案例：個人博客
    • 7.3.3 拓展案例 1：在線教育平臺
    • 7.3.4 拓展案例 2：電子商務網站

7.1 動態路由與 API 集成

歡迎來到動態路由和 API 集成的精彩世界！在這一章節中，我們將探索如何讓 VitePress 網站更加智能和動態。你將學會如何使用動態路由來處理各種復雜的頁面需求，以及如何將外部 API 集成到你的網站中，讓它變得活生生。準備好了嗎？讓我們深入了解一下。

7.1.1 基礎知識點解析

  • 理解動態路由：動態路由是指那些根據不同參數變化的 URL 路徑。例如，一個博客網站可以使用動態路由來為每篇文章創建一個獨特的 URL。

  • 創建動態路由：在 VitePress 中，你可以通過在路由路徑中添加特定的參數（如 :id 或 :title）來創建動態路由。

  • API 集成的重要性：通過將外部 API 集成到你的網站，你可以顯示實時數據，如股票信息、天氣更新或社交媒體動態。

  • 處理異步數據：學習如何在頁面或組件加載之前從 API 異步獲取數據。這通常涉及到在 Vue 組件中使用生命周期鉤子和異步函數。

  • 路由參數的使用：了解如何在 VitePress 中捕獲和使用路由參數來動態地展示內容。

  • 錯誤處理和數據加載狀態：在從 API 獲取數據時，要處理可能出現的錯誤，并為用戶展示數據加載狀態。

  • SEO 考慮：由于動態內容可能不會立即加載，因此你需要考慮其對 SEO 的影響，并采取相應的策略來優化。

通過掌握這些基礎知識點，你可以更有效地在 VitePress 網站中利用動態路由和 API 集成來增強網站功能，為用戶提供更加豐富和個性化的體驗。這些技術的應用將使你的網站更加動態和互動，從而吸引和保持更多用戶的注意。

7.1.2 重點案例：技術博客

想象你運營著一個技術博客，你想利用動態路由和 API 集成來展示文章，并顯示 GitHub 上的最新項目動態。以下是如何在 VitePress 中實現這些功能的步驟和代碼示例。

步驟 1：實現動態路由

  • 在 VitePress 中創建動態路由以展示各個博客文章。

步驟 2：集成 GitHub API

  • 利用 GitHub API 在博客首頁顯示你的最新項目或代碼提交。

步驟 3：展示文章和項目動態

  • 在博客文章頁面和首頁中分別展示文章內容和 GitHub 項目動態。

VitePress 實現代碼

  1. 創建動態路由

    • 在 .vitepress 目錄下的 config.js 文件中，配置動態路由：

      // .vitepress/config.js
export default {// ...themeConfig: {// ...sidebar: {'/posts/': [{title: '文章',collapsible: true,children: ['dynamic-route-1','dynamic-route-2',// 其他動態路由]}]}}
};

    • 每個博客文章都是一個 Markdown 文件，位于 posts 目錄中。

  2. 集成 GitHub API

    • 在首頁組件中使用 fetch API 獲取 GitHub 數據，并展示：

      <script setup>
import { ref, onMounted } from 'vue';const githubProjects = ref([]);onMounted(async () => {const response = await fetch('https://api.github.com/users/yourusername/repos');githubProjects.value = await response.json();
});
</script><template><div class="github-projects"><h2>我的 GitHub 項目</h2><ul><li v-for="project in githubProjects" :key="project.id"><a :href="project.html_url">{{ project.name }}</a></li></ul></div>
</template>

    • 替換 yourusername 為你的 GitHub 用戶名。

  3. 展示文章和項目動態

    • 在文章的 Markdown 文件中，你可以正常編寫內容。
    • 在首頁（如 index.md）中，可以通過添加自定義組件來展示 GitHub 項目動態。

通過這些步驟，你的技術博客就能夠動態地展示文章內容，并實時顯示你的 GitHub 項目動態。這樣的集成不僅增加了網站的互動性，也為訪客提供了更多有價值的內容。

7.1.3 拓展案例 1：電商網站

假設你管理一個電子商務網站，該網站利用 VitePress 展示產品并提供在線購物功能。你希望通過動態路由和 API 集成來提高用戶體驗和銷售效率。以下是實現這一目標的步驟和代碼示例。

步驟 1：實現動態產品路由

  • 利用 VitePress 創建動態路由來展示不同的產品詳情頁。

步驟 2：集成外部商品庫存 API

  • 集成外部 API，如商品庫存或價格信息，以實時更新產品狀態。

步驟 3：展示產品詳情和實時信息

  • 在產品頁面中展示詳細的產品信息，并通過 API 集成顯示實時數據，如庫存狀態或最新價格。

VitePress 實現代碼

  1. 創建動態產品路由

    • 在 .vitepress 目錄下的 config.js 文件中，配置動態路由：

      // .vitepress/config.js
export default {// ...themeConfig: {// ...sidebar: {'/products/': [{title: '產品',collapsible: true,children: ['product-1','product-2',// 其他產品頁面]}]}}
};

    • 每個產品都對應一個 Markdown 文件，位于 products 目錄中。

  2. 集成外部商品庫存 API

    • 在產品頁面組件中使用 fetch API 獲取商品庫存數據：

      <script setup>
import { ref, onMounted } from 'vue';const productInfo = ref({});onMounted(async () => {const response = await fetch('https://api.example.com/products/product-id');productInfo.value = await response.json();
});
</script><template><div class="product-info"><h2>{{ productInfo.value.name }}</h2><p>{{ productInfo.value.description }}</p><p>庫存狀態: {{ productInfo.value.stock ? '有貨' : '無貨' }}</p><p>價格: ${{ productInfo.value.price }}</p></div>
</template>

    • 替換 product-id 和 API URL 為實際的產品 ID 和 API 地址。

  3. 展示產品詳情和實時信息

    • 在產品的 Markdown 文件中，你可以編寫產品的基礎描述。
    • 在相應的 Vue 組件中，集成外部 API 數據來展示實時庫存和價格信息。

通過這些步驟，你的電子商務網站將能夠動態地展示每個產品的詳細信息，并實時更新庫存和價格狀態。這種動態路由和 API 集成的方法不僅使得產品展示更加豐富和準確，而且為用戶提供了更加便捷的購物體驗。

7.1.4 拓展案例 2：事件管理網站

假設你負責運營一個事件管理網站，該網站使用 VitePress 來展示即將舉行的各類活動。為了提高用戶體驗并提供實時信息，你決定通過動態路由和 API 集成來展示活動詳情，并顯示相關天氣預報。以下是實現這一目標的步驟和代碼示例。

步驟 1：實現動態活動路由

  • 使用 VitePress 創建動態路由，以便根據活動 ID 顯示不同的活動詳情頁。

步驟 2：集成天氣預報 API

  • 通過集成外部天氣 API，為每個活動頁面提供當地的天氣預報信息。

步驟 3：展示活動詳情和天氣信息

  • 在活動頁面中顯示詳細的活動信息，并通過 API 集成顯示當地的天氣預報。

VitePress 實現代碼

  1. 創建動態活動路由

    • 在 .vitepress 目錄下的 config.js 文件中，配置動態路由：

      // .vitepress/config.js
export default {// ...themeConfig: {// ...sidebar: {'/events/': [{title: '活動',collapsible: true,children: ['event-1','event-2',// 其他活動頁面]}]}}
};

    • 每個活動都對應一個 Markdown 文件，位于 events 目錄中。

  2. 集成天氣預報 API

    • 在活動頁面組件中使用 fetch API 獲取天氣信息：

      <script setup>
import { ref, onMounted } from 'vue';const weatherInfo = ref({});onMounted(async () => {const response = await fetch('https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=EventLocation');weatherInfo.value = await response.json();
});
</script><template><div class="weather-info"><h3>活動天氣預報</h3><p>溫度: {{ weatherInfo.value.current.temp_c }}°C</p><p>天氣狀況: {{ weatherInfo.value.current.condition.text }}</p></div>
</template>

    • 替換 YOUR_API_KEY 和 EventLocation 為你的天氣 API 密鑰和活動地點。

  3. 展示活動詳情和天氣信息

    • 在每個活動的 Markdown 文件中，你可以編寫活動的詳細描述。
    • 在相應的 Vue 組件中，集成外部 API 數據來展示實時天氣信息。

通過這些步驟，你的事件管理網站不僅可以為每個活動提供詳細的描述和信息，還能為參與者展示實時的天氣狀況。這種動態路由和 API 集成的方法提高了用戶體驗，使得參加活動的人更能有效地規劃他們的行程。

這些案例展示了如何在 VitePress 中有效地使用動態路由和 API 集成來創建更豐富、更互動的用戶體驗。通過這些高級功能，你的網站不僅僅是靜態的內容展示，而是一個充滿活力和實用信息的動態平臺。

7.2 狀態管理與 Vuex 使用

嘿，歡迎來到狀態管理的世界！如果你的 VitePress 網站開始變得越來越復雜，可能是時候考慮一下狀態管理了。在這一章，我們將探討如何使用 Vuex 來管理你的網站狀態。狀態管理聽起來可能有點抽象，但別擔心，一旦你掌握了它，就像找到了控制混亂的魔法棒！

7.2.1 基礎知識點解析

  • 理解 Vuex 的作用：Vuex 能夠幫助你集中管理應用的所有組件的狀態。在大型應用中，這意味著更清晰的數據流和更易維護的代碼。

  • State（狀態）：State 是 Vuex 的核心，它是存儲的單一狀態樹。所有需要全局管理的數據都應該定義在 state 中。

  • Getters（獲取狀態）：Getters 類似于計算屬性，用于從 state 中派生出一些狀態。例如，你可以使用 getters 來過濾列表、計算購物車中的商品總數等。

  • Mutations（更改狀態）：Mutations 是更改狀態的唯一方法。它們是同步的，可以用來執行添加、更新或刪除操作。

  • Actions（處理異步操作）：在 Vuex 中，Actions 用于處理異步操作。它們可以調用 mutations，但不能直接更改 state。

  • Modules（模塊化狀態管理）：當應用變得非常復雜時，你可以將 Vuex 分割成模塊（modules）。每個模塊可以擁有自己的 state、getters、mutations 和 actions。

  • 單向數據流的重要性：Vuex 提倡單向數據流，即應用的組件只能讀取 state 數據，更改 state 只能通過 mutations，這使得應用的數據流更加可預測和容易理解。

通過對這些基礎概念的理解，你將能夠更有效地利用 Vuex 來管理你的 VitePress 網站中的復雜狀態。這不僅能提高開發效率，還能使得應用更加可靠和易于維護。接下來，讓我們通過一些實際的案例來看看這些概念是如何應用的。

7.2.2 重點案例：用戶認證系統

在你的 VitePress 網站上，假設你想實現一個用戶認證系統，該系統允許用戶登錄并訪問受保護的頁面。使用 Vuex 來管理用戶的登錄狀態、個人信息等是一個高效的方法。下面是如何在 VitePress 中實現這個用戶認證系統的步驟和代碼示例。

步驟 1：設置 Vuex

  • 在 VitePress 項目中設置 Vuex，以便管理用戶的認證狀態。

步驟 2：創建用戶認證模塊

  • 在 Vuex 中創建一個用戶認證模塊，用于處理登錄、登出以及用戶狀態的存儲。

步驟 3：實現用戶登錄和登出功能

  • 創建用于用戶登錄和登出的功能，更新 Vuex 中的狀態。

VitePress 實現代碼

  1. 設置 Vuex

    • 安裝 Vuex 并在項目中創建一個 Vuex store。

      npm install vuex@next --save

    • 創建 Vuex store：

      // store/index.js
import { createStore } from 'vuex';const store = createStore({// 狀態定義state() {return {user: null};},// 更改狀態的方法mutations: {setUser(state, user) {state.user = user;}}
});export default store;

  2. 創建用戶認證模塊

    • 在 Vuex store 中添加用戶認證相關的狀態和方法。

      // store/modules/auth.js
export default {state() {return {isAuthenticated: false};},mutations: {login(state) {state.isAuthenticated = true;},logout(state) {state.isAuthenticated = false;}},actions: {login({ commit }) {// 這里應添加實際的登錄邏輯commit('login');},logout({ commit }) {// 這里應添加實際的登出邏輯commit('logout');}}
};

  3. 實現用戶登錄和登出功能

    • 在 Vue 組件中使用 Vuex store 來管理用戶登錄和登出。

      <template><div><button v-if="!isAuthenticated" @click="login">登錄</button><button v-else @click="logout">登出</button></div>
</template><script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';const store = useStore();const isAuthenticated = computed(() => store.state.auth.isAuthenticated);const login = () => {store.dispatch('auth/login');
};const logout = () => {store.dispatch('auth/logout');
};
</script>

通過這些步驟和代碼，你可以在 VitePress 網站中實現一個基本的用戶認證系統。這個系統將使用 Vuex 來管理用戶的登錄狀態，使得你可以在整個應用中輕松訪問和修改這些狀態。這種方式能夠讓狀態管理更加簡潔和高效。

7.2.3 拓展案例 1：購物車功能

在一個電子商務網站上，購物車是至關重要的一部分。使用 Vuex 來管理購物車狀態可以讓你輕松地跟蹤用戶添加到購物車中的商品，并在整個網站中保持這個狀態的一致性。下面是如何在 VitePress 中實現購物車功能的步驟和代碼示例。

步驟 1：設置 Vuex 購物車模塊

  • 在 VitePress 項目中創建一個 Vuex 模塊來管理購物車的狀態，包括商品列表、添加商品和移除商品的操作。

步驟 2：創建商品列表和購物車組件

  • 在 VitePress 中創建商品列表組件和購物車組件，這些組件將與 Vuex 購物車模塊交互。

步驟 3：實現添加和移除購物車功能

  • 在商品列表組件中實現添加商品到購物車的功能，在購物車組件中實現移除商品的功能。

VitePress 實現代碼

  1. 設置 Vuex 購物車模塊

    • 在項目中創建 Vuex store 并定義購物車模塊：

      // store/modules/cart.js
export default {state() {return {cartItems: []};},mutations: {addToCart(state, product) {state.cartItems.push(product);},removeFromCart(state, productId) {state.cartItems = state.cartItems.filter(item => item.id !== productId);}}
};

  2. 創建商品列表和購物車組件

    • 商品列表組件可以展示所有可購買的商品，并提供一個按鈕來添加商品到購物車。

      <template><div class="product-list"><div v-for="product in products" :key="product.id"><h3>{{ product.name }}</h3><p>{{ product.description }}</p><button @click="addToCart(product)">添加到購物車</button></div></div>
</template><script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';const store = useStore();
const products = computed(() => store.state.products);const addToCart = (product) => {store.commit('cart/addToCart', product);
};
</script>

    • 購物車組件可以展示添加到購物車的商品，并提供一個按鈕來移除商品。

      <template><div class="cart"><div v-for="item in cartItems" :key="item.id"><h3>{{ item.name }}</h3><button @click="removeFromCart(item.id)">移除</button></div></div>
</template><script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';const store = useStore();
const cartItems = computed(() => store.state.cart.cartItems);const removeFromCart = (productId) => {store.commit('cart/removeFromCart', productId);
};
</script>

通過這些步驟和代碼，你的 VitePress 網站將擁有一個完整的購物車功能，用戶可以方便地添加和移除商品。使用 Vuex 管理購物車的狀態使得數據在整個應用中保持一致，同時也簡化了狀態的管理和更新。

7.2.4 拓展案例 2：多語言切換

假設你的 VitePress 網站需要支持多語言切換功能。這對于國際化的網站來說非常重要，可以提升不同地區用戶的體驗。使用 Vuex 來管理當前選擇的語言，可以在整個應用中輕松切換和維護不同的語言環境。下面是實現多語言切換功能的步驟和代碼示例。

步驟 1：設置 Vuex 語言模塊

  • 在 VitePress 項目中創建一個 Vuex 模塊來管理當前的語言狀態。

步驟 2：創建語言切換組件

  • 創建一個語言切換組件，允許用戶選擇不同的語言。

步驟 3：實現語言切換功能

  • 在 Vuex 中定義 mutations 和 actions 來更新當前的語言，并在語言切換組件中實現這一功能。

VitePress 實現代碼

  1. 設置 Vuex 語言模塊

    • 創建 Vuex store 并定義語言模塊：

      // store/modules/language.js
export default {state() {return {currentLanguage: 'en'};},mutations: {setLanguage(state, language) {state.currentLanguage = language;}},actions: {changeLanguage({ commit }, language) {commit('setLanguage', language);}}
};

  2. 創建語言切換組件

    • 創建一個語言切換組件，允許用戶選擇語言。

      <template><div class="language-switcher"><button @click="setLanguage('en')">English</button><button @click="setLanguage('es')">Espa?ol</button><!-- 更多語言按鈕 --></div>
</template><script setup>
import { useStore } from 'vuex';const store = useStore();const setLanguage = (language) => {store.dispatch('language/changeLanguage', language);
};
</script>

  3. 實現語言切換功能

    • 使用 Vuex store 中的狀態來動態改變網站的語言。

      <script setup>
import { computed } from 'vue';
import { useStore } from 'vuex';const store = useStore();
const currentLanguage = computed(() => store.state.language.currentLanguage);// 使用 currentLanguage 來動態改變頁面的語言，例如加載不同的翻譯文件
</script>

通過這些步驟和代碼，你的 VitePress 網站將能夠支持多語言切換，為不同地區的用戶提供本地化的內容。使用 Vuex 來管理語言狀態可以使得這個功能的實現更加簡潔和高效。這不僅提升了用戶體驗，還能幫助你的網站吸引更廣泛的國際訪客。

通過這些案例，你將學會如何在 VitePress 網站中有效地應用 Vuex 來管理復雜的狀態。掌握 Vuex 不僅能提高你的開發效率，還能讓你的網站更加穩定和可靠。讓我們一起深入了解并實踐這些高級技巧吧！

7.3 PWA 支持與離線功能

歡迎來到 PWA（漸進式 Web 應用）和離線功能的世界！在這一章節中，我們將探索如何將你的 VitePress 網站轉變成一個 PWA，使其具備離線訪問能力和更快的加載速度。這不僅能提升用戶體驗，還能增強網站在不穩定網絡環境下的可用性。讓我們一探究竟吧！

7.3.1 基礎知識點解析

  • PWA 的核心特征：PWA 的核心在于使 Web 應用具備類似原生應用的體驗。這包括離線訪問、快速加載、添加到主屏幕、推送通知等功能。

  • Service Workers 的角色：Service Worker 充當網站和網絡之間的代理。它可以攔截和處理網絡請求，管理緩存，從而實現離線體驗。

  • Web App Manifest：一個 JSON 格式的文件，定義了 PWA 的外觀和啟動行為。它包括應用的名稱、圖標、背景顏色、顯示模式等信息。

  • 資源緩存策略：合理的緩存策略至關重要。你可以決定哪些資源（如 HTML、CSS、JavaScript 文件和圖片）應該被緩存以及緩存的有效期。

  • 離線數據處理：對于需要動態數據的應用，你需要考慮如何在離線時處理這些數據。這可能包括使用本地存儲來臨時保存數據。

  • 用戶界面適應性：為了更好的用戶體驗，你的 PWA 應當能夠適應不同的設備和屏幕尺寸。

  • 網絡依賴性減少：PWA 的設計應盡可能減少對網絡的依賴，這意味著在網絡條件不佳時也能提供核心功能。

通過理解這些基礎知識點，你可以開始將你的 VitePress 網站轉變為 PWA，為用戶提供更快速、可靠且吸引人的體驗。這不僅能提升用戶的滿意度，還能幫助你的網站在競爭激烈的數字世界中脫穎而出。

7.3.2 重點案例：個人博客

假設你有一個使用 VitePress 構建的個人博客網站，并想將其轉化為 PWA，以提供更優質的用戶體驗，特別是在離線狀態下。以下是實現 PWA 功能的步驟和代碼示例。

步驟 1：創建并配置 Service Worker

  • 為你的 VitePress 網站編寫 Service Worker 腳本，用于緩存和提供離線內容。

步驟 2：添加 Web App Manifest

  • 創建一個 Web App Manifest 文件，定義 PWA 的外觀和行為。

步驟 3：注冊 Service Worker

  • 在 VitePress 網站中注冊 Service Worker，并確保它正確加載和工作。

VitePress 實現代碼

  1. 創建 Service Worker

    • 創建一個 service-worker.js 文件，并編寫緩存策略。

      // service-worker.js
self.addEventListener('install', event => {event.waitUntil(caches.open('v1').then(cache => {return cache.addAll(['/path/to/your/css/','/path/to/your/scripts/','/path/to/other/assets/',// 其他需要緩存的資源]);}));
});self.addEventListener('fetch', event => {event.respondWith(caches.match(event.request).then(response => {return response || fetch(event.request);}));
});

  2. 添加 Web App Manifest

    • 在項目根目錄創建 manifest.json 文件。

      {"name": "My Personal Blog","short_name": "Blog","start_url": "/","display": "standalone","background_color": "#ffffff","theme_color": "#4DBA87","icons": [{"src": "path/to/icon.png","sizes": "192x192","type": "image/png"}// 更多圖標尺寸]
}

  3. 注冊 Service Worker

    • 在 VitePress 配置文件或入口文件中注冊 Service Worker。

      // main.js 或適當的入口文件
if ('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('/service-worker.js').then(registration => {console.log('SW registered: ', registration);}).catch(registrationError => {console.log('SW registration failed: ', registrationError);});});
}

  4. 在 HTML 文件中引用 Manifest

    • 在 .vitepress/theme/Layout.vue 或相應的布局組件中添加對 Manifest 文件的引用。

      <template><html><head><!-- 其他頭部標簽 --><link rel="manifest" href="/manifest.json"></head><body><!-- 頁面內容 --></body></html>
</template>

通過這些步驟，你的個人博客就成功轉變為了一個 PWA。這意味著你的網站現在可以提供更快的加載速度，以及在離線或網絡不穩定情況下的訪問能力。這將大大提升用戶的訪問體驗，尤其是在移動設備上。

7.3.3 拓展案例 1：在線教育平臺

假設你負責管理一個在線教育平臺的 VitePress 網站，你希望通過將其轉化為 PWA 來提供更流暢的學習體驗，尤其是在網絡連接不穩定的情況下。以下是將在線教育平臺轉化為 PWA 的步驟和代碼示例。

步驟 1：創建并配置 Service Worker

  • 編寫 Service Worker 腳本來緩存教育內容，如課程頁面、視頻等。

步驟 2：添加 Web App Manifest

  • 創建 Web App Manifest 文件，定義平臺的外觀和啟動行為。

步驟 3：注冊 Service Worker 并鏈接 Manifest

  • 在 VitePress 網站中注冊 Service Worker，并在 HTML 中引用 Manifest 文件。

VitePress 實現代碼

  1. 創建 Service Worker

    • 創建一個 service-worker.js 文件，編寫適合在線教育平臺的緩存策略。

      // service-worker.js
self.addEventListener('install', event => {event.waitUntil(caches.open('edu-v1').then(cache => {return cache.addAll(['/path/to/your/course/pages/','/path/to/your/videos/','/path/to/other/assets/',// 其他需要緩存的資源]);}));
});self.addEventListener('fetch', event => {event.respondWith(caches.match(event.request).then(response => {return response || fetch(event.request);}));
});

  2. 添加 Web App Manifest

    • 在項目根目錄創建 manifest.json 文件。

      {"name": "Online Education Platform","short_name": "Edu","start_url": "/","display": "standalone","background_color": "#ffffff","theme_color": "#4DBA87","icons": [{"src": "path/to/icon.png","sizes": "192x192","type": "image/png"}// 更多圖標尺寸]
}

  3. 注冊 Service Worker 并鏈接 Manifest

    • 在 VitePress 配置文件或入口文件中注冊 Service Worker，并在 HTML 中引用 Manifest 文件。

      // main.js 或適當的入口文件
if ('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('/service-worker.js').then(registration => {console.log('SW registered: ', registration);}).catch(registrationError => {console.log('SW registration failed: ', registrationError);});});
}

    • 在 .vitepress/theme/Layout.vue 或相應的布局組件中添加對 Manifest 文件的引用。

      <template><html><head><!-- 其他頭部標簽 --><link rel="manifest" href="/manifest.json"></head><body><!-- 頁面內容 --></body></html>
</template>

通過這些步驟，你的在線教育平臺將能夠作為一個 PWA 運行，提供更佳的用戶體驗，尤其是在離線或網絡條件不佳的情況下。學生們將能夠無縫地訪問課程內容和視頻，即使在沒有穩定互聯網連接的情況下也是如此。

7.3.4 拓展案例 2：電子商務網站

假設你負責一個使用 VitePress 構建的電子商務網站，你想將其升級為 PWA，以提升客戶的購物體驗，特別是在網絡連接不佳的情況下。下面是將電子商務網站轉化為 PWA 的步驟和代碼示例。

步驟 1：創建并配置 Service Worker

  • 為你的電子商務網站編寫 Service Worker 腳本，用于緩存產品頁面、圖片等。

步驟 2：添加 Web App Manifest

  • 創建 Web App Manifest 文件，定義網站的外觀和啟動行為。

步驟 3：注冊 Service Worker 并鏈接 Manifest

  • 在 VitePress 網站中注冊 Service Worker，并在 HTML 中引用 Manifest 文件。

VitePress 實現代碼

  1. 創建 Service Worker

    • 創建一個 service-worker.js 文件，并編寫適合電子商務網站的緩存策略。

      // service-worker.js
self.addEventListener('install', event => {event.waitUntil(caches.open('ecommerce-v1').then(cache => {return cache.addAll(['/path/to/your/product/pages/','/path/to/your/images/','/path/to/other/assets/',// 其他需要緩存的資源]);}));
});self.addEventListener('fetch', event => {event.respondWith(caches.match(event.request).then(response => {return response || fetch(event.request);}));
});

  2. 添加 Web App Manifest

    • 在項目根目錄創建 manifest.json 文件。

      {"name": "E-Commerce Site","short_name": "Shop","start_url": "/","display": "standalone","background_color": "#ffffff","theme_color": "#4DBA87","icons": [{"src": "path/to/icon.png","sizes": "192x192","type": "image/png"}// 更多圖標尺寸]
}

  3. 注冊 Service Worker 并鏈接 Manifest

    • 在 VitePress 配置文件或入口文件中注冊 Service Worker，并在 HTML 中引用 Manifest 文件。

      // main.js 或適當的入口文件
if ('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('/service-worker.js').then(registration => {console.log('SW registered: ', registration);}).catch(registrationError => {console.log('SW registration failed: ', registrationError);});});
}

    • 在 .vitepress/theme/Layout.vue 或相應的布局組件中添加對 Manifest 文件的引用。

      <template><html><head><!-- 其他頭部標簽 --><link rel="manifest" href="/manifest.json"></head><body><!-- 頁面內容 --></body></html>
</template>

通過實施這些步驟，你的電子商務網站將作為 PWA 運行，提供更快的加載速度和離線瀏覽能力。這將極大地提升用戶的購物體驗，尤其是在網絡連接不穩定的情況下。

通過這些案例，你將了解到 PWA 不僅能改善用戶體驗，還能在不同場景下為用戶提供實際的幫助。讓我們開始探索如何將你的 VitePress 網站轉變為一個功能強大的 PWA 吧！

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/696077.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/696077.shtml
英文地址，請注明出處：http://en.pswp.cn/news/696077.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

力扣精選算法100道——Z字形變換(模擬專題）

力扣精選算法100道——Z字形變換(模擬專題）

目錄 &#x1f388;了解題意 &#x1f388;算法原理 &#x1f6a9;先處理第一行和最后一行 &#x1f6a9;再處理中間行 &#x1f388;實現代碼 &#x1f388;了解題意 大家看到這個題目的時候肯定是很迷茫的&#xff0c;包括我自己也是搞不清楚題目什么意思&#xff0c;我…
閱讀更多...
memcpy和strcat的區別

memcpy和strcat的區別

memcpy 函數&#xff1a; memcpy 函數用于在內存之間復制一定數量的字節。memcpy 是按字節進行復制的&#xff0c;可以用于復制任意類型的數據&#xff0c;不僅限于字符串。memcpy 不會自動添加字符串結束符號 \0&#xff0c;因此在復制字符串時&#xff0c;需要確保復制的字節…
閱讀更多...
喝點小酒-胡謅“編程語言學習”

喝點小酒-胡謅“編程語言學習”

今天&#xff0c; 與一個小哥們兒&#xff08;學習計算機科學與技術專業的&#xff0c;我兒子&#xff0c;這是真的&#xff09;一塊兒吃飯&#xff08;這頓飯&#xff0c;在家里吃的&#xff0c;吹個牛哈&#xff0c;我做的&#xff0c;三個葷菜、一個素材、一個湯、主食米飯 …
閱讀更多...
約瑟夫經典問題C++，STL容器queue解法

約瑟夫經典問題C++，STL容器queue解法

題目&#xff1a; Description n 個人圍成一圈&#xff0c;從第一個人開始報數,數到 m 的人出列&#xff0c;再由下一個人重新從 1 開始報數&#xff0c;數到m 的人再出圈&#xff0c;依次類推&#xff0c;直到所有的人都出圈&#xff0c;請輸出依次出圈人的編號。 注意&…
閱讀更多...
[linux]進程間通信（IPC）———共享內存（shm）（什么是共享內存，共享內存的原理圖，共享內存的接口，使用演示）

[linux]進程間通信（IPC）———共享內存（shm）（什么是共享內存，共享內存的原理圖，共享內存的接口，使用演示）

一、什么是共享內存 共享內存區是最快的&#xff08;進程間通信&#xff09;IPC形式。一旦這樣的內存映射到共享它的進程的地址空間&#xff0c;這些進程間數據傳遞不再涉及到內核&#xff0c;換句話說是進程不再通過執行進入內核的系統調用來傳遞彼此的數據。注意&#xff1a;…
閱讀更多...
Three.js初學（2）

Three.js初學（2）

Three.js初學&#xff08;2&#xff09; 三維坐標系的認識1. 輔助坐標系 光源的影響1. 光材質的影響2. 光源介紹點光源環境光平行光 3. 光源衰減/位置 相機控件1. 引入擴展庫2. 使用方法 三維坐標系的認識 這一章節的主要作用是加強自我對三維坐標空間的認識。 1. 輔助坐標系…
閱讀更多...
貓頭虎分享已解決Bug || TypeError: Cannot set property ‘innerHTML‘ of null

貓頭虎分享已解決Bug || TypeError: Cannot set property ‘innerHTML‘ of null

博主貓頭虎的技術世界 &#x1f31f; 歡迎來到貓頭虎的博客 — 探索技術的無限可能&#xff01; 專欄鏈接&#xff1a; &#x1f517; 精選專欄&#xff1a; 《面試題大全》 — 面試準備的寶典&#xff01;《IDEA開發秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鴻蒙》 …
閱讀更多...
華為配置直連三層組網隧道轉發示例

華為配置直連三層組網隧道轉發示例

配置直連三層組網隧道轉發示例 組網圖形 圖1 配置直連三層組網隧道轉發示例組網圖 業務需求組網需求數據規劃配置思路配置注意事項操作步驟配置文件擴展閱讀 業務需求 企業用戶接入WLAN網絡&#xff0c;以滿足移動辦公的最基本需求。且在覆蓋區域內移動發生漫游時&#xff0c;不…
閱讀更多...
Linux 系統編程：文件編程

Linux 系統編程：文件編程

本篇涉及文件的創建、打開、讀和關閉。 文件為操作系統服務和設備提供了一個簡單而一致的 接口 。“接口”指的是一種約定或標準&#xff0c;通過提供一個一致的接口&#xff0c;可以為上層隱藏底層硬件和服務的復雜性&#xff0c;上層無需關注它們的具體實現細節。 比如操作系…
閱讀更多...
Kafka進階

Kafka進階

文章目錄 概要應用場景消息隊列兩種模式kafka的基礎架構分區常見問題小結 概要 kafka的傳統定義&#xff1a;kafka是一個分布式的基于發布\訂閱模式的消息隊列&#xff0c;主要用于大數據實時處理領域。 kafka的最新概念&#xff1a;kafka是一個開源的分布式事件流平臺&#x…
閱讀更多...
隨機森林模型、模型模擬技術和決策樹模型簡介

隨機森林模型、模型模擬技術和決策樹模型簡介

隨機森林模型、模型模擬技術和決策樹模型簡介 隨機森林模型 隨機森林模型是一種比較新的機器學習模型&#xff0c;它是通過集成學習的方法將多個決策樹模型組合起來&#xff0c;形成一個更加強大和穩定的模型。隨機森林模型的基本原理是“數據隨機”和“特征隨機”&#xff0…
閱讀更多...
10種常見的光伏發電量計算方法

10種常見的光伏發電量計算方法

光伏發電是一種將太陽能轉化為電能的清潔能源技術。隨著環境保護意識的日益增強和能源結構的轉型&#xff0c;光伏發電得到了廣泛的應用。對于光伏系統來說&#xff0c;發電量的準確計算是評估系統性能、預測長期收益和優化系統運行的關鍵。以下是常見的光伏發電量計算方法&…
閱讀更多...
Vista 2.08: The storm chaser

Vista 2.08: The storm chaser

A story about Mathew —— the storm chaser. "He is too young to understand his dream and the Harvard is just others dream put into his mind." "You dont have to chase for the happiness that defined by others. You must define your own happines…
閱讀更多...
Python3零基礎教程之Python解釋器與開發環境搭建

Python3零基礎教程之Python解釋器與開發環境搭建

大家好&#xff0c;我是千與編程&#xff0c;碩士畢業于北京大學&#xff0c;曾先后就職于字節跳動&#xff0c;京東等互聯網大廠&#xff0c;目前在編程導航知識星球擔任星球嘉賓&#xff0c;著有《AI算法畢設智囊袋》&#xff0c;《保姆級帶你通關秋招教程》兩大專欄。 今天開…
閱讀更多...
從it方面介紹部分好玩的電影

從it方面介紹部分好玩的電影

電影推薦 1.《黑客帝國》《The matrix》 僅推薦第一二三部2. 《代碼奔騰》《code rush》3 人物傳記類 《社交網絡》 《硅谷傳奇》 《喬布斯》4《模仿游戲》也是傳記 但主演是 卷福5 《環形使者》6 《蝴蝶效應》 三部7.《隱私大盜》8.《監視資本主義&#xff1a;智能陷阱》9. 劇…
閱讀更多...
RMAN備份與恢復

RMAN備份與恢復

文章目錄 一、RMAN介紹二、全量備份三、增量備份0級備份1級增量備份累積性差量備份總結 四、壓縮備份壓縮備份介紹壓縮備份操作壓縮備份優缺點 五、異常恢復1、恢復前的準備2、恢復數據庫 六、RMAN相關參數 一、RMAN介紹 RMAN&#xff08;Recovery Manager&#xff09;是Oracl…
閱讀更多...
在做了frp的實驗室服務器不同端口間傳輸文件

在做了frp的實驗室服務器不同端口間傳輸文件

背景 實驗室有兩臺服務器&#xff0c;使用的是一個IP&#xff0c;兩個端口&#xff0c;給人看上去是一臺服務器的兩個端口&#xff0c;實際是兩臺服務器。 現在我需要從一個端口傳輸一個文件夾到另外一個端口&#xff0c;實際上是從一個機器傳輸到另外一個機器。 操作 在兩臺…
閱讀更多...
linux系統消息中間件rabbitmq部署鏡像集群

linux系統消息中間件rabbitmq部署鏡像集群

RabbitMQ鏡像集群配置 RabbitMQ鏡像集群配置創建鏡像集群:鏡像隊列策略設置說明 RabbitMQ鏡像集群配置 上面已經完成RabbitMQ默認集群模式&#xff0c;但并不保證隊列的高可用性&#xff0c;盡管交換機、綁定這些可以復制到集群里的任何一個節點&#xff0c;但是隊列內容不會復…
閱讀更多...
thonny 使用命令行安裝包并且替換源，安裝速度嗖嗖的

thonny 使用命令行安裝包并且替換源，安裝速度嗖嗖的

thonny 使用命令行安裝包并且替換源 點擊 “工具”->"打開系統shell"替換源下載嘎嘎快 點擊 “工具”->“打開系統shell” 替換源 pip config set global.index-url http://mirrors.aliyun.com/pypi/simple/ pip config set global.trusted-host mirrors.aliy…
閱讀更多...
AI Agent幾篇不錯的概述和介紹

AI Agent幾篇不錯的概述和介紹

?2023年人工智能體(AI Agent)開發與應用全面調研&#xff1a;概念、原理、開發、應用、挑戰、展望 OpenAI的CEO都在談的 AI Agent&#xff0c;到底是什么&#xff1f; | 人人都是產品經理 AI智能體卷爆大模型&#xff01;4大Agent打擂&#xff0c;西部世界誰將成為軟件2.0&am…
閱讀更多...
最新文章

Copyright @ 2022~2023