查看“︁Widget:VOCALOID Songbox Vocadb”︁的源代码

<noinclude>{{doc}}</noinclude><includeonly>
    <div class="songbox" x-data="songData<!--{$id|escape:"html"}-->">
            <svg class="hidden">
        <symbol id="icon-play" viewBox="0 0 24 24">
          <path
            d="M9 15.714V8.287q0-.368.242-.588t.566-.22q.106 0 .214.028q.109.027.215.083l5.842 3.733q.186.13.28.298q.093.167.093.379t-.093.379t-.28.298l-5.843 3.733q-.105.055-.214.083q-.108.028-.214.028q-.323 0-.566-.22T9 15.714m1-.364L15.289 12L10 8.65z"
          />
        </symbol>
      </svg>
      <svg class="hidden">
        <symbol id="icon-calendar" viewBox="0 0 24 24">
          <path
            d="M5.616 21q-.691 0-1.153-.462T4 19.385V6.615q0-.69.463-1.152T5.616 5h1.769V3.308q0-.233.153-.386t.385-.153t.386.153t.153.386V5h7.154V3.27q0-.214.143-.358t.357-.143t.356.143t.144.357V5h1.769q.69 0 1.153.463T20 6.616v12.769q0 .69-.462 1.153T18.384 21zm0-1h12.769q.23 0 .423-.192t.192-.424v-8.768H5v8.769q0 .23.192.423t.423.192M5 9.615h14v-3q0-.23-.192-.423T18.384 6H5.616q-.231 0-.424.192T5 6.616zm0 0V6zm7 4.539q-.31 0-.54-.23t-.23-.54t.23-.539t.54-.23t.54.23t.23.54t-.23.539t-.54.23m-4 0q-.31 0-.54-.23t-.23-.54t.23-.539t.54-.23t.54.23t.23.54t-.23.539t-.54.23m8 0q-.31 0-.54-.23t-.23-.54t.23-.539t.54-.23t.54.23t.23.54t-.23.539t-.54.23M12 18q-.31 0-.54-.23t-.23-.54t.23-.539t.54-.23t.54.23t.23.54t-.23.54T12 18m-4 0q-.31 0-.54-.23t-.23-.54t.23-.539t.54-.23t.54.23t.23.54t-.23.54T8 18m8 0q-.31 0-.54-.23t-.23-.54t.23-.539t.54-.23t.54.23t.23.54t-.23.54T16 18"
          />
        </symbol>
      </svg>
      <template x-if="song" x-data="{
        bgcolor: '<!--{$bgcolor|escape:"html"}-->',
        bgcolor1: '<!--{$bgcolor1|escape:"html"}-->',
        bgcolor2: '<!--{$bgcolor2|escape:"html"}-->',
        bgcolor3: '<!--{$bgcolor3|escape:"html"}-->',
        addNames: '<!--{$addNames|escape:"html"}-->',
      }">
        <div class="songbox_inner">
          <div x-if="song.imageHtml" class="songbox_cover" x-html="song.imageHtml"></div>
          <img
            x-show="!Boolean(song.imageHtml)"
            x-bind:src="song.thumb"
            alt="封面"
            width="280"
            referrerpolicy="no-referrer"
          />
          <div class="songbox_titles">
            <div class="songbox_main-title">
              <span lang="ja" x-text="song.name"></span>
            </div>
            <div class="songbox_additional-titles">
              <div x-html="addNames"></div>
            </div>
          </div>
          <div class="songbox_th" :style="bgcolor1 ? ('background-color:' + bgcolor1) : bgcolor ? ('background-color:' + bgcolor) : ''">演唱</div>
          <div class="songbox_td" x-text="song.vocalists"></div>
          <div class="songbox_th" :style="bgcolor2 ? ('background-color:' + bgcolor2) : bgcolor ? ('background-color:' + bgcolor) : ''">P主</div>
          <div class="songbox_td" x-text="song.producers"></div>
          <div class="songbox_th" :style="bgcolor3 ? ('background-color:' + bgcolor3) : bgcolor ? ('background-color:' + bgcolor) : ''">链接</div>
          <div class="songbox_videos">
            <template x-for="pv in song.pvs">
              <div
                class="songbox_video"
                x-bind:class="{
              'songbox_video-youtube': pv.service === 'Youtube',
              'songbox_video-bilibili': pv.service === 'Bilibili',
              'songbox_video-niconico': pv.service === 'NicoNicoDouga',
            }"
              >
                <a x-bind:href="pv.url" x-text="pv.service"></a>
                <div class="songbox_stats">
                  <div class="songbox_stat">
                    <svg width="24" height="24">
                      <use href="#icon-play"></use>
                    </svg>
                    <span x-text="pv.playCountString"></span>
                  </div>
                  <div class="songbox_stat">
                    <svg width="24" height="24">
                      <use href="#icon-calendar"></use>
                    </svg>
                    <span x-text="pv.publishDate.slice(0, 10)"></span>
                  </div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </template>
    </div>
<!--{if !isset($wgVocaloidSongboxVocadb) || !$wgVocaloidSongboxVocadb}-->
<!--{assign var="wgVocaloidSongboxVocadb" value=true scope="global"}-->
<style>
.songbox, .songbox [class*="songbox_"] {
	box-sizing: border-box;
}

.songbox {
	width: 100%;
	display: flex;
	flex-flow: column nowrap;
	align-items: center;

}

.songbox_inner {
  display: flex;
  flex-flow: column nowrap;
	justify-content: center;
	align-items: center;
  text-align: center;
  margin: 12px;
	width: 450px;
	max-width: 450px;
}

.songbox_cover p {
	margin-block-start: 0;
	margin-block-end: 0;
}

.songbox_titles {
	margin: 18px 0 12px;
	font-size: 13px;
	line-height: 19px;
	max-width: 900px;
	min-height: 28px; /* 防止空白标题 */
}

.songbox_main-title,
.songbox_titles.unknown::first-line {
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
}

.songbox_note {
	color: #667;
	background: #f5f5f7;
	border-radius: 6px;
	padding: 4px 12px;
	font-size: 12px;
	margin-bottom: 16px;
	line-height: 18px;
	min-width: 340px;
	max-width: 450px;
}

.songbox_th {
	width: 100%;
	max-width: 450px;
  padding: 0 12px;
	font-size: 12px;
	line-height: 20px;
	border: 2px solid;
	border-radius: 10px;
	font-weight: 700;
}

.songbox_td {
	font-size: 13px;
	line-height: 17px;
	min-height: 17px;
	margin: 4px 0;
}

.songbox_videos {
	margin-top: 4px;
	width: 100%;
  display: flex;
  flex-flow: row nowrap;

	justify-content: space-between;
}

.songbox_video {
	padding: 4px;
  width: 140px;
  border: 1px solid gray;
  border-radius: 20px;

  display: flex;
  flex-direction: column;
  overflow: hidden;
	text-align: left;
}

.songbox_stat {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;

}

@media (prefers-color-scheme: dark) {
	.songbox_stat use {
		fill: white;	
	}
}
/* 下面是动画 */
</style>
<script>
function startLoadingSongbox() {
  const script = document.createElement('script')
  script.src = "https://cdn.jsdelivr.net/npm/alpinejs@3.15.0/dist/cdn.min.js"
  script.defer = true
  document.body.appendChild(script)
};
</script>
<script src="https://cdn.jsdelivr.net/gh/SnowDream39/Vocawiki-Songbox@5d7f7ea/songbox.js"></script>
<!--{/if}-->
<script>
window.RLQ = window.RLQ || [];
window.RLQ.push(async () => {
  loadSongbox(<!--{$id|escape:"html"}-->, '<!--{$image|escape:"html"}-->');
  window.startLoadingSongbox();
});
</script>
</includeonly>