Antora 补充-ui 从 doc.css 中的文档中删除最大宽度

Question

我正在使用 antora 来记录产品架构规范。我们有大图，因此在最大化浏览器时允许 svg 图像尽可能大地放大 window 是一个很大的优势。

我连css新手都算不上。我几乎一无所知。我可以制作uild antora文档（网页），所以从用户的角度我对antora的了解只有一点点。

我找到了关于如何进行缩放的评论。 https://gitter.im/antora/users?at=5d97c8ea37073b36a06fddb8

编辑doc.css可以得到想要的结果，build a ui-bundle.zip，点local-antora-playbook.yml在新创建的 ui-bundle.zip 和 rebuild 站点。

.doc {
  color: var(--doc-font-color);
  font-size: var(--doc-font-size);
  hyphens: auto;
  line-height: var(--doc-line-height);
  margin: var(--doc-margin);
  /* max-width: var(--doc-max-width); */
  padding: 0 1rem 4rem;
}

@media screen and (min-width: 1024px) {
  .doc {
    flex: auto;
    font-size: var(--doc-font-size--desktop);
    margin: var(--doc-margin--desktop);
    /* max-width: var(--doc-max-width--desktop); */
    min-width: 0;
  }
}

这是我在上面找到并发布的评论 link 中的建议编辑。我更愿意使用此处引用的补充-ui 方法； Antora top navigation bar customization and actually used by the documentation for antora https://gitlab.com/antora/docs.antora.org.

当我通过补充 ui 方法添加 uild 时，我可以看到在新站点中创建了我编辑的 doc.css。但是，我没有得到在最大化时能够使用网络浏览器的最大宽度的预期结果。我知道在 css 中，如果您稍后声明某些内容，它会优先。我想知道是否由于采购文件的顺序而根本没有观察到最大宽度的缺失。我尝试过不同的文件名，例如 doc.css 和 xdoc.css，认为它们是按字母顺序排列的。这似乎没有帮助。

有没有办法让这个小 css 改变并使用补充-ui 方法在我 uild 时将它放入我的 antora 网站？

我希望补充-ui 方法起作用，这样我们就可以随时了解 antora 的变化，并且只有对最大宽度的微小变化。我使用的方法 requires building antora 有微小的变化，并将新的 zip 文件指向 build antora，而不是在 public 安托拉回购.

对于调试，我还使用补充-ui build 程序尝试了这种方法。我明白 !important 不被推荐，但我只是想弄清楚我是否可以得到除了完整的 build 之外的东西到一个 zip 文件。

.doc {
  color: var(--doc-font-color);
  font-size: var(--doc-font-size);
  hyphens: auto;
  line-height: var(--doc-line-height);
  margin: var(--doc-margin);
  /* max-width: var(--doc-max-width); */
  max-width: none !important;
  padding: 0 1rem 4rem;
}

@media screen and (min-width: 1024px) {
  .doc {
    flex: auto;
    font-size: var(--doc-font-size--desktop);
    margin: var(--doc-margin--desktop);
    /* max-width: var(--doc-max-width--desktop); */
    max-width: none !important;
    min-width: 0;
  }
}

Answer 1

可以使用补充 UI 来更改有效 css，但性能稍差（需要获取额外的 css 文件），我不推荐这样做。构建 UI 包的过程将所有 css 放入一个优化文件中，以后无法使用补充 UI 真正修改该文件。因此，您需要做的是在您的补充 UI 中添加一个“新的”css 文件，其中包含您想要的修改或覆盖，并且还包括一个可以拉入您的附加文件的部分文件。

例如，如果您的附加文件是 css/expand-svg.css，您还需要一个包含

的 partials/head-styles.hbs

    <link rel="stylesheet" href="{{uiRootPath}}/css/site.css">
    <link rel="stylesheet" href="{{uiRootPath}}/css/expand-svg.css">

我用包含

的附加 css 文件进行了尝试

.doc {
    max-width: none;
}

@media screen and (min-width: 1024px) {
    .doc {
        max-width: none;
    }
}

它似乎如您所愿。不需要 !important，因为附加的 css 出现的时间晚于默认的 UI css，因此会覆盖它。

Antora 补充-ui 从 doc.css 中的文档中删除最大宽度

Antora supplemental-ui removing max-width from doc in doc.css

css

antora