折腾一下JIDOX模板，明年开发就用这个了

自从我开始写Web程序以来，最早用的前端框架是Foundation，后来改成Bootstrap 3，一直用到5。由于我不想搞前后端分离，因为公司里这样拿个别人部署太困难，所以都用的这种基本上纯的CSS框架。

不过一直被程序员朋友嘲笑钢筋水泥风格，也一直想找个模板升级一下。如果说刚开始Foundation是我的1.0时代，Bootstrap是2.0时代，那我最近总算找到3.0时代要用的模板 - JIDOX

JIDOX

这个模板是我偶尔刷B站的时候看到的，然后点进去链接还真的下载到了，我把他放在自己的网盘里，有兴趣下载原版的朋友可以点此下载：JIDOX模板1.0版。

JIDOX的官方地址是：JIDOX，也只有1.0版，所以我的版本就是最新版啦。

这个模板里边带有已经编译好的dist全套模板。我把其中的index.html给拆解了一下，做成了Django模板，并且将其中的静态文件的链接都换掉了。由于垂直布局和竖直布局是采用了页面来切换，所以我在主题设置那部分将那个按钮删除掉了，不然等于要编写两套模板，实际用起来就侧边栏版本的已经足够了。

记录一下拆解的过程，免得忘记。

HEAD标签部分

这部分删除两个meta标签，将title标签中插入block如下：

<title>{% block title %}{% endblock %}</title>

剩下的样式全部都保留，其中包含地图样式，主题设置等等，全部都保留，反正静态文件不在乎让客户端多下载一点。

没有把HEAD部分单独拆解出来，直接和基础模板做在一起，毕竟静态文件直接全局设置就行了。最基础的文件叫做base.html

顶部导航条

这里的浅色和暗色图标链接，仅仅在响应式中，侧边栏完全隐藏，顶部导航条完全展开的时候，才会出现。但也要设置。

剩下的部分都可以自行修改或者保留，没有什么要注意的。把顶部导航条单独拆解成了nav-bar.html。

侧边栏（主菜单）

默认状态下，页面左上角的Logo对应的链接是主菜单中的链接，也要设置。

侧边栏浮动按钮是主题设置了隐藏侧边栏之后才出现，用于固定侧边栏和取消固定。关闭按钮也是，所以都要保留。

侧边栏的链接部分倒没什么可说的，嵌套菜单也提供了样例，直接使用即可，我将其拆解成了menu.html。

内容部分和脚注

这一部分是网页内容，固定套在两个标签内，将其中container-fluid的部分拆走作为单独的block content将来传入内容即可，拆解后如下：

<div class="content-page">  
 <div class="content">  
  {% block content %}{% endblock %}  
    </div>  
  {# 脚注#}  
  {% include 'jidox/footer.html' %}  
</div>

脚注也没什么可说的，单独拆走即可。
注意其中的JS代码：

document.write(new Date().getFullYear()

被IDE提示返回的不是字符串，后边加上一个.toString()就可以了。我是在前边加上了一个2024 -。

主题设置部分

这里我删掉了改变垂直和横向布局的按钮，剩下的都保留，并改成了中文。这个主题设置还挺方便的。单独拆解到theme.html里。

JS部分

JS也单独拆成js.html文件，其中有三部分内容。详见下方。

当前页面专用JS文件

是专门针对这个页面制作的JS，这个要注释或者删除掉，实际替换成我们自己的页面内容后，只会报错，我将其注释掉了：

{#DashboardDemo js 可删除#}  
{#<script src="{% static 'assets/js/pages/demo.dashboard.js' %}"></script>#}

通用基础JS文件

这部分是vendor.min.js和app.js，前者就是bootstrap自带的js文件，后者是JIDOX模板的通用JS文件，都要保留。

各种库的JS文件

这里有时间选择器，APEX图表，地图库等，需要的时候再导入，我将其全部注释掉，然后在base.html最下边加入block script用于将来针对不同的功能导入所需的JS脚本。

修改后的JS文件

最后修改好的长这个样子：

{% load static %}  
  
{#bootstrap样式#}  
<script src="{% static 'assets/js/vendor.min.js' %}"></script>  
  
{#时间选择器样式#}  
{#<script src="{% static 'assets/vendor/daterangepicker/moment.min.js' %}"></script>#}  
{#<script src="{% static 'assets/vendor/daterangepicker/daterangepicker.js' %} "></script>#}  
  
{#APEX图表样式#}  
{#<script src="{% static 'assets/vendor/apexcharts/apexcharts.min.js' %}"></script>#}  
{#DashboardDemo js 可删除#}  
{#<script src="{% static 'assets/js/pages/demo.dashboard.js' %}"></script>#}  
  
{#地图脚本和样式，可删除#}  
{#<script src="{% static 'assets/vendor/admin-resources/jquery.vectormap/jquery-jvectormap-1.2.2.min.js' %}"></script>#}  
{#<script src="{% static 'assets/vendor/admin-resources/jquery.vectormap/maps/jquery-jvectormap-world-mill-en.js' %}"></script>#}  
  
{#软件通用JS#}  
<script src="{% static 'assets/js/app.min.js' %}"></script>

拆解后的JIDOX模板使用

拆解好之后的可以用于Django的模板我也传到自己的百度网盘里，下载地址是：JIDOX-DJANGO版。
使用方法很简单，把JIDOX自带的dist下边的assets直接扔到项目的static或者某个应用的static目录下边，然后在自己的页面里{% extends 'jidox/base.html' %}即可，如下：

{% extends 'jidox/base.html' %}   
{% block title %}系统主页{% endblock %}
{% block content %}  
    我的内容  
{% endblock %}

开发的过程中有一点要注意，就是不要随便把一个链接设置成#，有时候会导致页面出现奇怪的错误，就写个项目根目录即可。

用模板简单改进了一下最近正在编写的降本计算系统，确实现代多了，明年就用这个开发了：

jidox-sample

找到新模板-JIDOX

开发风格升级到3.0版了，找了个新的模板JIDOX