How to add global variables in text in Vuepress 2 with vuepress-theme-hope?

50 Views Asked by At

When writing my software documentation using Vuepress 2 with vuepress-theme-hope, I have many words and phrases that can change in the future. I want to put those in the documentation as variables.

How can I do this on a global level for my documentation project?

My question is the same as this question, but that is for vuepress 0 or 1 and it looks like that answer doesn't already have a theme. When I use the same syntax it doesn't work for me. I can't add a comment to that answer because I don't have enough Stack Overflow points.

Using the answer in the question mentioned above, I added themeConfig to my config.ts file. This is my /.vuepress/config.ts file:

import { googleAnalyticsPlugin } from '@vuepress/plugin-google-analytics'
import theme from "./theme.ts"

export default {
  lang: 'en-US',
  title: 'My Title',
  description: 'My description ',
  base: '/',
  ],
  theme,
  TocPluginOptions: {
    level: [2, 3, 4]
  },
  plugins: [
    // google measurement ID: https://v2.vuepress.vuejs.org/reference/plugin/google-analytics.html
    googleAnalyticsPlugin({
      id: 'G-12345678',
    }),
  ],
  themeConfig: {
    plugin_name: "My Plugin",
    system_name: "My System"
  }
}

and this is my theme.ts file:

import { hopeTheme } from "vuepress-theme-hope";

// We export the theme object by default
export default hopeTheme({

    logo: "\Logo_Full-Color-Full-Size-x0.4.png",

    iconAssets: ["fontawesome", "iconify", "fontawesome-with-brands"],
    sidebar: [
        "WhatisThis"
    ],
    plugins: {
        mdEnhance: {
            //include files within other files
            include: true,
            // Enable figure
            figure: true,
            // Enable image lazyload
            imgLazyload: true,
            // Enable image mark
            imgMark: true,
            // Enable image size
            imgSize: true,
        },
    },
});

Then on one of my documentation pages I use this variable:

{{ $themeConfig.plugin_name }}

But as soon as I add this variable, the page doesn't render anymore (blank page)

Where and how can I define my global variables?

0

There are 0 best solutions below