blog_tp6/view/index/about.html

<div class="box">
  <div class="newsview">
    <h2>About my blog</h2>
    <div class="news_infos">
      <p>本博客属个人所有, 不涉及商业目的.遵守中华人民共和国法律法规、中华民族基本道德和基本网络道德规范, 尊重有节制的言论自由和意识形态自由, 反对激进、破坏、低俗、广告、投机等不负责任的言行.
        <br>
        所有转载的文撰写页面章、图片仅用于说明性目的, 被要求或认为适当时, 将标注署名与来源. 避免转载有明确"不予转载"声明的作品. 若不愿某一作品被转用, 请及时通知本人.
        对于无版权或自由版权作品, 本博客有权进行修改和传播, 一旦涉及实质性修改, 本博客将对修改后的作品享有相当的版权.二次转载者请再次确认原作者所给予的权力范围.
        <br>
        <!-- 本博客所有原创作品, 包括文字、资料、图片、网页格式, 转载时请标注作者与来源. 非经允许, 不得用于赢利目的.<br> -->
      </p>
      <br>
      <h2>About This Site</h2>
      &nbsp;
      <p>域 名：{:env('domain.domain_host')} 创建于2018年2月17日&nbsp;</p>
      <br>
      <p>备案号：{:env('domain.icp')}</p>
      <br>
      <p>
        <br>后端框架: ThinkPHP6.0 官网:http://www.thinkphp.cn/
        <br>前端模板: 来源杨青青个人博客. https://www.yangqq.com/download/div/881.html.
      </p>
    </div>
  </div>
  <style>
    .comment-respond {
      background: white;
      box-shadow: 0 0 2px 0 rgba(58, 58, 58, 0.2);
      padding: 1.5em 4.6875375%;
    }

    .guestbook {
      width: 100%;
      float: left;
      padding-bottom: 3em;
    }

    .guestbook h2 span {
      font-size: 12px;
    }

    @media only screen and (max-width: 767px) {
      .comment-respond {
        background: white;
        box-shadow: 0 0 2px 0 rgba(58, 58, 58, 0.2);
        padding: 1.5em 7.50006%;
      }
    }

    h3 {
      font-size: 1.125em;
      /* 18px / 16px */
      line-height: 1.333;
      /* 24px */
    }

    .comment-respond p {
      margin: 1.125em 0;
    }

    .comment-respond p.comment-notes {
      margin: 1.5em 0;
    }

    .comment-respond label {
      display: block;
      margin-bottom: 6px;
      font-weight: 700;
      font-size: 0.875em;
      line-height: 1.715;
    }

    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"]):not([type="image"]),
    textarea {
      width: 100%;
      font-family: "Roboto", "Open Sans", sans-serif;
      font-weight: 400;
      padding: 10px 12px;
      max-width: 27.75em;
      min-height: 26px;
      background: #F7F7F7;
      color: #333333;
      border: solid 1px #D4D4D4;
      border-radius: 0;
      -webkit-appearance: none;
      -webkit-transition: background 0.2s;
      transition: background 0.2s;
    }

    textarea {
      max-width: 41.625em;
      overflow: auto;
    }

    .comment-respond p.form-submit {
      margin-top: 2.25em;
    }

    input[type="submit"] {
      font-size: 0.75em;
      line-height: 1.5;
    }

    input[type="submit"] {
      font-family: "Roboto", "Open Sans", sans-serif;
      font-weight: 400;
      padding: 10px 12px;
      color: #333333;
      border: solid 1px #333333;
      background: none;
      border-radius: 0;
      -webkit-appearance: none;
      -webkit-transition: all 0.2s;
      transition: all 0.2s;
    }

    .pager {
      margin-left: 10%;
      width: 60%;
      background: red;
    }

    ul.pager li:first-child {
      float: left;
    }

    ul.pager li:last-child {
      float: left;
      margin-left: 30%;
    }
  </style>


  <div class="newsview">
    <h2>留言</h2>
    <div class="news_infos">
      <p>有什么想告诉我说的, 就在这吧ヾ(✿ﾟ▽ﾟ)ノ</p>
    </div>
  </div>
  <!-- #respond -->
  <div id="respond" class="comment-respond">
    <h3 id="reply-title" class="comment-reply-title">Leave a Reply</h3>
    <form action="{:url('/index/save_guest_book')}" method="post" id="comment-form" class="comment-form" novalidate="">
      <p class="comment-notes"><span id="email-notes">我会妥善保存你的邮箱哒(｀・ω・´).</span> 必填项已标记<span class="required">*</span>
      </p>
      <p class="comment-form-comment">
        <label for="comment">Comment*</label>
        <textarea required="" id="content" name="content" cols="45" rows="8" aria-required="true"></textarea>
      </p>
      <p class="comment-form-author">
        <label for="author">Name*</label>
        <input id="name" name="name" type="text" placeholder="Jane Doe" value="" size="26">
      </p>
      <p class="comment-form-email">
        <label for="contact">contact*</label>
        <input id="contact" name="contact" type="text" placeholder="name@email.com or 13355556666" value="" size="26">
      </p>
      <p class="comment-form-url">
        <label for="url">url</label>
        <input id="url" name="url" type="text" placeholder="https://www.google.com" value="" size="26">
      </p>
      <p class="form-submit">
        <button type="button" id="submit" class="submit">Post Comment</button>
        <!-- <input type="hidden" name="comment_post_ID" value="23" id="comment_post_ID">
          <input type="hidden" name="comment_parent" id="comment_parent" value="0"> -->
      </p>
    </form>
    <div>
      <p class="msg" style="display: none;color: orangered;">提交成功</p>
    </div>
  </div><!-- #respond end-->
  <div class="blank"></div>
  <div class="guestbook">
    {php}
    $list = \app\model\GuestBook::order('id desc')->paginate();
    {/php}
    {foreach $list as $val}
    <div class="bloglist">
      <div>
        <h2>{$val.name} <span>{$val.time|date="Y/m/d"}</span></h2>
      </div>
      <p>{$val.content}</p>
    </div>
    {/foreach}
    {$list->render()}
  </div>

  <script>
    $("#submit").click(function () {
      $.post('/save_guest_book', {
        'name': $("#name").val(),
        'content': $("#content").val(),
        'contact': $("#contact").val(),
        'url': $("#url").val(),
      }, function (res) {
        console.log(res);
        if (res.code == 0) {
          $(".msg").show();
          var html = '<div class="bloglist"><div><h2>' + res.data.name + ' <span>' + res.data.datetime + '</span></h2>';
          html += '</div><p>' + res.data.content + '</p></div>';
          $(".guestbook").prepend(html);
          setTimeout(() => {
            $(".msg").hide();
          }, 1000);
          $("#comment-form")[0].reset();
        } else {
          $(".msg").html(res.msg);
          $(".msg").show();
          setTimeout(() => {
            $(".msg").hide();
          }, 1000);
          $(".msg").html('提交成功');
        }
      }, 'json');
    })
  </script>
</div>