gitlab wiki页面中的Javascript/html？

Question

恐怕我真的不知道如何做到这一点 - 我想在 Gitlab Wiki 页面中使用变量。这可能使用html吗？我可以在页面上运行脚本吗？

例如，这个 question在 html 中使用 javascript 变量 - 这样的事情可能吗？

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

1   X
22  Y
15  Z

所以在页面顶部我会显示“最大的数字是 22”。这有意义吗？

Answer 1

您的 Wikipage 中不能有脚本，因为它们会清理 HTML(查看它们允许的内容 here )。为了做你想做的事，你可以在 Gitlab-CI 中生成该页面作为项目部署管道的一部分，使用任何渲染引擎并将该变量放入其中，并使用 Gitlab's Wiki APIs 自动更新它.
如何
我创建了一个演示 NodeJS 项目 here ，当我推到 master分支，自动生成 Wiki pages .您可以查看代码以了解其工作原理。
这个示例应用程序公开了一个函数来获取水果和库存数量的列表。我们会自动将这些数据添加到 Wiki 中。
第 1 步 - 创建页面模板
您可以为您的项目添加 Wiki 页面的模板。在我的示例中，我使用了 MustacheJS .我把所有东西都放在 wiki文件夹(参见步骤 5 末尾的文件夹结构)。您的模板可能如下所示:
维基/模板/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 步 - 构建您的页面

Note: The scripts I wrote as a demo use axios to make requests to the Gitlab API, mustache to render the pages, and qs to format the data as a query string before posting it to Gitlab. You can use other ones or install them as dev dependencies:npm install --save-dev axios mustache qs

创建一个 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。如果您还使用 NodeJS，这可能无需太多修改即可按原样工作。
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"
  }

注:此示例将删除过时的页面，并根据在构建文件夹中找到的文件和 Wiki 已包含的文件更新或创建新页面。如果你也想有附件(图片)，你需要使用 this API还。
第 4 步 - 设置私有(private) token WIKI_DEPLOY_TOKEN为此，您需要点击右上角的头像 > 设置 .然后在左侧菜单中， 访问 token ，并使用 创建一个 token 接口(interface) 范围。名字无关紧要。现在复制此 token ，因为它只会显示一次。
然后，转到您的项目。在左侧菜单中，点击 设置 > CI/CD .展开 变量 部分，并使用先前复制的标记创建一个名为 WIKI_DEPLOY_TOKEN 的变量, 使它成为 蒙面这样它就不会出现在任何日志中，并且 保存变量 :

这将使该 token 仅在您的管道中可用，作为环境变量。
第 5 步 - 创建您的管道
如果您还没有管道，您需要做的就是创建一个 .gitlab-ci.yml项目根目录下的文件。声明 generate_wiki阶段:
.gitlab-ci.yml

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 ...

如您所见，我们使用命令 wiki:build和 wiki:deploy在步骤 2 和 3 中声明。
现在，您的项目结构应如下所示:

/
├───src
│    └── index.js
├───wiki
│    ├── templates
│    │    └── home.mst
│    ├── build.js
│    └── deploy.js
├── .gitlab-ci.yml
└── package.json

第 6 步 - 插入掌握，享受魔法
推送后，如果一切顺利，您可以点击 CI/CD 在左侧菜单中，您应该看到您的管道正在运行:

如果单击小圆圈，您应该会看到日志:

如果你去你的 Wiki 页面，它们应该是最新的，自动的: