Nachos Pillage Milwaukee

    vuepress-theme-craftdocs

    2.0.9 • Public • Published

    Craft Documentation Theme for VuePress

    This is the VuePress theme used for Craft CMS documentation.

    It makes the following changes over the default VuePress theme:

    • Adds support for code language toggles and split page views.
    • Disables interpolation for all inline <code> tags.
    • Improves <table> styling.
    • Adds themeConfig options to tweak sidebar sizing: smallerSidebarHeadings and widerSidebar. (Each false by default.)

    Setup

    1. Install VuePress like normal

    2. Require this theme

      yarn add -D vuepress-theme-craftdocs # or npm install -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] },
          extendMarkdown(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.)

    Upgrading from v1.3.x

    1. Follow the VuePress Migration from 0.x guide.
    2. Update any custom styles that relied on .content to reference .theme-default-content instead.
    3. If you’re using Algolia DocSearch, make sure your index configuration’s selectors are still valid.

    Keywords

    none

    Install

    npm i vuepress-theme-craftdocs

    DownloadsWeekly Downloads

    135

    Version

    2.0.9

    License

    MIT

    Unpacked Size

    50.4 kB

    Total Files

    24

    Last publish

    Collaborators

    • brandonkelly
    • mattstein