{{ define "main" }}
    <style>
    #external-link-rank {
        padding: 0;
        margin: 0;
        max-height: 700px;
        overflow-y: auto;
        box-sizing: border-box;
    }

    .rank-item {
        list-style: none;
        width: 100%;
        margin: 0.5rem 0;
        box-sizing: border-box;
        padding: 0.1rem 0.5rem;
        position: relative;
    }
    .rank-item-text {
        margin-bottom: 0.2rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .rank-item-link {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
    }
    .rank-item-link img {
        width: 1rem;
        height: 1rem;
    }
    .rank-item-count {
        color: var(--secondary-text-color);
    }
    .rank-item-bar {
        background-color: rgba(103,173,91,0.35);
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
    }

    .site-stats-table {
      width: 100%;
      max-width: 700px;
      border-collapse: collapse;
      margin-bottom: 1.5rem;
    }
    .site-stats-table td {
      padding: 0.5rem;
      text-align: left;
    }
    .site-stats-table td:nth-child(2n) {
      text-align: right;
    }
    .number-pill {
        text-align: center;
        display: inline-block;
        line-height: 1.75rem;
        box-sizing: border-box;
        border-radius: 5px;
        padding: 0 0.5rem;
        background-color: var(--block-background-color);
        font-size: 1rem;
    }
    </style>

    <article>
        {{ partial "header.html" . }}
        {{ partial "components/postnav.html" . }}

        <div class="markdown-content" style="line-height: 2">
            {{ .Content }}
        </div>

        <section>
            <h2>站点统计</h2>
            <table class="site-stats-table">
              <tbody>
                <tr>
                    <td>页面总数</td>
                    <td><span class="number-pill">{{ len .Site.RegularPages }}</span></td>
                    <td>总字数</td>
                    <td>
                        <span class="number-pill">
                        {{- $words := 0 -}}
                        {{- range .Site.RegularPages -}}
                            {{- $words = add $words .WordCount -}}
                        {{- end -}}
                        {{ $words }}
                        </span>
                    </td>
                </tr>
                <tr>
                  <td>标签总数</td>
                  <td><span class="number-pill">{{ len .Site.Taxonomies.tags }}</span></td>
                  <td>专栏数量</td>
                  <td><span class="number-pill">{{ len .Site.Taxonomies.categories }}</span></td>
                </tr>
                <tr>
                  <td>卡片数量</td>
                  <td><span class="number-pill">{{ len (where .Site.RegularPages "Section" "cards") }}</span></td>
                  <td>小说数量</td>
                  <td><span class="number-pill">{{ len (where .Site.RegularPages "Section" "fictions") }}</span></td>
                </tr>
                <tr>
                  <td>书评数量</td>
                  <td><span class="number-pill">{{ len (where .Site.RegularPages "Section" "library") }}</span></td>
                  <td>精选文章数量</td>
                  <td><span class="number-pill">{{ len (where .Site.RegularPages ".Params.featured" true) }}</span></td>
                </tr>
              </tbody>
            </table>
        </section>

        <hr>

        <section>
            <h2>内部链接图谱</h2>
            <p>站内各个页面之间通过超链接建立起来的联系，你可以通过视觉化的双向链接逛逛我的博客。图谱可以缩放和拖拽，你也可以<a href="/graph" style="text-decoration: underline;">点击这里</a>全屏浏览。</p>
            <div class="outbox small">
                <iframe src="https://geedea.pro/graph"
                    style="width:100%;height: 30rem;border-radius:5px;border:none"></iframe>
            </div>
        </section>

        <hr>

        <section>
            <h2>外部链接排行</h2>
            <p>我在页面中嵌入的外部链接主要来自以下域名，引用次数少于 3 的已被排除。</p>

            {{/* Find the maximum link count */}}
            {{ $max := 0 }}
            {{ range .Site.Data.externallinks }}
                {{ if gt (index . 1) $max }}
                    {{ $max = index . 1 }}
                {{ end }}
            {{ end }}

            <ol id="external-link-rank">
            {{ range .Site.Data.externallinks }}
                {{ $label := index . 0 }}
                {{ $count := index . 1 }}
                {{ if gt $count 2 }}
                    {{ $percent := div (mul $count 100) $max }}
                    <li class="rank-item">
                        <div class="rank-item-text">
                            <a class="rank-item-link" href="https://{{ $label }}/" target="_blank">
                                <img src="https://favicone.com/{{ $label }}?s=50" />
                                {{ $label }}
                            </a>
                            <span class="rank-item-count font-mono">{{ $count }}</span>
                        </div>
                        <div class="rank-item-bar" style="width:{{ $percent }}%"></div>
                    </li>
                {{ end }}
            {{ end }}
            </ol>
        </section>
    </article>
    {{ partial "footer.html" . }}
{{ end }}