Skip to content

Update default theme config docs to reflect changes in v0 vs v1 #1611

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

Merged
merged 3 commits into from
May 29, 2019
Merged

Update default theme config docs to reflect changes in v0 vs v1 #1611

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
60d9825
fix navbar kept on custom layouts
vicmeow May 21, 2019
736ecfb
put ejecting note into a warning
vicmeow May 21, 2019
2bb2186
update v0 file path and add link
vicmeow May 21, 2019
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
15 changes: 11 additions & 4 deletions packages/docs/docs/theme/default-theme-config.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -464,19 +464,22 @@ pageClass: custom-page-class
---
```

Then you can write CSS targeting that page only:
Then you can write CSS targeting that page only in `./vuepress/styles/index.styl`.

``` css
/* .vuepress/override.styl */

.theme-container.custom-page-class {
/* page-specific rules */
}
```

::: tip Note
These styles are written in [index.styl](/config/#index-styl), a file that allows you to conveniently add extra styles or override existing ones for the default theme.
:::

## 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`:
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, you can again specify the component to use using `YAML front matter`:

``` yaml
---
Expand All @@ -488,4 +491,8 @@ This will render `.vuepress/components/SpecialLayout.vue` for the given page.

## Ejecting

You can copy the default theme source code into `.vuepress/theme` to fully customize the theme using the `vuepress eject [targetDir]` command. Note, however, once you eject, you are on your own and won't be receiving future updates or bug fixes to the default theme even if you upgrade VuePress.
You can copy the default theme source code into `.vuepress/theme` to fully customize the theme using the `vuepress eject [targetDir]` command.

::: warning
Once you eject, you are on your own and **won't** be receiving future updates or bug fixes to the default theme even if you upgrade VuePress.
:::