안녕하세요,
아래 스크립트는 location 플러그인에서 툴팁을 영구적으로 표시하고, 유형(이벤트, 장소 등)에 따라 색상으로 분류합니다. 범례(legend)와 필터를 작업 중입니다.
현재 상황은 스크립트가 작동은 하지만, 페이지를 새로고침한 후에만 작동합니다. URL을 통해 페이지에 처음 접속할 때는 작동하지 않습니다.
두 경우 모두 콘솔 오류에 차이가 없으며, 함수의 지연 시간을 늘려도 상황이 변하지 않습니다.
edit theme 메뉴에서 헤더에 JS를 추가할 때 이 문제를 경험하고 해결하신 분 계신가요?
결과에 대한 사진은 다음과 같습니다.
여기 보이는 오류들은 코드가 있든 없든 발생하므로, 이 코드와는 관련이 없습니다.
<script>
document.addEventListener('DOMContentLoaded', function() {
// CSS를 적용하여 alt 텍스트 스타일을 변경합니다
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `
/* alt 텍스트가 굵게, 밑줄이 있으며 조건부 색상을 가지도록 보장합니다 */
.leaflet-marker-pane img[alt] {
font-weight: bold !important; /* 텍스트를 굵게 만듭니다 */
text-decoration: underline !important; /* 텍스트에 밑줄을 긋습니다 */
white-space: nowrap; /* 텍스트가 새 줄로 넘어가지 않도록 방지합니다 */
}
`;
document.head.appendChild(style);
// 페이지가 로드되고 이미지가 렌더링될 시간을 줍니다
setTimeout(function() {
var images = document.querySelectorAll('.leaflet-marker-pane img');
images.forEach(function(img) {
var title = img.getAttribute('title');
if (title) {
title = title.length > 10 ? title.substring(0, 10) + '..' : title;
img.setAttribute('alt', title);
img.setAttribute('title', title);
if (title.includes('/')) {
img.style.color = 'white';
} else {
img.style.color = 'black';
}
}
img.setAttribute('src', '');
});
}, 1000); // 실행을 1초(1000ms) 지연시킵니다
});
</script>
내가 틀리지 않았다면, Discourse가 단일 페이지 애플리케이션(SPA)이므로 이 작업에는 플러그인 API의 api.onPageChange()를 사용해야 할 것입니다.
pfaffman
8월 13, 2025, 12:30오전
3
맞아요, 그리고 스크립트 사용은 곧 비추천(deprecated)될 예정입니다.
NateDhaliwal:
api.onPageChange()
알겠습니다. 이 문제를 해결하기 위한 방안이었을 수도 있는, 헤더에서 수정된 window.location.reload(true)를 사용하는 번거로움은 피하겠습니다.
헤더 필드가 보안상의 이유로 비추천(deprecated)된 것인가요? 사실, 그곳에서 바닐라 자바스크립트를 테스트하는 데 여전히 편리하거든요.
아니요, 스크립트 태그(헤더)에서 플러그인 API를 사용하는 것이 비추천(deprecated) 처리되었습니다.
JavaScript 헤더 사용이 곧 비추천(deprecated)된다고 하니 몇 가지 사항을 수정해야 할 것 같습니다. 아마 이 헤더 필드에 해당 예정 사항에 대한 안내를 포함할 수 있을 것입니다.
그 나름의 이유가 있겠지만, 헤더 내 스크립트는 유용한 경우가 많아 아쉬울 수 있습니다. 예를 들어, 특정 카테고리에서 JavaScript 함수가 특정 수치를 충족할 때 이벤트 등록을 닫는 것처럼 관리자가 빠르게 설정을 조정할 수 있기 때문입니다.
제이 대신 당신에게 답변드린 점 죄송합니다. 제이는 스크립트가 비추천(deprecated)될 것이라고 말하고 있는데, 저는 그가 웹 사이트 CMS에서처럼 빠른 수정에 매우 편리하게 사용될 수 있는 헤더 스크립트에 대해 이야기하고 있다고 짐작합니다.
사실 매번 지도 페이지에 진입할 때마다 해당 페이지만 새로고침하는 해결책을 찾았습니다.
헤더 스크립트가 비추천(deprecated)될 예정이라면, 이 내용을 여기에 다른 분들과 공유하는 것이 가치가 있을지 궁금합니다. 이 게시물에 있는 스크립트는 이벤트 제목의 내용에 따라 지도에서 색상 범주를 설정할 수 있게 해 주는데, 이는 API 기능을 통하지 않고도 빠르게 변경할 수 있어야 합니다.
<script> (function(){function e(){if(location.pathname.includes("/map")){if(!sessionStorage.getItem("map-refreshed")){sessionStorage.setItem("map-refreshed","true");requestAnimationFrame(()=>{setTimeout(()=>{location.reload(!0)},100)})}}}function t(){sessionStorage.removeItem("map-refreshed")}function n(e){const t=history[e];history[e]=function(){const n=t.apply(this,arguments);return window.dispatchEvent(new Event("locationchange")),n}}n("pushState"),n("replaceState"),addEventListener("popstate",()=>dispatchEvent(new Event("locationchange"))),addEventListener("locationchange",function(){location.pathname.includes("/map")?e():t()}),e();})(); </script>
제가 의도한 바를 오해하신 것 같습니다. <script type="text/discourse-plugin">나 <script type="text/x-handlebars">와 같은 헤더 스크립트 태그가 비권장(deprecated)된 것이지, 일반적인 <script> 태그가 비권장된 것이 아닙니다.
네, 설명해 주셔서 감사합니다. 자바스크립트를 사용할 수 있어서 다행이에요. 시간이 되시면 제가 남긴 코드를 확인해 보세요. Ember 환경에서도 여전히 유용할 수 있습니다. 이 코드는 페이지를 새로고침하여 JS가 적용되도록 합니다. 가장 깔끔한 방식은 아니지만, 맵 플러그인 페이지에서는 잘 작동합니다!
