# django-webstack
一个导航APP，可以直接安装到django当做一个独立的应用，效果可以看我博客 https://tendcode.com/nav/
## 使用步骤
step 1 安裝包依赖
```bash
# 安装django-imagekit是为了上传网址logo
pip install Pillow==9.3.0
pip install django-imagekit==4.0.2
pip install django-webstack>=1.4.2
```
如果pip设置了非官方源（比如豆瓣源）导致安装失败，可能是没有同步官方的资源，此时可以临时设置成官方源试试:
```shell
pip install django-webstack>=1.4.2 --index-url https://pypi.org/simple --trusted-host pypi.org
```
step 2 配置中添加应用
```python
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'webstack',
]
```
step 3 生成数据表
```bash
python manage.py makemigrations
python manage.py migrate
```
step 4 添加到路由
```python
# 将应用路由添加到Django项目的根urls.py文件中
urlpatterns = [
...
path('nav/', include(('webstack.urls', 'webstack'), namespace='webstack')),
]
```
step 5 前往管理界面添加数据即可显示到前台
应用会生成3张表，对应3个模型：一级菜单-二级菜单-导航网站，先添加一级菜单然后添加二级菜单，然后添加导航网址，一层一层关联即可，如果想要直接显示一级菜单，则可以添加一个跟一级菜单同名的二级菜单。
## 个性化配置（非必须）
应用本身安装就可以使用，但是你也可以自定义页面，包括页面的排版和静态资源都可以自定义，具体方式如下：
可以在项目跟目录的templates目录下创建一个webstack目录，并在其中创建一个index.html文件，用来覆盖原应用的index.html文件，原文件的内容自行查看代码，可以参考我项目的修改：https://github.com/Hopetree/izone/blob/master/templates/webstack/index.html
```html
{% extends 'webstack/base.html' %}
{% load static %}
{% block title %}程序员网址导航_TendCode{% endblock %}
{% block meta %}
<link rel="shortcut icon" href="{% static 'blog/img/favicon.ico' %}" type="image/x-icon"/>
<meta name="keywords" content="程序员网址导航,网址收藏,tendcode.com">
<meta name="description" content="程序员常用网址导航聚合站">
{% endblock %}
{% block top-file %}{% endblock %}
{% block logo %}
<div class="logo">
<a href="{% url 'webstack:webstack_index' %}" class="logo-expanded">
<img src="{% static 'blog/img/nav-logo.png' %}" height="40" alt=""/>
</a>
<a href="{% url 'webstack:webstack_index' %}" class="logo-collapsed">
<img src="{% static 'webstack/assets/images/logo-collapsed@2x.png' %}" height="40" alt=""/>
</a>
</div>
{% endblock %}
{% block navbar-list %}
<li style="min-height: 75px;"><a href="{% url 'blog:index' %}">首页</a></li>
<li style="min-height: 75px;"><a href="{% url 'blog:subject_index' %}">博客专题</a></li>
<li style="min-height: 75px;"><a href="{% url 'tool:total' %}">在线工具</a></li>
<li style="min-height: 75px;"><a href="{% url 'blog:about' %}">关于</a></li>
{% endblock %}
{% block main-menu %}{% endblock %}
{% block footer %}
<div class="footer-text">
© {{ this_year }}
<a href="https://github.com/Hopetree/django-webstack">
<strong>django-webstack</strong>
</a>
design by
<a href="https://github.com/Hopetree" target="_blank">
<strong>Hopetree</strong>
</a>
</div>
{% endblock %}
```
拓展功能：
1. 菜单和网站都是可以后台动态添加的，包括网站的logo图标上传
2. 页面布局可以使用Django的模板个性化调整，静态文件也是
3. 图标库使用cdn，bootstrp也是cdn，加快网站访问
4. 网站添加了属性用来记录网站的可用状态，Django用到定时任务的可以添加定时任务更新网站状态，将不可访问网站标记为不显示，页面就不会显示，定时任务自动刷新状态，保证网站都是可访问的
你可以自定义网页标题、关键词和描述，并且可以添加自定义的静态文件包括css和js文件，并且可以自定义页面额外的菜单，一级页脚，甚至整个页面的排版。
## 原项目地址
本项目是基于Webstack网址导航项目改变而来，将静态导航网站改成了有后台的Django项目，原项目地址如下：
https://github.com/WebStackPage/WebStackPage.github.io
Raw data
{
"_id": null,
"home_page": "https://github.com/Hopetree/django-webstack",
"name": "django-webstack",
"maintainer": "",
"docs_url": null,
"requires_python": ">=3.5",
"maintainer_email": "",
"keywords": "django webstack navigation",
"author": "Hopetree",
"author_email": "zlwork2014@163.com",
"download_url": "https://files.pythonhosted.org/packages/2b/50/ad4a33aa5e70eda0428466ce826e0a89477925ae270e0059321193609cb1/django-webstack-1.5.4.tar.gz",
"platform": null,
"description": "# django-webstack\n\n\n\n\u4e00\u4e2a\u5bfc\u822aAPP\uff0c\u53ef\u4ee5\u76f4\u63a5\u5b89\u88c5\u5230django\u5f53\u505a\u4e00\u4e2a\u72ec\u7acb\u7684\u5e94\u7528\uff0c\u6548\u679c\u53ef\u4ee5\u770b\u6211\u535a\u5ba2 https://tendcode.com/nav/\n\n## \u4f7f\u7528\u6b65\u9aa4\n\nstep 1 \u5b89\u88dd\u5305\u4f9d\u8d56\n\n```bash\n# \u5b89\u88c5django-imagekit\u662f\u4e3a\u4e86\u4e0a\u4f20\u7f51\u5740logo\npip install Pillow==9.3.0\npip install django-imagekit==4.0.2\npip install django-webstack>=1.4.2\n```\n\n\u5982\u679cpip\u8bbe\u7f6e\u4e86\u975e\u5b98\u65b9\u6e90\uff08\u6bd4\u5982\u8c46\u74e3\u6e90\uff09\u5bfc\u81f4\u5b89\u88c5\u5931\u8d25\uff0c\u53ef\u80fd\u662f\u6ca1\u6709\u540c\u6b65\u5b98\u65b9\u7684\u8d44\u6e90\uff0c\u6b64\u65f6\u53ef\u4ee5\u4e34\u65f6\u8bbe\u7f6e\u6210\u5b98\u65b9\u6e90\u8bd5\u8bd5:\n\n```shell\npip install django-webstack>=1.4.2 --index-url https://pypi.org/simple --trusted-host pypi.org\n```\n\nstep 2 \u914d\u7f6e\u4e2d\u6dfb\u52a0\u5e94\u7528\n\n```python\nINSTALLED_APPS = [\n 'django.contrib.admin',\n 'django.contrib.auth',\n 'django.contrib.contenttypes',\n 'django.contrib.sessions',\n 'django.contrib.messages',\n 'django.contrib.staticfiles',\n 'webstack',\n]\n```\n\nstep 3 \u751f\u6210\u6570\u636e\u8868\n\n```bash\npython manage.py makemigrations\npython manage.py migrate\n```\n\nstep 4 \u6dfb\u52a0\u5230\u8def\u7531\n\n```python\n# \u5c06\u5e94\u7528\u8def\u7531\u6dfb\u52a0\u5230Django\u9879\u76ee\u7684\u6839urls.py\u6587\u4ef6\u4e2d\n\nurlpatterns = [\n ...\n path('nav/', include(('webstack.urls', 'webstack'), namespace='webstack')),\n]\n```\n\nstep 5 \u524d\u5f80\u7ba1\u7406\u754c\u9762\u6dfb\u52a0\u6570\u636e\u5373\u53ef\u663e\u793a\u5230\u524d\u53f0\n\n\u5e94\u7528\u4f1a\u751f\u62103\u5f20\u8868\uff0c\u5bf9\u5e943\u4e2a\u6a21\u578b\uff1a\u4e00\u7ea7\u83dc\u5355-\u4e8c\u7ea7\u83dc\u5355-\u5bfc\u822a\u7f51\u7ad9\uff0c\u5148\u6dfb\u52a0\u4e00\u7ea7\u83dc\u5355\u7136\u540e\u6dfb\u52a0\u4e8c\u7ea7\u83dc\u5355\uff0c\u7136\u540e\u6dfb\u52a0\u5bfc\u822a\u7f51\u5740\uff0c\u4e00\u5c42\u4e00\u5c42\u5173\u8054\u5373\u53ef\uff0c\u5982\u679c\u60f3\u8981\u76f4\u63a5\u663e\u793a\u4e00\u7ea7\u83dc\u5355\uff0c\u5219\u53ef\u4ee5\u6dfb\u52a0\u4e00\u4e2a\u8ddf\u4e00\u7ea7\u83dc\u5355\u540c\u540d\u7684\u4e8c\u7ea7\u83dc\u5355\u3002\n\n## \u4e2a\u6027\u5316\u914d\u7f6e\uff08\u975e\u5fc5\u987b\uff09\n\n\u5e94\u7528\u672c\u8eab\u5b89\u88c5\u5c31\u53ef\u4ee5\u4f7f\u7528\uff0c\u4f46\u662f\u4f60\u4e5f\u53ef\u4ee5\u81ea\u5b9a\u4e49\u9875\u9762\uff0c\u5305\u62ec\u9875\u9762\u7684\u6392\u7248\u548c\u9759\u6001\u8d44\u6e90\u90fd\u53ef\u4ee5\u81ea\u5b9a\u4e49\uff0c\u5177\u4f53\u65b9\u5f0f\u5982\u4e0b\uff1a\n\n\u53ef\u4ee5\u5728\u9879\u76ee\u8ddf\u76ee\u5f55\u7684templates\u76ee\u5f55\u4e0b\u521b\u5efa\u4e00\u4e2awebstack\u76ee\u5f55\uff0c\u5e76\u5728\u5176\u4e2d\u521b\u5efa\u4e00\u4e2aindex.html\u6587\u4ef6\uff0c\u7528\u6765\u8986\u76d6\u539f\u5e94\u7528\u7684index.html\u6587\u4ef6\uff0c\u539f\u6587\u4ef6\u7684\u5185\u5bb9\u81ea\u884c\u67e5\u770b\u4ee3\u7801\uff0c\u53ef\u4ee5\u53c2\u8003\u6211\u9879\u76ee\u7684\u4fee\u6539\uff1ahttps://github.com/Hopetree/izone/blob/master/templates/webstack/index.html\n\n```html\n{% extends 'webstack/base.html' %}\n{% load static %}\n\n{% block title %}\u7a0b\u5e8f\u5458\u7f51\u5740\u5bfc\u822a_TendCode{% endblock %}\n\n{% block meta %}\n<link rel=\"shortcut icon\" href=\"{% static 'blog/img/favicon.ico' %}\" type=\"image/x-icon\"/>\n<meta name=\"keywords\" content=\"\u7a0b\u5e8f\u5458\u7f51\u5740\u5bfc\u822a,\u7f51\u5740\u6536\u85cf,tendcode.com\">\n<meta name=\"description\" content=\"\u7a0b\u5e8f\u5458\u5e38\u7528\u7f51\u5740\u5bfc\u822a\u805a\u5408\u7ad9\">\n{% endblock %}\n\n{% block top-file %}{% endblock %}\n\n{% block logo %}\n<div class=\"logo\">\n <a href=\"{% url 'webstack:webstack_index' %}\" class=\"logo-expanded\">\n <img src=\"{% static 'blog/img/nav-logo.png' %}\" height=\"40\" alt=\"\"/>\n </a>\n <a href=\"{% url 'webstack:webstack_index' %}\" class=\"logo-collapsed\">\n <img src=\"{% static 'webstack/assets/images/logo-collapsed@2x.png' %}\" height=\"40\" alt=\"\"/>\n </a>\n</div>\n{% endblock %}\n\n{% block navbar-list %}\n<li style=\"min-height: 75px;\"><a href=\"{% url 'blog:index' %}\">\u9996\u9875</a></li>\n<li style=\"min-height: 75px;\"><a href=\"{% url 'blog:subject_index' %}\">\u535a\u5ba2\u4e13\u9898</a></li>\n<li style=\"min-height: 75px;\"><a href=\"{% url 'tool:total' %}\">\u5728\u7ebf\u5de5\u5177</a></li>\n<li style=\"min-height: 75px;\"><a href=\"{% url 'blog:about' %}\">\u5173\u4e8e</a></li>\n{% endblock %}\n\n{% block main-menu %}{% endblock %}\n\n{% block footer %}\n<div class=\"footer-text\">\n © {{ this_year }}\n <a href=\"https://github.com/Hopetree/django-webstack\">\n <strong>django-webstack</strong>\n </a>\n design by\n <a href=\"https://github.com/Hopetree\" target=\"_blank\">\n <strong>Hopetree</strong>\n </a>\n</div>\n{% endblock %}\n```\n\n\u62d3\u5c55\u529f\u80fd\uff1a\n\n1. \u83dc\u5355\u548c\u7f51\u7ad9\u90fd\u662f\u53ef\u4ee5\u540e\u53f0\u52a8\u6001\u6dfb\u52a0\u7684\uff0c\u5305\u62ec\u7f51\u7ad9\u7684logo\u56fe\u6807\u4e0a\u4f20\n2. \u9875\u9762\u5e03\u5c40\u53ef\u4ee5\u4f7f\u7528Django\u7684\u6a21\u677f\u4e2a\u6027\u5316\u8c03\u6574\uff0c\u9759\u6001\u6587\u4ef6\u4e5f\u662f\n3. \u56fe\u6807\u5e93\u4f7f\u7528cdn\uff0cbootstrp\u4e5f\u662fcdn\uff0c\u52a0\u5feb\u7f51\u7ad9\u8bbf\u95ee\n4. \u7f51\u7ad9\u6dfb\u52a0\u4e86\u5c5e\u6027\u7528\u6765\u8bb0\u5f55\u7f51\u7ad9\u7684\u53ef\u7528\u72b6\u6001\uff0cDjango\u7528\u5230\u5b9a\u65f6\u4efb\u52a1\u7684\u53ef\u4ee5\u6dfb\u52a0\u5b9a\u65f6\u4efb\u52a1\u66f4\u65b0\u7f51\u7ad9\u72b6\u6001\uff0c\u5c06\u4e0d\u53ef\u8bbf\u95ee\u7f51\u7ad9\u6807\u8bb0\u4e3a\u4e0d\u663e\u793a\uff0c\u9875\u9762\u5c31\u4e0d\u4f1a\u663e\u793a\uff0c\u5b9a\u65f6\u4efb\u52a1\u81ea\u52a8\u5237\u65b0\u72b6\u6001\uff0c\u4fdd\u8bc1\u7f51\u7ad9\u90fd\u662f\u53ef\u8bbf\u95ee\u7684\n\n\u4f60\u53ef\u4ee5\u81ea\u5b9a\u4e49\u7f51\u9875\u6807\u9898\u3001\u5173\u952e\u8bcd\u548c\u63cf\u8ff0\uff0c\u5e76\u4e14\u53ef\u4ee5\u6dfb\u52a0\u81ea\u5b9a\u4e49\u7684\u9759\u6001\u6587\u4ef6\u5305\u62eccss\u548cjs\u6587\u4ef6\uff0c\u5e76\u4e14\u53ef\u4ee5\u81ea\u5b9a\u4e49\u9875\u9762\u989d\u5916\u7684\u83dc\u5355\uff0c\u4e00\u7ea7\u9875\u811a\uff0c\u751a\u81f3\u6574\u4e2a\u9875\u9762\u7684\u6392\u7248\u3002\n\n## \u539f\u9879\u76ee\u5730\u5740\n\n\u672c\u9879\u76ee\u662f\u57fa\u4e8eWebstack\u7f51\u5740\u5bfc\u822a\u9879\u76ee\u6539\u53d8\u800c\u6765\uff0c\u5c06\u9759\u6001\u5bfc\u822a\u7f51\u7ad9\u6539\u6210\u4e86\u6709\u540e\u53f0\u7684Django\u9879\u76ee\uff0c\u539f\u9879\u76ee\u5730\u5740\u5982\u4e0b\uff1a\n\nhttps://github.com/WebStackPage/WebStackPage.github.io\n\n",
"bugtrack_url": null,
"license": "",
"summary": "webstack of Django",
"version": "1.5.4",
"project_urls": {
"Homepage": "https://github.com/Hopetree/django-webstack"
},
"split_keywords": [
"django",
"webstack",
"navigation"
],
"urls": [
{
"comment_text": "",
"digests": {
"blake2b_256": "18c101ec4ad06385a4a4a378f419b5069954dc8749faf9b793fe79f266eca9bb",
"md5": "6ec84ba00da5a0b2bc70cfa5d55d0dde",
"sha256": "21fbaab678ec712f7fc062ba564cda77b103af3bc41b86c57c79f907a1ef6d7d"
},
"downloads": -1,
"filename": "django_webstack-1.5.4-py3-none-any.whl",
"has_sig": false,
"md5_digest": "6ec84ba00da5a0b2bc70cfa5d55d0dde",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.5",
"size": 1588367,
"upload_time": "2023-08-01T05:27:28",
"upload_time_iso_8601": "2023-08-01T05:27:28.820764Z",
"url": "https://files.pythonhosted.org/packages/18/c1/01ec4ad06385a4a4a378f419b5069954dc8749faf9b793fe79f266eca9bb/django_webstack-1.5.4-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": "",
"digests": {
"blake2b_256": "2b50ad4a33aa5e70eda0428466ce826e0a89477925ae270e0059321193609cb1",
"md5": "92c14f570758eed8230e45c4d5759971",
"sha256": "5dc476747b8ee8c00aaa191eb66c5b7c773df7f2ff0e8f2e355e1771ef6f30a2"
},
"downloads": -1,
"filename": "django-webstack-1.5.4.tar.gz",
"has_sig": false,
"md5_digest": "92c14f570758eed8230e45c4d5759971",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.5",
"size": 1581349,
"upload_time": "2023-08-01T05:27:31",
"upload_time_iso_8601": "2023-08-01T05:27:31.024754Z",
"url": "https://files.pythonhosted.org/packages/2b/50/ad4a33aa5e70eda0428466ce826e0a89477925ae270e0059321193609cb1/django-webstack-1.5.4.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2023-08-01 05:27:31",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "Hopetree",
"github_project": "django-webstack",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"requirements": [],
"lcname": "django-webstack"
}
JSON
