Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support extra classes at page level (close: #84) #85

Merged
merged 6 commits into from
Apr 16, 2018
Merged

Support extra classes at page level (close: #84) #85

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
cacfe3a
feat: default theme: support extra classes at page level (close: #84)
ulivz Apr 16, 2018
c49ddfe
chore(change extraClasses to pageClass.):
ulivz Apr 16, 2018
9a3f844
docs: add doc for additional page class
ulivz Apr 16, 2018
3c032c3
Update README.md
yyx990803 Apr 16, 2018
7360787
Update Layout.vue
yyx990803 Apr 16, 2018
e12e2e3
Update README.md
yyx990803 Apr 16, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions docs/default-theme-config/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,6 +214,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 `<div class="page">` 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`:
Expand Down
17 changes: 12 additions & 5 deletions lib/default-theme/Layout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
<template>
<div class="theme-container"
:class="{
'no-navbar': !shouldShowNavbar,
'sidebar-open': isSidebarOpen,
'no-sidebar': !shouldShowSidebar
}"
:class="pageClasses"
@touchstart="onTouchStart"
@touchend="onTouchEnd">
<Navbar v-if="shouldShowNavbar" @toggle-sidebar="toggleSidebar"/>
Expand Down Expand Up @@ -63,6 +59,17 @@ export default {
this.$route,
this.$site
)
},
pageClasses() {
const userPageClass = this.$page.frontmatter.pageClass
return [
{
'no-navbar': !this.shouldShowNavbar,
'sidebar-open': this.isSidebarOpen,
'no-sidebar': !this.shouldShowSidebar,
},
userPageClass
]
}
},

Expand Down