From 711fc743b20cc0635b9aa6f6b1825cfb4d158412 Mon Sep 17 00:00:00 2001
From: Ze Yu <angzeyu@gmail.com>
Date: Sun, 6 Dec 2020 10:52:15 +0800
Subject: [PATCH 1/3] Remove old variable and import features

---
 packages/core/src/Page/index.js               |  27 +--
 packages/core/src/Site/index.js               |  19 +-
 packages/core/src/html/NodePreprocessor.js    |   3 -
 .../core/src/variables/VariableProcessor.js   | 188 +-----------------
 4 files changed, 20 insertions(+), 217 deletions(-)

diff --git a/packages/core/src/Page/index.js b/packages/core/src/Page/index.js
index a7288c05da..917dacb7cd 100644
--- a/packages/core/src/Page/index.js
+++ b/packages/core/src/Page/index.js
@@ -534,18 +534,20 @@ class Page {
 
     // Set expressive layout file as an includedFile
     this.includedFiles.add(layoutPagePath);
+    const { variableProcessor } = this.pageConfig;
+
     return fs.readFile(layoutPagePath, 'utf8')
       /*
        Render {{ MAIN_CONTENT_BODY }} and {% raw/endraw %} back to itself first,
-       which is then dealt with in the call below to {@link renderSiteVariables}.
+       which is then dealt with in the call below to {@link renderWithSiteVariables}.
        */
-      .then(result => this.pageConfig.variableProcessor.renderPage(layoutPagePath, result, pageSources, {
+      .then(result => variableProcessor.renderWithSiteVariables(layoutPagePath, result, pageSources, {}, {
         [LAYOUT_PAGE_BODY_VARIABLE]: `{{${LAYOUT_PAGE_BODY_VARIABLE}}}`,
       }, true))
       // Include file with the cwf set to the layout page path
       .then(result => nodePreprocessor.includeFile(layoutPagePath, result))
       // Note: The {% raw/endraw %}s previously kept are removed here.
-      .then(result => this.pageConfig.variableProcessor.renderSiteVariables(
+      .then(result => this.pageConfig.variableProcessor.renderWithSiteVariables(
         this.pageConfig.rootPath, result, pageSources, {
           [LAYOUT_PAGE_BODY_VARIABLE]: pageData,
         }));
@@ -565,8 +567,8 @@ class Page {
     const headerContent = fs.readFileSync(this.header, 'utf8');
     this.includedFiles.add(this.header);
 
-    const renderedHeader = this.pageConfig.variableProcessor.renderSiteVariables(this.pageConfig.sourcePath,
-                                                                                 headerContent, pageSources);
+    const renderedHeader = this.pageConfig.variableProcessor.renderWithSiteVariables(
+      this.pageConfig.sourcePath, headerContent, pageSources);
     return `<div data-included-from="${this.header}">${renderedHeader}</div>\n${pageData}`;
   }
 
@@ -584,8 +586,8 @@ class Page {
     // Set footer file as an includedFile
     this.includedFiles.add(this.footer);
 
-    const renderedFooter = this.pageConfig.variableProcessor.renderSiteVariables(this.pageConfig.sourcePath,
-                                                                                 footerContent, pageSources);
+    const renderedFooter = this.pageConfig.variableProcessor.renderWithSiteVariables(
+      this.pageConfig.sourcePath, footerContent, pageSources);
     return `<div data-included-from="${this.footer}">${renderedFooter}</div>\n${pageData}`;
   }
 
@@ -608,7 +610,7 @@ class Page {
     }
     this.includedFiles.add(this.siteNav);
 
-    const siteNavMappedData = this.pageConfig.variableProcessor.renderSiteVariables(
+    const siteNavMappedData = this.pageConfig.variableProcessor.renderWithSiteVariables(
       this.pageConfig.sourcePath, siteNavContent, pageSources);
 
     // Check navigation elements
@@ -796,7 +798,7 @@ class Page {
       // Set head file as an includedFile
       this.includedFiles.add(headFilePath);
 
-      const headFileMappedData = this.pageConfig.variableProcessor.renderSiteVariables(
+      const headFileMappedData = this.pageConfig.variableProcessor.renderWithSiteVariables(
         this.pageConfig.sourcePath, headFileContent, pageSources).trim();
       // Split top and bottom contents
       const $ = cheerio.load(headFileMappedData);
@@ -875,8 +877,8 @@ class Page {
     const nodeProcessor = new NodeProcessor(fileConfig);
 
     return fs.readFile(this.pageConfig.sourcePath, 'utf-8')
-      .then(result => this.pageConfig.variableProcessor.renderPage(this.pageConfig.sourcePath,
-                                                                   result, pageSources))
+      .then(result => this.pageConfig.variableProcessor.renderWithSiteVariables(this.pageConfig.sourcePath,
+                                                                                result, pageSources))
       .then(result => nodePreprocessor.includeFile(this.pageConfig.sourcePath, result))
       .then((result) => {
         this.collectFrontMatter(result);
@@ -1188,7 +1190,8 @@ class Page {
       const nodeProcessor = new NodeProcessor(fileConfig);
 
       return fs.readFile(dependency.to, 'utf-8')
-        .then(result => this.pageConfig.variableProcessor.renderPage(dependency.to, result, pageSources))
+        .then(result => this.pageConfig.variableProcessor.renderWithSiteVariables(dependency.to, result,
+                                                                                  pageSources))
         .then(result => nodePreprocessor.includeFile(dependency.to, result, file))
         .then(result => Page.removeFrontMatter(result))
         .then(result => this.collectPluginSources(result))
diff --git a/packages/core/src/Site/index.js b/packages/core/src/Site/index.js
index 82f255d77c..fb842826c3 100644
--- a/packages/core/src/Site/index.js
+++ b/packages/core/src/Site/index.js
@@ -557,7 +557,6 @@ class Site {
 
     this.baseUrlMap.forEach((base) => {
       const userDefinedVariablesPath = path.resolve(base, USER_VARIABLES_PATH);
-      const userDefinedVariablesDir = path.dirname(userDefinedVariablesPath);
       let content;
       try {
         content = fs.readFileSync(userDefinedVariablesPath, 'utf8');
@@ -580,22 +579,8 @@ class Site {
       const $ = cheerio.load(content, { decodeEntities: false });
       $('variable,span').each((index, element) => {
         const name = $(element).attr('name') || $(element).attr('id');
-        const variableSource = $(element).attr('from');
-
-        if (variableSource !== undefined) {
-          try {
-            const variableFilePath = path.resolve(userDefinedVariablesDir, variableSource);
-            const jsonData = fs.readFileSync(variableFilePath);
-            const varData = JSON.parse(jsonData);
-            Object.entries(varData).forEach(([varName, varValue]) => {
-              this.variableProcessor.renderAndAddUserDefinedVariable(base, varName, varValue);
-            });
-          } catch (err) {
-            logger.warn(`Error ${err.message}`);
-          }
-        } else {
-          this.variableProcessor.renderAndAddUserDefinedVariable(base, name, $(element).html());
-        }
+
+        this.variableProcessor.renderAndAddUserDefinedVariable(base, name, $(element).html());
       });
     });
   }
diff --git a/packages/core/src/html/NodePreprocessor.js b/packages/core/src/html/NodePreprocessor.js
index 721cb7e201..7338e0aab6 100644
--- a/packages/core/src/html/NodePreprocessor.js
+++ b/packages/core/src/html/NodePreprocessor.js
@@ -343,9 +343,6 @@ class NodePreprocessor {
     switch (element.name) {
     case 'panel':
       return this._preProcessPanel(element, context);
-    case 'variable':
-    case 'import':
-      return utils.createEmptyNode();
     case 'include':
       return this._preProcessInclude(element, context);
     case 'body':
diff --git a/packages/core/src/variables/VariableProcessor.js b/packages/core/src/variables/VariableProcessor.js
index ae21871cef..65f7e951b6 100644
--- a/packages/core/src/variables/VariableProcessor.js
+++ b/packages/core/src/variables/VariableProcessor.js
@@ -1,6 +1,5 @@
 const cheerio = require('cheerio');
 const fs = require('fs');
-const path = require('path');
 
 const _ = {};
 _.clone = require('lodash/clone');
@@ -154,8 +153,8 @@ class VariableProcessor {
    *        Currently only used for layouts.
    @param keepPercentRaw whether to reoutput {% raw/endraw %} tags, also used only for layouts.
    */
-  renderSiteVariables(contentFilePath, content, pageSources, lowerPriorityVariables = {},
-                      higherPriorityVariables = {}, keepPercentRaw = false) {
+  renderWithSiteVariables(contentFilePath, content, pageSources, lowerPriorityVariables = {},
+                          higherPriorityVariables = {}, keepPercentRaw = false) {
     const userDefinedVariables = this.getParentSiteVariables(contentFilePath);
     const parentSitePath = urlUtils.getParentSiteAbsolutePath(contentFilePath, this.rootPath,
                                                               this.baseUrlMap);
@@ -172,151 +171,6 @@ class VariableProcessor {
    * Page level variable storage methods
    */
 
-  /**
-   * Subroutine for {@link extractPageVariables}.
-   * Renders a variable declared via either a <variable name="..."> tag or <variable from="..."> json file
-   * and then adds it to {@link pageVariables}.
-   *
-   * @param pageVariables object to add the extracted page variables to
-   * @param elem "dom node" as parsed by htmlparser2
-   * @param elemHtml as outputted by $(elem).html()
-   * @param filePath that the <variable> tag is from
-   * @param renderVariable callback to render the extracted variable with before storing
-   */
-  static addVariable(pageVariables, elem, elemHtml, filePath, renderVariable) {
-    const variableSource = elem.attribs.from;
-    if (variableSource) {
-      const variableFilePath = path.resolve(path.dirname(filePath), variableSource);
-      if (!fs.existsSync(variableFilePath)) {
-        logger.error(`The file ${variableSource} specified in 'from' attribute for json variable in ${
-          filePath} does not exist!\n`);
-        return;
-      }
-      const rawData = fs.readFileSync(variableFilePath);
-
-      try {
-        const jsonData = JSON.parse(rawData);
-        Object.entries(jsonData).forEach(([name, value]) => {
-          pageVariables[name] = renderVariable(filePath, value);
-        });
-      } catch (err) {
-        logger.warn(`Error in parsing json from ${variableFilePath}:\n${err.message}\n`);
-      }
-    } else {
-      const variableName = elem.attribs.name;
-      if (!variableName) {
-        logger.warn(`Missing 'name' for variable in ${filePath}\n`);
-        return;
-      }
-
-      pageVariables[variableName] = renderVariable(filePath, elemHtml);
-    }
-  }
-
-  /**
-   * Subroutine for {@link extractPageVariables}.
-   * Processes an <import> element with a 'from' attribute.
-   * {@link extractPageVariables} is recursively called to extract the other page's variables in doing so.
-   * Then, all locally declared variables of the imported file are assigned under the alias (if any),
-   * and any inline variables specified in the <import> element are also set in {@link pageImportedVariables}.
-   *
-   * @param pageImportedVariables object to add the extracted imported variables to
-   * @param elem "dom node" of the <import> element as parsed by htmlparser2
-   * @param {PageSources} pageSources instance to add sources from rendering imported variables
-   * @param filePath that the <variable> tag is from
-   * @param renderFrom callback to render the 'from' attribute with
-   */
-  addImportVariables(pageImportedVariables, elem, pageSources, filePath, renderFrom) {
-    // render the 'from' file path for the edge case that a variable is used inside it
-    const importedFilePath = renderFrom(filePath, elem.attribs.from);
-    const resolvedFilePath = path.resolve(path.dirname(filePath), importedFilePath);
-    if (!fs.existsSync(resolvedFilePath)) {
-      logger.error(`The file ${importedFilePath} specified in 'from' attribute for import in ${
-        filePath} does not exist!\n`);
-      return;
-    }
-
-    // recursively extract the imported page's variables first
-    const importedFileContent = fs.readFileSync(resolvedFilePath);
-    pageSources.staticIncludeSrc.push({ to: resolvedFilePath });
-    const {
-      pageVariables: importedFilePageVariables,
-    } = this.extractPageVariables(resolvedFilePath, importedFileContent, pageSources);
-
-    const alias = elem.attribs.as;
-    if (alias) {
-      // import everything under the alias if there is one
-      pageImportedVariables[alias] = importedFilePageVariables;
-    }
-
-    // additionally, import the inline variables without an alias
-    Object.keys(elem.attribs).filter((attr) => {
-      const isReservedAttribute = attr === 'from' || attr === 'as';
-      if (isReservedAttribute) {
-        return false;
-      }
-
-      const isExistingAttribute = !!importedFilePageVariables[attr];
-      if (!isExistingAttribute) {
-        logger.warn(`Invalid inline attribute ${attr} imported in ${filePath} from ${resolvedFilePath}\n`);
-        return false;
-      }
-
-      return true;
-    }).forEach((name) => {
-      pageImportedVariables[name] = importedFilePageVariables[name];
-    });
-  }
-
-  /**
-   * Extract page variables from a page.
-   * These include all locally declared <variable>s and variables <import>ed from other pages.
-   * @param filePath for error printing
-   * @param data to extract variables from
-   * @param {PageSources} pageSources to add sources found when rendering extracted variables to
-   * @param includeVariables from the parent include, if any, used during {@link renderIncludeFile}
-   */
-  extractPageVariables(filePath, data, pageSources, includeVariables = {}) {
-    const pageVariables = {};
-    const pageImportedVariables = {};
-
-    const $ = cheerio.load(data);
-
-    /*
-     This is used to render extracted variables before storing.
-     Hence, variables can be used within other variables, subject to declaration order.
-     */
-    const renderVariable = (contentFilePath, content) => {
-      const previousVariables = {
-        ...pageImportedVariables,
-        ...pageVariables,
-        ...includeVariables,
-      };
-
-      return this.renderSiteVariables(contentFilePath, content, pageSources, previousVariables);
-    };
-
-    // NOTE: Selecting both at once is important to respect variable/import declaration order
-    $('variable, import[from]').not('include > variable').each((index, elem) => {
-      logger.warn('<variable> and <import> tags used in pages will be deprecated in v3.0.\n'
-        + 'Use nunjucks\' {% set %} and {% import %} functionalities instead.\n'
-        + `filePath: ${filePath}`);
-
-      if (elem.name === 'variable') {
-        VariableProcessor.addVariable(pageVariables, elem, $(elem).html(), filePath, renderVariable);
-      } else {
-        /*
-         NOTE: we pass renderVariable here as well but not for rendering <import>ed variables again!
-         This is only for the edge case that variables are used in the 'from' attribute of
-         the <import> which we must resolve first.
-         */
-        this.addImportVariables(pageImportedVariables, elem, pageSources, filePath, renderVariable);
-      }
-    });
-
-    return { pageImportedVariables, pageVariables };
-  }
-
   /**
    * Extracts variables specified as <include var-xx="..."> in include elements.
    * @param includeElement to extract inline variables from
@@ -399,18 +253,8 @@ class VariableProcessor {
 
     // Extract included variables from the include element, merging with the parent context variables
     const includeVariables = VariableProcessor.extractIncludeVariables(node);
-
-    // We pass in includeVariables as well to render <include> variables used in page <variable>s
-    // see "Test Page Variable and Included Variable Integrations" under test_site/index.md for an example
-    const {
-      pageImportedVariables,
-      pageVariables,
-    } = this.extractPageVariables(asIfAt, fileContent, pageSources, includeVariables);
-
     // Render the included content with all the variables
-    const renderedContent = this.renderSiteVariables(asIfAt, fileContent, pageSources, {
-      ...pageImportedVariables,
-      ...pageVariables,
+    const renderedContent = this.renderWithSiteVariables(asIfAt, fileContent, pageSources, {
       ...includeVariables,
       ...context.variables,
     });
@@ -424,32 +268,6 @@ class VariableProcessor {
       childContext,
     };
   }
-
-  /**
-   * Renders content belonging to a page with the appropriate variables.
-   * In increasing order of priority (overriding),
-   * 1. <import>ed variables as extracted during {@link extractPageVariables}
-   * 2. locally declared <variable>s as extracted during {@link extractPageVariables}
-   *    (see https://markbind.org/userGuide/reusingContents.html#specifying-variables-in-an-include)
-   * 3. site variables as defined in variables.md
-   * @param contentFilePath of the content to render
-   * @param content to render
-   * @param {PageSources} pageSources to add dependencies found during nunjucks rendering to
-   * @param highestPriorityVariables to render with the highest priority if any.
-   *        This is currently only used for the MAIN_CONTENT_BODY in layouts.
-   * @param keepPercentRaw whether to reoutput {% raw/endraw %} tags, also used only for layouts.
-   */
-  renderPage(contentFilePath, content, pageSources, highestPriorityVariables = {}, keepPercentRaw = false) {
-    const {
-      pageImportedVariables,
-      pageVariables,
-    } = this.extractPageVariables(contentFilePath, content, pageSources);
-
-    return this.renderSiteVariables(contentFilePath, content, pageSources, {
-      ...pageImportedVariables,
-      ...pageVariables,
-    }, highestPriorityVariables, keepPercentRaw);
-  }
 }
 
 module.exports = VariableProcessor;

From 2ddf00eca8300f390a3fe2650e2d6a2177b85c69 Mon Sep 17 00:00:00 2001
From: Ze Yu <angzeyu@gmail.com>
Date: Sat, 5 Dec 2020 20:39:11 +0800
Subject: [PATCH 2/3] Remove old variable and import feature tests

---
 .../functional/test_site/expected/index.html  | 50 ++---------
 .../test_site/expected/jsonPageVariable.json  |  3 -
 .../test_site/expected/siteData.json          | 15 ----
 ..._.html => testReuseSubsite._include_.html} |  2 -
 .../test_site/expected/testDates.html         |  1 -
 .../testImportVariables._include_.html        | 14 ---
 .../expected/testImportVariables.html         | 85 -------------------
 .../testPanelsWithImportedVariables.html      | 79 -----------------
 .../expected/testVariableContainsInclude.html |  1 -
 .../cli/test/functional/test_site/index.md    | 73 ++++------------
 .../test_site/jsonPageVariable.json           |  3 -
 .../test_site/moreVariablesToImport.md        |  8 --
 .../test/functional/test_site/panelSrcs.md    | 10 ---
 .../cli/test/functional/test_site/site.json   |  8 --
 .../test_site/sub_site/_markbind/variables.md |  1 +
 .../{testReuse.md => testReuseSubsite.md}     |  3 -
 .../test/functional/test_site/testDates.md    |  2 +-
 .../test_site/testImportVariables.md          | 11 ---
 .../test_site/testIncludeVariables.md         |  4 +-
 .../test_site/testPageVariablesInInclude.md   | 19 -----
 .../testPanelsWithImportedVariables.md        | 11 ---
 .../test_site/testVariableContainsInclude.md  |  4 +-
 .../functional/test_site/variablesToImport.md | 26 ------
 .../expected/index.html                       | 13 ++-
 24 files changed, 38 insertions(+), 408 deletions(-)
 delete mode 100644 packages/cli/test/functional/test_site/expected/jsonPageVariable.json
 rename packages/cli/test/functional/test_site/expected/sub_site/{testReuse._include_.html => testReuseSubsite._include_.html} (97%)
 delete mode 100644 packages/cli/test/functional/test_site/expected/testImportVariables._include_.html
 delete mode 100644 packages/cli/test/functional/test_site/expected/testImportVariables.html
 delete mode 100644 packages/cli/test/functional/test_site/expected/testPanelsWithImportedVariables.html
 delete mode 100644 packages/cli/test/functional/test_site/jsonPageVariable.json
 delete mode 100644 packages/cli/test/functional/test_site/moreVariablesToImport.md
 delete mode 100644 packages/cli/test/functional/test_site/panelSrcs.md
 create mode 100644 packages/cli/test/functional/test_site/sub_site/_markbind/variables.md
 rename packages/cli/test/functional/test_site/sub_site/{testReuse.md => testReuseSubsite.md} (95%)
 delete mode 100644 packages/cli/test/functional/test_site/testImportVariables.md
 delete mode 100644 packages/cli/test/functional/test_site/testPanelsWithImportedVariables.md
 delete mode 100644 packages/cli/test/functional/test_site/variablesToImport.md

diff --git a/packages/cli/test/functional/test_site/expected/index.html b/packages/cli/test/functional/test_site/expected/index.html
index c171b2122a..e04978b424 100644
--- a/packages/cli/test/functional/test_site/expected/index.html
+++ b/packages/cli/test/functional/test_site/expected/index.html
@@ -180,53 +180,18 @@ <h3 id="testing-site-nav"><span id="testing-site-nav" class="anchor"></span>Test
           <p>arrayVarItem1</p>
           <p>arrayVarItem2</p>
           <p>nestedVarValue</p>
-          <p><strong>Json Variable</strong></p>
-          <div> front back </div>
-          <p>Json Variable can be referenced Referencing jsonVar1: Json Variable can be referenced</p>
           <p><strong>Variables that reference another variable</strong></p>
           <p>This variable can be referenced.</p>
           <p>References can be several levels deep.</p>
-          <p><strong>Page Variable</strong></p>
-          <div></div>
-          <div></div>
-          <p>Page Variable Json Variable</p>
-          <p><strong>Page Variable with HTML and MD</strong></p>
-          <div></div>
-          <p>Page Variable with <span style="color: blue;">HTML</span> and <strong>Markdown</strong></p>
-          <p><strong>Nested Page Variable</strong></p>
-          <div>
-            <span>
-              <div></div>
-            </span></div>
-          Nested Page Variable
-          <p><strong>Page Variable with Global Variable</strong></p>
-          <div></div>
-          Page Variable with Global Variable
-          <p><strong>Page Variable referencing Page Variable</strong></p>
-          <div></div>
-          Page Variable referencing Page Variable
-          <p><strong>Global Variable overriding Page Variable</strong></p>
-          <div></div>
-          Global Variable Overriding Page Variable
+          <p><strong>Global Variables can be referenced in {% set %}</strong></p>
+          <p>Page Variable with Global Variable</p>
+          <p><strong>Global Variables should override {% set %}</strong></p>
+          <p>Global Variable Overriding Page Variable</p>
           <p><strong>Test Page Variable and Included Variable Integrations</strong></p>
-          <div></div>
           <div>
-            <p><strong>Explicitly Included Page Variable</strong></p>
-            <p>Explicitly Included Page Variable</p>
-            <p><strong>Inner Page Variable Should Not Be Overridden by Outer Page Variable</strong></p>
-            <div></div>
-            Inner Page Variable Should Not Be Overridden by Outer Page Variable
             <p><strong>Outer Page Variable Should Not Leak Into Inner Pages</strong></p>
             <p>Outer Page Variable Should Not Leak Into Inner Pages</p>
-            <p><strong>Included Variable Overriding Page Variable</strong></p>
-            <div></div>
-            Included Variable Overriding Page Variable
-            <p><strong>Page Variable Referencing Included Variable</strong></p>
-            <div></div>
-            Page Variable Referencing Included Variable
           </div>
-          <p>Variables for includes should not be recognised as page variables, hence, there should be no text between <strong>this</strong></p>
-          <p>and <strong>this</strong>.</p>
           <h1 id="heading-with-multiple-keywords"><span id="heading-with-multiple-keywords" class="anchor"></span>Heading with multiple keywords<a class="fa fa-anchor" href="#heading-with-multiple-keywords" onclick="event.stopPropagation()"></a></h1>
           <p><span class="keyword">keyword 1</span>
             <span class="keyword">keyword 2</span></p>
@@ -404,8 +369,6 @@ <h2 id="feature-list"><span id="feature-list" class="anchor"></span>Feature list
             <p>This is a page from another Markbind site.
               The purpose of this page is to ensure that reuse works as expected.
               All the following images should display correctly.</p>
-            <p>Some variables:</p>
-            <div></div>
             <p>IMG tags:
               <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">
               <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">
@@ -430,7 +393,6 @@ <h2 id="feature-list"><span id="feature-list" class="anchor"></span>Feature list
               <pic src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></pic>
             </div>
           </div>
-          <p><strong>Include segment from another Markbind site</strong></p>
           <div>
             <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">
             <pic src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png"></pic>
@@ -556,6 +518,8 @@ <h2 id="feature-list"><span id="feature-list" class="anchor"></span>Feature list
             <p><strong>Test missing variable with default</strong></p>
             <p>Missing Variable</p>
           </div>
+          <p>Variables for includes should not be recognised as page variables, hence, there should be no text between <strong>this</strong></p>
+          <p>and <strong>this</strong>.</p>
           <p><strong>Included variables should not leak into other files</strong></p>
           <div>
             <p>Should be blank:</p>
@@ -607,7 +571,7 @@ <h2 id="inner-panel-header-without-src"><span id="inner-panel-header-without-src
           <panel src="/test_site/sub_site/index._include_.html" expanded id="panel-with-src-from-another-markbind-site-header"><template slot="header">
               <h2 id="panel-with-src-from-another-markbind-site-header"><span id="panel-with-src-from-another-markbind-site-header" class="anchor"></span>Panel with src from another Markbind site header<a class="fa fa-anchor" href="#panel-with-src-from-another-markbind-site-header" onclick="event.stopPropagation()"></a></h2>
             </template></panel>
-          <panel src="/test_site/sub_site/testReuse._include_.html" expanded id="panel-with-src-from-another-markbind-site-header-2"><template slot="header">
+          <panel src="/test_site/sub_site/testReuseSubsite._include_.html" expanded id="panel-with-src-from-another-markbind-site-header-2"><template slot="header">
               <h2 id="panel-with-src-from-another-markbind-site-header-2"><span id="panel-with-src-from-another-markbind-site-header-2" class="anchor"></span>Panel with src from another Markbind site header<a class="fa fa-anchor" href="#panel-with-src-from-another-markbind-site-header-2" onclick="event.stopPropagation()"></a></h2>
             </template></panel>
         </div>
diff --git a/packages/cli/test/functional/test_site/expected/jsonPageVariable.json b/packages/cli/test/functional/test_site/expected/jsonPageVariable.json
deleted file mode 100644
index 28d96f5cd7..0000000000
--- a/packages/cli/test/functional/test_site/expected/jsonPageVariable.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-    "json_page_variable": "Json Variable"
-}
\ No newline at end of file
diff --git a/packages/cli/test/functional/test_site/expected/siteData.json b/packages/cli/test/functional/test_site/expected/siteData.json
index f344f4b889..bafe62691b 100644
--- a/packages/cli/test/functional/test_site/expected/siteData.json
+++ b/packages/cli/test/functional/test_site/expected/siteData.json
@@ -202,21 +202,6 @@
       "headings": {},
       "headingKeywords": {}
     },
-    {
-      "src": "testImportVariables.md",
-      "title": "Imported Variables Test",
-      "headings": {
-        "trying-to-access-a-page-variable": "Trying to access a page variable:",
-        "trying-to-access-an-imported-variable-via-namespace": "Trying to access an imported variable via namespace:"
-      },
-      "headingKeywords": {}
-    },
-    {
-      "src": "testPanelsWithImportedVariables.md",
-      "title": "Panels with Imported Variables Test",
-      "headings": {},
-      "headingKeywords": {}
-    },
     {
       "src": "testCodeBlocks.md",
       "title": "Test: Code Blocks",
diff --git a/packages/cli/test/functional/test_site/expected/sub_site/testReuse._include_.html b/packages/cli/test/functional/test_site/expected/sub_site/testReuseSubsite._include_.html
similarity index 97%
rename from packages/cli/test/functional/test_site/expected/sub_site/testReuse._include_.html
rename to packages/cli/test/functional/test_site/expected/sub_site/testReuseSubsite._include_.html
index 263cd85a41..c64c2478b9 100644
--- a/packages/cli/test/functional/test_site/expected/sub_site/testReuse._include_.html
+++ b/packages/cli/test/functional/test_site/expected/sub_site/testReuseSubsite._include_.html
@@ -1,8 +1,6 @@
 <p>This is a page from another Markbind site.
   The purpose of this page is to ensure that reuse works as expected.
   All the following images should display correctly.</p>
-<p>Some variables:</p>
-<div></div>
 <p>IMG tags:
   <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">
   <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">
diff --git a/packages/cli/test/functional/test_site/expected/testDates.html b/packages/cli/test/functional/test_site/expected/testDates.html
index d0074d371f..c9abb9f60a 100644
--- a/packages/cli/test/functional/test_site/expected/testDates.html
+++ b/packages/cli/test/functional/test_site/expected/testDates.html
@@ -32,7 +32,6 @@
 
       <div id="content-wrapper">
         <h2 id="dates"><span id="dates" class="anchor"></span>Dates<a class="fa fa-anchor" href="#dates" onclick="event.stopPropagation()"></a></h2>
-        <div></div>
         <p>Mon 12 Aug should be Mon 12 Aug</p>
         <p>12 08 2019 should be 12 08 2019</p>
         <p>22 08 2019 should be 22 08 2019</p>
diff --git a/packages/cli/test/functional/test_site/expected/testImportVariables._include_.html b/packages/cli/test/functional/test_site/expected/testImportVariables._include_.html
deleted file mode 100644
index 02f0b7f28d..0000000000
--- a/packages/cli/test/functional/test_site/expected/testImportVariables._include_.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<div></div>
-<p>Making sure the issue here <a href="https://github.com/MarkBind/markbind/commit/48b57a18a8bfd68101b163908da4a0541756364a">https://github.com/MarkBind/markbind/commit/48b57a18a8bfd68101b163908da4a0541756364a</a> is fixed.</p>
-<div></div>
-<p>Test import variables from src specified via variable:
-  This variable comes from <a href="http://variablesToImport.html">variablesToImport.md</a></p>
-<p>Test import variables that itself imports other variables:</p>
-<h2 id="trying-to-access-a-page-variable"><span id="trying-to-access-a-page-variable" class="anchor"></span>Trying to access a page variable:<a class="fa fa-anchor" href="#trying-to-access-a-page-variable" onclick="event.stopPropagation()"></a></h2>
-<p>There should be something red below:</p>
-<div style="color:red">This is a page variable from variablestoimport.md</div>
-Something should have appeared above in red.
-<h2 id="trying-to-access-an-imported-variable-via-namespace"><span id="trying-to-access-an-imported-variable-via-namespace" class="anchor"></span>Trying to access an imported variable via namespace:<a class="fa fa-anchor" href="#trying-to-access-an-imported-variable-via-namespace" onclick="event.stopPropagation()"></a></h2>
-<p>There should be something blue below:</p>
-<div style="color:blue">This is a deeply imported variable</div>
-Something should have appeared above in blue.
\ No newline at end of file
diff --git a/packages/cli/test/functional/test_site/expected/testImportVariables.html b/packages/cli/test/functional/test_site/expected/testImportVariables.html
deleted file mode 100644
index 1c8124e4e4..0000000000
--- a/packages/cli/test/functional/test_site/expected/testImportVariables.html
+++ /dev/null
@@ -1,85 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta name="default-head-top">
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="generator" content="MarkBind 2.17.0">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Imported Variables Test</title>
-  <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
-  <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
-  <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
-  <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
-  <link rel="stylesheet" href="markbind/css/octicons.css">
-  <link rel="stylesheet" href="markbind/css/codeblock-dark.min.css">
-  <link rel="stylesheet" href="markbind/css/markbind.min.css">
-  <script src="markbind/js/polyfill.min.js"></script>
-  <script src="markbind/js/vue.min.js"></script>
-  <script src="markbind/js/markbind.min.js"></script>
-  <script src="markbind/js/jquery.min.js"></script>
-  <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
-  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
-  <link rel="stylesheet" href="markbind/layouts/default/styles.css">
-  <meta name="default-head-bottom">
-  <link rel="icon" href="/test_site/favicon.png">
-</head>
-
-<body>
-  <div id="app">
-    <div id="flex-body">
-
-      <div id="content-wrapper">
-        <div></div>
-        <p>Making sure the issue here <a href="https://github.com/MarkBind/markbind/commit/48b57a18a8bfd68101b163908da4a0541756364a">https://github.com/MarkBind/markbind/commit/48b57a18a8bfd68101b163908da4a0541756364a</a> is fixed.</p>
-        <div></div>
-        <p>Test import variables from src specified via variable:
-          This variable comes from <a href="http://variablesToImport.html">variablesToImport.md</a></p>
-        <p>Test import variables that itself imports other variables:</p>
-        <h2 id="trying-to-access-a-page-variable"><span id="trying-to-access-a-page-variable" class="anchor"></span>Trying to access a page variable:<a class="fa fa-anchor" href="#trying-to-access-a-page-variable" onclick="event.stopPropagation()"></a></h2>
-        <p>There should be something red below:</p>
-        <div style="color:red">This is a page variable from variablestoimport.md</div>
-        Something should have appeared above in red.
-        <h2 id="trying-to-access-an-imported-variable-via-namespace"><span id="trying-to-access-an-imported-variable-via-namespace" class="anchor"></span>Trying to access an imported variable via namespace:<a class="fa fa-anchor" href="#trying-to-access-an-imported-variable-via-namespace" onclick="event.stopPropagation()"></a></h2>
-        <p>There should be something blue below:</p>
-        <div style="color:blue">This is a deeply imported variable</div>
-        Something should have appeared above in blue.
-        <p><i class="fa fa-arrow-circle-up fa-lg" id="scroll-top-button" onclick="handleScrollTop()" aria-hidden="true"></i></p>
-      </div>
-    </div>
-    <footer>
-      <div class="text-center">
-        Default footer
-      </div>
-    </footer>
-  </div>
-</body>
-<script src="markbind/js/bootstrap-utility.min.js"></script>
-<script>
-  const baseUrl = '/test_site'
-  MarkBind.setupWithSearch()
-</script>
-<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
-<script>
-  alert("Inline plugin script loaded!")
-</script>
-
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-
-  function gtag() {
-    dataLayer.push(arguments);
-  }
-  gtag('js', new Date());
-
-  gtag('config', 'TRACKING-ID');
-</script>
-<script src="markbind/layouts/default/scripts.js"></script>
-<script>
-  if (MarkBind.AfterSetup) MarkBind.AfterSetup()
-</script>
-
-</html>
\ No newline at end of file
diff --git a/packages/cli/test/functional/test_site/expected/testPanelsWithImportedVariables.html b/packages/cli/test/functional/test_site/expected/testPanelsWithImportedVariables.html
deleted file mode 100644
index 0a84044f26..0000000000
--- a/packages/cli/test/functional/test_site/expected/testPanelsWithImportedVariables.html
+++ /dev/null
@@ -1,79 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-<head>
-  <meta name="default-head-top">
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="generator" content="MarkBind 2.17.0">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Panels with Imported Variables Test</title>
-  <link rel="stylesheet" href="markbind/css/bootstrap.min.css">
-  <link rel="stylesheet" href="markbind/css/bootstrap-vue.min.css">
-  <link rel="stylesheet" href="markbind/fontawesome/css/all.min.css">
-  <link rel="stylesheet" href="markbind/glyphicons/css/bootstrap-glyphicons.min.css">
-  <link rel="stylesheet" href="markbind/css/octicons.css">
-  <link rel="stylesheet" href="markbind/css/codeblock-dark.min.css">
-  <link rel="stylesheet" href="markbind/css/markbind.min.css">
-  <script src="markbind/js/polyfill.min.js"></script>
-  <script src="markbind/js/vue.min.js"></script>
-  <script src="markbind/js/markbind.min.js"></script>
-  <script src="markbind/js/jquery.min.js"></script>
-  <link rel="stylesheet" href="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginStylesheet.css">
-  <link rel="stylesheet" href="/test_site/plugins/markbind-plugin-anchors/markbind-plugin-anchors.css">
-  <link rel="stylesheet" href="markbind/layouts/default/styles.css">
-  <meta name="default-head-bottom">
-  <link rel="icon" href="/test_site/favicon.png">
-</head>
-
-<body>
-  <div id="app">
-    <div id="flex-body">
-
-      <div id="content-wrapper">
-        <p>Refer to this comment: <a href="https://github.com/MarkBind/markbind/pull/751#issuecomment-469670640">https://github.com/MarkBind/markbind/pull/751#issuecomment-469670640</a></p>
-        <div></div>
-        Title
-        <p><strong>Below panel is working</strong>
-          <panel src="/test_site/testImportVariables._include_.html"></panel>
-        </p>
-        <p><strong>Below should be a panel, but is now an error. Uncomment it to see the error.</strong></p>
-
-        <p><i class="fa fa-arrow-circle-up fa-lg" id="scroll-top-button" onclick="handleScrollTop()" aria-hidden="true"></i></p>
-      </div>
-    </div>
-    <footer>
-      <div class="text-center">
-        Default footer
-      </div>
-    </footer>
-  </div>
-</body>
-<script src="markbind/js/bootstrap-utility.min.js"></script>
-<script>
-  const baseUrl = '/test_site'
-  MarkBind.setupWithSearch()
-</script>
-<script src="/test_site/plugins/testMarkbindPlugin/testMarkbindPluginScript.js"></script>
-<script>
-  alert("Inline plugin script loaded!")
-</script>
-
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id=TRACKING-ID"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-
-  function gtag() {
-    dataLayer.push(arguments);
-  }
-  gtag('js', new Date());
-
-  gtag('config', 'TRACKING-ID');
-</script>
-<script src="markbind/layouts/default/scripts.js"></script>
-<script>
-  if (MarkBind.AfterSetup) MarkBind.AfterSetup()
-</script>
-
-</html>
\ No newline at end of file
diff --git a/packages/cli/test/functional/test_site/expected/testVariableContainsInclude.html b/packages/cli/test/functional/test_site/expected/testVariableContainsInclude.html
index d63102e355..54df926ab1 100644
--- a/packages/cli/test/functional/test_site/expected/testVariableContainsInclude.html
+++ b/packages/cli/test/functional/test_site/expected/testVariableContainsInclude.html
@@ -31,7 +31,6 @@
     <div id="flex-body">
 
       <div id="content-wrapper">
-        <div></div>
         <h1 id="content-fragment"><span id="content-fragment" class="anchor"></span><span>content fragment</span><a class="fa fa-anchor" href="#content-fragment" onclick="event.stopPropagation()"></a></h1>
         <p><i class="fa fa-arrow-circle-up fa-lg" id="scroll-top-button" onclick="handleScrollTop()" aria-hidden="true"></i></p>
       </div>
diff --git a/packages/cli/test/functional/test_site/index.md b/packages/cli/test/functional/test_site/index.md
index 461dc88724..6433d6c7b7 100644
--- a/packages/cli/test/functional/test_site/index.md
+++ b/packages/cli/test/functional/test_site/index.md
@@ -30,69 +30,29 @@ tags: ["tag-frontmatter-shown", "tag-included-file", "+tag-exp*", "-tag-exp-hidd
 
 {{ externalVar.nestedVar.nestedVarKey }}
 
-**Json Variable**
-
-{{ front }} {{ back }}
-
-{{ jsonVar1 }} {{ jsonVar2 }}
-
 **Variables that reference another variable**
 
 {{finalized_value}}
 
 {{reference_level_4}}
 
-**Page Variable**
-
-<variable name="page_variable">Page Variable</variable>
-<variable from="jsonPageVariable.json" />
-
-{{ page_variable }} {{ json_page_variable }}
-
-**Page Variable with HTML and MD**
-
-<variable name="page_variable_with_HTML_and_MD">Page Variable with <span style="color: blue;">HTML</span> and **Markdown**</variable>
+**Global Variables can be referenced in {% raw %}{% set %}{% endraw %}**
 
-{{ page_variable_with_HTML_and_MD }}
-
-**Nested Page Variable**
-
-<div>
-  <span>
-    <variable name="nested_page_variable">Nested Page Variable</variable>
-  </span>
-</div>
-{{ nested_page_variable }}
-
-**Page Variable with Global Variable**
-
-<variable name="page_variable_with_global_variable">Page Variable with {{ global_variable }}</variable>
+{% set page_variable_with_global_variable %}
+Page Variable with {{ global_variable }}
+{% endset %}
 {{ page_variable_with_global_variable }}
 
-**Page Variable referencing Page Variable**
-
-<variable name="page_variable_referencing_page_variable">Page Variable referencing {{ page_variable }}</variable>
-{{ page_variable_referencing_page_variable }}
+**Global Variables should override {% raw %}{% set %}{% endraw %}**
 
-**Global Variable overriding Page Variable**
-
-<variable name="page_global_variable_overriding_page_variable">**Should not appear**: Page Variable overridden by Global Variable</variable>
+{% set page_global_variable_overriding_page_variable %}
+**Should not appear**: Page Variable overridden by Global Variable
+{% endset %}
 {{ page_global_variable_overriding_page_variable }}
 
 **Test Page Variable and Included Variable Integrations**
 
-<variable name="explicitly_included_page_variable">Explicitly Included Page Variable</variable>
-<include src="testPageVariablesInInclude.md">
-  <variable name="explicitly_included_page_variable">{{ explicitly_included_page_variable }}</variable>
-  <variable name="included_variable">Included Variable</variable>
-  <variable name="included_variable_overriding_page_variable">Included Variable Overriding Page Variable</variable>
-</include>
-
-Variables for includes should not be recognised as page variables, hence, there should be no text between **this**
-
-{{ included_variable_overriding_page_variable }}
-
-and **this**.
+<include src="testPageVariablesInInclude.md" />
 
 # Heading with multiple keywords
 <span class="keyword">keyword 1</span>
@@ -174,11 +134,8 @@ and **this**.
 **Include from another Markbind site**
 
 <include src="sub_site/index.md" />
-<include src="sub_site/testReuse.md" />
-
-**Include segment from another Markbind site**
-
-<include src="sub_site/testReuse.md#imageTest" />
+<include src="sub_site/testReuseSubsite.md" />
+<include src="sub_site/testReuseSubsite.md#imageTest" />
 
 **Include nested sub-site directly**
 
@@ -234,6 +191,12 @@ and **this**.
   <variable name="included_variable_with_global_variable">Included variable with {{ global_variable }}</variable>
 </include>
 
+Variables for includes should not be recognised as page variables, hence, there should be no text between **this**
+
+{{ included_variable }}
+
+and **this**.
+
 **Included variables should not leak into other files**
 
 <include src="testIncludeVariableLeak.md" />
@@ -294,7 +257,7 @@ and **this**.
 
 <panel header="## Panel with src from another Markbind site header" src="sub_site/index.md" expanded>
 </panel>
-<panel header="## Panel with src from another Markbind site header" src="sub_site/testReuse.md" expanded>
+<panel header="## Panel with src from another Markbind site header" src="sub_site/testReuseSubsite.md" expanded>
 </panel>
 </div>
 
diff --git a/packages/cli/test/functional/test_site/jsonPageVariable.json b/packages/cli/test/functional/test_site/jsonPageVariable.json
deleted file mode 100644
index 28d96f5cd7..0000000000
--- a/packages/cli/test/functional/test_site/jsonPageVariable.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-    "json_page_variable": "Json Variable"
-}
\ No newline at end of file
diff --git a/packages/cli/test/functional/test_site/moreVariablesToImport.md b/packages/cli/test/functional/test_site/moreVariablesToImport.md
deleted file mode 100644
index 30e3d815b0..0000000000
--- a/packages/cli/test/functional/test_site/moreVariablesToImport.md
+++ /dev/null
@@ -1,8 +0,0 @@
-This page contains some variables that are being imported in other files.
-There should be only VARIABLES START and VARIABLES END in red:
-
-<div style="color:red">
-VARIABLES START
-<variable name="variable">This is a deeply imported variable</variable>
-VARIABLES END
-</div>
\ No newline at end of file
diff --git a/packages/cli/test/functional/test_site/panelSrcs.md b/packages/cli/test/functional/test_site/panelSrcs.md
deleted file mode 100644
index f8507a582f..0000000000
--- a/packages/cli/test/functional/test_site/panelSrcs.md
+++ /dev/null
@@ -1,10 +0,0 @@
-This page contains some variables that are being imported in other files.
-There should be only VARIABLES START and VARIABLES END in red:
-
-<div style="color:red">
-VARIABLES START
-<variable name="title">Title</variable>
-<variable name="child_src">testImportVariables.md</variable>
-<variable name="child_src_working">testImportVariables</variable>
-VARIABLES END
-</div>
\ No newline at end of file
diff --git a/packages/cli/test/functional/test_site/site.json b/packages/cli/test/functional/test_site/site.json
index 63860df497..1933ab3746 100644
--- a/packages/cli/test/functional/test_site/site.json
+++ b/packages/cli/test/functional/test_site/site.json
@@ -64,14 +64,6 @@
       "src": "testPlantUML.md",
       "title": "PlantUML Test"
     },
-    {
-      "src": "testImportVariables.md",
-      "title": "Imported Variables Test"
-    },
-    {
-      "src": "testPanelsWithImportedVariables.md",
-      "title": "Panels with Imported Variables Test"
-    },
     {
       "src": "testCodeBlocks.md",
       "title": "Test: Code Blocks"
diff --git a/packages/cli/test/functional/test_site/sub_site/_markbind/variables.md b/packages/cli/test/functional/test_site/sub_site/_markbind/variables.md
new file mode 100644
index 0000000000..debe9f7207
--- /dev/null
+++ b/packages/cli/test/functional/test_site/sub_site/_markbind/variables.md
@@ -0,0 +1 @@
+<variable name="imgFolder">images</variable>
\ No newline at end of file
diff --git a/packages/cli/test/functional/test_site/sub_site/testReuse.md b/packages/cli/test/functional/test_site/sub_site/testReuseSubsite.md
similarity index 95%
rename from packages/cli/test/functional/test_site/sub_site/testReuse.md
rename to packages/cli/test/functional/test_site/sub_site/testReuseSubsite.md
index ba2ba725e4..851c638341 100644
--- a/packages/cli/test/functional/test_site/sub_site/testReuse.md
+++ b/packages/cli/test/functional/test_site/sub_site/testReuseSubsite.md
@@ -2,9 +2,6 @@ This is a page from another Markbind site.
 The purpose of this page is to ensure that reuse works as expected.
 All the following images should display correctly.
 
-Some variables:
-<variable name="imgFolder">images</variable>
-
 IMG tags:
 <img src="images/I'm not allowed to use my favorite tool.png">
 <img src="{{imgFolder}}/I'm not allowed to use my favorite tool.png">
diff --git a/packages/cli/test/functional/test_site/testDates.md b/packages/cli/test/functional/test_site/testDates.md
index 78673bd2bf..9910b084b0 100644
--- a/packages/cli/test/functional/test_site/testDates.md
+++ b/packages/cli/test/functional/test_site/testDates.md
@@ -1,5 +1,5 @@
 ## Dates
-<variable name="base1">2019-08-12</variable>
+{% set base1 = "2019-08-12" %}
 
 {% set format1 = "DD MM YYYY" %}
 
diff --git a/packages/cli/test/functional/test_site/testImportVariables.md b/packages/cli/test/functional/test_site/testImportVariables.md
deleted file mode 100644
index b8d8aa11eb..0000000000
--- a/packages/cli/test/functional/test_site/testImportVariables.md
+++ /dev/null
@@ -1,11 +0,0 @@
-<variable name="filename">variablesToImport</variable>
-
-Making sure the issue here https://github.com/MarkBind/markbind/commit/48b57a18a8bfd68101b163908da4a0541756364a is fixed.
-
-<import var deepvar from="{{filename}}.md"/>
-
-Test import variables from src specified via variable:
-{{var}}
-
-Test import variables that itself imports other variables:
-{{deepvar}}
\ No newline at end of file
diff --git a/packages/cli/test/functional/test_site/testIncludeVariables.md b/packages/cli/test/functional/test_site/testIncludeVariables.md
index 9e6b50c8ea..26a8da2f0f 100644
--- a/packages/cli/test/functional/test_site/testIncludeVariables.md
+++ b/packages/cli/test/functional/test_site/testIncludeVariables.md
@@ -26,8 +26,8 @@
 **Test included variables in included file**
 
 <include src="testIncludeVariablesIncludedFile.md">
-  <variable name="included_variable_inner_overridden">**Should not appear**: Included variable overridden by outer variable</variable>
-  <variable name="included_variable_should_not_leak_inner">**Should not appear**: Included variable should not leak into other files</variable>
+  <variable name="included_variable_inner_overridden">Included variable overridden by outer variable</variable>
+  <variable name="included_variable_should_not_leak_inner">Included variable should not leak into other files</variable>
 </include>
 
 **Inner included variables should not leak into other files**
diff --git a/packages/cli/test/functional/test_site/testPageVariablesInInclude.md b/packages/cli/test/functional/test_site/testPageVariablesInInclude.md
index 3f20547a84..f64540ffcc 100644
--- a/packages/cli/test/functional/test_site/testPageVariablesInInclude.md
+++ b/packages/cli/test/functional/test_site/testPageVariablesInInclude.md
@@ -1,22 +1,3 @@
-**Explicitly Included Page Variable**
-
-{{ explicitly_included_page_variable }}
-
-**Inner Page Variable Should Not Be Overridden by Outer Page Variable**
-
-<variable name="page_variable">Inner Page Variable Should Not Be Overridden by Outer Page Variable</variable>
-{{ page_variable }}
-
 **Outer Page Variable Should Not Leak Into Inner Pages**
 
 {{ nested_page_variable or "Outer Page Variable Should Not Leak Into Inner Pages" }}
-
-**Included Variable Overriding Page Variable**
-
-<variable name="included_variable_overriding_page_variable">**Should not appear**: Page Variable Overridden by Included Variable</variable>
-{{ included_variable_overriding_page_variable }}
-
-**Page Variable Referencing Included Variable**
-
-<variable name="page_variable_referencing_included_variable">Page Variable Referencing {{ included_variable }}</variable>
-{{ page_variable_referencing_included_variable }}
diff --git a/packages/cli/test/functional/test_site/testPanelsWithImportedVariables.md b/packages/cli/test/functional/test_site/testPanelsWithImportedVariables.md
deleted file mode 100644
index 7f17d5e082..0000000000
--- a/packages/cli/test/functional/test_site/testPanelsWithImportedVariables.md
+++ /dev/null
@@ -1,11 +0,0 @@
-Refer to this comment: https://github.com/MarkBind/markbind/pull/751#issuecomment-469670640
-
-<import from="panelSrcs.md" as="child"/>
-{{ child.title }}
-
-
-**Below panel is working**
-<panel src="{{ child.child_src_working }}.md"></panel>
-
-**Below should be a panel, but is now an error. Uncomment it to see the error.**
-<!--<panel src="{{ child.child_src }}"></panel>-->
\ No newline at end of file
diff --git a/packages/cli/test/functional/test_site/testVariableContainsInclude.md b/packages/cli/test/functional/test_site/testVariableContainsInclude.md
index eab0bd3a1b..5e5b354dc9 100644
--- a/packages/cli/test/functional/test_site/testVariableContainsInclude.md
+++ b/packages/cli/test/functional/test_site/testVariableContainsInclude.md
@@ -1,3 +1,5 @@
-<variable name="test"># <include src="contentFragmentToInclude.md#fragment" inline /></variable>
+{% set test %}
+# <include src="contentFragmentToInclude.md#fragment" inline />
+{% endset %}
 
 {{ test }}
\ No newline at end of file
diff --git a/packages/cli/test/functional/test_site/variablesToImport.md b/packages/cli/test/functional/test_site/variablesToImport.md
deleted file mode 100644
index 19c7466a39..0000000000
--- a/packages/cli/test/functional/test_site/variablesToImport.md
+++ /dev/null
@@ -1,26 +0,0 @@
-This page contains some variables that are being imported in other files.
-There should be only VARIABLES START and VARIABLES END in red:
-
-<div style="color:red">
-VARIABLES START
-
-<variable name="var">This variable comes from variablesToImport.md</variable>
-
-<variable name="pagevar">This is a page variable from variablestoimport.md</variable>
-
-<import from="moreVariablesToImport.md" as="namespace"/>
-
-<variable name = "deepvar">
-
-## Trying to access a page variable: 
-There should be something red below:
-<div style='color:red'>{{pagevar}}</div>
-Something should have appeared above in red.
-
-## Trying to access an imported variable via namespace: 
-There should be something blue below:
-<div style='color:blue'>{{namespace.variable}}</div>
-Something should have appeared above in blue.
-</variable>
-VARIABLES END
-</div>
\ No newline at end of file
diff --git a/packages/cli/test/functional/test_site_expressive_layout/expected/index.html b/packages/cli/test/functional/test_site_expressive_layout/expected/index.html
index c691ffa5d2..13b24ab149 100644
--- a/packages/cli/test/functional/test_site_expressive_layout/expected/index.html
+++ b/packages/cli/test/functional/test_site_expressive_layout/expected/index.html
@@ -29,10 +29,10 @@
 
 
       <div id="content-wrapper">
-        <div></div>
-        <div></div>
-        <p>Variable from layout</p>
-        <p>This is an importedVar</p>
+        <variable name="layoutVar">Variable from layout</variable>
+        <p>
+          <import importedVar from="imported.md" as="imported"></import>
+        </p>
         <panel type="success" minimized><template slot="header">
             <p>Expanded panel</p>
           </template><template slot="_alt">
@@ -40,18 +40,17 @@
           </template>
           Math formulas
         </panel>
-        <div></div>
+        <variable name="mainVar">Variable from page</variable>
         <hr>
         <p><em>Content above the horizontal line belongs to the layout file</em></p>
         <h1 id="welcome-to-markbind"><span id="welcome-to-markbind" class="anchor"></span>Welcome to Markbind<a class="fa fa-anchor" href="#welcome-to-markbind" onclick="event.stopPropagation()"></a></h1>
         <p>This is a minimalistic template. To learn more about authoring contents in Markbind, visit the <a href="https://markbind.org/userGuide/authoringContents.html">User Guide</a>.</p>
-        <p>Variable from page</p>
         <p><strong>Test that {% raw %} and {% endraw %} tags work in the content file inserted into the layout</strong></p>
         <p><em>Content below the horizontal line belongs to the layout file</em></p>
         <hr>
         <p>Bottom Content</p>
         <div>
-          <div></div>
+          <variable name="importedVar">This is an importedVar</variable>
           <p>This content can be imported to the bottom of the page</p>
         </div>
         <p><strong>Test that {% raw %} and {% endraw %} tags work in the layouts file</strong></p>

From 360050c8f99cef1baf72e711963c2efab011e987 Mon Sep 17 00:00:00 2001
From: Ze Yu <angzeyu@gmail.com>
Date: Sun, 29 Nov 2020 16:39:22 +0800
Subject: [PATCH 3/3] Remove old variable and import features from docs

---
 docs/devGuide/design.md                       |   4 +-
 docs/devGuide/devGuide.md                     |   4 +-
 docs/devGuide/projectManagement.md            |   4 +-
 docs/devGuide/settingUp.md                    |   4 +-
 docs/devGuide/styleGuides.md                  |   4 +-
 docs/devGuide/workflow.md                     |   4 +-
 docs/devGuide/writingPlugins.md               |   4 +-
 docs/userGuide/addingPages.md                 |   5 +-
 docs/userGuide/authoringContents.md           |   4 +-
 docs/userGuide/components/advanced.md         |   9 +-
 docs/userGuide/deployingTheSite.md            |   6 +-
 docs/userGuide/formattingContents.md          |   5 +-
 docs/userGuide/gettingStarted.md              |   4 +-
 docs/userGuide/makingTheSiteSearchable.md     |   6 +-
 .../userGuide/markBindInTheProjectWorkflow.md |   6 +-
 docs/userGuide/markBindSyntaxOverview.md      |   5 +-
 docs/userGuide/reusingContents.md             |   5 +-
 docs/userGuide/settingSiteProperties.md       |   5 +-
 docs/userGuide/syntax/boxes.mbdf              |   2 +-
 docs/userGuide/syntax/dates.mbdf              |   4 +-
 docs/userGuide/syntax/dropdowns.mbdf          |   2 +-
 docs/userGuide/syntax/modals.mbdf             |   2 +-
 docs/userGuide/syntax/panels.mbdf             |   2 +-
 docs/userGuide/syntax/popovers.mbdf           |   2 +-
 docs/userGuide/syntax/questions.mbdf          |  21 +-
 docs/userGuide/syntax/variables.mbdf          | 221 +-----------------
 docs/userGuide/templates.md                   |   4 +-
 docs/userGuide/themes.md                      |   6 +-
 docs/userGuide/tipsAndTricks.md               |   3 +-
 docs/userGuide/tweakingThePageStructure.md    |   5 +-
 docs/userGuide/usingComponents.md             |   5 +-
 docs/userGuide/usingHtmlJavaScriptCss.md      |   5 +-
 docs/userGuide/usingPlugins.md                |   5 +-
 docs/userGuide/workingWithSites.md            |   4 +-
 34 files changed, 113 insertions(+), 268 deletions(-)

diff --git a/docs/devGuide/design.md b/docs/devGuide/design.md
index 1f83cc277b..c5c91f2b66 100644
--- a/docs/devGuide/design.md
+++ b/docs/devGuide/design.md
@@ -1,4 +1,6 @@
-<variable name="title">Design</variable>
+{% set title = "Design" %}
+<span id="title" class="d-none">{{ title }}</span>
+
 <frontmatter>
   title: "{{ title }}"
   layout: devGuide
diff --git a/docs/devGuide/devGuide.md b/docs/devGuide/devGuide.md
index b8cfd0103c..957deb45c5 100644
--- a/docs/devGuide/devGuide.md
+++ b/docs/devGuide/devGuide.md
@@ -1,4 +1,6 @@
-<variable name="title">Contributing</variable>
+{% set title = "Contributing" %}
+<span id="title" class="d-none">{{ title }}</span>
+
 <frontmatter>
   title: "{{ title }}"
   layout: devGuide
diff --git a/docs/devGuide/projectManagement.md b/docs/devGuide/projectManagement.md
index c9d3f94e7e..fbcdd70cce 100644
--- a/docs/devGuide/projectManagement.md
+++ b/docs/devGuide/projectManagement.md
@@ -1,4 +1,6 @@
-<variable name="title">Project management</variable>
+{% set title = "Project management" %}
+<span id="title" class="d-none">{{ title }}</span>
+
 <frontmatter>
   title: "{{ title }}"
   layout: devGuide
diff --git a/docs/devGuide/settingUp.md b/docs/devGuide/settingUp.md
index afd87bfd70..8717bd8304 100644
--- a/docs/devGuide/settingUp.md
+++ b/docs/devGuide/settingUp.md
@@ -1,4 +1,6 @@
-<variable name="title">Setting up</variable>
+{% set title = "Setting up" %}
+<span id="title" class="d-none">{{ title }}</span>
+
 <frontmatter>
   title: "{{ title }}"
   layout: devGuide
diff --git a/docs/devGuide/styleGuides.md b/docs/devGuide/styleGuides.md
index 8e2ecd92f3..1541535e6e 100644
--- a/docs/devGuide/styleGuides.md
+++ b/docs/devGuide/styleGuides.md
@@ -1,4 +1,6 @@
-<variable name="title">Appendix: Style guides</variable>
+{% set title = "Appendix: Style guides" %}
+<span id="title" class="d-none">{{ title }}</span>
+
 <frontmatter>
   title: "{{ title }}"
   layout: devGuide
diff --git a/docs/devGuide/workflow.md b/docs/devGuide/workflow.md
index cdd135c34e..2f2c22d02d 100644
--- a/docs/devGuide/workflow.md
+++ b/docs/devGuide/workflow.md
@@ -1,4 +1,6 @@
-<variable name="title">Workflow</variable>
+{% set title = "Workflow" %}
+<span id="title" class="d-none">{{ title }}</span>
+
 <frontmatter>
   title: "{{ title }}"
   layout: devGuide
diff --git a/docs/devGuide/writingPlugins.md b/docs/devGuide/writingPlugins.md
index 2654abaf53..a194b66a2e 100644
--- a/docs/devGuide/writingPlugins.md
+++ b/docs/devGuide/writingPlugins.md
@@ -1,4 +1,6 @@
-<variable name="title">Writing Plugins</variable>
+{% set title = "Writing Plugins" %}
+<span id="title" class="d-none">{{ title }}</span>
+
 <frontmatter>
   title: "{{ title }}"
   layout: devGuide
diff --git a/docs/userGuide/addingPages.md b/docs/userGuide/addingPages.md
index 9c93bfc7f3..514ddc6973 100644
--- a/docs/userGuide/addingPages.md
+++ b/docs/userGuide/addingPages.md
@@ -1,5 +1,6 @@
-<variable name="title" id="title">Adding Pages</variable>
-<variable name="filename">addingPages</variable>
+{% set title = "Adding Pages" %}
+{% set filename = "addingPages" %}
+<span id="title" class="d-none">{{ title }}</span>
 
 <frontmatter>
   title: "User Guide: {{ title }}"
diff --git a/docs/userGuide/authoringContents.md b/docs/userGuide/authoringContents.md
index b98df03ad2..b39888ac7e 100644
--- a/docs/userGuide/authoringContents.md
+++ b/docs/userGuide/authoringContents.md
@@ -1,4 +1,6 @@
-<variable name="title" id="title">Authoring Contents</variable>
+{% set title = "Authoring Contents" %}
+<span id="title" class="d-none">{{ title }}</span>
+
 <frontmatter>
   title: "User Guide: {{ title }}"
   layout: userGuide
diff --git a/docs/userGuide/components/advanced.md b/docs/userGuide/components/advanced.md
index 1def9bdf02..e9177c6ab1 100644
--- a/docs/userGuide/components/advanced.md
+++ b/docs/userGuide/components/advanced.md
@@ -1,7 +1,12 @@
 ## Advanced Tips and Tricks
 
-<variable name="slot_info_trigger"><trigger for="on-slots" trigger="click"><strong>^\[S\]^</strong></trigger></variable>
-<variable name="slot_type_info_trigger"><trigger for="on-slots" trigger="click">Slot</trigger></variable>
+{% set slot_info_trigger %}
+<trigger for="on-slots" trigger="click"><strong>^\[S\]^</strong></trigger>
+{% endset %}
+
+{% set slot_type_info_trigger %}
+<trigger for="on-slots" trigger="click">Slot</trigger>
+{% endset %}
 
 ### Richer formatting of attributes using slots
 
diff --git a/docs/userGuide/deployingTheSite.md b/docs/userGuide/deployingTheSite.md
index 593e40bab6..b23ddcf159 100644
--- a/docs/userGuide/deployingTheSite.md
+++ b/docs/userGuide/deployingTheSite.md
@@ -1,5 +1,7 @@
-<variable name="title" id="title">Deploying the Site</variable>
-<variable name="filename" id="filename">deployingTheSite</variable>
+{% set title = "Deploying the Site" %}
+{% set filename = "deployingTheSite" %}
+<span id="title" class="d-none">{{ title }}</span>
+
 <frontmatter>
   title: "User Guide: {{ title }}"
   layout: userGuide
diff --git a/docs/userGuide/formattingContents.md b/docs/userGuide/formattingContents.md
index 428ea38214..653b410bfd 100644
--- a/docs/userGuide/formattingContents.md
+++ b/docs/userGuide/formattingContents.md
@@ -1,5 +1,6 @@
-<variable name="title" id="title">Formatting Contents</variable>
-<variable name="filename">formattingContents</variable>
+{% set title = "Formatting Contents" %}
+{% set filename = "formattingContents" %}
+<span id="title" class="d-none">{{ title }}</span>
 
 <frontmatter>
   title: "User Guide: {{ title }}"
diff --git a/docs/userGuide/gettingStarted.md b/docs/userGuide/gettingStarted.md
index bbc2baa0ee..d26426bb9b 100644
--- a/docs/userGuide/gettingStarted.md
+++ b/docs/userGuide/gettingStarted.md
@@ -1,4 +1,6 @@
-<variable name="title" id="title">Getting Started</variable>
+{% set title = "Getting Started" %}
+<span id="title" class="d-none">{{ title }}</span>
+
 <frontmatter>
   title: "User Guide - {{ title }}"
   layout: userGuide
diff --git a/docs/userGuide/makingTheSiteSearchable.md b/docs/userGuide/makingTheSiteSearchable.md
index f8f3686e8c..b8c6564321 100644
--- a/docs/userGuide/makingTheSiteSearchable.md
+++ b/docs/userGuide/makingTheSiteSearchable.md
@@ -1,5 +1,7 @@
-<variable name="title" id="title">Making the Site Searchable</variable>
-<variable name="filename">makingTheSiteSearchable</variable>
+{% set title = "Making the Site Searchable" %}
+{% set filename = "makingTheSiteSearchable" %}
+<span id="title" class="d-none">{{ title }}</span>
+
 {% from "njk/common.njk" import embed with context %}
 
 <frontmatter>
diff --git a/docs/userGuide/markBindInTheProjectWorkflow.md b/docs/userGuide/markBindInTheProjectWorkflow.md
index 4d8a1474f2..fccc7f4c54 100644
--- a/docs/userGuide/markBindInTheProjectWorkflow.md
+++ b/docs/userGuide/markBindInTheProjectWorkflow.md
@@ -1,5 +1,7 @@
-<variable name="title" id="title">MarkBind in the Project Workflow</variable>
-<variable name="filename" id="filename">markBindInTheProjectWorkflow</variable>
+{% set title = "MarkBind in the Project Workflow" %}
+{% set filename = "markBindInTheProjectWorkflow" %}
+<span id="title" class="d-none">{{ title }}</span>
+
 <frontmatter>
   title: "User Guide: {{ title }}"
   layout: userGuide
diff --git a/docs/userGuide/markBindSyntaxOverview.md b/docs/userGuide/markBindSyntaxOverview.md
index 0f455dc203..393ae4becb 100644
--- a/docs/userGuide/markBindSyntaxOverview.md
+++ b/docs/userGuide/markBindSyntaxOverview.md
@@ -1,5 +1,6 @@
-<variable name="title" id="title">MarkBind Syntax Overview</variable>
-<variable name="filename">markBindSyntaxOverview</variable>
+{% set title = "MarkBind Syntax Overview" %}
+{% set filename = "markBindSyntaxOverview" %}
+<span id="title" class="d-none">{{ title }}</span>
 
 <frontmatter>
   title: "User Guide: {{ title }} "
diff --git a/docs/userGuide/reusingContents.md b/docs/userGuide/reusingContents.md
index 80725e5baf..2a51288916 100644
--- a/docs/userGuide/reusingContents.md
+++ b/docs/userGuide/reusingContents.md
@@ -1,5 +1,6 @@
-<variable name="title" id="title">Reusing Contents</variable>
-<variable name="filename">reusingContents</variable>
+{% set title = "Reusing Contents" %}
+{% set filename = "reusingContents" %}
+<span id="title" class="d-none">{{ title }}</span>
 
 <frontmatter>
   title: "User Guide: {{ title }}"
diff --git a/docs/userGuide/settingSiteProperties.md b/docs/userGuide/settingSiteProperties.md
index 6509300ec0..25a468266a 100644
--- a/docs/userGuide/settingSiteProperties.md
+++ b/docs/userGuide/settingSiteProperties.md
@@ -1,5 +1,6 @@
-<variable name="title" id="title">Setting Site Properties</variable>
-<variable name="filename" id="filename">settingSiteProperties</variable>
+{% set title = "Setting Site Properties" %}
+{% set filename = "settingSiteProperties" %}
+<span id="title" class="d-none">{{ title }}</span>
 
 <frontmatter>
   title: "User Guide: {{ title }}"
diff --git a/docs/userGuide/syntax/boxes.mbdf b/docs/userGuide/syntax/boxes.mbdf
index 919a55e376..588c6720c0 100644
--- a/docs/userGuide/syntax/boxes.mbdf
+++ b/docs/userGuide/syntax/boxes.mbdf
@@ -1,4 +1,4 @@
-<import slot_info_trigger from="../components/advanced.md"></import>
+{% from "userGuide/components/advanced.md" import slot_info_trigger %}
 
 ## Boxes
 
diff --git a/docs/userGuide/syntax/dates.mbdf b/docs/userGuide/syntax/dates.mbdf
index 5abbc89e3e..3c74305454 100644
--- a/docs/userGuide/syntax/dates.mbdf
+++ b/docs/userGuide/syntax/dates.mbdf
@@ -41,9 +41,9 @@ Dates can be supplied using [page variables](../reusingContents.html#variables)
 
 Inside `variables.md` or referencing page:
 ```
-<variable name="date_pagevar">2020-03-06</variable>
+{% raw %}{% set date_pagevar = "2020-03-06" %}{% endraw %}
 ```
-<variable name="date_pagevar">2020-03-06</variable>
+{% set date_pagevar = "2020-03-06" %}
 
 {{ njcode('date_pagevar | date(format2)') }} :glyphicon-arrow-right: {{ date_pagevar | date(format2) }} <br/>
 
diff --git a/docs/userGuide/syntax/dropdowns.mbdf b/docs/userGuide/syntax/dropdowns.mbdf
index 4eafe6f2e7..ebf21499ec 100644
--- a/docs/userGuide/syntax/dropdowns.mbdf
+++ b/docs/userGuide/syntax/dropdowns.mbdf
@@ -1,4 +1,4 @@
-<import slot_info_trigger from="../components/advanced.md"></import>
+{% from "userGuide/components/advanced.md" import slot_info_trigger %}
 
 ## Dropdowns
 
diff --git a/docs/userGuide/syntax/modals.mbdf b/docs/userGuide/syntax/modals.mbdf
index 8faaaf193c..09563c3c5a 100644
--- a/docs/userGuide/syntax/modals.mbdf
+++ b/docs/userGuide/syntax/modals.mbdf
@@ -1,4 +1,4 @@
-<import slot_info_trigger slot_type_info_trigger from="../components/advanced.md"></import>
+{% from "userGuide/components/advanced.md" import slot_info_trigger, slot_type_info_trigger %}
 
 ## Modals
 
diff --git a/docs/userGuide/syntax/panels.mbdf b/docs/userGuide/syntax/panels.mbdf
index d3226b09d5..3435ac4b2e 100644
--- a/docs/userGuide/syntax/panels.mbdf
+++ b/docs/userGuide/syntax/panels.mbdf
@@ -1,4 +1,4 @@
-<import slot_info_trigger from="../components/advanced.md"></import>
+{% from "userGuide/components/advanced.md" import slot_info_trigger %}
 
 ## Panels
 
diff --git a/docs/userGuide/syntax/popovers.mbdf b/docs/userGuide/syntax/popovers.mbdf
index 8ceb3b2dd5..137378fa60 100644
--- a/docs/userGuide/syntax/popovers.mbdf
+++ b/docs/userGuide/syntax/popovers.mbdf
@@ -1,4 +1,4 @@
-<import slot_info_trigger from="../components/advanced.md"></import>
+{% from "userGuide/components/advanced.md" import slot_info_trigger %}
 
 ## Popovers
 
diff --git a/docs/userGuide/syntax/questions.mbdf b/docs/userGuide/syntax/questions.mbdf
index 0dc4261c57..68cbadd665 100644
--- a/docs/userGuide/syntax/questions.mbdf
+++ b/docs/userGuide/syntax/questions.mbdf
@@ -1,4 +1,4 @@
-<import slot_info_trigger slot_type_info_trigger from="../components/advanced.md"></import>
+{% from "userGuide/components/advanced.md" import slot_info_trigger, slot_type_info_trigger %}
 
 ## Questions and Quizzes
 
@@ -150,7 +150,8 @@ Optionally, you can provide the reason for the particular option using the `<q-o
 
 **MCQ Questions**
 
-<variable name="mcqQuestion"><question type="mcq" header="Which of these **contradicts** the heuristics recommended when creating test cases with multiple inputs?">
+{% set mcqQuestion %}
+<question type="mcq" header="Which of these **contradicts** the heuristics recommended when creating test cases with multiple inputs?">
   <!-- Insert the reason for the option using the reason attribute -->
   <q-option reason="This is **correct**. We need to figure out if a positive test case works!">
     Each valid test input should appear at least once in a test case that doesn’t have any invalid inputs.
@@ -174,7 +175,8 @@ Optionally, you can provide the reason for the particular option using the `<q-o
   <div slot="hint">
   How do you figure out which inputs are wrong? (or correct)
   </div>
-</question></variable>
+</question>
+{% endset %}
 
 <include src="codeAndOutput.md" boilerplate >
 <variable name="highlightStyle">html</variable>
@@ -185,7 +187,8 @@ Optionally, you can provide the reason for the particular option using the `<q-o
 
 **Checkbox Questions**
 
-<variable name="checkboxQuestion"><question type="checkbox" hint="Use your calculator! :fas-calculator:">
+{% set checkboxQuestion %}
+<question type="checkbox" hint="Use your calculator! :fas-calculator:">
 
   ##### Which of the following is true?
 
@@ -199,7 +202,8 @@ Optionally, you can provide the reason for the particular option using the `<q-o
   <q-option correct>
   11 / 11 = 1
   </q-option>
-</question></variable>
+</question>
+{% endset %}
 
 <include src="codeAndOutput.md" boilerplate>
 <variable name="highlightStyle">html</variable>
@@ -237,7 +241,8 @@ and not others.
 
 You can provide your answer in the `answer` attribute, or similarly, the `<div slot="answer">` slot for more expressive formatting.
 
-<variable name="textQuestion"><question type="text" header="Which country did the Hawaiian pizza originate from?"
+{% set textQuestion %}
+<question type="text" header="Which country did the Hawaiian pizza originate from?"
           keywords="hawaii" threshold="0.5" answer="It originated from Hawaii!">
   <div slot="hint">
 
@@ -245,8 +250,8 @@ You can provide your answer in the `answer` attribute, or similarly, the `<div s
 
   :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza: :pizza:
   </div>
-</question></variable>
-
+</question>
+{% endset %}
 
 <include src="codeAndOutput.md" boilerplate>
 <variable name="highlightStyle">html</variable>
diff --git a/docs/userGuide/syntax/variables.mbdf b/docs/userGuide/syntax/variables.mbdf
index 031957bcf0..42ff287361 100644
--- a/docs/userGuide/syntax/variables.mbdf
+++ b/docs/userGuide/syntax/variables.mbdf
@@ -6,9 +6,11 @@
 
 <span id="overview">
 
-**MarkBind variables are ideal for reusing small bits of code** in multiple places; you can define a variable to represent the code bit in question and reuse it anywhere in the site by referring the variable instead of duplicating the code bit.
+**Nunjucks [variables](https://mozilla.github.io/nunjucks/templating.html#set) are ideal for reusing small bits of code** in multiple places; you can define a variable to represent the code bit in question and reuse it anywhere in the site by referring to the variable instead of duplicating the code bit.
 </span>
 
+MarkBind does not aim to alter the already robust variable features of nunjucks, but provides several extensions to it.
+
 ### Global Variables
 
 **Global variables are to be defined in the `_markbind/variables.md` file.** Each variable must have an `name` and the value can be any MarkBind-compliant code fragment. The `name` should not contain `-` and `.`. For example, `search-option` and `search.options` are not allowed.
@@ -30,7 +32,7 @@ The variables declared here are available from anywhere in the code base.
 ```
 </div>
 
-To include a variable value in your code, give the variable id enclosed in double curly braces.
+To include a variable value in your code, give the variable id enclosed in Nunjucks' double curly braces syntax.
 
 <div class="indented">
 
@@ -38,16 +40,10 @@ To include a variable value in your code, give the variable id enclosed in doubl
 
 </div>
 
-#### Default values for variables
-
-You can also specify a default value for a variable, which is displayed when the variable is not specified in `variables.md` and by any of the [includes]({{ baseUrl }}/userGuide/reusingContents.html#the-include-tag) of the page. This is done by adding `or defaultValue` within the curly braces.
-
-<div class="indented">
-
-{{ icon_example }} `My name is {% raw %}{{ name or "Anonymous" }}{% endraw %}.` {{ icon_arrow_right }} My name is Anonymous.
-</div>
-
+<box type="warning">
 
+Global variables (`_markbind/variables.md`) will take precedence over any variables set via Nunjucks' tags (e.g. `{% raw %}{% set %}{% endraw %}`).
+</box>
 
 #### Built-in Global Variables
 
@@ -60,106 +56,7 @@ Variable | Notes | {{ icon_example }} | Output
 `MarkBind` | The MarkBind version in use, linked to the MarkBind website. | `Page generated by: {% raw %}{{MarkBind}}{% endraw %}`  | `Page generated by:` {{ MarkBind | safe }}
 
 
-### Page Variables
-
-**You can also declare variables for use within a single page.** These variables work exactly the same as regular variables, except that their values only apply to the page they are declared in. This can be done by using the `<variable>` tag.
-
-<div class="indented">
-
-{{ icon_example }} Declaring page variables: `<variable name="full_name">John Doe</variable>`<br>
-
-{{ icon_example }} Using page variables: `My name is {% raw %}{{ full_name }}. This is {{ full_name }}{% endraw %}'s site.`
-</div>
-
-<box type="warning">
- 
-These variables will not be applied to [`<include>` files]({{ baseUrl }}/userGuide/reusingContents.html#the-include-tag). Additionally, global variables (`_markbind/variables.md`) will take precedence over any page variables. *See also: [Specifying Variables in an `<include>`]({{ baseUrl }}/userGuide/reusingContents.html#specifying-variables-in-an-include)*.
-</box>
-
-
-### Importing Variables
-
-**You can access [page variables](#page-variables) from another page by importing them.**
-
-<div class="indented">
-
-{{ icon_example }} Importing specific variables from `person.md` into `coverpage.md`:
-
-In `person.md`,
-```html {.no-line-numbers}
-<variable name="address">123 Sun Avenue</variable>
-<variable name="name">Mark</variable>
-<variable name="phone">123456789</variable>
-```
-
-and in `coverpage.md`,
-
-```html {.no-line-numbers}
-<import address name from="person.md"/>
-```
-
-{% raw %}will allow you to access the variables as per normal: `{{address}}`, `{{name}}`, `{{phone}}`.{% endraw %}
-
-</div>
-
-**When importing all variables, you should attach a _namespace_** to the imported variables using an `as` attributes.
-
-<div class="indented">
-
-{{ icon_example }} Importing all variables with namespaces:
-
-In `coverpage.md`,
-```html {.no-line-numbers}
-<import from="page.md" as="details"/>
-```
-
-{% raw %}
-
-|    Detail    | How to access         
-| :------------- |:-------------
-| address | `{{details.address}}`
-| name | `{{details.name}}`
-| phone | `{{details.phone}}`
-
-This way, ***all*** variables in `page.md` are accessible via `{{details.<variable_name>}}`.
-{% endraw %}
-
-</div>
-
-<box type="warning" header="Mixing namespaces with variable names">
-
-You can also mix the two syntaxes for importing page variables, though it is not recommended:
-```html {.no-line-numbers}
-<import address name from="page.md" as="details"/>
-```
-
-This may seem like it will import *only* `address` and `name` from `page.md` and storing them in the namespace `details`.
-
-However, this is a combination of *both* syntaxes above, and thus this will allow you to:
-
-{% raw %}
-- access `address` and `name` (but NOT `phone`) with `{{address}}` and `{{name}}`
-- access `address`, `name`, and `phone` with `{{details.address}}`, `{{details.name}}`, and `{{details.phone}}`
-{% endraw %}
-
-</box>
-
-<box type="important" header="Precedence of imported variables">
-
-Note that global variables (`_markbind/variables.md`) and [page variables](#page-variables) will take precedence over any imported variables.
-
-This also applies for namespaces {{ icon_arrow_right }} for instance, in the earlier example, `details` is treated as the variable name and is subject to the same rules as other variables, such as global variables taking precedence, and later declarations overriding previous ones:
-
-```html {.no-line-numbers}
-<import from="title.md" as="book"/>
-<import from="index.md" as="book"/>
-```
-
-In this case, all the variables in `title.md` are not accessible, as they are overwritten with the variables from `index.md`.
-
-</box>
-
-#### Importing variables from other external file formats
+### Importing variables from other external file formats
 
 You can also source variables from external files using MarkBind's {%raw%}`{% ext varName = "filepathToFile" %}`{%endraw%} Nunjucks extension.
 This is useful if you have external datasets you want to display in your site!
@@ -221,103 +118,6 @@ Student Number | Score | Rank
 Only `.json` files are supported for now.
 </box>
 
-<panel type="seamless" header="##### Old syntax (deprecated)">
-
-You could also have your variables defined in a JSON file to define multiple variables in a more concise manner.
-
-{{ icon_example }}
-globally scoped variables `variables.md`:
-```html {.no-line-numbers}
-<variable from="PATH_TO_VARIABLE.json" />
-```
-
-`variables.json`:
-```json {.no-line-numbers}
-{
-  "variable1": "This is the first variable",
-  "variable2": "This is the second variable"
-}
-```
-
-Variables defined in a `.json` file will be scoped according to where it is being referenced. Json variables referenced in `variables.md`
-would be globally scoped like other global variables in that file.
-
-{{ icon_example }}
-locally scoped variables in `index.md`:
-```html
-<variable from="PATH_TO_VARIABLE.json" />
-```
-
-In this case, json variables referenced within `index.md` would be a page variable accessible within the page `index.md`.
-
-</panel>
-
-### Tips and Tricks for variables
-
-<br>
-<box type="success" seamless header="##### Referring to other variables in variables">
-
-{% raw %}
-This variable uses a built-in variable:<br>
-`<variable name="time">{{ timestamp }}</variable>`
-
-Here, the second variable will be assigned the contents of the first variable.<br>
-`<variable name="first">This is the first variable.</variable>`<br>
-`<variable name="second">{{ first }}</variable>`<br>
-
-This will not work, as the `fourth` variable is declared _below_ the line that refers to it.<br>
-`<variable name="third">{{ fourth }}</variable>` :x:<br>
-`<variable name="fourth">This is the fourth variable.</variable>`
-{% endraw %}
-
-</box>
-<br>
-<box type="success" seamless header="##### Variables can contain malformed html">
-
-MarkBind uses a patched version of the excellent [htmlparser2](https://github.com/fb55/htmlparser2) that allows `<variable>` tags
-to contain any content - even incomplete or malformed html!
-
-{{ icon_example }} You can use this to build html from incomplete html code snippets:
-
-```html {.no-line-numbers}
-<variable name="front_center"><div style="text-align: center;"></variable>
-<variable name="front_right"><div style="text-align: right;"></variable>
-<variable name="back"></div></variable>
-```
-
-And to use it:
-
-<variable name="front_center"><div style="text-align: center;"></variable>
-<variable name="front_right"><div style="text-align: right;"></variable>
-
-<variable name="back"></div></variable>
-
-{{ icon_example }}
-{% raw %}`{{ front_center | safe }} centered {{ back | safe }}`{% endraw %} {{icon_arrow_right}} {.my-2}
-
-<div class="indented">
-<box border-left-color="grey" background-color="white">
-{{ front_center | safe }} centered {{ back | safe }}
-</box>
-</div>
-
-
-{{ icon_example }}
-{% raw %}`{{ front_right | safe }} right aligned {{ back | safe }}`{% endraw %} {{icon_arrow_right}} {.my-2}
-
-<div class="indented">
-<box border-left-color="grey" background-color="white">
-{{ front_right | safe }} right aligned {{ back | safe }}
-</box>
-</div>
-
-<box type="warning">
-
-Remember to also use the `safe` nunjucks filter when rendering your variables as raw html!
-</box>
-</box>
-
-</span>
 
 <span id="short" class="d-none">
 
@@ -330,10 +130,5 @@ Global variables:
 
 `The year was {% raw %}{{ year }}{% endraw %}.`
 
-Page variables:<br>
-`<variable name="full_name">John Doe</variable>`{.html}
-
-`The name was {% raw %}{{ full_name }}{% endraw %}.`
-
 
 </span>
diff --git a/docs/userGuide/templates.md b/docs/userGuide/templates.md
index 0a9fbfe256..763155408c 100644
--- a/docs/userGuide/templates.md
+++ b/docs/userGuide/templates.md
@@ -1,4 +1,6 @@
-<variable name="title" id="title">Templates</variable>
+{% set title = "Templates" %}
+<span id="title" class="d-none">{{ title }}</span>
+
 <frontmatter>
   title: "User Guide: {{ title }}"
   layout: userGuide
diff --git a/docs/userGuide/themes.md b/docs/userGuide/themes.md
index f18e2ae872..7240fc8df9 100644
--- a/docs/userGuide/themes.md
+++ b/docs/userGuide/themes.md
@@ -1,5 +1,7 @@
-<variable name="title" id="title">Themes</variable>
-<variable name="filename" id="filename">themes</variable>
+{% set title = "Themes" %}
+{% set filename = "themes" %}
+<span id="title" class="d-none">{{ title }}</span>
+
 <frontmatter>
   title: "User Guide: {{ title }}"
   layout: userGuide
diff --git a/docs/userGuide/tipsAndTricks.md b/docs/userGuide/tipsAndTricks.md
index a5f9b9d4b3..3c69945c27 100644
--- a/docs/userGuide/tipsAndTricks.md
+++ b/docs/userGuide/tipsAndTricks.md
@@ -1,4 +1,5 @@
-<variable name="title">Tips & Tricks</variable>
+{% set title = "Tips & Tricks" %}
+<span id="title" class="d-none">{{ title }}</span>
 
 <frontmatter>
   title: "User Guide: {{ title | safe }}"
diff --git a/docs/userGuide/tweakingThePageStructure.md b/docs/userGuide/tweakingThePageStructure.md
index ddc5970bf2..0807930537 100644
--- a/docs/userGuide/tweakingThePageStructure.md
+++ b/docs/userGuide/tweakingThePageStructure.md
@@ -1,5 +1,6 @@
-<variable name="title" id="title">Tweaking the Page Structure</variable>
-<variable name="filename">tweakingThePageStructure</variable>
+{% set title = "Tweaking the Page Structure" %}
+{% set filename = "tweakingThePageStructure" %}
+<span id="title" class="d-none">{{ title }}</span>
 
 <frontmatter>
   title: "User Guide: {{ title }}"
diff --git a/docs/userGuide/usingComponents.md b/docs/userGuide/usingComponents.md
index d5969fdf1b..ad2e038b34 100644
--- a/docs/userGuide/usingComponents.md
+++ b/docs/userGuide/usingComponents.md
@@ -1,5 +1,6 @@
-<variable name="title" id="title">Using Components</variable>
-<variable name="filename">usingComponents</variable>
+{% set title = "Using Components" %}
+{% set filename = "usingComponents" %}
+<span id="title" class="d-none">{{ title }}</span>
 
 <frontmatter>
   title: "User Guide: {{ title }}"
diff --git a/docs/userGuide/usingHtmlJavaScriptCss.md b/docs/userGuide/usingHtmlJavaScriptCss.md
index 9a26ed33b4..ce5f65082c 100644
--- a/docs/userGuide/usingHtmlJavaScriptCss.md
+++ b/docs/userGuide/usingHtmlJavaScriptCss.md
@@ -1,5 +1,6 @@
-<variable name="title" id="title">Using HTML, JavaScript, CSS</variable>
-<variable name="filename">usingHtmlJavaScriptCss</variable>
+{% set title = "Using HTML, JavaScript, CSS" %}
+{% set filename = "usingHtmlJavaScriptCss" %}
+<span id="title" class="d-none">{{ title }}</span>
 
 <frontmatter>
   title: "User Guide: {{ title }}"
diff --git a/docs/userGuide/usingPlugins.md b/docs/userGuide/usingPlugins.md
index 7ddb6d80b5..6d38b4dcd5 100644
--- a/docs/userGuide/usingPlugins.md
+++ b/docs/userGuide/usingPlugins.md
@@ -1,5 +1,6 @@
-<variable name="title" id="title">Using Plugins</variable>
-<variable name="filename" id="filename">usingPlugins</variable>
+{% set title = "Using Plugins" %}
+{% set filename = "usingPlugins" %}
+<span id="title" class="d-none">{{ title }}</span>
 
 <frontmatter>
   title: "User Guide: {{ title }}"
diff --git a/docs/userGuide/workingWithSites.md b/docs/userGuide/workingWithSites.md
index e2930a0bf7..7349cbb538 100644
--- a/docs/userGuide/workingWithSites.md
+++ b/docs/userGuide/workingWithSites.md
@@ -1,4 +1,6 @@
-<variable name="title" id="title">Working with Sites</variable>
+{% set title = "Working with Sites" %}
+<span id="title" class="d-none">{{ title }}</span>
+
 <frontmatter>
   title: "User Guide: {{ title }}"
   layout: userGuide