2

我正在使用 anora 来记录产品架构规范。我们有大图，因此在最大化浏览器窗口时允许 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;
  }
}

这是我在上面找到并发布的评论链接中的建议编辑。我更喜欢使用这里引用的补充 UI 方法；Antora 顶部导航栏自定义和实际使用的文档为 antora https://gitlab.com/antora/docs.antora.org。

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

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

我希望使用补充 ui 方法，这样我们就可以随时了解 antora 的最新变化，并且只需对 max-width 进行微小的更改。我采用的方法需要用微小的变化构建 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;
  }
}
4

1 回答 1

2

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

于 2020-12-22T23:35:59.763 回答