gitlab Wiki页面中的Javascript / html?

恐怕我真的不知道该怎么做-我想在Gitlab Wiki页面中使用变量。使用HTML完全有可能吗?我可以在页面上运行脚本吗?

例如,关于question的有关在html中使用javascript变量的信息-这样可能吗?

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

1   X
22  Y
15  Z

因此,在页面顶部,我将显示“最大数字为22”。这有道理吗?

l787922411 回答:gitlab Wiki页面中的Javascript / html?

您不能在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 ,以便它不会出现在任何日志中,并且保存变量

enter image description here

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

第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:buildwiki:deploy

现在,您的项目结构应如下所示:

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

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

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

enter image description here

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

enter image description here

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

enter image description here

本文链接:https://www.f2er.com/2966778.html

大家都在问