From 40ca73cfa7ca8eb325877522ccf4170a1136b841 Mon Sep 17 00:00:00 2001 From: ULIVZ <472590061@qq.com> Date: Mon, 16 Apr 2018 14:41:22 -0500 Subject: [PATCH] feat: support adding custom page class in front matter (#85) ref #84 --- docs/default-theme-config/README.md | 18 ++++++++++++++++++ lib/default-theme/Layout.vue | 17 ++++++++++++----- 2 files changed, 30 insertions(+), 5 deletions(-) diff --git a/docs/default-theme-config/README.md b/docs/default-theme-config/README.md index 0d64c59ba9..9333215f6f 100644 --- a/docs/default-theme-config/README.md +++ b/docs/default-theme-config/README.md @@ -232,6 +232,24 @@ $borderColor = #eaecef $codeBgColor = #282c34 ``` +## Custom Page Class + +Sometimes, you may need to add a unique class for a specific page so that you can target content on that page only in custom CSS. You can add a class to the theme container div with `pageClass` in `YAML front matter`: + +``` yaml +--- +pageClass: custom-page-class +--- +``` + +Then you can write CSS targeting that page only: + +``` css +.theme-container.custom-page-class { + /* page-specific rules */ +} +``` + ## Custom Layout for Specific Pages By default the content of each `*.md` file is rendered in a `
` container, along with the sidebar, auto-generated edit links and prev/next links. If you wish to use a completely custom component in place of the page (while only keeping the navbar), you can again specify the component to use using `YAML front matter`: diff --git a/lib/default-theme/Layout.vue b/lib/default-theme/Layout.vue index 50562340f9..e1ec1a427a 100644 --- a/lib/default-theme/Layout.vue +++ b/lib/default-theme/Layout.vue @@ -1,10 +1,6 @@