<!--引入头部-->


<!--
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◆◆◆◆◆◆◆◆◇◇◇◇◇◇
◇◇◇◇◇◇◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇
◇◇◇◆◆◆◆◆◆◆◆◆◆◆◆◆◇◆◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◆◆◆◆◆◇◇◇◇◇◆◇◇◇◆◇◆◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◆◆◆◆◇◇◇◇◆◇◇◇◆◇◆◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◆◆◆◆◆◇◇◇◆◇◇◆◆◇◇◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◆◆◇◆◆◇◇◇◆◆◆◆◆◇◇◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◆◆◇◇◆◆◇◆◇◆◆◆◇◆◇◇◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◆◆◆◆◆◆◆◆◇◆◇◇◇◆◇◇◆◇◇◇◇◇◇◇◇◇
◇◇◇◆◆◆◆◆◆◆◆◆◇◆◇◆◆◆◇◇◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◆◇◇◇◆◆◇◇◇◆◆◆◆◆◇◇◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◆◇◆◇◆◆◆◇◆◇◇◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◆◆◆◆◆◇◇◇◆◆◆◆◇◇◇◆◇◇◇◇◇
◇◇◇◇◆◆◆◆◆◆◇◇◇◆◇◇◆◆◆◆◆◇◇◇◆◇◇◇◇◇
◇◇◆◆◆◆◆◆◆◇◇◇◇◆◆◆◆◆◇◆◆◇◇◇◆◆◇◇◇◇
◇◇◇◆◆◇◇◇◆◇◇◆◆◆◆◆◇◆◇◆◆◇◇◇◆◆◇◇◇◇
◇◇◇◇◇◇◇◇◆◇◆◆◆◆◇◇◇◆◇◆◆◇◇◇◆◆◇◇◇◇
◇◇◇◇◇◇◇◇◆◇◇◆◇◇◇◇◆◆◇◇◆◆◇◆◆◆◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◆◆◇◇◆◆◆◆◆◆◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◆◆◇◇◇◇◆◆◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◆◆◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◆◆◆◆◆◆◆◆◆◆◆◆◆◆◇◇◇◇◇
◇◇◇◇◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇
◇◇◇◇◇◆◆◆◆◆◆◆◇◇◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◆◆◆◇◇◆◆◆◇◇◇◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◆◆◇◇◇◆◆◇◇◇◆◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◆◇◇◇◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◆◇◇◇◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◆◆◆◆◇◇◆◆◆◆◇◇◇◆◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◆◆◆◆◆◇◇◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◆◆◆◇◆◆◇◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◆◆◆◇◇◆◆◇◆◆◆◆◇◆◆◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◆◆◇◇◇◇◆◆◆◆◇◆◆◆◇◆◆◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◆◆◆◇◇◆◆◆◆◆◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◆◆◆◆◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◇◇◇◇◇◆◆◇◆◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◇◇◆◆◇◇◇◆◆◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◇◆◆◇◇◇◇◇◆◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◆◆◆◇◇◇◇◇◇◇◆◆◆◆◆◆◇◇◇◇
◇◇◇◇◇◇◇◆◆◆◆◆◇◇◇◇◇◇◇◇◆◆◆◆◆◆◇◇◇◇
◇◇◇◇◇◇◇◇◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◆◆◆◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◆◆◆◇◇◇◇◆◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◆◇◇◇◇◇◆◆◇◇◇◆◆◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◆◆◆◆◆◆◆◆◆◆◆◆◆◆◇◇◇◇◇
◇◇◇◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◆◆◆◆◆◆◆◆◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◆◆◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◆◆◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◆◆◇◇◇◆◆◆◇◇◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◆◆◆◇◇◆◆◆◇◇◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◆◆◆◇◇◇◇◆◇◇◆◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◆◆◇◇◇◇◇◆◇◇◆◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◆◆◇◇◇◇◇◆◇◆◆◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◆◆◆◆◆◇◇◇◇◇◆◆◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◆◆◆◇◆◆◇◇◇◇◆◆◆◆◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◆◆◆◇◇◆◇◇◇◇◆◆◆◆◇◇◇◇◇◇◆◇◇◇◇◇
◇◇◇◆◆◆◇◇◇◆◇◇◆◆◆◆◆◇◇◇◇◇◇◇◆◆◇◇◇◇
◇◇◇◆◆◇◇◇◇◆◇◆◆◆◇◇◆◇◇◇◇◇◇◇◆◆◇◇◇◇
◇◇◇◇◇◇◇◇◇◆◇◆◆◇◇◇◆◇◇◇◇◇◇◇◆◆◇◇◇◇
◇◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◆◇◇◇◇◇◇◇◆◆◇◇◇◇
◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◆◆◇◇◇◇◆◆◆◆◇◇◇◇
◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◆◆◆◆◆◆◆◆◆◆◇◇◇◇
◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◆◆◆◆◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◆◆◆◇◆◆◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◆◇◆◆◆◆◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◆◆◆◇◇◇◆◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◇◇◇◆◆◆◇◆◆◆◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◆◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◆◇◇◇◇◇◆◇◇◇◇◆◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◆◆◆◇◇◆◆◇◇◇◆◆◆◆◆◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◆◆◆◇◆◆◇◇◆◆◆◆◇◇◆◆◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◆◆◇◆◆◆◆◆◆◇◆◆◇◇◆◆◆◆◆◆◆◇◇◇◇
◇◇◇◇◇◇◆◇◆◆◆◆◇◇◇◆◆◇◇◇◆◆◆◆◆◆◇◇◇◇
◇◇◇◇◇◇◇◆◆◆◆◇◇◇◇◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◆◆◆◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◆◆◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◆◆◇◇◇◇◇◇◆◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇
◇◇◇◇◇◇◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇
◇◇◆◆◆◆◆◇◆◆◆◆◆◆◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◆◆◆◆◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◆◆◆◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
辄夜花泽Blog：https://www.blog.johnbin.cn -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="/static/blog/static/image/shortcut_icon.png" type="image/x-icon"/>
    <meta name="keywords" content="辄夜花泽, 自适应主题，响应式主题，个人博客模板，工具下载，主题分享，博客模板，个人网站模板，技术分享，功能开发，前端技术，后端技术">
    <meta name="description" content="辄夜花泽, 自适应主题，响应式主题，个人博客模板，工具下载，主题分享，博客模板，个人网站模板，技术分享，功能开发，前端技术，后端技术">
    <meta name='robots' content='noindex,follow'>
    <link rel="stylesheet" href="/static/blog/static/css/style.css?version=1763052229">
    <link rel="stylesheet" href="/static/blog/static/css/code.css?version=1763052229">
    <link rel="stylesheet" href="/static/blog/static/css/main.css?version=1763052229">
    <link rel="stylesheet" href="/static/blog/static/css/font-awesome.min.css?version=1763052229"> <!-- awesome-->
    <link rel="stylesheet" href="/static/blog/static/css/swiper.min.css?version=1763052229">  <!-- 轮播图-->
    <!--<link rel="stylesheet" href="/static/blog/static/css/monokai_sublime.min.css">-->
    <script type="text/javascript" src="/static/blog/static/js/highlight.min.js?version=1763052229"></script>
    <script type='text/javascript' src='/static/blog/static/js/jquery-1.12.4.js?version=1763052229'></script>
    <script type='text/javascript' src='/static/blog/static/js/jquery-migrate.min-1.4.1.js?version=1763052229'></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <style> .article-list .post-item-foot-icon span.m-r-sm:last-child{display:none}
    .article-list .post-item-foot-icon i:nth-child(3){display:none}</style>
    <link rel="stylesheet" class="rtl-css" id="rtl-css" href="">
    <link rel="stylesheet" class="layout-css" id="layout-css" href="">
</head>
<style>
    /*全部th和td添加样式*/
    th{
        text-align:center;
    }
    td{
        text-align:center;
    }
    /*全部input加上样式*/
    input {
        margin-top: 0;
        border: 1px solid #4680ff;
        border-radius: 3px;
        -webkit-appearance:none;
        -moz-appearance:none;
        -ms-appearance:none;
        -o-appearance:none;
        appearance:none;
        outline: none;
    }
    input[type='text']:focus{
        border-radius: 4px;
        border: 1px solid #4680ff;
        box-shadow: 0 0 5px 0px #4680ff;
    }
</style>
<body class="container box-layout background-blue">
<!-- [ Pre-loader ] start -->
<div class="loader-bg" style="display: none">
    <div class="loader-track">
        <div class="loader-fill"></div>
    </div>
</div>

<title>  留言板   </title>
<!--引入导航栏-->
<nav class="pcoded-navbar menu-light ">
    <div class="navbar-wrapper  ">
        <div class="navbar-content scroll-div ">
            <div class="" style="display: none">
                <div class="main-menu-header">
                    <img class="img-radius" src="/static/blog/static/picture/avatar.png" alt="User-Profile-Image">
                    <div class="user-details">
                        <div id="more-details">辄夜花泽  <i class="fa fa-caret-down"></i></div>
                    </div>
                </div>
                <div class="collapse" id="nav-user-link">
                    <ul class="list-inline">
                        <li class="list-inline-item"><a href="user-profile" data-toggle="tooltip" title="View Profile"><i class="feather icon-user"></i></a></li>
                        <li class="list-inline-item"><a href="email_inbox"><i class="feather icon-mail" data-toggle="tooltip" title="Messages"></i><small class="badge badge-pill badge-primary">5</small></a></li>
                        <li class="list-inline-item"><a href="auth-signin" data-toggle="tooltip" title="Logout" class="text-danger"><i class="feather icon-power"></i></a></li>
                    </ul>
                </div>
            </div>
            <!-- 左侧导航导航部分 -->
            <ul class="nav pcoded-inner-navbar ">
                <li class="nav-item pcoded-menu-caption">
                    <label>导航</label>
                </li>
            </ul>
            <ul id="menu-%e8%8f%9c%e5%8d%951" class="nav pcoded-inner-navbar">
                <li id="menu-item-1411" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-1411">
                    <a href="http://blog.johnbin.cn/blog/index/index">
                        <span class="pcoded-micon">
                        <i class="feather icon-home"></i>
                    </span>首页
                    </a>
                </li>
                <li id="menu-item-1412" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1412">
                    <a target="_blank" href="#">
                        <span class="pcoded-micon">
                        <i class="feather icon-github"></i>
                        </span>仓库
                    </a>
                </li>
                <li id="menu-item-1413" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1413">
                    <a href="http://blog.johnbin.cn/blog/index/message">
                        <span class="pcoded-micon">
                        <i class="fas fa-comments"></i>
                        </span>留言
                    </a>
                </li>
                <li id="menu-item-1417" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1417">
                    <a href="http://blog.johnbin.cn/blog/index/topics">
                        <span class="pcoded-micon">
                            <i class="fas fa-columns"></i>
                        </span>专题
                    </a>
                </li>
                <li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1417">
                    <a href="http://blog.johnbin.cn/blog/index/icon">
                        <span class="pcoded-micon">
                            <i class="fas fa-angry"></i>
                        </span>图标
                    </a>
                </li>
            </ul>

            <!-- 左侧导航组成部分 -->
            <ul class="nav pcoded-inner-navbar ">
                <li class="nav-item pcoded-menu-caption">
                    <label>组成</label>
                </li>
            </ul>
            <ul class="nav pcoded-inner-navbar ">
                <li class="nav-item pcoded-hasmenu">
                    <a href="javascript:void(0)" no-pjax="" class="nav-link pcoded-submenu-click">
                        <span class="pcoded-micon">
                            <i class="fas fa-splotch"></i>
                        </span>
                        <span class="pcoded-mtext">分类</span>
                    </a>
                    <ul class="pcoded-submenu" data="off">
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/777192611" title="视频">
                                 <span>视频</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/734137683" title="Laravel">
                                 <span>Laravel</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/701176514" title="工具">
                                 <span>工具</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/45917434" title="PHP">
                                 <span>PHP</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/20125912" title="Html">
                                 <span>Html</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/34533430" title="Ajax">
                                 <span>Ajax</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/52841698" title="Javascript">
                                 <span>Javascript</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/70656814" title="Linux">
                                 <span>Linux</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/66362692" title="Mysql">
                                 <span>Mysql</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/70878573" title="小程序">
                                 <span>小程序</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/97688234" title="Api">
                                 <span>Api</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/80998220" title="Ecshop">
                                 <span>Ecshop</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/267109849" title="Web">
                                 <span>Web</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/745114309" title="Jquery">
                                 <span>Jquery</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/630126983" title="ThinkPHP">
                                 <span>ThinkPHP</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/628147134" title="Yii">
                                 <span>Yii</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/790151821" title="辄夜花泽">
                                 <span>辄夜花泽</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/618169803" title="手册">
                                 <span>手册</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/662183728" title="源码">
                                 <span>源码</span>
                            </a>
                        </li>
                                                <li>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/440202696" title="模板">
                                 <span>模板</span>
                            </a>
                        </li>
                                            </ul>
                </li>
            </ul>

            <ul class="nav pcoded-inner-navbar ">
                <!-- 左侧导航组成友情链接部分 -->
                <li class="nav-item pcoded-hasmenu">
                    <a href="javascript:void(0)" no-pjax="" class="nav-link pcoded-submenu-click">
                        <span class="pcoded-micon"><i class="feather icon-link"></i></span><span class="pcoded-mtext">友链</span>
                    </a>
                    <ul class="pcoded-submenu" data="off">
                                            </ul>
                </li>
            </ul>
            <ul class="nav pcoded-inner-navbar ">
                <!-- 左侧导航组成在线工具部分 -->
                <li class="nav-item pcoded-hasmenu">
                    <a href="javascript:void(0)" no-pjax="" class="nav-link pcoded-submenu-click">
                        <span class="pcoded-micon">
                            <i class="fas fa-code"></i>
                        </span>
                        <span class="pcoded-mtext">在线工具</span>
                    </a>
                    <ul class="pcoded-submenu" data="off">
                        <li style="display:none;"><a href="http://johnbin.cn/ptest/Azdy/crypt/X1B13GOI9/xhrt/3812f7bacb8fca7a1276ebcadca41e1e89e8aa36" target="_blank" title="抖音视频去水印" alt="抖音视频去水印">
                            <span>抖音视频去水印</span></a>
                        </li>
                        <li><a href="https://www.json.cn" target="_blank" title="在线JSON格式化" alt="在线JSON格式化">
                            <span>在线JSON格式化</span></a>
                        </li>
                        <li><a href="http://johnbin.cn/index/regexinfo/crypt/23W5667AH/xhrt/019fa4cd0954f064bf4dfd2bb44fdc61e9568286" target="_blank" title="正则表达式" alt="正则表达式">
                            <span>正则表达式</span></a>
                        </li>
                    </ul>
                </li>
            </ul>

            <div class="card text-center" style="display: none;">
                <div class="card-block">
                    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                    <i class="feather icon-sunset f-40"></i>
                    <h6 class="mt-3">Help?</h6>
                    <p>Please contact us on our email for need any support</p>
                    <a href="index" target="_blank" class="btn btn-primary btn-sm text-white m-0">Support</a>
                </div>
            </div>

        </div>
    </div>
</nav>
<!-- [ Pre-loader ] End --><!-- [ navigation menu ] start -->

<!-- [ navigation menu ] end --><!-- [ Header ] start -->
<!-- [ navigation menu ] end --><!-- [ Header ] start -->
<header class="navbar pcoded-header navbar-expand-lg navbar-light header-blue">
    <div class="m-header">
        <a class="mobile-menu" id="mobile-collapse" href="#"><span></span></a>
        <a href="http://blog.johnbin.cn/blog/index/index" class="b-brand">
            <!-- ========   change your logo hear   ============ -->
            <img src="/static/blog/static/picture/logo2.png" alt="" class="logo">
        </a>
        <a href="#" class="mob-toggler">
            <i class="feather icon-more-vertical"></i>
        </a>
    </div>
    <div class="collapse navbar-collapse">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                <a href="http://blog.johnbin.cn/blog/index/index" class="pop-search"><i class="feather icon-search"></i></a>
                <form class="search-bar" id="searchform" method="get" role="search" action="/blog/index/search">
                    <input type="text" name="keywords" class="form-control border-0 shadow-none" placeholder="请输入关键词搜索">
                    <button type="button" class="close" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </form>
            </li>
        </ul>
    </div>
</header>
<!-- [ Header ] end -->
<!-- [ Header ] end -->

<!-- [ Main Content ] start -->
<section class="pcoded-main-container" id="content">
    <div class="pcoded-content">
        <div class="row">
            <!--中部内容 -->
            
    <div class="col-md-8">
        <!-- [ breadcrumb ] start -->
        <ul class="breadcrumb" itemscope="">
            <a itemprop="breadcrumb" href="http://blog.johnbin.cn/blog/index/index">首页</a>  &nbsp;&nbsp;›&nbsp;&nbsp;
            <span class="current">留言</span>
        </ul>                <!-- [ breadcrumb ] end -->
        <!-- [ single ] start -->
        <div class="post card animated fadeIn ">
            <div class="card-body">
                <div class="post-header border-bottom border-light mb-4 pb-4">
                    <div class="d-block text-sm mt-md-1 mb-2 mb-md-3">
                        <a href="">
                            <span class="badge badge-primary"></span></a>
                    </div>
                    <h1 class="h3 mb-3">留言</h1>
                    <div class="meta d-flex align-items-center text-xs text-muted">
<!--                        <div>-->
<!--                            <time class="d-inline-block">2019-10-09 01:38:15</time>-->
<!--                        </div>-->
                        <div class="ml-auto text-sm">
                                <span class="mx-1">
                                    <i class="text-md iconfont icon-eye-line mx-1"></i>
                                    <small>95066&nbsp;</small></span>
                            <a class="mx-1" href="liuyan1.html#comments">
                                <i class="text-md iconfont icon-chat--line mx-1"></i>
                                <small>84</small>
                            </a>
                            <!--<a class="btn-like btn-link-like  mx-1" href="javascript:;" data-action="like" data-id="4621">-->
                                <!--<i class="text-md iconfont icon-thumb-up-line mx-1"></i>-->
                                <!--<small class="like-count">19</small>-->
                            <!--</a>-->
                        </div>
                    </div>
                    <div class="border-theme bg-primary"></div>
                </div>
                <div class="post-content">
                    <div class="nc-light-gallery">
                        <p><img src="/static/blog/static/picture/227574A7-E020-44D9-A352-8033284E.jpg" alt="" width="1200" height="437" class="alignnone size-full wp-image-1448" srcset="/static/blog/static/picture/227574A7-E020-44D9-A352-8033284E.jpg 1200w, /static/blog/static/picture/227574A7-E020-44D9-A352-8033284E1.jpg 768w" sizes="(max-width: 1200px) 100vw, 1200px"></p>
                    </div>
                </div>
                <!-- [ like ] start -->
                <div class="donate text-center">
                    <p class="text-muted mt-3">如果本博客内容对您有帮助，欢迎随意打赏作者，让作者坚持创作！</p>
                    <a class="btn btn-primary btn-like btn-link-like2 current" href="javascript:;" data-action="like" id="like_clicks">
<!--                        <i class="text-md iconfont icon-thumb-up-line mx-1"></i>-->
<!--                        <i class="fa-duotone fa-regular fa-thumbs-up"></i>-->
                        <small class="like-count click_nums">赞 2425</small>
                    </a>
                    <a class="btn btn-success mt-3 mb-3" data-toggle="modal" data-target="#gratuityModal" href="javascript:void(0);" style="display:none;" onclick="return false;" title="如本文“对您有用”，欢迎随意打赏作者，让我们坚持创作！"><i class="text-md feather icon-award mx-1"></i>打赏</a>
                </div>
                <!-- [ like ] end -->
            </div>

        </div>
        <!-- [ single ] end -->

        <!-- [ comments ] start -->
        <div id="comments" class="comments">
            <div class="card">
                <div class="mx-4 my-3">
                    <i class="text-xl text-primary iconfont icon-message--line mr-2"></i>留言
                    <small class="font-theme text-muted">(84)</small></div>

                <div class="card-body">
                    <p class="text-left">
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://blog.johnbin.cn/static/images/avatar/default5.png" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://blog.johnbin.cn/static/images/avatar/default3.png" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://blog.johnbin.cn/static/images/avatar/default2.png" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://blog.johnbin.cn/static/images/avatar/default10.png" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://q.qlogo.cn/headimg_dl?dst_uin=858838081&amp;spec=100" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://q.qlogo.cn/headimg_dl?dst_uin=932458905&amp;spec=100" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://q.qlogo.cn/headimg_dl?dst_uin=490387623&amp;spec=100" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://q.qlogo.cn/headimg_dl?dst_uin=2251480943&amp;spec=100" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://q.qlogo.cn/headimg_dl?dst_uin=1286834045&amp;spec=100" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://q1.qlogo.cn/g?b=qq&nk=320693632&s=100" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://q1.qlogo.cn/g?b=qq&nk=978027005&s=100" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://q1.qlogo.cn/g?b=qq&nk=574063686&s=100" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://q1.qlogo.cn/g?b=qq&nk=932458905&s=100" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://q1.qlogo.cn/g?b=qq&nk=1016726420&s=100" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://q1.qlogo.cn/g?b=qq&nk=547241650&s=100" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://q1.qlogo.cn/g?b=qq&nk=45168713&s=100" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://q1.qlogo.cn/g?b=qq&nk=9324587&s=100" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://q1.qlogo.cn/g?b=qq&nk=1172660212&s=100" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://q1.qlogo.cn/g?b=qq&nk=1286834045&s=100" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://q1.qlogo.cn/g?b=qq&nk=1143316965&s=100" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://q1.qlogo.cn/g?b=qq&nk=519142242&s=100" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://q1.qlogo.cn/g?b=qq&nk=516142242&s=100" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://q1.qlogo.cn/g?b=qq&nk=173139342&s=100" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://q1.qlogo.cn/g?b=qq&nk=858838081&s=100" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://q1.qlogo.cn/g?b=qq&nk=1172660906&s=100" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://blog.johnbin.cn/static/images/avatar/default7.png" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://blog.johnbin.cn/static/images/avatar/default1.png" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                                <a href="javascript:void(0)" data-toggle="tooltip" data-original-title="">
                            <img src="http://blog.johnbin.cn/static/images/avatar/default11.png" class="avatar w-32 mb-2" style="border-radius: 5px;">
                        </a>
                                            </p>
                    <p id="reply-title" class="comments-title">                <small>
                        <a rel="nofollow" id="cancel-comment-reply-link" href="https://www.hankin.cn/liuyan?_pjax=%23content#respond" style="display:none;">点击这里取消回复。</a>                </small>
                    </p>
                    <div id="respond" class="comment-respond mb-4">
                            <div class="comment-from-author">
                                <div class="comment-avatar-author d-flex flex-fill align-items-center text-sm mb-2">
                                    <div class="avatar w-32">
                                        <img src="/static/images/avatar/default2.png" id="avatars" class="avatar w-32 qqpic">
                                    </div>
                                </div>
                                <input id="is_tourist" type="hidden" value="0">
                                <div class="comment-form-text">
                                    <p class="warning-text" style="margin-bottom:10px">欢迎您 <a href="javascript:void(0)" no-pjax="" id="cancelq" class="nick_name"><font color="#4680ff">游客</font> &nbsp;<i class="feather icon-edit"></i></a></p>
                                    <div class="comment-form-info row row-sm" id="qqShow">
                                        <div class="col-12 col-md-4">
                                            <div class="form-group comment-form-author">
                                                <input class="form-control text-sm qqnum" placeholder="QQ号可获取头像和昵称" type="number" value="" required="required">
                                                <input id="avatar" type="hidden" value="">
                                                <input id="nick_name" type="hidden" value="">
                                                <input id="email" type="hidden" value="">
                                                <input id="qqnum" type="hidden" value="">
                                            </div>
                                        </div>
                                        <div class="col-12 col-md-4">
                                            <div class="form-group comment-form-email">
                                                <input class="form-control text-sm email" placeholder="自动获取" value="" type="email" readonly="" autocomplete="off"></div>
                                        </div>
                                        <div class="col-12 col-md-4">
                                            <div class="form-group comment-form-url">
                                                <input class="form-control text-sm" placeholder="网址(可不填)" id="link" type="url" value="">
                                            </div>
                                        </div>
                                    </div>
                                    <div class="loader-comment" style="display: none;" id="comment-loader">
                                        <div class="loader-track">
                                            <div class="loader-fill"></div>
                                        </div>
                                    </div>
                                    <div class="comment-textarea mb-3">
                                        <textarea id="comment" class="form-control form-control-sm" rows="2" maxlength="200" onkeyup="check(this)" placeholder="轻言细语,说出你的思绪吧....."></textarea>
                                        <span>你还可以输入<b id="bb">200</b>个字</span>
                                    </div>
                                    <div class="d-flex flex-fill align-items-center">
                                        <div class="flex-fill"></div>
                                        <div class="form-submit">
                                            <a href="javascript:;" id="submit" class="btn btn-dark">发布留言</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>


                    <ul class="comment-list">
                                                    <!-- #comment-## -->
                            <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-84">
                                <article id="div-comment-84" class="comment-body d-flex flex-fill ">
                                    <div class="comment-avatar-author vcard mr-2 mr-md-3 ">
                                        <div class="w-48">
                                            <img src="http://blog.johnbin.cn/static/images/avatar/default5.png" style="border-radius: 5px;">
                                        </div>
                                    </div>
                                    <div class="comment-text d-flex flex-fill flex-column">
                                        <div class="comment-info d-flex align-items-center mb-1">
                                            <div class="comment-author text-sm">
                                                游客                                            </div>
                                        </div>
                                        <div class="comment-content d-inline-block text-sm">
                                            <p>来来来</p>
                                        </div>
                                        <!-- .comment-content -->
                                        <div class="d-flex flex-fill text-xs text-muted pt-2">
                                            <div>
                                                <time class="comment-date">5年前 </time></div>
                                            <div class="flex-fill"></div>
                                <!--    <a rel="nofollow" class="comment-reply-link" href="https://www.hankin.cn/liuyan#comment-84" onclick="return addComment.moveForm( &quot;comment-84&quot;, &quot;84&quot;, &quot;respond&quot;, &quot;1429&quot; )" aria-label="回复给itdog">回复</a>                </div>-->
                                    </div>

                                </article>
                            </li>
                                                        <!-- #comment-## -->
                            <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-84">
                                <article id="div-comment-84" class="comment-body d-flex flex-fill ">
                                    <div class="comment-avatar-author vcard mr-2 mr-md-3 ">
                                        <div class="w-48">
                                            <img src="http://blog.johnbin.cn/static/images/avatar/default3.png" style="border-radius: 5px;">
                                        </div>
                                    </div>
                                    <div class="comment-text d-flex flex-fill flex-column">
                                        <div class="comment-info d-flex align-items-center mb-1">
                                            <div class="comment-author text-sm">
                                                游客                                            </div>
                                        </div>
                                        <div class="comment-content d-inline-block text-sm">
                                            <p>富士山下</p>
                                        </div>
                                        <!-- .comment-content -->
                                        <div class="d-flex flex-fill text-xs text-muted pt-2">
                                            <div>
                                                <time class="comment-date">5年前 </time></div>
                                            <div class="flex-fill"></div>
                                <!--    <a rel="nofollow" class="comment-reply-link" href="https://www.hankin.cn/liuyan#comment-84" onclick="return addComment.moveForm( &quot;comment-84&quot;, &quot;84&quot;, &quot;respond&quot;, &quot;1429&quot; )" aria-label="回复给itdog">回复</a>                </div>-->
                                    </div>

                                </article>
                            </li>
                                                        <!-- #comment-## -->
                            <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-84">
                                <article id="div-comment-84" class="comment-body d-flex flex-fill ">
                                    <div class="comment-avatar-author vcard mr-2 mr-md-3 ">
                                        <div class="w-48">
                                            <img src="http://blog.johnbin.cn/static/images/avatar/default2.png" style="border-radius: 5px;">
                                        </div>
                                    </div>
                                    <div class="comment-text d-flex flex-fill flex-column">
                                        <div class="comment-info d-flex align-items-center mb-1">
                                            <div class="comment-author text-sm">
                                                游客                                            </div>
                                        </div>
                                        <div class="comment-content d-inline-block text-sm">
                                            <p>hahah</p>
                                        </div>
                                        <!-- .comment-content -->
                                        <div class="d-flex flex-fill text-xs text-muted pt-2">
                                            <div>
                                                <time class="comment-date">5年前 </time></div>
                                            <div class="flex-fill"></div>
                                <!--    <a rel="nofollow" class="comment-reply-link" href="https://www.hankin.cn/liuyan#comment-84" onclick="return addComment.moveForm( &quot;comment-84&quot;, &quot;84&quot;, &quot;respond&quot;, &quot;1429&quot; )" aria-label="回复给itdog">回复</a>                </div>-->
                                    </div>

                                </article>
                            </li>
                                                        <!-- #comment-## -->
                            <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-84">
                                <article id="div-comment-84" class="comment-body d-flex flex-fill ">
                                    <div class="comment-avatar-author vcard mr-2 mr-md-3 ">
                                        <div class="w-48">
                                            <img src="http://q.qlogo.cn/headimg_dl?dst_uin=932458905&amp;spec=100" style="border-radius: 5px;">
                                        </div>
                                    </div>
                                    <div class="comment-text d-flex flex-fill flex-column">
                                        <div class="comment-info d-flex align-items-center mb-1">
                                            <div class="comment-author text-sm">
                                                隐                                            </div>
                                        </div>
                                        <div class="comment-content d-inline-block text-sm">
                                            <p>测试下</p>
                                        </div>
                                        <!-- .comment-content -->
                                        <div class="d-flex flex-fill text-xs text-muted pt-2">
                                            <div>
                                                <time class="comment-date">5年前 </time></div>
                                            <div class="flex-fill"></div>
                                <!--    <a rel="nofollow" class="comment-reply-link" href="https://www.hankin.cn/liuyan#comment-84" onclick="return addComment.moveForm( &quot;comment-84&quot;, &quot;84&quot;, &quot;respond&quot;, &quot;1429&quot; )" aria-label="回复给itdog">回复</a>                </div>-->
                                    </div>

                                </article>
                            </li>
                                                        <!-- #comment-## -->
                            <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-84">
                                <article id="div-comment-84" class="comment-body d-flex flex-fill ">
                                    <div class="comment-avatar-author vcard mr-2 mr-md-3 ">
                                        <div class="w-48">
                                            <img src="http://q.qlogo.cn/headimg_dl?dst_uin=932458905&amp;spec=100" style="border-radius: 5px;">
                                        </div>
                                    </div>
                                    <div class="comment-text d-flex flex-fill flex-column">
                                        <div class="comment-info d-flex align-items-center mb-1">
                                            <div class="comment-author text-sm">
                                                隐                                            </div>
                                        </div>
                                        <div class="comment-content d-inline-block text-sm">
                                            <p>测试下</p>
                                        </div>
                                        <!-- .comment-content -->
                                        <div class="d-flex flex-fill text-xs text-muted pt-2">
                                            <div>
                                                <time class="comment-date">5年前 </time></div>
                                            <div class="flex-fill"></div>
                                <!--    <a rel="nofollow" class="comment-reply-link" href="https://www.hankin.cn/liuyan#comment-84" onclick="return addComment.moveForm( &quot;comment-84&quot;, &quot;84&quot;, &quot;respond&quot;, &quot;1429&quot; )" aria-label="回复给itdog">回复</a>                </div>-->
                                    </div>

                                </article>
                            </li>
                                                        <!-- #comment-## -->
                            <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-84">
                                <article id="div-comment-84" class="comment-body d-flex flex-fill ">
                                    <div class="comment-avatar-author vcard mr-2 mr-md-3 ">
                                        <div class="w-48">
                                            <img src="http://blog.johnbin.cn/static/images/avatar/default10.png" style="border-radius: 5px;">
                                        </div>
                                    </div>
                                    <div class="comment-text d-flex flex-fill flex-column">
                                        <div class="comment-info d-flex align-items-center mb-1">
                                            <div class="comment-author text-sm">
                                                游客                                            </div>
                                        </div>
                                        <div class="comment-content d-inline-block text-sm">
                                            <p>啦啦啦啦</p>
                                        </div>
                                        <!-- .comment-content -->
                                        <div class="d-flex flex-fill text-xs text-muted pt-2">
                                            <div>
                                                <time class="comment-date">5年前 </time></div>
                                            <div class="flex-fill"></div>
                                <!--    <a rel="nofollow" class="comment-reply-link" href="https://www.hankin.cn/liuyan#comment-84" onclick="return addComment.moveForm( &quot;comment-84&quot;, &quot;84&quot;, &quot;respond&quot;, &quot;1429&quot; )" aria-label="回复给itdog">回复</a>                </div>-->
                                    </div>

                                </article>
                            </li>
                                                        <!-- #comment-## -->
                            <li class="comment odd alt thread-odd thread-alt depth-1" id="li-comment-84">
                                <article id="div-comment-84" class="comment-body d-flex flex-fill ">
                                    <div class="comment-avatar-author vcard mr-2 mr-md-3 ">
                                        <div class="w-48">
                                            <img src="http://q.qlogo.cn/headimg_dl?dst_uin=858838081&amp;spec=100" style="border-radius: 5px;">
                                        </div>
                                    </div>
                                    <div class="comment-text d-flex flex-fill flex-column">
                                        <div class="comment-info d-flex align-items-center mb-1">
                                            <div class="comment-author text-sm">
                                                辄夜花泽                                            </div>
                                        </div>
                                        <div class="comment-content d-inline-block text-sm">
                                            <p>轻轻地来,轻轻地走</p>
                                        </div>
                                        <!-- .comment-content -->
                                        <div class="d-flex flex-fill text-xs text-muted pt-2">
                                            <div>
                                                <time class="comment-date">5年前 </time></div>
                                            <div class="flex-fill"></div>
                                <!--    <a rel="nofollow" class="comment-reply-link" href="https://www.hankin.cn/liuyan#comment-84" onclick="return addComment.moveForm( &quot;comment-84&quot;, &quot;84&quot;, &quot;respond&quot;, &quot;1429&quot; )" aria-label="回复给itdog">回复</a>                </div>-->
                                    </div>

                                </article>
                            </li>
                                                    <div class="pagination"><li class="page-item disabled"><span class="page-link">&laquo;</span></li> <li class="active page-item disabled" ><span class="page-link">1</span></li><li class="page-item"><a class="page-link" href="/blog/index/message?page=2">2</a></li><li class="page-item"><a class="page-link" href="/blog/index/message?page=3">3</a></li><li class="page-item"><a class="page-link" href="/blog/index/message?page=4">4</a></li><li class="page-item"><a class="page-link" href="/blog/index/message?page=5">5</a></li><li class="page-item"><a class="page-link" href="/blog/index/message?page=6">6</a></li> <li class="page-item"><a class="page-link" href="/blog/index/message?page=2">&raquo;</a></li></div>

                        <!-- #comment-## -->
                    </ul>
                    <nav class="navigation comment-navigation u-textAlignCenter" data-fuck="1429">
                    </nav>
                </div>
            </div>
        </div>
        <!-- [ comments ] end -->
    </div>
    <!-- [ modal ] start -->
    <div class="modal fade bd-example-modal-lg" id="gratuityModal" tabindex="-1" role="dialog" aria-labelledby="gratuityModalLabel" style="display: none;" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="gratuityModalLabel">赞赏作者</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body p-0">
                    <div class="qr_pay">
                        <img src="/static/blog/static/picture/1code.jpg" class="qr_pay_alipay" style="display: none;height:500px;width:500px;">
                        <img src="/static/blog/static/picture/2code.jpg" class="qr_pay_wechatpay" style="display: block;height:500px;width:500px;">
                    </div>
                </div>
                <div class="modal-footer">
                    <p class="text-center text-muted">请通过微信、支付宝 APP 扫一扫 </p>
                    <p class="text-center text-muted">感谢您对作者的支持！</p>
                    <p class="text-center text-muted">
                        <a class="btn btn-primary btn-like btn-link-like2" href="javascript:void(0);" id="qr_pay_alipay_click">&nbsp;支付宝</a>
                        <a class="btn btn-success mt-3 mb-3" href="javascript:void(0);" id="qr_pay_wechatpay_click">微信支付</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <!-- [ modal ] end -->
    <script type='text/javascript' src='/static/blog/static/js/sweetalert.min.js?version=1763052229'></script>
    <script type="text/javascript" src="/static/blog/static/js/jquery.js?version=1763052229"></script>
    <script>
        var bb = document.getElementById('bb');
        num = 200;
        function check(obj){
            var msg = obj.value;
            str = num - msg.length;
            if(str<0){
                str = 0;
            }
            bb.innerHTML = str;
        }

        $(".qqnum").blur(function() {
            var qq = $(".qqnum").val();
            $.getJSON('http://blog.johnbin.cn/api/api/qqinfo', {qq: qq}, function (a) {
                if(a.code == 0){
                    swal(a.msg,{
                        icon : 'error',
                        buttons: {
                            confirm: {
                                className : 'btn btn-danger'
                            }
                        },
                    });
                }else{
                    $(".nick_name").html(a.nick_name); // QQ昵称
                    $(".email").val(a.email); // QQ昵称
                    $(".qqpic").attr('src', a.face); // QQ头像
                    //data
                    $("#avatar").val(a.face);
                    $("#nick_name").val(a.nick_name);
                    $("#email").val(a.email);
                    $("#qqnum").val(qq);
                }

            })

        })

        //留言/评论的游客选择
        var a = true;
        //   [ news ] start newsp
        $("#cancelq").click(function(){
            if(a==true){
                $("#qqShow").hide();
                $("#is_tourist").val(1)
                a = false;
            }else{
                $("#qqShow").show();
                $("#is_tourist").val(0)
                a = true;
            }
        })

        //   [ modal ] start coderp
        $("#qr_pay_alipay_click").click(function(){
            $(".qr_pay_wechatpay").hide();
            $(".qr_pay_alipay").css({"display":"block"});
        });
        $("#qr_pay_wechatpay_click").click(function(){
            $(".qr_pay_wechatpay").css({"display":"block"});
            $(".qr_pay_alipay").hide();
        });
        //    [ modal ] end

        //点赞
        var code = 9999826999        //点赞
        $('#like_clicks').click(function(e) {
            $.post("http://blog.johnbin.cn/blog/index/thumbs",{"code":code},function(data){
                if(data.num){
                    $(".click_nums").html(data.num);
                }
                swal(data.msg,{
                    icon : data.icon,
                    buttons: {
                        confirm: {
                            className : data.className
                        }
                    },
                });
            });
        });

        //留言
        $('#submit').click(function(e) {
            var avatar = $("#avatars")[0].src;
            var nick_name = $("#nick_name").val();
            var email = $("#email").val();
            var qqnum = $("#qqnum").val();
            var comment = $("#comment").val();
            var link = $("#link").val();
            var is_tourist = $("#is_tourist").val();
            $.post("http://blog.johnbin.cn/blog/index/tomessage",{"avatar":avatar,"comment":comment,"nick_name":nick_name,"email":email,"qqnum":qqnum,"link":link,"is_tourist":is_tourist},function(data){
                // console.log(data)
                swal(data.msg,{
                    icon : data.icon,
                    buttons: {
                        confirm: {
                            className : data.className
                        }
                    },
                });

            });
        });
    </script>
    <!-- [ modal ] end -->

            <!--中部内容 -->
            <div class="col-md-4">
                <!-- [ sidebar ] start -->
                <div class="theiaStickySidebar animated fadeIn" style="padding-top: 0px; padding-bottom: 1px; position: relative; transform: none;">
                    
                        <!--引入总览-->
                        <!--总览-->
<!--<div id="recommended_posts">-->
    <!--<div class="card card-sm widget Recommended_Posts cs_widget_author">-->
        <!--<div id="author_card-5" class="card-sm widget Author_Card">-->
            <!--<div class="widget-author-cover">-->
                <!--<div class="media media-2x1">-->
                    <!--<div class="media-content" style="background-image:url(/static/blog/static/image/default-cover.jpg)"></div>-->
                <!--</div>-->
                <!--<div class="widget-author-avatar">-->
                    <!--<div class="flex-avatar mx-2 w-80 border border-white border-2">-->
                        <!--<img src="/static/blog/static/picture/avatarx108.png" style="width:80px;height:80px;">-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->
            <!--<div class="widget-author-meta text-center p-4">辄夜花泽-->
                <!--<div class="h6 mb-3 text-lg text-c-blue"></div>-->
                <!--<div class="desc text-xs mb-3 h-2x ">-->
                    <!--成功就是妥协与两难的坚持。-->
                    <!--<br>-->
                    <!--你的优秀不需要任何人来证明，要学会欣赏自己。-->
                    <!--&lt;!&ndash;<a target="_blank" href="javascript:;">&ndash;&gt;-->
                        <!--&lt;!&ndash;<img src="/static/blog/static/picture/GitHub-10-yellow-social_github.jpg" alt='github'>&ndash;&gt;-->
                    <!--&lt;!&ndash;</a>&ndash;&gt;-->
                    <!--&lt;!&ndash;<a href='javascript:;'>&ndash;&gt;-->
                        <!--&lt;!&ndash;<img src='/static/blog/static/picture/star-gray.jpg' alt='star'>&ndash;&gt;-->
                    <!--&lt;!&ndash;</a>&ndash;&gt;-->
                <!--</div>-->
                <!--<div class="row no-gutters text-center">-->
                    <!--<a href="" class="col">-->
                        <!--<span class="font-theme font-weight-bold text-md">56</span>-->
                        <!--<small class="d-block text-xs text-muted">文章</small>-->
                    <!--</a>-->
                    <!--<a href="" class="col">-->
                        <!--<span class="font-theme font-weight-bold text-md">28</span>-->
                        <!--<small class="d-block text-xs text-muted">评论</small>-->
                    <!--</a>-->
                    <!--<a href="" class="col">-->
                        <!--<span class="font-theme font-weight-bold text-md">257666</span>-->
                        <!--<small class="d-block text-xs text-muted">浏览</small>-->
                    <!--</a>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->


<div id="recommended_posts">
    <div class="card card-sm widget Recommended_Posts cs_widget_author">

        <style>
            .swiper-pagination-bullet{width: 5px;height: 5px;display: inline-block;background: #fdfdfd;opacity: .6;border-radius:10px;transition: all .2s ease-in-out;}
            .swiper-pagination-bullet-active{opacity: 1;background: #fff;width:25px}
            .swiper-button-prev{transition: all .2s ease-in-out;}
            .swiper-button-next{transition: all .2s ease-in-out;}
            .swiper-container:hover .swiper-button-prev{left:0;opacity:1}
            .swiper-container:hover .swiper-button-next{right:0;opacity:1}
            .swiper-container{width: 100%!important;height: 11rem;overflow: hidden;border-radius:3px 3px 0px 0px;}
            .swiper-content{border:0;margin-bottom: 0;background:rgba(255,255,255,.15);padding-bottom: 0;border-radius: 0}
            .swiper-pagination{text-align:right!important;}
            .swiper-container-horizontal>.swiper-pagination-bullets{bottom:0!important}
            .swiper-button-next, .swiper-button-prev{height:20px!important;margin-top:0px!important}
            .swiper-button-next{right:-15px;}
            .swiper-button-prev{left:-15px;}
            .swiper-slide{width:100%;height:100%;}
        </style>
        <div class="panel wrapper-md swiper-content">
            <div class="swiper-container border-radius swiper-container-horizontal">
                <div class="swiper-wrapper" style="transform: translate3d(-674px, 0px, 0px); transition-duration: 0ms;">
                                            <div class="swiper-slide media-content" style="background: url(http://blog.johnbin.cn/upload/admin/20181229/acbe8087fefc808245cc28f9d558c230.jpg) 0% 0% / cover; width: 337px;" data-swiper-slide-index="0">
                        </div>
                                            <div class="swiper-slide media-content" style="background: url(http://blog.johnbin.cn/upload/admin/20181229/61688a450a5f9e7a15a953a073e7b672.jpg) 0% 0% / cover; width: 337px;" data-swiper-slide-index="1">
                        </div>
                                            <div class="swiper-slide media-content" style="background: url(http://blog.johnbin.cn/upload/admin/20200629/3631b434073594c371c3ef2a0d5244d7.jpg) 0% 0% / cover; width: 337px;" data-swiper-slide-index="2">
                        </div>
                                            <div class="swiper-slide media-content" style="background: url(http://blog.johnbin.cn/upload/admin/20181229/a9af4df3f4bf35d4beca1958bcc071f5.jpg) 0% 0% / cover; width: 337px;" data-swiper-slide-index="3">
                        </div>
                                            <div class="swiper-slide media-content" style="background: url(http://blog.johnbin.cn/upload/admin/20200629/a5bca4253a799b8310628918a26e9ae1.png) 0% 0% / cover; width: 337px;" data-swiper-slide-index="4">
                        </div>
                                    </div>

                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-next swiper-button-white"></div>
                <div class="swiper-button-prev swiper-button-white"></div>

                <!-- 如果需要滚动条 -->
                <!-- <div class="swiper-scrollbar"></div>-->


            </div>
        </div>
        <div id="author_card-5" class="card-sm widget Author_Card">
            <div class="widget-author-cover">
                <div class="widget-author-avatar" style="z-index:1;">
                    <div class="flex-avatar mx-2 w-80 border border-white border-2">
                        <img class="wid-80 hei80" src="/static/blog/static/picture/avatarx108.png">
                    </div>
                </div>
            </div>
            <div class="widget-author-meta text-center pt-4 pl-4 pr-4 pb-2">辄夜花泽                <div class="h6 mb-3 text-lg text-c-blue"></div>
                <div class="desc text-xs mb-3 h-2x ">
                    成功就是妥协与两难的坚持。
                    <br>
                    你的优秀不需要任何人来证明，要学会欣赏自己。
                    <!--<a target="_blank" href="javascript:;">-->
                    <!--<img src="/static/blog/static/picture/GitHub-10-yellow-social_github.jpg" alt='github'>-->
                    <!--</a>-->
                    <!--<a href='javascript:;'>-->
                    <!--<img src='/static/blog/static/picture/star-gray.jpg' alt='star'>-->
                    <!--</a>-->
                </div>
                <div class="row no-gutters text-center">
                    <a href="javascript:void(0);" class="col">
                        <span class="font-theme font-weight-bold text-md">56</span>
                        <small class="d-block text-xs text-muted">文章</small>
                    </a>
                    <a href="javascript:void(0);" class="col">
                        <span class="font-theme font-weight-bold text-md">28</span>
                        <small class="d-block text-xs text-muted">评论</small>
                    </a>
                    <a href="javascript:void(0);" class="col">
                        <span class="font-theme font-weight-bold text-md click_nums">2425</span>
                        <small class="d-block text-xs text-muted">点赞</small>
                    </a>
                    <a href="javascript:void(0);" class="col">
                        <span class="font-theme font-weight-bold text-md">95066</span>
                        <small class="d-block text-xs text-muted">浏览</small>
                    </a>
                </div>
            </div>
<!--            <hr class="b-wid-1 my-1" id="i_social_hr">-->
<!--            <div class="row no-gutters text-center pt-2 pb-2" id="i_social">-->
<!--                <a class="col" href="https://www.hankin.cn/" data-toggle="tooltip" data-placement="bottom" title="微信：wojiaohanhanjun">-->
<!--                    <i class="fa fa-weixin"></i>-->
<!--                </a>-->
<!--                <a class="col" href="http://weibo.com/u/3056395237" target="_blank" data-toggle="tooltip" data-placement="bottom" title="微博：Hankin-han">-->
<!--                    <i class="fa fa-weibo"></i>-->
<!--                </a>-->
<!--                <a class="col" href="https://wpa.qq.com/msgrd?v=3&amp;uin=315444473&amp;site=qq&amp;menu=yes" target="_blank" data-toggle="tooltip" data-placement="bottom" title="QQ：315444473">-->
<!--                    <i class="fa fa-qq"></i>-->
<!--                </a>-->
<!--                <a class="col" href="https://github.com/hankin-han" target="_blank" data-toggle="tooltip" data-placement="bottom" title="Github：hankin-han">-->
<!--                    <i class="fa fa-github-alt"></i>-->
<!--                </a>-->
<!--            </div>-->
        </div>
    </div>
</div>
                        <!--引入联系方式-->
                        <!--联系方式-->
<div id="recommended_posts">
    <div class="card card-sm widget Recommended_Posts cs_widget_link">
        <div class="card-header widget-header">加QQ群697360424<i class="bg-primary"></i>
        </div>
        <div class="textwidget">
            <a href="">
                <img src="http://blog.johnbin.cn/upload/admin/20200410/075f379c4d6bd6530b5d8bb28d79947e.jpg"></a>
        </div>
    </div>
</div>
                        <!--引入随机文章-->
                        <div id="recommended_posts">
    <div id="recommended_posts_1" class="card card-sm widget Recommended_Posts">
        <div class="card-header widget-header">随机文章<i class="bg-primary"></i>
        </div>
        <div class="card-body">
            <!-- 大图文章 -->
                        <div class="list-rounded my-n2">
                <div class="py-2">
                    <div class="list-item list-overlay-content">
                        <div class="media media-2x1">
                            <a class="media-content" href="http://blog.johnbin.cn/blog/index/info/code/67353298" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190101/02be05302883f8ed5cfdea4f4d10673e.jpg')">
                                <span class="overlay"></span>
                            </a>
                        </div>
                        <div class="list-content">
                            <div class="list-body">
                                <a href="http://blog.johnbin.cn/blog/index/info/code/67353298" class="list-title h-2x">
                                    5.20 我想对你说                                </a>
                            </div>
                            <div class="list-footer">
                                <div class="text-muted text-xs">
                                    <time class="d-inline-block">7年前</time>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                        <!-- 小图文章 -->
                        <div class="list-grid list-rounded">
                <div class="list-item py-2">
                    <div class="list-content py-0 mr-3">
                        <div class="list-body">
                            <a href="http://blog.johnbin.cn/blog/index/info/code/671469951" class="list-title h-2x">
                                正则表达式查询表                            </a>
                        </div>
                        <div class="list-footer">
                            <div class="text-muted text-xs">
                                <time class="d-inline-block">7年前</time>
                            </div>
                        </div>
                    </div>
                    <div class="media media-3x2 col-4">
                        <a class="media-content" href="http://blog.johnbin.cn/blog/index/info/code/671469951" style="background-image:url('http://blog.johnbin.cn/upload/admin/20181112/995ff774462db5df0e281d575ec7a62d.png')"></a>
                    </div>
                </div>
            </div>
                        <div class="list-grid list-rounded">
                <div class="list-item py-2">
                    <div class="list-content py-0 mr-3">
                        <div class="list-body">
                            <a href="http://blog.johnbin.cn/blog/index/info/code/553439865" class="list-title h-2x">
                                TP5.0完全开发手册                            </a>
                        </div>
                        <div class="list-footer">
                            <div class="text-muted text-xs">
                                <time class="d-inline-block">7年前</time>
                            </div>
                        </div>
                    </div>
                    <div class="media media-3x2 col-4">
                        <a class="media-content" href="http://blog.johnbin.cn/blog/index/info/code/553439865" style="background-image:url('http://blog.johnbin.cn/upload/admin/20181112/2167392ea890bcf2740d5edb16f10eca.png')"></a>
                    </div>
                </div>
            </div>
                        <div class="list-grid list-rounded">
                <div class="list-item py-2">
                    <div class="list-content py-0 mr-3">
                        <div class="list-body">
                            <a href="http://blog.johnbin.cn/blog/index/info/code/388204790" class="list-title h-2x">
                                JQ1.72手册                            </a>
                        </div>
                        <div class="list-footer">
                            <div class="text-muted text-xs">
                                <time class="d-inline-block">7年前</time>
                            </div>
                        </div>
                    </div>
                    <div class="media media-3x2 col-4">
                        <a class="media-content" href="http://blog.johnbin.cn/blog/index/info/code/388204790" style="background-image:url('http://blog.johnbin.cn/upload/admin/20181114/bcf2b2a0e13abd67d82aadd6e3eb0a7d.png')"></a>
                    </div>
                </div>
            </div>
                        <div class="list-grid list-rounded">
                <div class="list-item py-2">
                    <div class="list-content py-0 mr-3">
                        <div class="list-body">
                            <a href="http://blog.johnbin.cn/blog/index/info/code/75111707" class="list-title h-2x">
                                关于TP5中request的请求方法                            </a>
                        </div>
                        <div class="list-footer">
                            <div class="text-muted text-xs">
                                <time class="d-inline-block">7年前</time>
                            </div>
                        </div>
                    </div>
                    <div class="media media-3x2 col-4">
                        <a class="media-content" href="http://blog.johnbin.cn/blog/index/info/code/75111707" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190101/b7f743a86a58d2e765adb90e6efaa059.jpg')"></a>
                    </div>
                </div>
            </div>
                        <div class="list-grid list-rounded">
                <div class="list-item py-2">
                    <div class="list-content py-0 mr-3">
                        <div class="list-body">
                            <a href="http://blog.johnbin.cn/blog/index/info/code/783417999" class="list-title h-2x">
                                自适应欧美风个人博客模板                            </a>
                        </div>
                        <div class="list-footer">
                            <div class="text-muted text-xs">
                                <time class="d-inline-block">7年前</time>
                            </div>
                        </div>
                    </div>
                    <div class="media media-3x2 col-4">
                        <a class="media-content" href="http://blog.johnbin.cn/blog/index/info/code/783417999" style="background-image:url('http://blog.johnbin.cn/upload/admin/20181112/c712487ebe850f6653df7650a367e65b.png')"></a>
                    </div>
                </div>
            </div>
                        <div class="list-grid list-rounded">
                <div class="list-item py-2">
                    <div class="list-content py-0 mr-3">
                        <div class="list-body">
                            <a href="http://blog.johnbin.cn/blog/index/info/code/67353298" class="list-title h-2x">
                                5.20 我想对你说                            </a>
                        </div>
                        <div class="list-footer">
                            <div class="text-muted text-xs">
                                <time class="d-inline-block">7年前</time>
                            </div>
                        </div>
                    </div>
                    <div class="media media-3x2 col-4">
                        <a class="media-content" href="http://blog.johnbin.cn/blog/index/info/code/67353298" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190101/02be05302883f8ed5cfdea4f4d10673e.jpg')"></a>
                    </div>
                </div>
            </div>
                        <div class="list-grid list-rounded">
                <div class="list-item py-2">
                    <div class="list-content py-0 mr-3">
                        <div class="list-body">
                            <a href="http://blog.johnbin.cn/blog/index/info/code/865459597" class="list-title h-2x">
                                W3C新手入门手册                            </a>
                        </div>
                        <div class="list-footer">
                            <div class="text-muted text-xs">
                                <time class="d-inline-block">7年前</time>
                            </div>
                        </div>
                    </div>
                    <div class="media media-3x2 col-4">
                        <a class="media-content" href="http://blog.johnbin.cn/blog/index/info/code/865459597" style="background-image:url('http://blog.johnbin.cn/upload/admin/20181112/68b938e56d0f14093118301674afe913.jpg')"></a>
                    </div>
                </div>
            </div>
                    </div>
    </div>
</div>
                        <!--引入tags标签-->
                        <!--标签-->
<div id="recommended_posts">
    <div class="card card-sm widget Recommended_Posts widget_tag_cloud">
        <div class="card-header widget-header">tags<i class="bg-primary"></i></div>
        <div class="tagcloud">
                            <a href="http://blog.johnbin.cn/blog/index/category/code/777192611" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="视频">视频</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/734137683" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="Laravel">Laravel</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/701176514" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="工具">工具</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/45917434" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="PHP">PHP</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/20125912" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="Html">Html</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/34533430" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="Ajax">Ajax</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/52841698" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="Javascript">Javascript</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/70656814" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="Linux">Linux</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/66362692" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="Mysql">Mysql</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/70878573" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="小程序">小程序</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/97688234" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="Api">Api</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/80998220" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="Ecshop">Ecshop</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/267109849" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="Web">Web</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/745114309" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="Jquery">Jquery</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/630126983" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="ThinkPHP">ThinkPHP</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/628147134" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="Yii">Yii</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/790151821" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="辄夜花泽">辄夜花泽</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/618169803" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="手册">手册</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/662183728" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="源码">源码</a>
                            <a href="http://blog.johnbin.cn/blog/index/category/code/440202696" class="tag-cloud-link tag-link-22 tag-link-position-1" style="font-size: 8pt;" aria-label="模板">模板</a>
                    </div>
    </div>
</div>
                    
                </div>
             <!-- [ sidebar ] end -->
             </div>
        </div>
    </div>
    <!--引入copyright-->
    <!-- [ copyright ] start -->
<footer class="footer card py-3 py-lg-3">
    <div class="container">
        <div class="d-md-flex flex-md-fill align-items-md-center">
            <div class="d-md-flex flex-md-column">
                <div class="footer-copyright text-xs px-3">
                    Copyright © 2021 <a href="http://blog.johnbin.cn/blog/index/index" title="辄夜花泽" rel="home">辄夜花泽技术博客</a>. Design of <a href="http://blog.johnbin.cn/blog/index/index" title="辄夜花泽" target="_blank">Chasel</a>
                </div>
            </div>
            <div class="flex-md-fill"></div>
        </div>
    </div>
</footer>
<!-- [ copyright ] end -->
    <!--引入tab按钮-->
    <!--tab按钮-->
<div class="mobile-btn clearfix">
    <div class="menu">
        <div class="bt-name"><a href="http://blog.johnbin.cn/blog/index/index"><i class="feather icon-home"></i>主页</a></div>
    </div>
    <div class="menu">
        <div class="bt-name"><i class="feather icon-file"></i>导航</div>
        <div class="sanjiao"></div>
        <div class="new-sub">
            <ul>
                <div>
                    <li class="page_item page-item-1423"><a href="http://blog.johnbin.cn/blog/index/topics">专题</a></li>
                    <li class="page_item page-item-1429"><a href="http://blog.johnbin.cn/blog/index/message">留言</a></li>
                </div>
            </ul>
        </div>
    </div>
    <div class="menu">
        <div class="bt-name"><a href="javascript:;"><i class="feather icon-user"></i>博主</a></div>
        <div class="new-sub user-info">
            <div class="bg-dark-overlay pt-4 pt-md-5 bg-relative">
                <div class="bg" style="background-image: url(/static/blog/static/picture/avatar.png)"></div>
                <div class="container-box">
                    <div class="d-flex flex-fill flex-column flex-md-row align-items-md-center py-md-5">
                        <div class="mb-3 mb-md-0">
                            <div class="flex-avatar mx-2 w-80 border border-white border-2 ">
                                <img alt='辄夜花泽' src='/static/blog/static/picture/avatar.png' class='avatar avatar-80 photo wid-80 hei-80'>
                            </div>
                            <div class="name text-lg text-left">阿泽泽                                <i class="cut"></i>
                                <span class="badge badge-rank badge-primary text-xs mx-1">博主</span></div>
                            <div class="desc text-sm mt-2 clear-lineheight text-left">纸上得来终觉浅,绝知此事要躬行~</div>
                        </div>
                        <div class="text-white mx-md-4 flex-fill">
                            <div class="data text-lg mt-2 text-left clear-lineheight">
                                        <span class="mr-3">
                                            <a href="" class="">
                                                <span class="font-theme text-lg text-xl text-white">56</span>
                                                <small class=" text-xs text-light mx-1">文章</small></a>
                                        </span>
                                <span class="mr-3">
                                            <a href="" class="">
                                                <span class="font-theme text-lg text-xl text-white">28</span>
                                                <small class=" text-xs text-light mx-1">评论</small></a>
                                        </span>
                                <span class="mr-3">
                                            <a class="">
                                                <span class="font-theme text-lg text-xl text-white">95066</span>
                                                <small class=" text-xs text-light mx-1">浏览</small></a>
                                        </span>
                            </div>
                            <div style="margin-top:.2rem;padding-bottom: .2rem;border-bottom: solid .01rem rgba(255,255,255,.15);"></div>
                        </div>
                    </div>
                </div>
                <div class="user-tab clearfix">
                    <div class="tab-list">
                        <div class="tab-name"><a class="active" id="Blog" href="javascript:;">博客详情</a></div>
                    </div>
                    <div class="tab-list">
                        <div class="tab-name"><a id="Blogger" href="javascript:;">博主详情</a></div>
                    </div>
                </div>
                <div class="user-tab-body">

                </div>
            </div>
        </div>
    </div>
</div>
</section>
<!--引入尾部-->
<!-- [ Main Content ] end --><!--定义全局变量-->
<script type="text/javascript" src="/static/blog/static/js/jweixin-1.4.0.js?version=1763052229"></script>
<script type="text/javascript">
    window.THEME_URL = 'http://blog.johnbin.cn/static/blog/static';
    window.ENCODE_URI_COMPONENT_TITLE = document.title;
    //自定义二维码内容
    window.ENCODE_URI_COMPONENT_LINK = this.location.href;
    window.ENCODE_URI_COMPONENT_IMAGE = 'http://blog.johnbin.cn/static/blog/static/image/shortcut_icon.png';
    window.ENCODE_URI_COMPONENT_DESC = '辄夜花泽, 自适应主题，响应式主题，个人博客模板，工具下载，主题分享，博客模板，个人网站模板，技术分享，功能开发，前端技术，后端技术';
    window.ENCODE_URI_COMPONENT_SITE = '辄夜花泽, 自适应主题，响应式主题，个人博客模板，工具下载，主题分享，博客模板，个人网站模板，技术分享，功能开发，前端技术，后端技术';
//    window.APPID = 'wxffb0fb7d45027810';
//    window.TIMESTAMP = '1573052310';
//    window.NONCESTR = 'XEwJ4siahSehOnR';
//    window.SIGNATURE = 'b53ebb56b4cd487c6d9aae5c3880281644e81c83';
//    window.IS_PAGE_SINGLE = 0;
</script>
<script type="text/javascript">
    wxConfig = {
        title : document.title,
        desc : window.ENCODE_URI_COMPONENT_DESC,
        link : window.ENCODE_URI_COMPONENT_LINK,
        imgUrl : window.ENCODE_URI_COMPONENT_IMAGE,
    };
    playerConfig = {
    autoplay : true,
    ids : 2693957935,
    }
</script>
<script type="text/javascript" src="/static/blog/static/js/wxShare.js?version=1763052229"></script>
<script type="text/javascript" src="/static/blog/static/js/jquery.js?version=1763052229"></script>
<script type="text/javascript" src="/static/blog/static/js/jquery.cookie.js?version=1763052229"></script>
<script type="text/javascript" src="/static/blog/static/js/bootstrap.min.js?version=1763052229"></script>
<script type="text/javascript" src="/static/blog/static/js/menu-setting.min.js?version=1763052229"></script>
<script type="text/javascript" src="/static/blog/static/js/clipboard.min.js?version=1763052229"></script>
<script type="text/javascript" src="/static/blog/static/js/main.js?version=1763052229"></script>
<script type="text/javascript" src="/static/blog/static/js/pjax.js?version=1763052229"></script>
<script type="text/javascript" src="/static/blog/static/js/swiper.min.js?version=1763052229"></script>
<!-- 分享插件 start-->
<div id="cz-leftside-share"></div>
<script type="text/javascript" src="/static/blog/static/js/jquery.share.min.js?version=1763052229"></script>
<!-- 分享插件 end-->
<!-- 音乐播放器 start-->
<div class="aplayer-footer"><div class="ap-f" id="ap-f"></div></div>
<link rel="stylesheet" type="text/css" href="/static/blog/static/css/play.css?version=1763052229">
<script src="/static/blog/static/js/aplayer.min.js?version=1763052229"></script>
<!-- 音乐播放器 start-->
<script type='text/javascript' src='/static/blog/static/js/jquery.infinitescroll.min.js?version=1763052229'></script>
<script type='text/javascript' src='/static/blog/static/js/wp-embed.min-4.9.4.js?version=1763052229'></script>
<!--弹窗-->
<script type='text/javascript' src='/static/blog/static/js/sweetalert.min.js?version=1763052229'></script>
<script>
    //swiper轮播
    var mySwiper = new Swiper('.swiper-container',{
        speed:2500,
        autoplay: {
            delay: 2500,
            disableOnInteraction: false,
            waitForTransition: false,
        },
        loop : true,
        // navigation: {
        //     nextEl: '.swiper-button-next',
        //     prevEl: '.swiper-button-prev',
        // },

        //s3
        pagination: '.swiper-pagination',
        paginationClickable: true,
        prevButton:'.swiper-button-prev',
        nextButton:'.swiper-button-next',
        // pagination:{
        //     el: '.swiper-pagination',
        //     hideOnClick :true,
        // },
    })


//    var text=document.title;//获得页面的标题
//    var timerID;//定时器
//    function newtext() {
//        clearTimeout(timerID);
//        document.title=text.substring(1,text.length)+text.substring(0,1);//截取字符重新赋值给title
//        text=document.title.substring(0,text.length);
//        timerID = setTimeout("newtext()", 500);
//    }
//    window.onload=function(){
//        newtext();
//    }
</script>

</body>
</html>