{% extends "base.html" %}
{% load djacore_tags %}{% load comments_tags %}{% load default_tags %}{% load mptt_tags %}{% load static %}
{% load cache %}
{% block meta %}
    {% with meta=obj.get_meta_tags %}
    <title>{% if meta.title %}{{ meta.title }}{% else %}{{ obj.title }}{% endif %}-{{ obj.category.name }}-{{ site_name }}</title>
    <meta name="description" content="{{ meta.description|slice:summary_length }}">
    <meta name="keywords" content="{{ meta.keywords }}">
        
{% block og_block %} 
    <!-- Open Graph -->   
    <meta property="og:type" content="{{ meta.og.type }}">
    <meta property="og:title" content="{{ meta.og.title }}">
    <meta property="og:description" content="{{ meta.og.description }}">
    <meta property="og:url" content="{{site_url}}{{ meta.og.url }}">
    {% endblock %}
    
    
    {% block twitter_card_block %}
    <!-- Twitter Card -->

    <meta name="twitter:card" content="{{ meta.twitter.card }}">
    <meta name="twitter:title" content="{{ meta.twitter.title }}">
    <meta name="twitter:description" content="{{ meta.twitter.description }}">  
    
    {% endblock %}
    {% block json_ld_block %}{% endblock %}
    {% endwith %}
{% endblock %}

{% block header %}
{% include "includes/header.html" %}
{% endblock %}
{% block breadcrumb %}
<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="{% get_home_url %}">首页</a></li>
    {% ancestorsnode obj.category True as breadcrumb %}
    {% for item in breadcrumb %}
    <li class="breadcrumb-item"><a href="{{ item.get_absolute_url }}">{{ item.name }}</a></li>
    {% endfor %}
    <li class="breadcrumb-item active" aria-current="page">内容详情</li>
  </ol>
</nav>
{% endblock %}
{% block body_left_center %}
<div class="content">
    <h1 class="fs-3">{{ obj.title }}</h1>
    <div class="small text-secondary my-3"><span><i class="bi bi-person"></i> ：{% if obj.author %}{{ obj.author }}{% else %}暂无数据{% endif %}</span><span class="ms-3"><i class="bi bi-clock"></i> {{ obj.update_time | date:"Y-m-d H:i:s" }}</span> <span class="ms-3"><i class="bi bi-eyeglasses"></i>：<span id='hits'>{{ obj.hits }}</span></span></div>
    
    <div class="content-main py-md-5 py-2">
        <div class="content-body ck-content">
            {% random_content_image cate=obj.category.slug as img1 %}
            {% if img1 %}<p class="text-center"><img src="{{img1}}" alt="{{ obj.title }}" style=" max-width: 80%;" class="rounded shadow-lg"></p>{% endif %}
            {{ obj.content|safe }}
            {% random_content_image cate=obj.category.slug as img2 %}
            {% if img2 %}<p class="text-center"><img src="{{img2}}" alt="{{ obj.title }}" style=" max-width: 80%;" class="rounded shadow-lg"></p>{% endif %}
        </div>      
        
        <div class="mt-3">本文编辑：{{ obj.editor.username }}</div>
        <div class="mt-3"><i class="bi bi-tags"></i>：
            {% if tags%}
                {% for item in tags %}
                    {% if forloop.first %}<a href="{{ item.get_absolute_url }}">{{item.title}}</a>
                    {% else %}，<a href="{{ item.get_absolute_url }}">{{item.title}}</a>
                    {% endif %}
                
                {% endfor %}
            {% endif %}
            
            

        </div>
        
        <div class="contentfoot">
            <div class="mt-3">上一篇：{% if obj.previous_obj %}<a href="{{obj.previous_obj.get_absolute_url }}">{{ obj.previous_obj.title }}</a>{% else %}没有内容了{% endif  %}</div>
            <div class="mt-3">下一篇：{% if obj.next_obj %}<a href="{{obj.next_obj.get_absolute_url}}">{{ obj.next_obj.title }}</a>{% else %}没有内容了{% endif  %}</div>

        </div> 
        {% if json_ld_enabled %}
            <!-- JSON-LD -->
                
            <script type="application/ld+json">
            {
            "@context": "https://schema.org",
            "@type": "Article",
            "@id": "{{ request.build_absolute_uri }}#article",
            "mainEntityOfPage": {
                "@type": "WebPage",
                "@id": "{{ site_url }}{{ obj.get_absolute_url }}"
            },
            "headline": "{{ obj.title }}",
            "description": "{{ meta.description }}",
            "image": "{% if item.thumb_image%}{{ site_url }}{{ uploadpath }}{{item.thumb_image}}{% elif img1 %}{{ site_url }}{{img1}}{%else%}{{ site_url }}{% nopic cate=item.category.slug %}{% endif %}",
            "datePublished": "{{ article.update_time|date:'c' }}",
            "dateModified": "{{ article.update_time|date:'c' }}",
            "author": {
                "@type": "Person",
                "name": "{{ article.author. }}"
            },
            "publisher": {
                "@type": "Organization",
                "name": "{{ site_name }}",
                "logo": {
                "@type": "ImageObject",
                "url": "{% if logo  %}{{ site_url }}{{ uploadpath }}{{ logo }}{% endif %}"
                }
            }
            }
            </script>
        {% endif %}
        
    </div>
    <script>
        // 爬虫检测函数 - 结合多种特征进行智能识别
        function isLikelyCrawler() {
            const userAgent = navigator.userAgent.toLowerCase();
            
            // 1. 用户代理检测 - 常见爬虫关键词
            const botPatterns = [
                'bot', 'crawler', 'spider', 'scanner', 'slurp', 
                'googlebot', 'bingbot', 'baiduspider', 'yandexbot',
                'facebookexternalhit', 'twitterbot', 'linkedinbot',
                'headless', 'phantomjs', 'selenium', 'puppeteer'
            ];
            
            const isBotByUA = botPatterns.some(pattern => 
                userAgent.includes(pattern)
            );
            
            // 2. 浏览器特性检测 - 真实浏览器应具备这些特性
            const isRealBrowser = (
                'Promise' in window &&
                'Map' in window &&
                'localStorage' in window &&
                'sessionStorage' in window &&
                'addEventListener' in window &&
                navigator.cookieEnabled &&
                navigator.plugins.length > 0
            );
            
            // 3. 行为特征检测 - 检查JS执行能力
            let jsExecutionTest = false;
            try {
                const testKey = '_crawler_test_' + Date.now();
                localStorage.setItem(testKey, 'test');
                jsExecutionTest = localStorage.getItem(testKey) === 'test';
                localStorage.removeItem(testKey);
            } catch (e) {
                jsExecutionTest = false;
            }
            
            // 综合判断：如果是爬虫UA，或者不具备真实浏览器特性，或者JS执行测试失败
            return isBotByUA || !isRealBrowser || !jsExecutionTest;
        }
        if (!isLikelyCrawler()) {
        // 只有当不是爬虫时，才执行文章点击量的API请求
        $.get("/api/articles/{{ obj.pk }}/hit/", function(data, status) {
            $('#hits').html(data.hits);
        });
    }
      
        
    </script>
    {% load comments_tags %}

{% render_comments obj %}

{% if related_wikis %}
    <div class="more my-3">

    
        <h2>本文相关文章：</h2>
            <hr> 
        <div class="list">    
            {% for item in related_wikis %}    
                <div class="border rounded p-md-3 p-2 mt-3 d-flex  flex-nowrap">
                    <a href="{{ item.get_absolute_url }}" rel="nofollow"><img src="{% if item.thumb_image %}{{ uploadpath }}{{item.thumb_image}}{%else%}{% nopic cate=item.category.slug %}{% endif %}" alt="{{ item.title }}"  class="rounded me-3"  onerror="javascript:this.style.display='none'"></a>
                    <div class="flex-column d-flex">
                        <p class="mb-3 fw-bold"><a href="{{ item.get_absolute_url }}">{{ item.title }}</a></p>
                        <p class="text-secondary hidden-md">{{ item.meta_description|slice:'120' }}</p>
                        <p class="text-secondary mt-auto"> <small>{{ item.update_time }}</small></p>
                    </div>
                </div> 
            {% endfor%}


        </div>
    </div>   
    {% endif %}

    {% if related_articles %}
    <div class="more my-3">

    
        <h2>本文相关文章：</h2>
            <hr> 
        <div class="list">    
            {% for item in related_articles %}    
                <div class="border rounded p-md-3 p-2 mt-3 d-flex  flex-nowrap">
                    <a href="{{ item.get_absolute_url }}" rel="nofollow"><img src="{% if item.thumb_image %}{{ uploadpath }}{{item.thumb_image}}{%else%}{% nopic cate=item.category.slug %}{% endif %}" alt="{{ item.title }}"  class="rounded me-3"  onerror="javascript:this.style.display='none'"></a>
                    <div class="flex-column d-flex">
                        <p class="mb-3 fw-bold"><a href="{{ item.get_absolute_url }}">{{ item.title }}</a></p>
                        <p class="text-secondary hidden-md">{{ item.meta_description|slice:'120' }}</p>
                        <p class="text-secondary mt-auto"> <small>{{ item.update_time }}</small></p>
                    </div>
                </div> 
            {% endfor%}


        </div>
    </div>   
    {% endif %}
    {% cache 1200 contentfoot_category_ obj.category.pk %}
        <div class="my-3">
            <h2>更多文章：</h2>
                <hr> 
            <div class="list">    
                {% article_cate_list category=obj.category fields='title,hits,update_time,thumb_image,meta_description' shownum=10 as articlelist %} 
                {% for item in articlelist%}    
                    <div class="border rounded p-md-3 p-2 mt-3 d-flex  flex-nowrap">
                        <a href="{{ item.get_absolute_url }}" rel="nofollow"><img src="{% if item.thumb_image %}{{ uploadpath }}{{item.thumb_image}}{%else%}{% nopic cate=item.category.slug %}{% endif %}" alt="{{ item.title }}"  class="rounded me-3"  onerror="javascript:this.style.display='none'"></a>
                        <div class="flex-column d-flex">
                            <p class="mb-3 fw-bold"><a href="{{ item.get_absolute_url }}">{{ item.title }}</a></p>
                            <p class="text-secondary hidden-md">{{ item.meta_description|slice:'120' }}</p>
                            <p class="text-secondary mt-auto"> <small>{{ item.update_time }}</small></p>
                        </div>
                    </div> 
                {% endfor%}
            
            
            </div>
        </div>
    {% endcache %}
</div>
<script>
    var content_width=$('.content-body.ck-content').width()
    console.log(content_width)
    var content_imgs=$('.content-body.ck-content img')
    content_imgs.each(function(i,val) { 
        console.log(i,val)
        if($(val).width()>content_width-20){
            $(val).removeAttr('width height')
            $(val).css('max-width','90%').wrap('<p style="text-align: center"></p>')

        }
    })
    
</script>
{% endblock %}


