這篇文章主要為大家展示了“建立VuePress博客后必做的優(yōu)化有哪些”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習一下“建立VuePress博客后必做的優(yōu)化有哪些”這篇文章吧。

成都創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站制作、成都網(wǎng)站建設(shè)、外貿(mào)營銷網(wǎng)站建設(shè)與策劃設(shè)計,武強網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:武強等地區(qū)。武強做網(wǎng)站價格咨詢:028-86922220

1. 開啟 HTTPS

開啟 HTTPS 有很多好處，比如可以實現(xiàn)數(shù)據(jù)加密傳輸?shù)?，SEO 也會更容易收錄：

Google 會優(yōu)先選擇 HTTPS 網(wǎng)頁（而非等效的 HTTP 網(wǎng)頁）作為規(guī)范網(wǎng)頁

開啟 HTTPS，我們的基本步驟是：

• 購買下載證書

• 上傳到服務(wù)器

• 開啟 Nginx 配置

2. Gzip 壓縮

開啟 Gzip 壓縮將會極大的提高網(wǎng)站加載速度，如果服務(wù)器用的是按流量付費，就更是必須要做的內(nèi)容。

如果使用的是 Nginx，由于 Nginx 內(nèi)置 Gzip 壓縮模塊，可以直接開啟：

server {
  # 這里是新增的 gzip 配置
  gzip on;
  gzip_min_length 1k;
  gzip_comp_level 6;
  gzip_types application/atom+xml application/geo+json application/javascript application/x-javascript application/json application/ld+json application/manifest+json application/rdf+xml application/rss+xml application/xhtml+xml application/xml font/eot font/otf font/ttf image/svg+xml text/css text/javascript text/plain text/xml;
}

3. 數(shù)據(jù)統(tǒng)計

添加數(shù)據(jù)統(tǒng)計后，可以看到網(wǎng)站的訪問和來源情況，常添加的也就是百度統(tǒng)計和谷歌統(tǒng)計，在國內(nèi)建議用百度統(tǒng)計。

添加統(tǒng)計代碼很簡單，往往只用在統(tǒng)計平臺生成代碼后，添加到站點就行，就比如百度的統(tǒng)計代碼為：

<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://#/hm.js?82a3f80007c4e88c786f3602d0b8a215";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

只是要注意，由于 VuePress 是單頁應(yīng)用，頁面切換過程中，不會重新加載頁面，自然也不會觸發(fā)百度統(tǒng)計。所以我們只能統(tǒng)計到用戶訪問了頁面，但具體點開了哪些文章，跳轉(zhuǎn)了哪些路由并不知道。為了實現(xiàn)路由切換時的數(shù)據(jù)統(tǒng)計，我們還需要監(jiān)聽路由改變，手動上報數(shù)據(jù)。

4. 功能插件

如果要給站點添加各種功能，不一定就要自己手寫各種代碼，也可以直接利用現(xiàn)成的插件。

比如公告插件：

代碼復(fù)制插件：

背景音樂插件：

看板娘插件：

5. 評論功能

一個網(wǎng)站如果有評論功能，可以與讀者建立交流，優(yōu)化站點，也可以及時更新文章中的錯誤。

添加評論功能，主流是使用 Valine 和 Vssue。

Valine 是一款基于 LeanCloud 的快速、簡潔且高效的無后端評論系統(tǒng)，而 LeanCloud 是一種 Serverless 云服務(wù)，提供了一站式的后端服務(wù)，如數(shù)據(jù)存儲、即時通訊等等。使用 Valine，需要注冊 LeanCloud，注冊 LeanCloud 并使用服務(wù)，需要實名認證，最終實現(xiàn)的效果如下：

而 Vssue 是一個 Vue 驅(qū)動的、基于 Issue 的評論插件，雖然有多個托管平臺可以使用，這里我使用的是 GitHub，并且實現(xiàn)了與我 GitHub 的文章 issues 打通，實現(xiàn)了同步。最終的效果如下：

6. 全文搜索

VuePress 的內(nèi)置搜索只會為頁面的標題、h3 、 h4 以及 tags 構(gòu)建搜索索引。 如果你需要全文搜索，可則以使用 Algolia 搜索。

Algolia 是一個數(shù)據(jù)庫實時搜索服務(wù)，能夠提供毫秒級的數(shù)據(jù)庫搜索服務(wù)，并且其服務(wù)能以 API 的形式方便地布局到網(wǎng)頁、客戶端、APP 等多種場景。

像 VuePress 官方文檔就是使用的 Algolia 搜索，使用 Algolia 搜索最大的好處就是方便，它會自動爬取網(wǎng)站的頁面內(nèi)容并構(gòu)建索引，你只用申請一個 Algolia 服務(wù)，在網(wǎng)站上添加一些代碼，就像添加統(tǒng)計代碼一樣，然后就可以實現(xiàn)一個全文搜索功能：

7. SEO

如果希望自己的站點能被搜索引擎做到，就要做好 SEO，而 SEO 牽涉的地方有很多，新手建議先看下基礎(chǔ)的文檔進行學(xué)習：

• 《百度搜索引擎優(yōu)化指南2.0》

  https://ziyuan.baidu.com/college/courseinfo?id=193&page=3

• Google 搜索中心《搜索引擎優(yōu)化 (SEO) 新手指南 》

  https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=zh-cn

很多事情是一定要做的，比如自定義標題、描述、關(guān)鍵詞，優(yōu)化鏈接、重定向、生成 sitemap，并提交到搜索引擎平臺，再輔助使用多個站長平臺，及時發(fā)現(xiàn)和優(yōu)化問題。

8. PWA 兼容

PWA，英文全稱：Progressive Web Apps， 中文翻譯：漸進式 Web 應(yīng)用。

實現(xiàn) PWA，可以方便的讓我們的網(wǎng)站實現(xiàn)桌面圖標、離線緩存、推送通知等功能。

9. 修改樣式

網(wǎng)站樣式總有一些不滿足你期望的地方，有的時候，就需要自己修改代碼。

如果你要修改主題色，VuePress 定義一些變量供以后使用，你可以創(chuàng)建一個 .vuepress/styles/palette.styl 文件：

// 顏色
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
$arrowBgColor = #ccc
$badgeTipColor = #42b983
$badgeWarningColor = darken(#ffe564, 35%)
$badgeErrorColor = #DA5961

// 布局
$navbarHeight = 3.6rem
$sidebarWidth = 20rem
$contentWidth = 740px
$homePageWidth = 960px

// 響應(yīng)式變化點
$MQNarrow = 959px
$MQMobile = 719px
$MQMobileNarrow = 419px

如果你要自定義樣式，你可以創(chuàng)建一個 .vuepress/styles/index.styl 文件。這是一個 Stylus文件，但你也可以使用正常的 CSS 語法。

10. 手寫插件

有的時候，現(xiàn)有的插件實在滿足不了要求，你就需要自己寫一個插件了，但是你還要注意，我們寫的是一個 VuePress 插件還是一個 markdown-it 插件，比如我們復(fù)制代碼，我們可以使用 VuePress 插件來實現(xiàn)，但是如果我們要給代碼塊加一個 try 按鈕，點擊跳轉(zhuǎn)到對應(yīng)的 playground 頁面，那就是拓展 markdown 語法了，就需要寫一個 markdown-it 插件了。

以上是“建立VuePress博客后必做的優(yōu)化有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當前文章：建立VuePress博客后必做的優(yōu)化有哪些
URL地址：http://aaarwkj.com/article36/pcccpg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計、域名注冊、云服務(wù)器、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)