Vuepress - How to add Custom html in head tag only on Particular Page?

Question

I want to add Schema Tags and load my custom CSS in head tag on some particular pages not all, So is their any easy way to do that as I am not a coder, Can anyone help me regarding this?

Answer 1

To Add custom style to the default installed vuepress I use the following code in index.styl under .vuepress/styles/ to update content__default css class:

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

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

Screen:

About SEO tags I suggest loris plugin

---

after reading your comment I see a custom layout is the solution.

Add tags to head via 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' }]
  ],

---

Easy customization using default theme:

1. Custom style for each page using custom page class.
2. Add tags for each page using yaml header.

Example for #1 & #2:

/blog/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

index.styl

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

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