CSS 中的 Grav CMS 链接

【问题标题】：Grav CMS links in cssCSS 中的 Grav CMS 链接
【发布时间】：2019-03-04 14:05:19
【问题描述】：

我在 Grav CMS 中添加自定义字体时遇到问题。所有字体都添加在文件夹路径下：user/themes/bildxwerkstatt/fonts

当我在 .css 文件中添加此代码时，它可以在我的计算机上运行

@font-face {
font-family: MullerBlack;
src: url(/bildxwerkstatt/user/themes/bildxwerkstatt/fonts/Muller/MullerBlack.otf);}

h1, h2, h3, h4, h5, h6 {
font-family: MullerBlack, sans-serif!important;}

但是在主机上这样的路径不起作用。

据我从 Grav 文档中了解到，css 中字体的路径应如下所示：

url(theme:fonts/Muller/MullerBlack.otf);}

但在我的情况下它不起作用。尝试在 css 中添加背景图像时遇到同样的问题。

提前感谢您！

【问题讨论】：

标签： html css frontend assets grav

【解决方案1】：

根据给定的信息很难提供帮助。

bildxwerkstatt是文档根目录下的文件夹，也是主题名吧？

首先要检查的是您是否有提供的.htaccess 并设置RewriteBase。见Grav Troubleshooting 404 Not Found

那么你应该检查你的css语法。

@import url('https://...

或base.html.twiq

<link href="https://...

来自Grav Asset Manager 关于静态资源：

url() 方法采用可选的第二个参数 true 或 false 以使 URL 包含架构和域。

同时检查可用的Theme Variables。

{{ theme_url }} 返回当前主题的相对 URL。

这里是我如何为特定页面设置背景图像的示例：

{% set background_image = page.media.images|randomize|first %}
{% set background_image = background_image.name.cache.url %}

<div {% if background_image %} style="background-image: url({{ background_image }})"{% endif %}></div>

【讨论】：