Skip to content

Latest commit

 

History

History
117 lines (85 loc) · 2.38 KB

README.md

File metadata and controls

117 lines (85 loc) · 2.38 KB

Craft Documentation Theme for VuePress

This is the VuePress theme used for Craft CMS documentation.

Changes

Works with Vuepress 1.x

You will have the following to you vuepress config.js

  alias: {
    "@AlgoliaSearchBox": path.resolve(__dirname,'noop.js'),
  },

Setup

  1. Install VuePress like normal

  2. Require this theme

    yarn add -D vuepress-theme-craftdocs
    
  3. Set these things in .vuepress/config.js:

    module.exports = {
        // ...
        theme: 'craftdocs',
        themeConfig: {
            // ...
            codeLanguages: {
                php: 'PHP',
                twig: 'Twig',
                // any other code language labels you want to include in code toggles...
            }
        },
        markdown: {
            anchor: { level: [2, 3] },
            config(md) {
                let markup = require('vuepress-theme-craftdocs/markup')
                md.use(markup)
            }
        }
    }

Code Toggles

You can create code toggles by wrapping multiple fenced code blocks with a code container:

::: code

```php
echo "Hey, $name";
```

```twig
Hey, {{ name }}
```

:::

By default, toggle labels will be pulled from the value in themeConfig.codeLanguages that matches the code block’s language. If you want to provide a custom label instead, just type it after the code block language:

::: code

```php Craft 2
$success = craft()->entries->saveEntry($entry);
```

```php Craft 3
$success = Craft::$app->elements->saveElement($entry);
```

:::

Split Views

You can create split view pages by adding split: true to your page’s frontmatter:

---
split: true
---

In split view, any content that contains a horizontal rule (---) will be divided into left and right portions, starting and ending at the closest H2/H3 headings.

## Cool Headings

Left-side content

---

Right-side content

In split view, code toggles can share a single page-wide toggle UI, floated at the top of the right-hand content pane. To do this, add a code list to your page’s frontmatter:

---
split: true
code:
  - php
  - twig
---

(Use the same language handles defined by themeConfig.codeLanguages in .vuepress/config.js.)