关于 wellcms 制作模板,使用其他前端框架,比如 layui

燃烧的冰2020-03-09  2.7K+

有用户反馈,说 wellcms 使用 bootstrap ,但是我想使用 layui 或其他的行不行?


完全可以,砍掉前台所有管理权限,wellcms为了管理容易,在哪里看到就在哪里管理的原则。所以,前台保留了管理权限,这种设计比到后台管理方便的多。


那么,你不想使用 bootstrap 也可以,跟其他混合使用也行,或者改用这些框架官方提供的CDN也可以。

有人任性,我就想单独使用,不想混合使用。那么,必须砍掉前端管理权限的相关html代码,前台完全作为展示。关于有哪些是管理的 html 代码,官方默认模板中基本都标注了,看英文也可以看出来。


如果,不需要前端管理权限,作为单独使用其他前端框架,可以砍掉哪些呢?

页头 view/htm/header.inc.htm

1.首先所有的钩子都可以删掉

类似于 这种都是前端的钩子 自己制作模板,砍掉吧。因为你留了钩子,到时有其他插件会直接 hook ,那样会导致页面混乱,因为你的代码和页面结构跟默认官方的不一样了。

<!--{hook header_bootstrap_after.htm}-->


2.加载的bootstrap和font-awesome字体包也可以砍掉,以下这些可以砍掉。

<?php $bootstrap_css = empty($bootstrap_css) ? view_path()."css/bootstrap.min.css".$static_version : $bootstrap_css;?>
<link rel="stylesheet" href="<?php echo $bootstrap_css;?>">

<link rel="stylesheet" href="<?php echo view_path();?>css/font-awesome.min.css<?php echo $static_version;?>">

<link rel="stylesheet" href="<?php echo view_path();?>css/wellcms_x.css<?php echo $static_version;?>">


页脚,如果不需要前端各种黑科技,可以砍掉这些 JS 代码,其他页面的 JS 代码也都可以砍掉。


如果需要前端评论等功能,这些不能删除,担心连接数过多,你可以合并成一个文件。


合并后如果需要压缩,注意有些JS代码可能没有分号结束,而且有的JS代码使用的双斜杠注释,这些都会导致错误,请自行处理下再压缩。


JQ控制页头导航高亮,自己酌情是否保留。

需要 jquery-3.4.1.min.js
<!-- 其他页面类似于这种代码,是导航高亮 -->
<script>
    $('#nav li[data-active="fid-<?php echo $fid;?>"]').addClass('active');
</script>


下面的可以砍掉

<!--[if ltg IE 9]>
<script>window.location = '<?php echo url('browser');?>';</script>
<![endif]-->
<?php $browser = get__browser();?>
<?php if($browser['name'] == 'ie') { ?>
<script src="<?php echo view_path();?>js/es6-shim.js<?php echo $static_version;?>"></script>
<?php } ?>
<script src="<?php echo $conf['path'];?>lang/<?php echo $conf['lang'];?>/lang.js<?php echo $static_version;?>"></script>
<script src="<?php echo view_path();?>js/jquery-3.4.1.min.js<?php echo $static_version;?>"></script>
<script src="<?php echo view_path();?>js/popper.min.js<?php echo $static_version;?>"></script>
<script src="<?php echo view_path();?>js/bootstrap.min.js<?php echo $static_version;?>"></script>
<script src="<?php echo view_path();?>js/xiuno.js<?php echo $static_version;?>"></script>
<script src="<?php echo view_path();?>js/bootstrap-plugin.js<?php echo $static_version;?>"></script>
<script src="<?php echo view_path();?>js/async.min.js<?php echo $static_version;?>"></script>
<script src="<?php echo view_path();?>js/form.js<?php echo $static_version;?>"></script>
<script>
    var debug = DEBUG = <?php echo DEBUG; ?>;
    var url_rewrite_on = <?php echo $conf['url_rewrite_on'];?>;
    var forumarr = <?php echo xn_json_encode($forumarr);?>;
    var fid = <?php echo $fid;?>;
    var uid = <?php echo intval($uid);?>;
    var gid = <?php echo intval($gid);?>;
    xn.options.water_image_url = '<?php echo view_path(),$conf['logo_water_url'];?>';
</script>
<script src="<?php echo view_path();?>js/wellcms.js<?php echo $static_version;?>"></script>

<!-- 下面是图片赖加载,需要的话,单独加上,不依赖任何其他组件 -->
<script src="<?php echo view_path();?>js/echo.min.js<?php echo $static_version;?>"></script>
<script>
    (function ($) {
        path = "<?php echo $conf['path'];?>";
        $("body img").each(function (k, v) {
            var img = $("img").get(k).outerHTML;
            img = img.replace('src', 'data-echo');
            $(this).replaceWith(img);
        });
    })(jQuery);
    echo.init({offset: 100, throttle: 250, unload: false});
</script>


转载请注明原文地址:http://www.wellcms.cn/read-86.html
0