html - 如何将 html 和 css 定位到特定页面？

Question

我正在使用 Squarespace 作为我的网站构建器。我在我的博客提要上方添加了一个搜索图标 https://www.livingwithphotography.co.uk/learn/但是出于某种原因，搜索框也会出现在每篇博文中。这是我不想要的，相反我只是希望它显示在此页面上 https://www.livingwithphotography.co.uk/learn/ .

为了编码搜索图标，我在站点标题中添加了这段代码

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>

然后我添加了这个CSS代码

.myTitle {
width: 100px;
padding: 10px;
border: 1px solid grey;
margin: 40px; 
font-size: 22px;
text-align: center;
margin-left: auto;
margin-right: auto;
}

最后我将这段代码添加到 PAGE HEADER CODE INJECTION

<div class="myTitle"><a href="/search?q=&f_collectionId=5568d109e4b0cb923356090b"><img src="https://livingwithphotography.squarespace.com/s/Screen-Shot-2015-06-01-at-120646.png" alt="search icon" style="width:20px">  <a href="/search?q=&f_collectionId=5568d109e4b0cb923356090b">Search</a></div>
<script>
  $(document).ready(function() {
  $(".myTitle").prependTo("#content");
});
</script>

我希望有办法，谢谢你的帮助:)

Answer 1

这有点 hacky，但应该可以。将代码包装在您在此 if 中添加 div 的位置。

$(document).ready(function() {
    if(window.location.pathname == "/learn") {
        $(".myTitle").prependTo("#content");
    }
});