{% extends "base.html" %}
{% load djacore_tags %}{% load comments_tags %}{% load default_tags %}{% load mptt_tags %}
{% load cache %}
{% block title %}{{ obj.title }}-{{ obj.category.name }}-{% endblock %}
{% block metades %}{{ obj.intro|slice:summary_length }}{% endblock %}
{% block metakeywork %}{{ obj.keywords }}{% endblock %}
{% load static %}
{% 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="row my-3">
    <div class="col-md-5 d-flex align-items-center">
      <img src="{% if obj.thumb_image %}{{ uploadpath }}{{ obj.thumb_image }}{% else %}{{ uploadpath }}noface.png{% endif %}" alt="{{obj.title}}" class="w-100 rounded-3 shadow-lg">
    </div>
    <div class="col-md-7 content-body">
      <h1 class="fs-5 fw-bold text-center">{{obj.title}}{% if obj.Subtitle %}（{{ obj.Subtitle }}）{% endif %}</h1>
      {% if obj.alias %}<p class="text-secondary">别名：{{obj.alias}}</p>{% endif %}      
      <hr>
      <p class="small text-center text-secondary">更新时间：{% now "Y-m-d H:i:s" %} 浏览量：<span id="hits">{{obj.hits}}</span> </p>
      {% if obj.basic %}
      {{obj.basic|safe}}
      {% else %}
      <div class="alert alert-secondary text-center">暂无基本资料</div>
      {% endif %}
    </div>
  </div>
<div class="content">    
    <div class="content-body">
        <div class="intro mb-3">
            <h2 class="fs-6 fw-bold border-start ps-3 border-info border-5 text-info">简介</h2>
            <hr class="bg-info">
            {{obj.intro}}
        </div>
        <div class="content-body">
        <div class="chaodaicontent mb-3">
          <h2 class="fs-6 fw-bold border-start ps-3 border-info border-5 text-info">详细资料</h2>
            <hr class="bg-info">
          {{obj.content|safe}}
          
          </div>
          <div class="text-center mb-3"><button id="zdbtn" type="button" class=" btn btn-outline-secondary"> <i class="bi bi-arrow-bar-down"></i> 展开</button>
        </div>
        </div>        
    </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>
    
</div>

{% load comments_tags %}

{% render_comments obj %}
<div class="aboutbox mt-3">
  {% if aboutbaike %}
    <h2>{{ obj.title }}相关百科</h2>
    <hr> 
    <div class="mb-3">
      <div class="row">
        {% for item in  aboutbaike %}
          <div class="col-md-4 col-6">
            <a href="{% url 'baike:baikeitem'  item.id %}" class="">
              <figure class="figure">
                <img src="{{ uploadpath }}{{ item.thumb_image }}" class="figure-img img-fluid rounded" alt="{{ item.title }}">
                <figcaption class="figure-caption text-center">{{ item.title }}</figcaption>
              </figure>
            </a>
          </div>
        {% endfor %}
      </div>
    </div>
  {% endif %}

  <h2>{{ obj.title }}相关文章</h2>
  <hr> 

<div class="list mb-3">
  {% smart_paginator articles as page_obj %}
    {% for item in page_obj%}  
  <a href="{{ item.get_absolute_url }}">
      <div class="border rounded p-md-3 p-2 mt-3 d-flex  flex-nowrap">
          <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'">
          <div class="flex-column d-flex">
              <p class="mb-3 fw-bold">{{ item.title }}</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>
  </a>
  {% endfor%}
</div>
{% if page_obj|need_pagination %}
  {% include "widgets/pagination.html" %}
{% endif %}
</div>


<style>
  .hidcontent{
    max-height: 70vh;
    overflow: hidden;
  }
</style>
<script>
  height=$('.chaodaicontent').height()
  if (height>700){
    $('.chaodaicontent').addClass('hidcontent')
  }
  
  $('#zdbtn').click(function(e){
    if($('#zdbtn').text().indexOf('展开')>-1){
      $('.chaodaicontent').removeClass('hidcontent')
      var html=`<i class="bi bi-arrow-bar-up"></i> 收缩`
      $('#zdbtn').html(html)
    }else if($('#zdbtn').text().indexOf('收缩')>-1){
      $('.chaodaicontent').addClass('hidcontent')
      var html=`<i class="bi bi-arrow-bar-down"></i> 展开`
      $('#zdbtn').html(html)
    }
  })

</script>
<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/wikis/{{ obj.pk }}/hit/", function(data, status) {
                $('#hits').html(data.hits);
            });
        }

        
    </script>
<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 %}


