books.html

  {{ define "main" }}
  <div class="post">
    <h1 class="post-title">{{.Title}}</h1>
  <style>
    .gFnzgG,.gFnzgG *{box-sizing:border-box}
    .fIuTG{display:flex;flex-wrap:wrap;margin:0 -2%;background:0 0;line-height:100%}
    .dfdORB{width:20%;margin:0 2% 30px;padding:0;font-size:15px}
    .dfdORB a{text-decoration:none}
    .kMthTr{margin-top:12px;line-height:1.3;overflow:hidden;font-size:13px}
    .eysHZq{display:flex;-webkit-box-align:center;align-items:center;margin-top:5px;min-height:16px;line-height:1}
    .HPRth{position:relative;min-height:87px;overflow:hidden;color:transparent}
    .HPRth:hover{box-shadow:rgb(48 55 66 / 30%) 0 1rem 2.1rem}
    .jcTaHb{display:flex;-webkit-box-align:center;align-items:center}
    .lhtmRw{margin-right:1px;width:12px;height:12px;color:#fccd59}
    .gaztka{margin-right:1px;width:12px;height:12px;color:#eee}
    .iibjPt{margin-left:5px;color:#555;font-size:14px}
    .jvCTkj{margin-bottom:10px}
    .kEoOHR{display:inline-block;margin-right:15px;text-decoration:none;color:#157efb}
    .dvtjjf{display:inline-block;color:var(--primary);text-decoration:none;padding:0 5px}
    .dvtjjf.active{background:rgba(85,85,85,.1)}
    .hide{display:none}
    .sort-by{text-align:right;margin-top:-15px}
    .sort-by-item{margin-left:10px;padding:0 5px;line-height:20px}
    .sort-by-item.active{background:rgba(85,85,85,.1)}
    .sort-by-item svg{margin-right:5px}
    .sc-hKFxyN img{max-width:100%!important;height:auto!important;display:block!important;border-radius: 4px;vertical-align:middle!important}
    @media(min-width:1024px){
      .lg\:col-span-6{grid-column:span 6/span 6!important}
      .lg\:col-start-2{grid-column-start:2!important}
    }
    @media (max-width:550px){
      .jcTaHb,.sc-bdnxRM{display:none}
    }
  </style>
<!-- 一个排版用的空行 -->
  <div>
    <br>
  </div>
<!-- 一个排版用的空行END -->
    <script type="text/javascript">
      function search(e) {
        document.querySelectorAll('.dfdORB').forEach(item => item.classList.add('hide'));
        document.querySelector(`.dvtjjf.active[data-search="${e.target.dataset.search}"]`)?.classList.remove('active');
        if(e.target.dataset.value) {
          e.target.classList.add('active');
        }
        const searchItems = document.querySelectorAll('.dvtjjf.active');
        const attributes = Array.from(searchItems, searchItem => {
          const property = `data-${searchItem.dataset.search}`;
          const logic = searchItem.dataset.method === 'contain' ? '*' : '^';
          const value = searchItem.dataset.method === 'contain' ? `${searchItem.dataset.value}` : searchItem.dataset.value;
          return `[${property}${logic}='${value}']`;
        });
        const selector = `.dfdORB${attributes.join('')}`;
        document.querySelectorAll(selector).forEach(item => item.classList.remove('hide'));
      }
      window.addEventListener('click', function(e) {
        if(e.target.classList.contains('sc-gtsrHT')) {
          e.preventDefault();
          search(e);
        }
      });
      function sort(e) {
        const sortBy = e.target.dataset.order;
        const style = document.createElement('style');
        style.classList.add('sort-order-style');
        document.querySelector('style.sort-order-style')?.remove();
        document.querySelector('.sort-by-item.active')?.classList.remove('active');
        e.target.classList.add('active');
        if(sortBy === 'rating') {
          const items = Array.from(document.querySelectorAll('.dfdORB'));
          items.sort((itemA, itemB) => {
            const ratingA = parseFloat(itemA.dataset.rating) || 0;
            const ratingB = parseFloat(itemB.dataset.rating) || 0;
            if(ratingA === ratingB) {
              return 0;
            }
            return ratingA > ratingB ? -1 : 1;
          });
          const stylesheet = items.map((item, idx) => `.dfdORB[data-rating="${item.dataset.rating}"] { order: ${idx}; }`).join('\r\n');
          style.innerHTML = stylesheet;
          document.body.appendChild(style);
        }
      }
      window.addEventListener('click', function(e) {
        if(e.target.classList.contains('sort-by-item')) {
          e.preventDefault();
          sort(e);
        }
      });
    </script>
  <div class="lg:col-start-2 lg:col-span-6">
    {{$items := getCSV "," "data/neodb/book.csv" }}
    <div class="sc-ksluID gFnzgG">
      <div class="sc-bdnxRM">
        <a href="javascript:void 0;" class="sc-gtsrHT kEoOHR" data-search="year" data-method="equal" data-value="">全部</a>
        {{range $year := (seq now.Year -1 2018)}}
        <a href="javascript:void 0;" class="sc-gtsrHT dvtjjf" data-search="year" data-method="equal" data-value="{{$year}}">{{$year}}</a>
        {{end}}
      </div>
<!-- 一个排版用的空行 -->
  <div>
    <br>
  </div>
<!-- 一个排版用的空行END -->
      <div class="sc-dIsUp fIuTG">
        {{range $idx,$item := $items}}
        {{if ne $idx 0}}
          {{ $coverSrc := index $item 2 }}
        <div 
          class="sc-gKAaRy dfdORB" 
          data-year="{{index $item 6}}"
        >
            <div class="sc-hKFxyN HPRth">
              <div class="lazyload-wrapper">
                <a rel="link" href="{{ index $item 3 }}" target="_blank">
                <img class="avatar" src="{{ $coverSrc }}" referrer-policy="no-referrer" decoding="async" loading="lazy" title="{{ index $item 1 }}" width="150" height="220">
                </a>
              </div>
            </div>
            <div class="sc-iCoGMd kMthTr"><a rel="link" href="{{ index $item 3 }}" target="_blank">{{ index $item 1 }}</a></div>
        </div>
        {{end}}
        {{end}}
      </div>
    </div>
  </div>
  
  </div>
  {{ end }}
  
  {{ define "footer" }}
  <script type="text/javascript" src="/theme-main-1.js"></script>
  {{ end }}