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步末的文件夹结构）。您的模板如下所示：

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步-构建页面

  

注意：我作为演示编写的脚本使用axios向Gitlab API发出请求，mustache呈现页面，而qs将数据格式化为查询字符串，然后再将其发布到Gitlab。您可以使用其他依赖项或将其安装为开发依赖项：    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-设置专用令牌WIKI_DEPLOY_TOKEN

为此，您需要点击右上角的个人资料图片> 设置。然后在左侧菜单中，访问令牌，并使用 api 范围创建令牌。名称没关系。立即复制此令牌，因为它只会显示一次。

然后，转到您的项目。在左侧菜单中，点击设置> CI / CD 。展开变量部分，并使用先前复制的令牌创建名为WIKI_DEPLOY_TOKEN的变量，将其设置为 Masked ，以便它不会出现在任何日志中，并且保存变量：

这将使该令牌仅作为环境变量在您的管道中可用。

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

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

现在，您的项目结构应如下所示：

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

第6步-推动掌握并享受魔法

推送后，如果一切正常，则可以单击左侧菜单中的 CI / CD ，您应该会看到管道正在运行：

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

如果您进入Wiki页面，它们应该自动更新：