Antora补充用户界面删除doc.css中文档的最大宽度

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

我甚至不是css新手。我几乎什么都不知道。我可以构建antora文档（网页），因此我从用户角度只了解一点点antora

我发现了关于如何进行缩放的评论

如果我编辑doc.css，构建一个ui-bundle.zip，将local-antora-playbook.yml指向新创建的ui-bundle.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); */
  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;
  }
}

这是我在上面找到并发布的评论链接中建议的编辑。我更愿意使用这里引用的补充ui方法；并被antora的文档实际使用

我可以看到，当我通过补充ui方法构建时，我编辑的doc.css会在新站点中创建。然而，我没有得到期望的结果，当最大化时，我能够使用web浏览器的最大宽度。我理解，在css中，如果您稍后声明某些内容，它将优先。我想知道的是，是否因为源文件的顺序而没有观察到最大宽度的缺失。我尝试过不同的文件名，比如doc.css和xdoc.css，认为它们是按字母顺序来源的。这似乎没有帮助

有没有一种方法可以在我构建antora站点时，对css进行这种小的更改，并使用补充的ui方法将其导入antora站点

我想补充用户界面的方法来工作，所以我们可以始终保持最新的安托拉的变化，只有我们的微小变化，以最大宽度。我所采用的方法需要用微小的变化构建antora，并指向新的zip文件来构建antora，而不是在公开的antora回购协议中寻找当前最新的antora

对于调试，我还尝试了这种方法和补充的ui构建过程。我理解！不推荐使用important，但我只是想弄清楚，除了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;
  }
}

---

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

例如，如果您的附加文件是

css/expand svg.css

，则还需要一个包含

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

.doc {
    max-width: none;
}

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

---

而且它看起来像你想要的那样工作。

！重要信息

不需要，因为附加的css比默认的UI css显示得晚，所以会覆盖它。

谢谢，我已经构建了一个UI捆绑包，这确实有效。我只是希望能一直和安托拉保持联系，而不必重建包裹。至少这是我的目标。我完全同情这一点；我认为开发和维护AntoraUI捆绑包远比必要的困难。我开始尝试就这个问题展开讨论，并开始在中创建我的想法原型。如果没有这一点，我对构建UI捆绑包的热情就会大大降低，而对补充文件的热情就会大大提高。你可能会考虑对这些问题进行投票或者尝试这个项目。我会看一下发布的问题。对于后来阅读本文的人来说，我的问题不是在partials/head-styles.hbs中添加一行。非常感谢。