페이지 게시

[denvergeeks]

Page Publishing의 대안 - 또 다른 방법은 CSS를 사용하여 불필요한 요소를 제거하되, 모든 기능(즉, 설치된 테마 컴포넌트의 JavaScript, CSS 스타일링 등)은 유지하면서 일반 토픽 게시물에서 이를 수행하는 것입니다.

컴포저의 태그를 사용하여 특정 토픽 게시물에 포맷팅을 선택적으로 적용할 수 있습니다.

예를 들어, 제 사이트에서는 Common 탭의 테마 CSS에 다음 CSS를 붙여넣음으로써 이를 구현합니다:

/********************** REMOVE THINGS FROM LAYOUT USING TAGS ***************/

.tag-no-header {
    .d-header {
        display: none !important;
    }
    #post_1 nav.post-controls .actions button.edit {
    top: 0px !important;
    }
    .topic-body h1 {
        padding-top: 0 !important;
    }
}

.tag-no-sidebars {
    aside.sidebar {
        display: none !important;
    }
}

.tag-no-category {
    .topic-category {
        display: none !important;
    }
}

.tag-no-timeline {
    .topic-navigation {
        display:none !important;
    }
    .container.posts {
        grid-template-columns: 100% !important;
    }
    .topic-body {
    width: 100% !important;
    }
}

.tag-no-post-links {
    .post-links-container {
        display:none !important;
    }
}

.tag-no-box-shadow {
    .topic-body {
        width: 100% !important;
        border-top: none !important;
        box-shadow: none !important;
        background-color: unset !important;
    }
}

.tag-no-topic-meta-data {
    .topic-meta-data {
        display:none !important;
    }
}

.tag-no-side-margins {
    .wrap {
        max-width: unset !important;
        padding: 0 10px !important;
    }
    .content-wrapper {
        display: block !important;
    }
    #main-outlet-wrapper {
        width: 100% !important;
    }
    .topic-body {
        width: 100% !important;
    }
}

.tag-no-footer-buttons {
    #topic-footer-buttons {
        display: none !important;
    }
}

그런 다음, 위의 코드와 일치하는 CSS 선택자를 가진 태그를 만들어 토픽 게시물에 선택적으로 적용할 수 있습니다…

no-header
no-sidebars
no-category
no-timeline
no-post-links
no-box-shadow
no-topic-meta-data
no-side-margins
no-footer-buttons

---

그러면 동일한 토픽 게시물의 두 가지 다른 버전이 됩니다…

전(태그 미적용):

후(모든 태그 적용) - 제 사이트의 다른 게시물에 iFrame으로 임베드할 수도 있습니다 :