gpt4 book ai didi

javascript - Jekyll 网站未设置图标

转载 作者:行者123 更新时间:2023-11-30 14:52:08 25 4
gpt4 key购买 nike

第一次使用 Jekyll。我在本地主机上工作,并试图为该网站设置一个图标。我确实生成了 image.ico 并将生成的代码放在我的 head.html 文件中。它会在我的 _site 文件夹中生成图像,但不会显示在选项卡图标上。我做错了什么?

我在以下位置生成了图标:https://www.favicon-generator.org告诉我在我的文件中使用它:

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">

所以我在我的 head.html 文件上做了,图像在我的根文件夹中:

<head>

<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src="{{ site.baseurl }}/js/jquery.min.js"></script>
<script src="{{ site.baseurl }}/js/skel.min.js"></script>
<script src="{{ site.baseurl }}/js/skel-layers.min.js"></script>
<script src="{{ site.baseurl }}/js/init.js"></script>

<noscript>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="{{ site.baseurl }}/css/skel.css" />
<link rel="stylesheet" href="{{ site.baseurl }}/css/style.css" />
<link rel="stylesheet" href="{{ site.baseurl }}/css/style-xlarge.css" />
</noscript>
</head>

我不知道这是否真的有必要,但为了以防万一,这是我的 header.html 文件:

<!-- Header -->
<header id="header" class="skel-layers-fixed">


<h1><a href="{{ site.baseurl }}/" class="site-title" ><img class="image full" style="width: 35%; height: 85%; margin-top: 2px; margin-bottom: 5px; " src="images/logo.png"/></a></h1>
<nav id="nav">
<ul>
<li><a href="{{ site.baseurl }}/">Home</a></li>
<li><a href="{{ site.baseurl }}/team.html">Item 1</a></li>
<li><a href="{{ site.baseurl }}/amitis.html">Item 2</a></li>
<li><a href="{{ site.baseurl }}/enactusTogether.html">Item 3</a></li>
<li><a href="{{ site.baseurl }}/awards.html">Item 4</a></li>
<!-- <li><a href="{{ site.baseurl }}/blog.html">Blog</a></li> -->
{% for page in site.pages %}
{% if page.title %}
<li><a class="page-link" href="{{ page.url | prepend: site.baseurl }}">{{ page.title }}</a></li>
{% endif %}
{% endfor %}
<!-- <li><a href="#" class="button special">Sign Up</a></li> -->
</ul>
</nav>
</header>

是吗?我应该将网站图标代码放在其他地方吗?

更新:

我按照你们告诉我的做了,但仍然没有用。

<head>

<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />

<link rel="shortcut icon" href="{{ site.baseurl }}/favicon.ico" type="image/x-icon" />
<link rel="icon" href="{{ site.baseurl }}/favicon.ico" type="image/x-icon" />

<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
<script src="{{ site.baseurl }}/js/jquery.min.js"></script>
<script src="{{ site.baseurl }}/js/skel.min.js"></script>
<script src="{{ site.baseurl }}/js/skel-layers.min.js"></script>
<script src="{{ site.baseurl }}/js/init.js"></script>

<noscript>
<link rel="stylesheet" href="{{ site.baseurl }}/css/skel.css" />
<link rel="stylesheet" href="{{ site.baseurl }}/css/style.css" />
<link rel="stylesheet" href="{{ site.baseurl }}/css/style-xlarge.css" />
</noscript>
</head>

原来是这样?它在 head 标签内,在 no script 标签外并使用 href="{{ site.baseurl }}/favicon.ico"

最佳答案

应该将您的图标代码放在<noscript> 之外标签。里面的东西<noscript>仅在禁用 javascript 时才解析。

更新

是时候原地打转然后尝试一切了:

清除缓存等等。尝试导航到 /favicon.ico在您的浏览器中以确保它被提供。

以隐身/隐私模式加载您的网站,或在多个浏览器上,或在不同的设备

去掉 rel="shortcut icon"线。它适用于 IE8 及以下版本,所以没人关心。

尝试使用普通的 png 图标。保存一个名为 favicon.png 的 PNG,然后使用
<link rel="icon" href="{{ site.baseurl }}/favicon.png" type="image/png" />

关于javascript - Jekyll 网站未设置图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47957730/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com