Confluence 샘플 플러그인을 조금만 바꿔볼게요.

저번의 계속.지난번에 한 일은 다음과 같다.

샘플 플러그인의 출처, 튜토리얼 소개

플러그인의 동작 확인

일본어 리소스 파일 추가

IDE 디버깅

이번에 할 일

계속해서 샘플 플러그인을 약간 바꾸어 보십시오.
(스크래치로 쓰면 안 돼...그리고 자바를 포함한 프로그램이 밝지 않아서 조금씩 바꿀 수 밖에 없어요. 용서해 주세요.)
할 일:

API 약간 조정

페이지에 첨부 파일 수 추가

모양 조정

아이콘 글꼴로 아이콘 이미지 바꾸기

표시된 정보 목록에도 아이콘 글꼴을 적용해 보기

API 조정 시도

샘플 플러그인의 조작은 다음과 같다.

Confluence의 페이지 상단(제목 영역)에 링크 추가

atlassian-plugin.xml로 링크 정의 및 추가

위 링크를 클릭하면 통계 정보를 표시하는 대화 상자가 나타납니다

.

REST API를 호출합니다. 이 REST API는 수량, 주석 수량 및 히스토리 수를 반환합니다.

Ajax에서 호출

banner-stats.js에 기재

REST API를 통한 드로잉 결과

REST API는 BannerStars Resource입니다.자바를 수정하는 것 같아서요.
첨부 파일AttachmentManager을 사용하면 좋으니attachment Manager.cou u t L a testVersionsOfAttachments(page)를 추가합니다.
"attachments"라는 이름으로 REST API에서 결과를 되돌려받았고, soy template 측도 조정했기 때문이다.

<li><a href="{contextPath()}/pages/viewpreviousversions.action?pageId={$pageId}">{getText('banner.stats.versions', $versions)}</a></li>

<!-- 追加 -->
<li><a href="{contextPath()}/pages/viewpageattachments.action?pageId={$pageId}">{getText('banner.stats.attachments', $attachments)}</a></li>

atlas-run이 시작된 후 플러그인의 원본 파일이 변경되면 플러그인 구축을 다시 불러옵니다.
메시지 자원 파일을 조정한 후 첨부 파일의 수량과 링크를 추가했습니다.

겉모양을 좀 조정해 볼게요.

그러면 샘플 플러그인은 링크의 왼쪽에 그림을 배치합니다.
이번에 완전 자체 플러그인이 아니기 때문에 위화감이 생기지 않도록 Atlassian의 아이콘 글꼴로 변경하려고 합니다...
따라서 조정을 실시한다.먼저 섹션을 삭제합니다.

<web-item key="banner-stats" name="Banner Stats" section="page.metadata.banner" weight="80">
-  <icon height="16" width="16">
-    <link>/download/resources/${project.groupId}.${project.artifactId}:banner-stats-resources/images/pluginIcon.png</link>
-    </icon>
  <label key="banner.stats.label"/>
  <tooltip key="banner.stats.label"/>
  <link linkId="banner-stats" absolute="true"/>
  <styleClass>aui-button aui-button-subtle</styleClass>
</web-item>

사용할 아이콘 글꼴은 여기를 참고하십시오.( Atlassian Design Product - Iconography )
나는'aui-iconfont-view-card'를 사용하기로 결정했다.
아이콘 글꼴의 위치를 그대로 유지할 수 없습니다. 플러그인의 css를 수정하고 있습니다.

/* id=banner-stats なので、リンクの前に背景画像として差し込み */
#page-metadata-banner .banner #banner-stats:before {
    font-family: "Atlassian Icons";
    font-weight: normal;
    content: "\f1b0";  /* view-cardに対応するアイコン */
     ---- [ 中略 ] ---

Soy Template 수정

그런 다음 결과 표시 대화 상자 목록의 모양을 수정합니다.
리스트 앞의 검은 점을 없애고 좋아하거나 평론하는 아이콘 글씨체를 앞으로 가져갔으면 합니다.
먼저 Soy Template를 수정하고 태그를 이렇게 삽입하면 CSS를 조정하지 않아도 목록 앞에 아이콘 글꼴을 추가할 수 있습니다.

<li>
  <a href="#likes-and-labels-container">
    <!-- spanタグで差し込み -->
    <span class="aui-icon aui-icon-small aui-iconfont-like"></span>
    <span class="link-text">{getText('banner.stats.likes', $likes)}
    </span>
  </a>
</li>

CSS 조정

아이콘 글꼴이 삽입되어 목록의 검은 점이 존재하지 않고 위치를 미세하게 조정합니다.

/* Use icon-font in a dialog */
#page-metadata-banner .banner #banner-stats > span {
    padding-left: 21px;
}

/* リストのスタイルを調整 */
#banner-stats-content > ul > li {
    list-style: none;
}

/* アイコンフォントのあとのテキストが近すぎるので調整 */
#banner-stats-content > ul > li span.link-text{
  padding-left: 6px;
}

결실

CSS는 다음과 같이 조정되었습니다.스케줄러: 왠지 좀 그런거 같애?

이번 총결산

그래서 소스를 살짝 고친 곳까지 완성...
샘플에도 REST API가 포함되어 있는데 Confluence 표준의 REST API를 이용하면 xml, CSS, 자바스크립트, Soy Template의 조정만으로도 무엇을 할 수 있다.
다음 목표는 사용자 정의 공간에 대응하는 내용을 플러그인으로 바꾸는 것이다.
계속 조정된 원본 코드는 포크로 아래에 놓으세요.

https://bitbucket.org/akiko_pusu/confluence-banner-tutorial