Vuepress - 如何仅在特定页面上的 head 标签中添加自定义 html？

要添加自定义样式我使用下面的代码在默认安装vuepressindex.styl下.vuepress/styles/，以更新content__defaultCSS类：

/**
 * Custom Styles here.
 *
 * ref：https://v1.vuepress.vuejs.org/config/#index-styl
 */

.home .hero img
  max-width 450px!important
.content__default
  background-color  #3df085

屏幕：

关于 SEO 标签，我建议使用loris 插件

阅读您的评论后，我看到自定义布局是解决方案。

通过config.js以下方式将标签添加到头部：

  head: [
    ['meta', { name: 'theme-color', content: '#3eaf7c' }],
    ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
    ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
  
  ['meta', { 'property': 'og:type', 'content': 'article' }]
  ],

使用默认主题轻松定制：

1. 使用自定义页面类为每个页面自定义样式。
2. 使用yaml header为每个页面添加标签。

#1 和 #2 的示例：

/博客/README.md

---
pageClass: blog-page
home: true
heroText: Hero Title
actionLink: /blog/
meta:
  - name: description
    content: blog page by abuabdellah
  - name: keywords
    content: super duper SEO
---

# Introduction

This is a test for a blog using v1 Vuepress

/guide/README.md

---
pageClass: guide-page
meta:
  - name: description
    content: guide page by abuabdellah
  - name: keywords
    content: super duper SEO
---

# Introduction

VuePress is composed of two parts

索引样式

.theme-container.blog-page
  background-color blue !important

.theme-container.guide-page
  background-color green !important