post.ejs

<%- include("/document/head.ejs") %>
  <div class="max-w-3xl px-4 mx-auto sm:px-6 xl:max-w-5xl xl:px-0">
    <BackTop />
    <article>
      <div class="xl:divide-y xl:divide-gray-200 xl:dark:divide-gray-700">
        <header class="pt-6 xl:pb-6">
          <div class="space-y-1 text-center">
            <dl class="space-y-10">
              <div>
                <dt class="sr-only">Published on</dt>
                <dd class="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
                  <time>
                    <%= page.created.split('T')[0] %>
                  </time>
                </dd>
              </div>
            </dl>
            <div>
              <h1
                class="text-3xl font-extrabold leading-9 tracking-tight text-gray-900 dark:text-gray-100 sm:text-4xl sm:leading-10 md:text-5xl md:leading-14">
                <%= page.title %>
              </h1>
            </div>
          </div>
        </header>
        <div class="pb-8 divide-y divide-gray-200 xl:divide-y-0 dark:divide-gray-700 xl:grid xl:grid-cols-4 xl:gap-x-6"
          style="grid-template-rows: auto 1fr;">
          <dl class="pt-6 pb-10 xl:pt-11 xl:border-b xl:border-gray-200 xl:dark:border-gray-700">
            <dt class="sr-only">Author</dt>
            <dd>
              <ul class="flex justify-center space-x-8 xl:block sm:space-x-12 xl:space-x-0 xl:space-y-8">
                <li class="flex items-center space-x-2">
                  <img src="<%= config.user.avatar %>" alt="<%= config.user.name %>" style="
                      max-width: 100%;
                      width: 2.5rem; 
                      height: 2.5rem;
                      border-radius: 9999px;
                      " />
                  <dl class="text-sm font-medium leading-5 whitespace-nowrap">
                    <dt class="sr-only">Name</dt>
                    <dd class="text-gray-900 dark:text-gray-100">
                      <%= config.user.nickname %>
                    </dd>
                    <p class="text-gray-500 dark:text-gray-400"
                      style="max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                      <%= config.user.description %>
                    </p>
                  </dl>
                </li>
              </ul>
            </dd>
          </dl>
          <div class="divide-gray-200 dark:divide-gray-700 xl:pb-0 xl:col-span-3 xl:row-span-2">
            <div class="pt-10 pb-8 prose dark:prose-invert max-w-none">
              <textarea id="write" style="display: none;"><%- page.text %></textarea>
              <div id="vditor"></div>
            </div>
            <div id="comment">
              <mog-comments api="http://192.168.3.4:2330" pid="<%= page.id %>" />
            </div>
          </div>
          <footer>
            <div
              class="text-sm font-medium leading-5 divide-gray-200 xl:divide-y dark:divide-gray-700 xl:col-start-1 xl:row-start-2">
              <div class="py-4 xl:py-8">
                <h2 class="mb-3 text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400">Category</h2>
                <a href="/category/<%= page.category.slug %>"
                  class="t-4 mr-3 text-sm uppercase text-gray-500 hover:text-gray-600 dark:hover:text-gray-400 font-bold">
                  <%= page.category.name %>
                </a>
              </div>
              <div class="py-4 xl:py-8">
                <h2 class="text-xs tracking-wide text-gray-500 uppercase dark:text-gray-400">Tags</h2>
                <div class="flex flex-wrap">
                  <% for (tag of page.tags) { %>
                    <a href="/tag/<%= tag %>"
                      class="mt-3 mr-3 text-sm uppercase text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
                      <%= tag %>
                    </a>
                    <% } %>
                </div>
                <div class="pt-4 xl:pt-8">
                  <a href="/posts" class="text-gray-500 hover:text-gray-600 dark:hover:text-gray-400">
                    ← 返回列表
                  </a>
                </div>
              </div>
            </div>
          </footer>
        </div>
      </div>
    </article>
  </div>

  <script>
    Tiny.render()
  </script>

  <%- include("/document/foot.ejs") %>