仅在主页中显示图像的 div 并从其他页面隐藏

Question

<div class="container">
    
                        @section HeroSection{
                            @foreach (var category in Model.AllCategory.Where(m => m.IsFeatured).FirstOrDefault().CategoryPictures.Select(m => m.Picture).Distinct())
                            {
                                <div class="hero__item set-bg" data-setbg="/FileStore/images/@category.Url">
                                    <div class="hero__text">
                                        <span>FRUIT FRESH</span>
                                        <h2>Vegetable <br />100% Organic</h2>
                                        <p>Free Pickup and Delivery Available</p>
                                        <a href="#" class="primary-btn">SHOP NOW</a>
                                    </div>
                                </div>
                            }
                           }
                        </div>
                </div>
            </div>

        }
</div>

我尝试在 _layout page.. 中将 //@section HeroSection// @Render 设置为 false，这样它只会出现在 home/index.. 而不会出现在其他页面中！

Answer 1

我可以想到2种方法。 第一个不太实用，它制作了 2 种不同的布局，一种没有 div，一种有 div。 您可以像这样在 razor 文件中更改主页的布局

@{Layout = "YourNewLayOut"}

我认为更好的另一种方法是使用 JavaScript。 您可以使用window.location.href来获取当前的 url 并检查它是否是 url 主页的目标可见 div 并隐藏

你的 function 应该是这样的：

function someFunctionName() {
  let div = document.querySelector("#yourDiv");
  if (window.location.href === "your home page url ") {
    div.style.display = "none";
  } else {
    div.style.display = "block or flex or what ever you're using";
  }
}

然后像这样在加载时调用这个 function

window.onload = function() {
someFunctionName();
};