gitlab Wiki页面中的Javascript / html？

Question

恐怕我真的不知道如何执行此操作-我想在Gitlab Wiki页面中使用变量。使用HTML完全有可能吗？我可以在页面上运行脚本吗？

例如，此question关于在html中使用javascript变量-这样可能吗？

对于我的特定示例，我想要一个带有表格的页面，其中第一列是数字，我想取最大值并将其显示在页面顶部。因此，例如，该表可能具有以下行：

1   X
22  Y
15  Z

因此，在页面顶部，我将显示“最大数字是22”。这有意义吗？

Answer 1

如何

我创建了一个演示NodeJS项目here，当我推送到master分支时，该项目会自动生成Wiki pages。您可以查看代码以了解其工作原理。

步骤1-创建页面模板

您可以将模板添加到Wiki页面的项目中。在我的示例中，我使用了MustacheJS。像这样的东西：

wiki / templates / home.mst

# Welcome to the supermarket

The biggest quantity we have in stock is for **{{topProduct.label}}**,
with a total of **{{topProduct.stock}}**!

|   Fruit   |   Quantity   |
|-----------|--------------|
{{#inventory}}
| {{label}} | {{stock}} |
{{/inventory}}

在此示例中，数据将来自项目代码本身。

第2步-构建页面
创建一个js文件，它将从您的应用程序中获取数据，并将模板呈现到build目录中。
wiki / build.js
const fs = require('fs');
const Mustache = require('mustache');
const myApp = require('../src/index.js');
const inventory = myApp.getInventory();

// Get the Mustache template
const homeTemplate = fs.readFileSync(__dirname + '/templates/home.mst', 'utf-8');

// Get the fruit with the highest quantity
const topProduct = inventory.reduce((acc, curr) => {
  if (acc === null || curr.stock > acc.stock) {
    return curr;
  } else {
    return acc;
  }
}, null);

// Render the page using your variables
const homeContent = Mustache.render(homeTemplate, { inventory, topProduct });

// Write the file in a build directory
const buildDir = __dirname + '/../build';
if (!fs.existsSync(buildDir)) {
  fs.mkdirSync(buildDir);
}

fs.writeFileSync(buildDir + '/home.md', homeContent);

并且在package.json中，添加命令以运行该脚本：

"scripts": {
    // ...
    "wiki:build": "node wiki/build.js"
  }

第3步-部署Wiki页面

创建一个将页面上传到Wiki的脚本。
wiki / deploy.js

const fs = require('fs');
const Axios = require('axios');
const qs = require('qs');

const config = {
  gitlabBaseUrl: 'https://gitlab.com', // Update this if you're on a private Gitlab
  projectId: process.env.CI_PROJECT_ID, // Provided by Gitlab-CI
  privateToken: process.env.WIKI_DEPLOY_TOKEN, // Added through Gitlab interface
  buildDir: __dirname + '/../build'
};

const axios = Axios.create({
  baseURL: config.gitlabBaseUrl,
  headers: { 'Private-Token': config.privateToken, Accept: 'application/json' }
});

(async function deploy() {
  const existingPages = await getExistingWikiPages();
  const updatedPages = getUpdatedPages();
  // Pages which existed but are no longer in the build (obsolete)
  const pagesToDelete = existingPages.filter(p1 => updatedPages.every(p2 => p2.slug !== p1.slug));
  // Pages which didn't exist before
  const pagesToCreate = updatedPages.filter(p1 => existingPages.every(p2 => p2.slug !== p1.slug));
  // Pages which already exist
  const pagesToUpdate = updatedPages.filter(p1 => existingPages.some(p2 => p2.slug === p1.slug));

  console.log(
    `Found ${pagesToDelete.length} pages to delete, ${pagesToCreate.length} pages to create, ${pagesToUpdate.length} pages to update.`
  );
  for (let page of pagesToDelete) {
    await deletePage(page);
  }
  for (let page of pagesToCreate) {
    await createPage(page);
  }
  for (let page of pagesToUpdate) {
    await updatePage(page);
  }
  console.log('Deploy complete!');
})();

function getExistingWikiPages() {
  return axios.get(`/api/v4/projects/${config.projectId}/wikis`).then(res => res.data);
}

function getUpdatedPages() {
  const files = fs.readdirSync(config.buildDir);
  return files.map(file => {
    const name = file // Remove the file extension
      .split('.')
      .slice(0, -1)
      .join('.');
    return {
      format: 'markdown', // You could make this depend on the file extension
      slug: name,
      title: name,
      content: fs.readFileSync(`${config.buildDir}/${file}`, 'utf-8')
    };
  });
}

function deletePage(page) {
  console.log(`Deleting ${page.slug}...`);
  return axios.delete(`/api/v4/projects/${config.projectId}/wikis/${page.slug}`);
}

function createPage(page) {
  console.log(`Creating ${page.slug}...`);
  return axios.post(`/api/v4/projects/${config.projectId}/wikis`, qs.stringify(page));
}

function updatePage(page) {
  console.log(`Updating ${page.slug}...`);
  return axios.put(`/api/v4/projects/${config.projectId}/wikis/${page.slug}`, qs.stringify(page));
}

在顶部的config中，您需要指定Gitlab使用的URL。 CI_PROJECT_ID将由Gitlab-CI本身作为环境变量提供。但是WIKI_DEPLOY_TOKEN不会。在步骤4中进行设置。

并且在package.json中，添加命令以运行该脚本：
"scripts": {
    // ...
    "wiki:build": "node wiki/build.js",
    "wiki:deploy": "node wiki/deploy.js"
  }

第4步-设置专用令牌WIKI_DEPLOY_TOKEN

为此，您需要单击右上角的个人资料图片> 
设置。然后在左侧菜单中，
访问令牌，并使用api范围创建令牌。名称没关系。复制此令牌。
然后，转到您的项目。在左侧菜单中，单击设置> CI / CD。展开
Variables部分，并使用先前复制的令牌创建一个名为WIKI_DEPLOY_TOKEN的变量，将其设置为Masked，以使其不出现在任何日志中，以及Save variables：] >这将使该令牌作为环境变量仅在您的管道中可用。
第5步-创建管道
如果没有管道，请在项目的根目录下创建一个.gitlab-ci.yml文件。声明generate_wiki阶段：
stages:
  # - tests
  # - deploy
  # ...
  - generate_wiki

generate_wiki:
  image: node:10
  stage: generate_wiki
  script:
    - npm install
    - npm run wiki:build  # build the wiki in a directory
    - npm run wiki:deploy # update it in Gitlab
  only:
    - master # Only when merging or pushing to master branch


# ... rest of your pipeline ...
如您所见，我们使用在步骤2和3中声明的命令wiki:build和wiki:deploy。

步骤7-推动掌握，享受魔法
推送后，如果一切正常，您可以单击左侧菜单中的
CI / CD
，并且您应该看到管道正在运行：
如果单击小圆圈，您应该看到日志：
并且，如果您进入Wiki页面，它们应该是自动的，是最新的：