Vuepress

Question

我想在某些特定页面上的 head 标签 中添加架构标签并加载我的自定义 CSS 并非全部，他们是否有任何简单的方法可以做到这一点我不是程序员，谁能帮我解决这个问题？

Answer 1

为默认安装的vuepress添加自定义样式我在.vuepress/styles/下的index.styl中使用以下代码来更新content__defaultcssclass:

/**
 * 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 plugin

阅读您的评论后，我发现 custom layout 是解决方案。

通过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' }]
  ],

使用默认主题轻松自定义:

每个页面的自定义样式使用 custom page class。
使用 yaml header 为每个页面添加标签。

#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

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

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

head

vue.js