时间戳

首页 > 解决方案 > 本地 Jekyll 服务与实际输出不同

css - 本地 Jekyll 服务与实际输出不同

问题描述

我对本地 Jekyll 服务和实际输出之间的差异有疑问。

没有网站图标的实时网站选项卡的屏幕截图

第一张图是实际输出。Favicon 无法在网站上正确显示。

带有 favicon 的本地网站选项卡的屏幕截图

第二张图片是当地的 jekyll 服务。它正确显示了我的网站图标。

我已经尝试过其他人的答案，它正在改变 _config.yml，如下面的解释。

答案说修复此代码。 url: "http://flash-kim142.github.io" 至 url: "https://flash-kim142.github.io"

目前我favicon.png的位置是/Desktop/Documents/Github/My Blog/assets

我应该更改此位置还是必须尝试其他方法？

标签： cssjekyllfavicon

解决方案

Your favicon URL should be relative to your file, so use assets/<filename>.<extension>. Don't include the whole hard-code path like Desktop/Documents/....

This is your generated code on your home page:

<!-- For all browsers -->
<link rel="stylesheet" href="/assets/css/main.css">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="shortcut icon" type="image/png" href="favicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="/Documents/GitHub/My Blog/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/Documents/GitHub/My Blog/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/Documents/GitHub/My Blog/favicon-16x16.png">
<link rel="icon" type="image/png" href="/Documents/GitHub/My Blog/assets/favicon.png">
<link rel="mask-icon" href="/Documents/GitHub/My Blog/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/Documents/GitHub/My Blog/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/Documents/GitHub/My Blog/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link href="/assets/favicon.png/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon"/>

But it should be like this:

<!-- For all browsers -->
<link rel="stylesheet" href="./assets/css/main.css">
<link rel="shortcut icon" href="./favicon.ico">
<link rel="shortcut icon" type="image/png" href="./favicon.png">
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
<link rel="icon" type="image/png" href="./assets/favicon.png">
<link rel="mask-icon" href="./safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="./favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="./browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<link href="/assets/favicon.png/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon"/>

推荐阅读