Warm tip: This article is reproduced from serverfault.com, please click

vue.js-Vuepress

(vue.js - Vuepress)

发布于 2021-08-02 07:41:44

我想在某些特定页面上添加架构标签并在头标签中加载我的自定义 CSS,而不是全部,所以他们有什么简单的方法可以做到这一点,因为我不是编码器,有人可以帮我解决这个问题吗?

Questioner
I'm Beginner
Viewed
0
Tarik 2021-08-04 02:34:32

index.styl要将自定义样式添加到默认安装的 vuepress,我在下面使用以下代码.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 的示例:

/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

索引样式

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

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