查看“︁沙盒”︁的源代码

<noinclude>
{{图书百科
|描述=综合图书百科模板，包含详细信息和评分功能
|作者=示例作者
|版本=3.0
|来源=自定义模板
}}
</noinclude>

<includeonly>
<div class="book-infobox" style="border: 1px solid #{{#if:{{{边框颜色|}}}|{{{边框颜色|ddd}}}|ddd}}; background-color: #{{#if:{{{背景颜色|}}}|{{{背景颜色|f9f9f9}}}|f9f9f9}}; padding: 1em; margin: 0.5em 0;">

<!-- 图书信息部分 -->
<div class="book-info" style="display: flex; flex-wrap: wrap;">
  <!-- 封面和基本信息 -->
  <div style="flex: 0 0 200px; margin-right: 1em;">
    {{#if:{{{封面|}}}|
    <div style="text-align: center;">
      [[文件:{{{封面}}}|200px|center|{{{标题|{{PAGENAME}}}}}封面{{#if:{{{封面说明|}}}| - {{{封面说明|}}}}}]]
    </div>
    }}
    
    <div style="margin-top: 1em; text-align: center;">
      {{#if:{{{豆瓣评分|}}}|
      <div style="font-size: 120%; font-weight: bold;">豆瓣评分: {{{豆瓣评分}}}/10</div>
      <div style="height: 20px; background: #f5f5f5; border: 1px solid #ddd; margin: 0.3em 0;">
        <div style="width: {{#expr:{{{豆瓣评分}}}*10}}%; height: 100%; background: #{{#if:{{{评分颜色|}}}|{{{评分颜色|ff9900}}}|ff9900}};"></div>
      </div>
      }}
      
      {{#if:{{{允许评分|}}}|
      <div style="margin-top: 1em;">
        <span style="font-size: 90%;">您的评分:</span><br/>
        <span class="star-rating">
          {{#for:1|1|5|1|
            <a href="{{#if:{{{评分回调|}}}|{{{评分回调}}}/{{PAGENAME}}/{{{1}}}|#}}" 
               style="text-decoration: none; color: {{#if:{{{评分|}}}|{{#ifexpr:{{{评分}}}>={{{1}}}|gold|#ccc}}|#ccc}};">★</a>
          }}
        </span>
        <input type="hidden" id="book-rating" value="{{{评分|}}}" />
      </div>
      }}
    </div>
  </div>
  
  <!-- 详细信息表格 -->
  <div style="flex: 1;">
    <h2 style="margin-top: 0; color: #{{#if:{{{标题颜色|}}}|{{{标题颜色|222}}}|222}};">{{{标题|{{PAGENAME}}}}}{{#if:{{{副标题|}}}|: {{{副标题|}}}|}}</h2>
    
    <table style="width: 100%;">
      {{#if:{{{作者|}}}|<tr><th style="width: 80px;">作者</th><td>{{{作者}}}</td></tr>}}
      {{#if:{{{译者|}}}|<tr><th>译者</th><td>{{{译者}}}</td></tr>}}
      {{#if:{{{出版社|}}}|<tr><th>出版社</th><td>{{{出版社}}}</td></tr>}}
      {{#if:{{{出版日期|}}}|<tr><th>出版日期</th><td>{{{出版日期}}}</td></tr>}}
      {{#if:{{{页数|}}}|<tr><th>页数</th><td>{{{页数}}}</td></tr>}}
      {{#if:{{{ISBN|}}}|<tr><th>ISBN</th><td>{{{ISBN}}}</td></tr>}}
      {{#if:{{{定价|}}}|<tr><th>定价</th><td>{{{定价}}}</td></tr>}}
    </table>
  </div>
</div>

<!-- 内容简介 -->
{{#if:{{{内容简介|}}}|
<div style="margin-top: 1.5em; padding-top: 1em; border-top: 1px dashed #ccc;">
  <h3>内容简介</h3>
  <div>{{{内容简介}}}</div>
</div>
}}

<!-- 作者简介 -->
{{#if:{{{作者简介|}}}|
<div style="margin-top: 1.5em; padding-top: 1em; border-top: 1px dashed #ccc;">
  <h3>作者简介</h3>
  <div>{{{作者简介}}}</div>
</div>
}}

<!-- 图书目录 -->
{{#if:{{{图书目录|}}}|
<div style="margin-top: 1.5em; padding-top: 1em; border-top: 1px dashed #ccc;">
  <h3>图书目录</h3>
  <div>{{{图书目录}}}</div>
</div>
}}

<!-- 精彩文摘 -->
{{#if:{{{精彩文摘|}}}|
<div style="margin-top: 1.5em; padding-top: 1em; border-top: 1px dashed #ccc;">
  <h3>精彩文摘</h3>
  <blockquote style="font-style: italic; margin-left: 1em; padding-left: 1em; border-left: 3px solid #ccc;">
    {{{精彩文摘}}}
  </blockquote>
</div>
}}

<!-- 评分系统JavaScript (需要启用$wgAllowExternalImages和$wgRawHtml) -->
{{#if:{{{允许评分|}}}|
<script>
document.addEventListener('DOMContentLoaded', function() {
  const stars = document.querySelectorAll('.star-rating a');
  const ratingInput = document.getElementById('book-rating');
  
  stars.forEach(star => {
    star.addEventListener('click', function(e) {
      e.preventDefault();
      const rating = this.textContent === '★' ? this.textContent.charCodeAt(0) - 9722 : parseInt(this.textContent);
      ratingInput.value = rating;
      
      // 更新星星显示
      stars.forEach((s, i) => {
        s.style.color = i < rating ? 'gold' : '#ccc';
      });
      
      // 这里可以添加AJAX调用以保存评分
      // 例如: fetch('{{{评分回调}}}', { method: 'POST', body: JSON.stringify({rating: rating}) });
    });
  });
});
</script>
}}
</div>
</includeonly>