로고 링크의 이동 대상 변경

제품 지원
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();
    
    // div id에서 활성 카테고리를 가져오기
    div = $("body[class*='category-']")[0];

    // category-로 시작하는 클래스에서 슬러그 추출
    var classes = $(div).attr('class');

    var slug = classes.match(/category\-.+/g)[0].replace("category-","").split(" ")[0];
    // href를 슬러그 URL로 설정
    document.location = "/c/" + slug + "/";
  })
});
</script>

카테고리 페이지나 토픽 페이지에서 로고를 클릭하면 카테고리 페이지로 이동합니다. 훌륭하죠!

그러나 로고와 헤더 하단 사이의 아주 작은 공간에서 클릭하면 카테고리 페이지가 아닌 홈 페이지로 이동합니다. 어떤 동작이 일어날지 구별하는 것은 거의 불가능합니다. 어디로 이동하든 Chrome 하단의 URL에 사이트 홈 페이지가 표시되고 카테고리 URL은 표시되지 않습니다.

(홈 페이지로 이동하는 링크를 추가하기 위해 Custom Header Links를 사용했습니다. 이것이 위의 동작과 무관하다고 생각합니다.)

그룹 멤버만 카테고리 단위를 볼 수 있기 때문에 사이트를 공유할 수 없습니다.

2

제 생각에는 #site-text-logo가 포함된 링크의 아주 작은 부분을 클릭하고 계신 것 같습니다.

구조는 div.title a #site-text-logo이며, a 태그 자체는 아닌 #site-text-logo 요소에서 클릭을 잡으시는 것 같습니다.

JS에서 .title a 링크에 대해 event.preventDefault();를 호출하시거나, CSS에서 .title a {pointer-events: none;}을 시도해 보실 수 있습니다.

3

정말 대단하세요. 정말 감사드립니다. postgres에서 중복 키 문제를 해결하는 건 도와줄 수 있지만, CSS는 가장 단순한 것만 의미가 있고, javascript 문법조차 겨우 이해하는 수준입니다.

하지만 잠깐.

전혀 관련 없는 이야기지만, 아내의 Kanban 사이트에서 사이트 로고를 클릭하면 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){를 하나 더 추가해야 하는 건가요?

시도해 본 방법은 아무런 차이가 없어 보였습니다.

이것은 좀 더 이해가 가서 이렇게 했습니다:

/* 로고 근처의 아주 작은 부분이 홈페이지로 링크되지 않도록 유지 */
.title a {pointer-events: none;}

이것은 무언가를 바꾸었습니다! 그리고 로고의 어느 부분도 더 이상 아무 동작도 하지 않는다는 것을 보니 제대로 작동했음을 알 수 있었습니다.