项目全文索引

『Python-Django 网站导航』开源项目总览

HTML模板选择

进入模板之家 搜索导航自己选择一个模板。

或者进入 WebStackPage.github.io 下载模板。

我们使用 WebStackPage 这个模板结合 Django环境进行开发。

路径配置

CSS 静态文件、JS 文件配置

将 assets下面的文件全部复制到 static 目录下。

templates 模板配置

复制 index.html 改名 my_index.html 。

前端渲染模板

My_index.html

header路径配置

将 css 和 js 路径统一更换应用到 django 环境。

{% load static %}<link rel="shortcut icon" href="{% static 'WebStackPage/images/favicon.png' %}"><link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Arimo:400,700,400italic"><link rel="stylesheet" href="{% static 'WebStackPage/css/fonts/linecons/css/linecons.css' %}"><link rel="stylesheet" href="{% static 'WebStackPage/css/fonts/fontawesome/css/font-awesome.min.css' %}"><link rel="stylesheet" href="{% static 'WebStackPage/css/bootstrap.css' %}"><link rel="stylesheet" href="{% static 'WebStackPage/css/xenon-core.css' %}"><link rel="stylesheet" href="{% static 'WebStackPage/css/xenon-components.css' %}"><link rel="stylesheet" href="{% static 'WebStackPage/css/xenon-skins.css' %}"><link rel="stylesheet" href="{% static 'WebStackPage/css/nav.css' %}"><script src="{% static 'WebStackPage/js/jquery-1.11.1.min.js' %}"></script>.........<script src="{% static 'WebStackPage/js/bootstrap.min.js' %}"></script><script src="{% static 'WebStackPage/js/TweenMax.min.js' %}"></script><script src="{% static 'WebStackPage/js/resizeable.js' %}"></script><script src="{% static 'WebStackPage/js/joinable.js' %}"></script><script src="{% static 'WebStackPage/js/xenon-api.js' %}"></script><script src="{% static 'WebStackPage/js/xenon-toggles.js' %}"></script><script src="{% static 'WebStackPage/js/xenon-custom.js' %}"></script><script src="{% static 'WebStackPage/js/lozad.js' %}"></script>

左侧导航条for循环

<ul id="main-menu" class="main-menu">{% for category in category_list %}<li><a><i class="linecons-pencil"></i><span class="title">{{ category.name }}</span></a><ul>{% for item in item_list %}{% if item.category_id == category.id %}<li><a href="#{{ item.name }}" class="smooth"><span class="title">{{ item.name }}</span></a></li>{% endif %}{% endfor %}</ul></li>{% endfor %}<li><a href="https://home.datayang.cn" target="_blank"><i class="linecons-heart"></i><span class="tooltip-blue">关于本站作者</span><span class="label label-Primary pull-right hidden-collapsed">♥︎</span></a></li></ul>

调用数据成功后显示在这里

右侧明细for循环

{% for item in item_list %}<h4 class="text-gray"><i class="linecons-tag" style="margin-right: 7px;" id="{{ item.name }}"></i>{{ item.name }}</h4><div class="row">{% for data in data_list %}{% if data.item_id == item.id %}<div class="col-sm-3"><div class="xe-widget xe-conversations box2 label-info" data-toggle="tooltip" onclick="window.open('{{ data.url }}', '_blank')" data-placement="bottom" title="" data-original-title=""><div class="xe-comment-entry"><a class="xe-user-img"><img src="{{ MEDIA_URL }}{{ data.logo }}" class="lozad img-circle" width="40"></a><div class="xe-comment"><a href="#" class="xe-user-name overflowClip_1"><strong>{{ data.name }}</strong></a><p class="overflowClip_2">{{ data.description }}</p></div></div></div></div>{% endif %}{% endfor %}</div><br/>{% endfor %}

根据后台整理的数据库信息自动会显示到这里。

其他细节根据自己需求进行细微调整即可