Antora补充UI：从doc.css中移除文档的max-width

Question

Antora补充UI：从doc.css中移除文档的max-width

cssantora

3

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

我甚至不是CSS的初学者。我几乎一无所知。我可以构建Antora文档（网页），因此我只从用户角度了解Antora的一点点。

我发现了如何使缩放生效的评论。https://gitter.im/antora/users?at=5d97c8ea37073b36a06fddb8

如果我编辑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;
  }
}

这是我在评论链接中找到并发布的建议编辑。我更喜欢使用引用了此处的supplemental-ui方法； Antora顶部导航栏自定义，实际上也被antora文档https://gitlab.com/antora/docs.antora.org所使用。

当我通过补充UI方法构建时，我可以看到我的已编辑doc.css在新站点中创建。然而，我无法获得所需的结果，即在最大化时使用浏览器的最大宽度。我了解css中如果您稍后声明某些内容，则会占据优先权。我想知道是否由于文件来源的顺序缺少max-width而未被观察到。我尝试过不同的文件名，例如doc.css和xdoc.css，认为它们按字母表顺序排列。这似乎没有帮助。

是否有一种方法可以进行小的CSS更改，并使用supplemental-ui方法将其纳入构建antora站点时使用？

我希望supplemental-ui方法能够起作用，这样我们就可以始终跟上antora变化的步伐，并仅对max-width进行微小更改。我正在使用的方法要求构建带有微小更改的antora，并指向该新zip文件来构建antora，而不是在公共antora存储库中获取当前最新的antora。

出于调试目的，我还尝试过使用supplemental-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;
  }
}

- jj2f1

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- David Jencks · Accepted Answer

可以使用补充的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之后，所以会覆盖它。