특정 사용자 프로필에 배경 영상을 추가할 수 있나요?

개발
6

자, 결론부터 말씀드리면, 이 접근 방식은 대부분 훌륭하게 작동하며 설명도 정말 좋습니다. 최선을 다해 도와주셔서 정말 감사합니다.

사용자별로 작업하는 것은 간단합니다. 다음과 같이 특정 사용자 이름을 확인하면 됩니다:

      const isUser1 = args.model.username == "User1"
      component.setProperties({isUser1})

하지만 CSS에서 문제가 발생합니다. 이 특정 사용자들 만을 위해 사용자 페이지의 외관을 일부 변경하고 싶습니다.

현재까지는 이전과 동일한 코드를 사용하여 이를 구현하고 있습니다:

<script type="text/discourse-plugin" version="0.8">
    api.onPageChange(() =>{
        window.onload = determineUser();
    });
    
    async function determineUser() {
        await sleep(50);
        var pageURL = document.querySelector("meta[property='og:url']").getAttribute("content");
        var isUserPage = pageURL.includes("https://www.siteurl.com/u/");
        var isUser1 = pageURL.includes("u/User1/");
        document.body.className = document.body.className.replace(" user-page-animated","");

        
        if(isUserPage)
        {
            if(isUser1)
            {
                document.body.className += ' user-page-animated';
            }
        }
    }
    
    function sleep(ms)
    {
        return new Promise(resolve => setTimeout(resolve, ms));
    }
</script>

이 방식은 각新用户마다 “User1” 코드를 단순히 복사해서 붙여넣을 수 있게 해주지만, 페이지 로드 후 50ms의 지연을 기다렸다가 실행되어야 하며, 이는 최종 사용자에게 눈에 띕니다(그리고 이 지연을 제거하면 어떤 이유로든 작동하지 않습니다).

제공해 주신 코드에 이 body 클래스 추가 로직을 통합할 수 있는 방법이 있을까요? 이렇게 하면 비디오가 있는 페이지와 없는 페이지를 다르게 스타일링하는 데 활용할 수 있을 것 같습니다.