셀렉터가 없는 이 span 객체의 텍스트를 변경하는 방법?

개발
1

image
image1462×208 12.3 KB

이 객체의 HTML은 다음과 같습니다:

<span>Topic</span>

CSS를 사용하여 이 텍스트를 다른 것으로, 예를 들어 "Blogs"로 변경하는 방법이 궁금합니다.

수정: 카테고리별로 이렇게 하고 싶습니다.

2

이것은 /admin/customize/site_texts?q=Topics를 통해 사용자 지정할 수 있습니다.

정확히 어떤 것인지 확실하지는 않네요…

JS 콘솔에서 I18n.enableVerboseLocalizationSession()을 실행하고 페이지를 새로고침하면, 콘솔에 출력된 내용과 문자열의 번호를 대조하여 확인할 수 있습니다:

image
image1088×650 85.4 KB

3

하지만 이건 모든 카테고리에 적용되는 거죠? 저는 카테고리별로 하고 싶어요.

4

안녕하세요 :wave:

이것은 CSS로 가능합니다.

body.category-name {
  .topic-list-header {
    .default.topic-list-data {
      span {
        visibility: hidden;
        &:before {
          content: "Blogs";
          visibility: visible;
        }
      }
    }
  }
}
5

좋아요 10개를 드리고 싶어요! 정말 감사합니다, 돈!

6

여러 카테고리에 대해 이 작업을 수행하고 SCSS 라인이 많이 쌓이는 것을 피하려면 SCSS 루프를 사용할 수 있습니다. 두 개의 SCSS 변수만 편집하면 되므로 코드를 읽기 쉽고 유지보수하기 쉽게 만들어 줍니다.

7

이 루프 아이디어를 주제로 플러그인으로 만들어볼게요. 좋은 아이디어 감사합니다!