<!--引入头部-->


<!--
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◆◆◆◆◆◆◆◆◇◇◇◇◇◇
◇◇◇◇◇◇◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇
◇◇◇◆◆◆◆◆◆◆◆◆◆◆◆◆◇◆◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◆◆◆◆◆◇◇◇◇◇◆◇◇◇◆◇◆◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◆◆◆◆◇◇◇◇◆◇◇◇◆◇◆◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◆◆◆◆◆◇◇◇◆◇◇◆◆◇◇◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◆◆◇◆◆◇◇◇◆◆◆◆◆◇◇◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◆◆◇◇◆◆◇◆◇◆◆◆◇◆◇◇◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◆◆◆◆◆◆◆◆◇◆◇◇◇◆◇◇◆◇◇◇◇◇◇◇◇◇
◇◇◇◆◆◆◆◆◆◆◆◆◇◆◇◆◆◆◇◇◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◆◇◇◇◆◆◇◇◇◆◆◆◆◆◇◇◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◆◇◆◇◆◆◆◇◆◇◇◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◆◆◆◆◆◇◇◇◆◆◆◆◇◇◇◆◇◇◇◇◇
◇◇◇◇◆◆◆◆◆◆◇◇◇◆◇◇◆◆◆◆◆◇◇◇◆◇◇◇◇◇
◇◇◆◆◆◆◆◆◆◇◇◇◇◆◆◆◆◆◇◆◆◇◇◇◆◆◇◇◇◇
◇◇◇◆◆◇◇◇◆◇◇◆◆◆◆◆◇◆◇◆◆◇◇◇◆◆◇◇◇◇
◇◇◇◇◇◇◇◇◆◇◆◆◆◆◇◇◇◆◇◆◆◇◇◇◆◆◇◇◇◇
◇◇◇◇◇◇◇◇◆◇◇◆◇◇◇◇◆◆◇◇◆◆◇◆◆◆◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◆◆◇◇◆◆◆◆◆◆◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◆◆◇◇◇◇◆◆◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◆◆◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◆◆◆◆◆◆◆◆◆◆◆◆◆◆◇◇◇◇◇
◇◇◇◇◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇
◇◇◇◇◇◆◆◆◆◆◆◆◇◇◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◆◆◆◇◇◆◆◆◇◇◇◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◆◆◇◇◇◆◆◇◇◇◆◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◆◇◇◇◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◆◇◇◇◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◆◆◆◆◇◇◆◆◆◆◇◇◇◆◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◆◆◆◆◆◇◇◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◆◆◆◇◆◆◇◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◆◆◆◇◇◆◆◇◆◆◆◆◇◆◆◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◆◆◇◇◇◇◆◆◆◆◇◆◆◆◇◆◆◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◆◆◆◇◇◆◆◆◆◆◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◆◆◆◆◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◇◇◇◇◇◆◆◇◆◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◇◇◆◆◇◇◇◆◆◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◇◆◆◇◇◇◇◇◆◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◆◆◆◇◇◇◇◇◇◇◆◆◆◆◆◆◇◇◇◇
◇◇◇◇◇◇◇◆◆◆◆◆◇◇◇◇◇◇◇◇◆◆◆◆◆◆◇◇◇◇
◇◇◇◇◇◇◇◇◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◆◆◆◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◆◆◆◇◇◇◇◆◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◆◇◇◇◇◇◆◆◇◇◇◆◆◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◆◆◆◆◆◆◆◆◆◆◆◆◆◆◇◇◇◇◇
◇◇◇◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◆◆◆◆◆◆◆◆◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◆◆◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◆◆◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◆◆◇◇◇◆◆◆◇◇◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◆◆◆◇◇◆◆◆◇◇◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◆◆◆◇◇◇◇◆◇◇◆◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◆◆◇◇◇◇◇◆◇◇◆◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◆◆◇◇◇◇◇◆◇◆◆◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◆◆◆◆◆◇◇◇◇◇◆◆◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◆◆◆◇◆◆◇◇◇◇◆◆◆◆◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◆◆◆◇◇◆◇◇◇◇◆◆◆◆◇◇◇◇◇◇◆◇◇◇◇◇
◇◇◇◆◆◆◇◇◇◆◇◇◆◆◆◆◆◇◇◇◇◇◇◇◆◆◇◇◇◇
◇◇◇◆◆◇◇◇◇◆◇◆◆◆◇◇◆◇◇◇◇◇◇◇◆◆◇◇◇◇
◇◇◇◇◇◇◇◇◇◆◇◆◆◇◇◇◆◇◇◇◇◇◇◇◆◆◇◇◇◇
◇◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◆◇◇◇◇◇◇◇◆◆◇◇◇◇
◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◆◆◇◇◇◇◆◆◆◆◇◇◇◇
◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◆◆◆◆◆◆◆◆◆◆◇◇◇◇
◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◆◆◆◆◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◆◆◆◇◆◆◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◆◇◆◆◆◆◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◆◆◆◇◇◇◆◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◆◇◇◇◆◆◆◇◆◆◆◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◆◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◆◇◇◇◇◇◆◇◇◇◇◆◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◆◆◆◇◇◆◆◇◇◇◆◆◆◆◆◆◆◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◆◆◆◇◆◆◇◇◆◆◆◆◇◇◆◆◆◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◆◆◇◆◆◆◆◆◆◇◆◆◇◇◆◆◆◆◆◆◆◇◇◇◇
◇◇◇◇◇◇◆◇◆◆◆◆◇◇◇◆◆◇◇◇◆◆◆◆◆◆◇◇◇◇
◇◇◇◇◇◇◇◆◆◆◆◇◇◇◇◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◆◆◆◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◆◆◇◇◆◆◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◆◆◇◇◇◇◇◇◆◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇
◇◇◇◇◇◇◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◇◇◇◇◇◇◇
◇◇◆◆◆◆◆◇◆◆◆◆◆◆◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◆◆◆◆◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◆◆◆◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◆◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◆◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◆◇◇◇◇◇◇◇◇◇◇◇◇◇◇
◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇◇
辄夜花泽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=1714176653">
    <link rel="stylesheet" href="/static/blog/static/css/code.css?version=1714176653">
    <link rel="stylesheet" href="/static/blog/static/css/main.css?version=1714176653">
    <link rel="stylesheet" href="/static/blog/static/css/font-awesome.min.css?version=1714176653"> <!-- awesome-->
    <link rel="stylesheet" href="/static/blog/static/css/swiper.min.css?version=1714176653">  <!-- 轮播图-->
    <!--<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=1714176653"></script>
    <script type='text/javascript' src='/static/blog/static/js/jquery-1.12.4.js?version=1714176653'></script>
    <script type='text/javascript' src='/static/blog/static/js/jquery-migrate.min-1.4.1.js?version=1714176653'></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-12">
        <!-- [ list ] start -->
        <main class="h-v-75">
            <div class="container">
                <div class="row list-grouped">
                                        <div class="col-md-4">
                        <div class="list-item block">
                            <div class="media media-21x9">
                                <a class="media-content" href="http://blog.johnbin.cn/blog/index/category/code/777192611" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190112/cf78ebf03a2583378c50437008156d2b.jpg')"></a>
                                <div class="media-overlay overlay-top p-3">
                                    <small>
                                        <i class="text-xl iconfont icon-file-text-line"></i>
                                    </small>
                                    <span class="h1 font-theme">1</span></div>
                            </div>
                            <div class="list-content">
                                <div class="list-body ">
                                    <a href="http://blog.johnbin.cn/blog/index/category/code/777192611" class="list-title text-md">视频</a>
                                    <div class="list-desc text-xs text-muted h-2x mt-2">好咖啡要和朋友一起品尝，快乐也要和同样喜欢它的人一起分享。</div></div>
                            </div>
                        </div>
                    </div>
                                        <div class="col-md-4">
                        <div class="list-item block">
                            <div class="media media-21x9">
                                <a class="media-content" href="http://blog.johnbin.cn/blog/index/category/code/734137683" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190112/50a678da9a5d31ef67b635ebf0512984.jpg')"></a>
                                <div class="media-overlay overlay-top p-3">
                                    <small>
                                        <i class="text-xl iconfont icon-file-text-line"></i>
                                    </small>
                                    <span class="h1 font-theme">0</span></div>
                            </div>
                            <div class="list-content">
                                <div class="list-body ">
                                    <a href="http://blog.johnbin.cn/blog/index/category/code/734137683" class="list-title text-md">Laravel</a>
                                    <div class="list-desc text-xs text-muted h-2x mt-2">好咖啡要和朋友一起品尝，快乐也要和同样喜欢它的人一起分享。</div></div>
                            </div>
                        </div>
                    </div>
                                        <div class="col-md-4">
                        <div class="list-item block">
                            <div class="media media-21x9">
                                <a class="media-content" href="http://blog.johnbin.cn/blog/index/category/code/701176514" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190112/968c8cc5314c43fda31a6b041461d8ae.jpg')"></a>
                                <div class="media-overlay overlay-top p-3">
                                    <small>
                                        <i class="text-xl iconfont icon-file-text-line"></i>
                                    </small>
                                    <span class="h1 font-theme">10</span></div>
                            </div>
                            <div class="list-content">
                                <div class="list-body ">
                                    <a href="http://blog.johnbin.cn/blog/index/category/code/701176514" class="list-title text-md">工具</a>
                                    <div class="list-desc text-xs text-muted h-2x mt-2">好咖啡要和朋友一起品尝，快乐也要和同样喜欢它的人一起分享。</div></div>
                            </div>
                        </div>
                    </div>
                                        <div class="col-md-4">
                        <div class="list-item block">
                            <div class="media media-21x9">
                                <a class="media-content" href="http://blog.johnbin.cn/blog/index/category/code/45917434" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190112/d0a73f9febc306ee10e4e68e057c7f7e.jpg')"></a>
                                <div class="media-overlay overlay-top p-3">
                                    <small>
                                        <i class="text-xl iconfont icon-file-text-line"></i>
                                    </small>
                                    <span class="h1 font-theme">3</span></div>
                            </div>
                            <div class="list-content">
                                <div class="list-body ">
                                    <a href="http://blog.johnbin.cn/blog/index/category/code/45917434" class="list-title text-md">PHP</a>
                                    <div class="list-desc text-xs text-muted h-2x mt-2">好咖啡要和朋友一起品尝，快乐也要和同样喜欢它的人一起分享。</div></div>
                            </div>
                        </div>
                    </div>
                                        <div class="col-md-4">
                        <div class="list-item block">
                            <div class="media media-21x9">
                                <a class="media-content" href="http://blog.johnbin.cn/blog/index/category/code/20125912" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190112/ffec66c9d30bf749c1c9043940822d12.jpg')"></a>
                                <div class="media-overlay overlay-top p-3">
                                    <small>
                                        <i class="text-xl iconfont icon-file-text-line"></i>
                                    </small>
                                    <span class="h1 font-theme">0</span></div>
                            </div>
                            <div class="list-content">
                                <div class="list-body ">
                                    <a href="http://blog.johnbin.cn/blog/index/category/code/20125912" class="list-title text-md">Html</a>
                                    <div class="list-desc text-xs text-muted h-2x mt-2">好咖啡要和朋友一起品尝，快乐也要和同样喜欢它的人一起分享。</div></div>
                            </div>
                        </div>
                    </div>
                                        <div class="col-md-4">
                        <div class="list-item block">
                            <div class="media media-21x9">
                                <a class="media-content" href="http://blog.johnbin.cn/blog/index/category/code/34533430" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190112/3564afb6c64464f059e598582c3e12ac.jpg')"></a>
                                <div class="media-overlay overlay-top p-3">
                                    <small>
                                        <i class="text-xl iconfont icon-file-text-line"></i>
                                    </small>
                                    <span class="h1 font-theme">1</span></div>
                            </div>
                            <div class="list-content">
                                <div class="list-body ">
                                    <a href="http://blog.johnbin.cn/blog/index/category/code/34533430" class="list-title text-md">Ajax</a>
                                    <div class="list-desc text-xs text-muted h-2x mt-2">好咖啡要和朋友一起品尝，快乐也要和同样喜欢它的人一起分享。</div></div>
                            </div>
                        </div>
                    </div>
                                        <div class="col-md-4">
                        <div class="list-item block">
                            <div class="media media-21x9">
                                <a class="media-content" href="http://blog.johnbin.cn/blog/index/category/code/52841698" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190112/696cb2cd4dd06f77b84f5e386617a88f.jpg')"></a>
                                <div class="media-overlay overlay-top p-3">
                                    <small>
                                        <i class="text-xl iconfont icon-file-text-line"></i>
                                    </small>
                                    <span class="h1 font-theme">1</span></div>
                            </div>
                            <div class="list-content">
                                <div class="list-body ">
                                    <a href="http://blog.johnbin.cn/blog/index/category/code/52841698" class="list-title text-md">Javascript</a>
                                    <div class="list-desc text-xs text-muted h-2x mt-2">好咖啡要和朋友一起品尝，快乐也要和同样喜欢它的人一起分享。</div></div>
                            </div>
                        </div>
                    </div>
                                        <div class="col-md-4">
                        <div class="list-item block">
                            <div class="media media-21x9">
                                <a class="media-content" href="http://blog.johnbin.cn/blog/index/category/code/70656814" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190112/bcc4f6123e4046988bc66a3d7de795b4.jpg')"></a>
                                <div class="media-overlay overlay-top p-3">
                                    <small>
                                        <i class="text-xl iconfont icon-file-text-line"></i>
                                    </small>
                                    <span class="h1 font-theme">1</span></div>
                            </div>
                            <div class="list-content">
                                <div class="list-body ">
                                    <a href="http://blog.johnbin.cn/blog/index/category/code/70656814" class="list-title text-md">Linux</a>
                                    <div class="list-desc text-xs text-muted h-2x mt-2">好咖啡要和朋友一起品尝，快乐也要和同样喜欢它的人一起分享。</div></div>
                            </div>
                        </div>
                    </div>
                                        <div class="col-md-4">
                        <div class="list-item block">
                            <div class="media media-21x9">
                                <a class="media-content" href="http://blog.johnbin.cn/blog/index/category/code/66362692" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190112/396ed8efa6cd4a1184234126ecfdd0dd.jpg')"></a>
                                <div class="media-overlay overlay-top p-3">
                                    <small>
                                        <i class="text-xl iconfont icon-file-text-line"></i>
                                    </small>
                                    <span class="h1 font-theme">1</span></div>
                            </div>
                            <div class="list-content">
                                <div class="list-body ">
                                    <a href="http://blog.johnbin.cn/blog/index/category/code/66362692" class="list-title text-md">Mysql</a>
                                    <div class="list-desc text-xs text-muted h-2x mt-2">好咖啡要和朋友一起品尝，快乐也要和同样喜欢它的人一起分享。</div></div>
                            </div>
                        </div>
                    </div>
                                        <div class="col-md-4">
                        <div class="list-item block">
                            <div class="media media-21x9">
                                <a class="media-content" href="http://blog.johnbin.cn/blog/index/category/code/70878573" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190112/ddc4b17460c6f11f07fe71c0074be246.jpg')"></a>
                                <div class="media-overlay overlay-top p-3">
                                    <small>
                                        <i class="text-xl iconfont icon-file-text-line"></i>
                                    </small>
                                    <span class="h1 font-theme">0</span></div>
                            </div>
                            <div class="list-content">
                                <div class="list-body ">
                                    <a href="http://blog.johnbin.cn/blog/index/category/code/70878573" class="list-title text-md">小程序</a>
                                    <div class="list-desc text-xs text-muted h-2x mt-2">好咖啡要和朋友一起品尝，快乐也要和同样喜欢它的人一起分享。</div></div>
                            </div>
                        </div>
                    </div>
                                        <div class="col-md-4">
                        <div class="list-item block">
                            <div class="media media-21x9">
                                <a class="media-content" href="http://blog.johnbin.cn/blog/index/category/code/97688234" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190112/c6d6805d936929c3ac042fae53f75647.jpg')"></a>
                                <div class="media-overlay overlay-top p-3">
                                    <small>
                                        <i class="text-xl iconfont icon-file-text-line"></i>
                                    </small>
                                    <span class="h1 font-theme">1</span></div>
                            </div>
                            <div class="list-content">
                                <div class="list-body ">
                                    <a href="http://blog.johnbin.cn/blog/index/category/code/97688234" class="list-title text-md">Api</a>
                                    <div class="list-desc text-xs text-muted h-2x mt-2">好咖啡要和朋友一起品尝，快乐也要和同样喜欢它的人一起分享。</div></div>
                            </div>
                        </div>
                    </div>
                                        <div class="col-md-4">
                        <div class="list-item block">
                            <div class="media media-21x9">
                                <a class="media-content" href="http://blog.johnbin.cn/blog/index/category/code/80998220" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190112/849028823bd26c2656bbbdd4d22d18cb.jpg')"></a>
                                <div class="media-overlay overlay-top p-3">
                                    <small>
                                        <i class="text-xl iconfont icon-file-text-line"></i>
                                    </small>
                                    <span class="h1 font-theme">0</span></div>
                            </div>
                            <div class="list-content">
                                <div class="list-body ">
                                    <a href="http://blog.johnbin.cn/blog/index/category/code/80998220" class="list-title text-md">Ecshop</a>
                                    <div class="list-desc text-xs text-muted h-2x mt-2">好咖啡要和朋友一起品尝，快乐也要和同样喜欢它的人一起分享。</div></div>
                            </div>
                        </div>
                    </div>
                                        <div class="col-md-4">
                        <div class="list-item block">
                            <div class="media media-21x9">
                                <a class="media-content" href="http://blog.johnbin.cn/blog/index/category/code/267109849" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190112/412df7d9c8573998a0fd52cbcb545022.jpg')"></a>
                                <div class="media-overlay overlay-top p-3">
                                    <small>
                                        <i class="text-xl iconfont icon-file-text-line"></i>
                                    </small>
                                    <span class="h1 font-theme">1</span></div>
                            </div>
                            <div class="list-content">
                                <div class="list-body ">
                                    <a href="http://blog.johnbin.cn/blog/index/category/code/267109849" class="list-title text-md">Web</a>
                                    <div class="list-desc text-xs text-muted h-2x mt-2">好咖啡要和朋友一起品尝，快乐也要和同样喜欢它的人一起分享。</div></div>
                            </div>
                        </div>
                    </div>
                                        <div class="col-md-4">
                        <div class="list-item block">
                            <div class="media media-21x9">
                                <a class="media-content" href="http://blog.johnbin.cn/blog/index/category/code/745114309" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190112/18e8a5c552e046323fa89412ba65db53.jpg')"></a>
                                <div class="media-overlay overlay-top p-3">
                                    <small>
                                        <i class="text-xl iconfont icon-file-text-line"></i>
                                    </small>
                                    <span class="h1 font-theme">5</span></div>
                            </div>
                            <div class="list-content">
                                <div class="list-body ">
                                    <a href="http://blog.johnbin.cn/blog/index/category/code/745114309" class="list-title text-md">Jquery</a>
                                    <div class="list-desc text-xs text-muted h-2x mt-2">不管天气怎样，给自己的世界一片晴朗；不管季节变换，让自己的内心鸟语花香。</div></div>
                            </div>
                        </div>
                    </div>
                                        <div class="col-md-4">
                        <div class="list-item block">
                            <div class="media media-21x9">
                                <a class="media-content" href="http://blog.johnbin.cn/blog/index/category/code/630126983" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190112/5d039bbb3816a61930ca7dcf16350a61.jpg')"></a>
                                <div class="media-overlay overlay-top p-3">
                                    <small>
                                        <i class="text-xl iconfont icon-file-text-line"></i>
                                    </small>
                                    <span class="h1 font-theme">4</span></div>
                            </div>
                            <div class="list-content">
                                <div class="list-body ">
                                    <a href="http://blog.johnbin.cn/blog/index/category/code/630126983" class="list-title text-md">ThinkPHP</a>
                                    <div class="list-desc text-xs text-muted h-2x mt-2">好咖啡要和朋友一起品尝，快乐也要和同样喜欢它的人一起分享。</div></div>
                            </div>
                        </div>
                    </div>
                                        <div class="col-md-4">
                        <div class="list-item block">
                            <div class="media media-21x9">
                                <a class="media-content" href="http://blog.johnbin.cn/blog/index/category/code/628147134" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190112/f2bc91b14300774bc9e5de9641661c2c.jpg')"></a>
                                <div class="media-overlay overlay-top p-3">
                                    <small>
                                        <i class="text-xl iconfont icon-file-text-line"></i>
                                    </small>
                                    <span class="h1 font-theme">0</span></div>
                            </div>
                            <div class="list-content">
                                <div class="list-body ">
                                    <a href="http://blog.johnbin.cn/blog/index/category/code/628147134" class="list-title text-md">Yii</a>
                                    <div class="list-desc text-xs text-muted h-2x mt-2">好咖啡要和朋友一起品尝，快乐也要和同样喜欢它的人一起分享。</div></div>
                            </div>
                        </div>
                    </div>
                                        <div class="col-md-4">
                        <div class="list-item block">
                            <div class="media media-21x9">
                                <a class="media-content" href="http://blog.johnbin.cn/blog/index/category/code/790151821" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190112/cbfcfd0169a7d174b10069e4acfc9f53.jpg')"></a>
                                <div class="media-overlay overlay-top p-3">
                                    <small>
                                        <i class="text-xl iconfont icon-file-text-line"></i>
                                    </small>
                                    <span class="h1 font-theme">6</span></div>
                            </div>
                            <div class="list-content">
                                <div class="list-body ">
                                    <a href="http://blog.johnbin.cn/blog/index/category/code/790151821" class="list-title text-md">辄夜花泽</a>
                                    <div class="list-desc text-xs text-muted h-2x mt-2">好咖啡要和朋友一起品尝，快乐也要和同样喜欢它的人一起分享。</div></div>
                            </div>
                        </div>
                    </div>
                                        <div class="col-md-4">
                        <div class="list-item block">
                            <div class="media media-21x9">
                                <a class="media-content" href="http://blog.johnbin.cn/blog/index/category/code/618169803" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190112/d4b7b2f59aacb0371c5fe3fdd00528c5.jpg')"></a>
                                <div class="media-overlay overlay-top p-3">
                                    <small>
                                        <i class="text-xl iconfont icon-file-text-line"></i>
                                    </small>
                                    <span class="h1 font-theme">11</span></div>
                            </div>
                            <div class="list-content">
                                <div class="list-body ">
                                    <a href="http://blog.johnbin.cn/blog/index/category/code/618169803" class="list-title text-md">手册</a>
                                    <div class="list-desc text-xs text-muted h-2x mt-2">好咖啡要和朋友一起品尝，快乐也要和同样喜欢它的人一起分享。</div></div>
                            </div>
                        </div>
                    </div>
                                        <div class="col-md-4">
                        <div class="list-item block">
                            <div class="media media-21x9">
                                <a class="media-content" href="http://blog.johnbin.cn/blog/index/category/code/662183728" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190112/4f19ebd1ddebeb73e0e23c6c4055c8cb.jpg')"></a>
                                <div class="media-overlay overlay-top p-3">
                                    <small>
                                        <i class="text-xl iconfont icon-file-text-line"></i>
                                    </small>
                                    <span class="h1 font-theme">1</span></div>
                            </div>
                            <div class="list-content">
                                <div class="list-body ">
                                    <a href="http://blog.johnbin.cn/blog/index/category/code/662183728" class="list-title text-md">源码</a>
                                    <div class="list-desc text-xs text-muted h-2x mt-2">好咖啡要和朋友一起品尝，快乐也要和同样喜欢它的人一起分享。</div></div>
                            </div>
                        </div>
                    </div>
                                        <div class="col-md-4">
                        <div class="list-item block">
                            <div class="media media-21x9">
                                <a class="media-content" href="http://blog.johnbin.cn/blog/index/category/code/440202696" style="background-image:url('http://blog.johnbin.cn/upload/admin/20190507/3fed6f741c900703122758918791482a.jpg')"></a>
                                <div class="media-overlay overlay-top p-3">
                                    <small>
                                        <i class="text-xl iconfont icon-file-text-line"></i>
                                    </small>
                                    <span class="h1 font-theme">9</span></div>
                            </div>
                            <div class="list-content">
                                <div class="list-body ">
                                    <a href="http://blog.johnbin.cn/blog/index/category/code/440202696" class="list-title text-md">模板</a>
                                    <div class="list-desc text-xs text-muted h-2x mt-2">好咖啡要和朋友一起品尝，快乐也要和同样喜欢它的人一起分享。</div></div>
                            </div>
                        </div>
                    </div>
                                    </div>
            </div>
        </main>                <!-- [ list ] end -->
    </div>

            <!--中部内容 -->
            <div class="col-md-4">
                <!-- [ sidebar ] start -->
                <div class="theiaStickySidebar animated fadeIn" style="padding-top: 0px; padding-bottom: 1px; position: relative; transform: none;">
                    
                </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">27</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">92612</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=1714176653"></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=1714176653"></script>
<script type="text/javascript" src="/static/blog/static/js/jquery.js?version=1714176653"></script>
<script type="text/javascript" src="/static/blog/static/js/jquery.cookie.js?version=1714176653"></script>
<script type="text/javascript" src="/static/blog/static/js/bootstrap.min.js?version=1714176653"></script>
<script type="text/javascript" src="/static/blog/static/js/menu-setting.min.js?version=1714176653"></script>
<script type="text/javascript" src="/static/blog/static/js/clipboard.min.js?version=1714176653"></script>
<script type="text/javascript" src="/static/blog/static/js/main.js?version=1714176653"></script>
<script type="text/javascript" src="/static/blog/static/js/pjax.js?version=1714176653"></script>
<script type="text/javascript" src="/static/blog/static/js/swiper.min.js?version=1714176653"></script>
<!-- 分享插件 start-->
<div id="cz-leftside-share"></div>
<script type="text/javascript" src="/static/blog/static/js/jquery.share.min.js?version=1714176653"></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=1714176653">
<script src="/static/blog/static/js/aplayer.min.js?version=1714176653"></script>
<!-- 音乐播放器 start-->
<script type='text/javascript' src='/static/blog/static/js/jquery.infinitescroll.min.js?version=1714176653'></script>
<script type='text/javascript' src='/static/blog/static/js/wp-embed.min-4.9.4.js?version=1714176653'></script>
<!--弹窗-->
<script type='text/javascript' src='/static/blog/static/js/sweetalert.min.js?version=1714176653'></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>