정상적으로 표시되지 않는 웹사이트의 수동 원박스 생성

개발
1

Onebox 기능은 정말 마음에 들지만, 불행히도 모든 웹사이트가 Onebox에 데이터를 올바르게 공급하도록 설정되어 있지는 않습니다. 포맷이 통일되지 않으면 주제에 여러 링크를 추가했을 때 지저분해 보일 수 있습니다. 여기 CSS와 마크다운을 조금만 활용하여 이 문제를 해결하는 방법을 소개합니다.

여러 Onebox가 나란히 배치되어 있고 일부 랜덤한 사이트가 올바르게 로딩되지 않는 예시

2번과 3번 항목이 올바르게 로딩되지 않는 것을 확인하시나요? 특정 링크에 대해 수동으로 Onebox를 생성하여 이 문제를 해결할 수 있습니다.

image
image790×778 44.7 KB

…이렇게 보입니다:

image
image713×168 6.5 KB

수동 Onebox 생성 방법

주의 저는 숙련된 프로그래머가 아닙니다. 이 코드는 작동하지만 최적화되어 있다고는 확신할 수 없습니다. 코드를 개선하고 싶으신 분이 있다면 아래에 댓글을 달아주세요. 여기에서 해당 개선된 코드에 링크를 걸어두겠습니다.

1. Discourse 테마에 다음 사용자 정의 CSS 코드를 추가하세요.

/*=========================================================================================
OneBox - 데이터를 올바르게 로딩하지 않는 웹사이트에 대해 수동으로 onebox 생성.
=========================================================================================*/
[data-wrap="onebox-wrapper"] {
    border: 5px solid var(--primary-low);
    margin: 1em 0;
    padding: 1em;
    font-size: var(--font-0);
    background: var(--secondary);
}

[data-wrap="onebox-header"] {
    align-items: center;
    display: flex;
    margin-bottom: 1em;
}


[data-wrap="onebox-header"] a[href] {
    color: var(--primary-med-or-secondary-med);
    text-decoration: none;
}

[data-wrap="onebox-header"] p {
    margin-top: 0em;
    margin-bottom: 0em;
}


[data-wrap="onebox-body"] {
    clear: both;
}

[data-wrap="onebox-body"] h3 {
     margin-top: 0em;
    margin-bottom: 0em;
}

[data-wrap="onebox-body"] p {
     margin-top: 0em;
    margin-bottom: 0em;
}

[data-wrap="onebox-image"] {
    max-height: 170px;
    --magic-ratio: calc(var(--aspect-ratio) + 0.15);
    width: calc(128px*var(--magic-ratio));
    max-width: 20%;
    float: left;
    margin-right: 1em;
    height: auto;
    padding-bottom: 0em;
}

2. 게시글에 다음 마크다운을 사용하세요.

Onebox를 생성하려는 웹사이트에 따라 링크와 텍스트를 교체하세요.

[wrap="onebox-wrapper"]
[wrap="onebox-header"] [헤더 텍스트](https://example.com) [/wrap]
[wrap="onebox-body"]

[wrap="onebox-image"]![image|75x75](upload://your_uploaded_url.png)[/wrap]

### [제목 텍스트](https://example.com)

본문 설명

[/wrap]
[/wrap]

3. 이미지 업로드 (선택 사항)

  1. 드래그 앤 드롭 또는 업로드를 통해 주제에 이미지를 추가합니다.
  2. 경로를 복사합니다. (예: upload://ucs5Tw4ovoDhIxUbfCdQJ2W7wKi.png )
  3. 기존 경로 upload://your_uploaded_url.png를 강조 표시한 후, 위에서 복사한 경로를 붙여넣습니다.

결과

image
image1057×531 30.4 KB

보너스 개선 사항

모든 웹사이트가 이미지를 가지고 있지는 않습니다. 따라서 일관성을 유지하기 위해 모든 이미지를 제거하거나, 이미지가 없는 링크에 대해 플레이스홀더를 사용하는 두 가지 방법 중 하나를 선택해야 합니다. 저는 플레이스홀더 옵션을 선택했습니다. 주제에 이미지를 드래그 앤 드롭하여 discourse에 업로드했습니다. 그런 다음 그 링크를 onebox-image 래프에서 사용했습니다. 마지막으로 전체 마크다운을 복사하여 향후 링크를 위한 템플릿으로 사용하고 있습니다. 따라서 플레이스홀더 이미지는 항상 존재합니다(매번 다시 업로드할 필요가 없음).

누군가 저처럼 이 정보가 유용하길 바랍니다 :slight_smile:

7개의 좋아요