Nach dem Erstellen eines VuePress-Blogs muss tatsächlich viel Optimierungsarbeit geleistet werden. In diesem Artikel wird eine Bestandsaufnahme der 10 Optimierungen vorgenommen, die nach Abschluss des grundlegenden Aufbaus durchgeführt werden müssen.
【Verwandte Empfehlung: vuejs-Video-Tutorial】
Das Aktivieren von HTTPS hat viele Vorteile, wie z. B. verschlüsselte Datenübertragung usw., und SEO wird auch einfacher einzubinden sein:
Google gibt Priorität. Wählen Sie eine HTTPS-Webseite (anstelle einer entsprechenden HTTP-Webseite) als kanonische Webseite aus.
Um HTTPS zu aktivieren, sind unsere grundlegenden Schritte:
Kaufen Sie das Download-Zertifikat.
Auf den Server hochladen „Nginx-Konfiguration aktivieren“ . Gzip-Komprimierung
Wenn Sie Nginx verwenden, können Sie es direkt aktivieren, da Nginx über ein integriertes Gzip-Komprimierungsmodul verfügt:
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;
}https://github.com/mqyqingfeng/Blog/issues/248
3. Datenstatistiken
Das Hinzufügen von Statistikcode ist sehr einfach. Er wird oft erst verwendet, nachdem die Statistikplattform den Code generiert und dann zur Website hinzugefügt hat. Der Statistikcode von Baidu lautet beispielsweise:
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?82a3f80007c4e88c786f3602d0b8a215";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>Beachten Sie nur, dass es sich bei VuePress um eine Einzelseite handelt Anwendung, während des Seitenwechselvorgangs wird die Seite nicht neu geladen und Baidu-Statistiken werden nicht ausgelöst. Wir können also nur die von Nutzern besuchten Seiten zählen, wissen aber nicht, welche Artikel angeklickt oder welche Routen weitergeleitet wurden. Um Datenstatistiken während des Routenwechsels zu implementieren, müssen wir auch Routenänderungen überwachen und Daten manuell melden.
Weitere spezifische Schritte finden Sie unter „VuePress Blog-Optimierung: Hinzufügen der Datenstatistikfunktion“
https://github.com/mqyqingfeng/Blog/issues/245
Wenn Sie möchten es zur Site hinzufügen. Für verschiedene Funktionen müssen Sie nicht unbedingt selbst verschiedene Codes schreiben, sondern können auch direkt vorgefertigte Plug-Ins verwenden.
Zum Beispiel Ankündigungs-Plugin:
Codekopie-Plugin:
Für mehr Plug-Ins und Effekte finden Sie im Blog „Building VuePress“. Einige Plug-Ins können Sie verwenden. https://github.com/mqyqingfeng/Blog/issues/261
5. Kommentarfunktion Verfügt eine Website über eine Kommentarfunktion, kann sie die Kommunikation mit den Lesern aufbauen und optimieren. Außerdem kann die Website Fehler in Artikeln zeitnah aktualisieren.
Kommentarfunktion hinzufügen, der Mainstream ist die Verwendung von Valine und Vssue. 
Weitere Informationen zu den spezifischen Bedienschritten finden Sie unter „VuePress Blog-Optimierung: Hinzufügen von Valine“. Kommentarfunktion“ https:// github.com/mqyqingfeng/Blog/issues/268Und Vssue ist ein Vue-gesteuertes, problembasiertes Kommentar-Plug-in. Obwohl mehrere Hosting-Plattformen verfügbar sind, verwende ich diese GitHub und implementieren Sie dasselbe wie mein GitHub. Die Artikelprobleme wurden gelöscht und synchronisiert. Der endgültige Effekt ist wie folgt: Spezifische Bedienschritte finden Sie unter „VuePress-Blogoptimierung: Vssue-Kommentarfunktion hinzufügen“ https://github.com/mqyqingfeng/Blog/issues/270
Die integrierte Suche von VuePress erstellt nur einen Suchindex für den Titel, h2, h3 und Tags der Seite. Wenn Sie eine Volltextsuche benötigen, können Sie die Algolia-Suche verwenden.
Algolia 是一个数据库实时搜索服务，能够提供毫秒级的数据库搜索服务，并且其服务能以 API 的形式方便地布局到网页、客户端、APP 等多种场景。
像 VuePress 官方文档就是使用的 Algolia 搜索，使用 Algolia 搜索最大的好处就是方便，它会自动爬取网站的页面内容并构建索引，你只用申请一个 Algolia 服务，在网站上添加一些代码，就像添加统计代码一样，然后就可以实现一个全文搜索功能：
具体的步骤参考 《VuePress 博客优化之开启 Algolia 全文搜索》
https://github.com/mqyqingfeng/Blog/issues/267
7. SEO
如果希望自己的站点能被搜索引擎做到，就要做好 SEO，而 SEO 牵涉的地方有很多，新手建议先看下基础的文档进行学习：
《百度搜索引擎优化指南2.0》
https://ziyuan.baidu.com/college/courseinfo?id=193&page=3
Google 搜索中心《搜索引擎优化 (SEO) 新手指南 》
https://developers.google.com/search/docs/beginner/seo-starter-guide?hl=zh-cn
很多事情是一定要做的，比如自定义标题、描述、关键词，优化链接、重定向、生成 sitemap，并提交到搜索引擎平台，再辅助使用多个站长平台，及时发现和优化问题。
具体可以参考：
8. PWA 兼容
PWA，英文全称：Progressive Web Apps， 中文翻译：渐进式 Web 应用。
实现 PWA，可以方便的让我们的网站实现桌面图标、离线缓存、推送通知等功能。
要实现 PWA 参考 《VuePress 博客优化之兼容 PWA》
https://github.com/mqyqingfeng/Blog/issues/263
9. 修改样式
网站样式总有一些不满足你期望的地方，有的时候，就需要自己修改代码。
如果你要修改主题色，VuePress 定义一些变量供以后使用，你可以创建一个
.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 // 响应式变化点 $MQNarrow = 959px $MQMobile = 719px $MQMobileNarrow = 419pxNach dem Login kopieren如果你要自定义样式，你可以创建一个
.vuepress/styles/index.styl文件。这是一个 Stylus文件，但你也可以使用正常的 CSS 语法。更多的颜色修改参考 VuePress 的 palette.styl。
https://vuepress.vuejs.org/zh/config/#palette-styl
10. 手写插件
有的时候，现有的插件实在满足不了要求，你就需要自己写一个插件了，但是你还要注意，我们写的是一个 VuePress 插件还是一个 markdown-it 插件，比如我们复制代码，我们可以使用 VuePress 插件来实现，但是如果我们要给代码块加一个 try 按钮，点击跳转到对应的 playground 页面，那就是拓展 markdown 语法了，就需要写一个 markdown-it 插件了。
但无论你写哪种插件，都提供了文章：
Das obige ist der detaillierte Inhalt vonZusammenfassung und Teilen: 10 unverzichtbare Optimierungen nach der Einrichtung eines VuePress-Blogs!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
So erstellen Sie einen Blog
Welche Taste drücken Sie zur Wiederherstellung, wenn Ihr Computer abstürzt?
Was sind die gängigen Linux-Systeme?
Hunderte
AccessDenied-Fehlerlösung
Überprüfen Sie den Status der belegten Ports in Windows
Was sind die kostenlosen virtuellen PHP-Hosts im Ausland?
Was bedeutet Handy-HD?
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
