rules.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <meta http-equiv="Cache-Control" content="no-siteapp;no-transform">
    <meta name="applicable-device" content="pc,mobile">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>删除已缓存规则列表-{{rules.count}}</title>
    <script src="/static/js/jquery.min.js"></script>
</head>
<style>
    .red {
        color:red;
        font-weight: bold
    }
    .yellow {
        color:yellow;
        font-weight: bold
    }
    .refresh{

    }
</style>
<body>
<script>
    $(document).ready(function(){
        $(".refresh").click(function(){
            // location.reload();
            let rule = this.innerText.trim();
            let code = $.ajax({url:"/clear?rule="+rule,async:false}).responseText;
            code = typeof(code) === "object"?code:JSON.parse(code);
            if(code.code === 200){
                alert(code.msg);
                location.reload()
            }

        });
});

</script>
{% if rules.count < 1 %}
<h3>暂无已缓存的规则</h3>
{% endif %}

{% for rule in rules.list %}

    	{% if rule|length > 2 %}
        <!-- | 为过滤条件 -->
        	<li class="red">
<!--                <a class="refresh" href="/clear?rule={{rule}}" target="_blank">{{ rule }}</a>-->
                <a class="refresh" href="javascript:void(0);">{{ rule }}</a>
            </li>

        {% else %}
         <!-- 如果是if条件，最后必须要有else，否则就会报错 -->
            <li class="yellow">
                <a class="refresh" href="javascript:void(0);" target="_blank">{{ rule }}</a>
            </li>

        {% endif %}
      	<!-- if条件必须有endif，否则会报错 -->

     {% endfor %}
</body>

</html>