更改徽标链接的目标地址

支持
1

我有一个网站，其中多个群组拥有各自的分类，现在希望这些分类能使用群组所有者的品牌标识。

每个分类的代码如下：

.category-org .d-header {
    color: white !important;
    background-color: white !important;
    background-image: none !important;
    background:white !important;
}

.category-org #site-text-logo {
  content: url("/uploads/default/original/1X/a9d7d4f215f2013907002ffe13456d3f90a7f108.png") !important;
  display: inline-block;
  height: 50px;
  font-size: 0;
  margin-top: 5px;
  margin-bottom: 0px;
}

问题在于，点击该标识时会跳转到网站主页，而不是对应的分类页面。这个问题（大部分情况下）可以通过以下脚本解决：

<script type="text/javascript">
$(document).ready(function() {
  $(".title #site-text-logo").click(function(event){

    // 阻止跳转到基础 URL
    event.preventDefault();
    
    // 从 body 的 class 中获取当前激活的分类
    div = $("body[class*='category-']")[0];

    // 从以 category- 开头的 class 中提取 slug
    var classes = $(div).attr('class');

    var slug = classes.match(/category\-.+/g)[0].replace("category-","").split(" ")[0];
    // 将跳转地址设置为对应的分类 URL
    document.location = "/c/" + slug + "/";
  })
});
</script>

现在，无论是在分类页还是主题页点击标识，都会跳转到对应的分类页面。太棒了！

但是，如果点击标识与页眉底部之间那小块空白区域，就会跳转到主页，而不是分类页。几乎无法区分点击后会触发哪种行为。即使在 Chrome 中将鼠标悬停在链接上，显示的始终是网站主页的 URL，而不是分类页的 URL，无论实际跳转目标是哪里。

（我使用了 Custom Header Links 来添加一个指向主页的链接。我认为这与上述行为无关。）

此外，由于每个单位的分类仅对相应群组成员可见，我无法分享该网站。

2

我_认为_发生的情况是：你点击了包含 #site-text-logo 的链接的一小部分？

结构是：div.title a #site-text-logo，你捕获的是 #site-text-logo 的点击事件，而不是包裹它的 a 标签。

你可以在 JS 中对 .title a 链接调用 event.preventDefault();，或者尝试在 CSS 中设置 .title a {pointer-events: none;}？

3

你太棒了，我真心感谢你的帮助。让我来解决 PostgreSQL 中的重复键问题没问题，但对我来说，只有最简单的 CSS 才讲得通，而且我对 JavaScript 的语法也只是略知皮毛。

但等等。

完全无关的是，我刚在我的妻子的看板网站上做了一个改动：点击网站 Logo 会跳转到 TODO 分类。我制作了一个主题组件，允许将主页设置为任意 URL。我是这样实现的：

<script type="text/discourse-plugin" version="0.8">
    const { setDefaultHomepage } = require('discourse/lib/utilities');
    if (settings.home_url_override) {
      setDefaultHomepage(settings.home_url_override);
    }
</script>

也许我应该直接采用类似的方法？不过我不确定如何知道哪些分类需要重新映射其主页。或许可以添加一个站点设置，包含一个分类 ID 数组？我想我可以通过搜索来了解如何获取当前分类，并检查该 ID 是否存在于站点设置的数组中。

编辑：嗯，但我不知道如何在 <script type="text/javascript"> 中判断当前页面的分类，以便有选择地更改 setDefaultHomepage。

这样看起来更容易吗？

但回到最初的解决方案

我觉得这听起来很合理，但这并不代表什么。

我认为问题是：<h1> 标签能正确工作，但 <a> 标签却跳转到了网站主页？

我只是个原始人，不太明白那是什么意思。JavaScript 中已经有一些类似的内容。我是应该再写一个 $(document).ready(function() { 这样的代码块，还是直接在现有的代码中添加另一个 $(".title #site-text-logo").click(function(event){？

我之前尝试的方法似乎没有任何效果。

这个我稍微理解得更好一些，于是做了如下修改：

/* 防止 Logo 附近的小区域跳转到主页 */
.title a {pointer-events: none;}

这个改动确实起了作用！而且我发现它生效了，因为现在 Logo 的任何部分都不会触发任何操作。