WeEngine模板实现

最新推荐文章于 2021-11-26 16:44:03 发布

maray

最新推荐文章于 2021-11-26 16:44:03 发布

阅读量2.8k

点赞数

CC 4.0 BY-SA版权

分类专栏：编程与应用

本文链接：https://blog.youkuaiyun.com/maray/article/details/36377659

编程与应用专栏收录该内容

236 篇文章

订阅专栏

1. 模板的位置：模板位于we7安装目录下的themes/mobile目录下，如下图：

[root@xuehuar weixin]# ls
account.php cloud.php extension.php install.php member.php mobile.php README.md rule.php site.php themes
api.php data index.php install.sql menu.php payment resource setting.php source

[root@xuehuar themes]# ls
index.html mobile web

[root@xuehuar mobile]# ls
default dstyle01 dstyle05 moban1 moban2 moban5 quick style1 style2 vw011

可以观察到，每一个文件夹对应了下图中的一个模板。我们这里要编辑的是dstyle01模板。

dstyle01模板包含下列文件：

index.html manifest.xml preview.jpg site slide.html style

./site:
detail.html list.html

./style:
mobile.css

主页对应的模板文件是index.html，这个文件很简单，它主要做了两件事：

1. 包含slide.html进来，这个文件描述的是页面最上面的滚动图片。

{template 'slide'}

2. 列出所有的主页按钮。

{loop $navs $nav}
<li class="icon-items">
  <a href="{$nav['url']}"><i style="background:url({$_W['attachurl']}{$nav['icon']}) no-repeat center center;"></i>{$nav['name']}</a>
</li>
{/loop}

这里它只是简单的把所有按钮罗列出来，罗列的顺序是按照什么来呢？看we7后台：

可以看到这里有一个排序，只需要填入数字即可，模板中就会按照这个数字顺序罗列图标。

下一个议题：为什么不同模板，显示出来的风格完全不同呢？

奥秘在于每个模板用了不同的css来描述页面风格。还是看index.html，有这么一行：

<link href="{$_W['siteroot']}/themes/mobile/dstyle01/style/mobile.css" rel="stylesheet" type="text/css" />

它告诉浏览器，在dstyle01/style目录下有一个mobile.css文件，里面就是描述模板风格的内容。如果你懂的如何修改css，可以通过定制这里的内容来修改模板风格。

@charset "utf-8";

/* HOME Botton */
.home { margin:0 auto ;min-width:300px;color: #fff;padding:0 10px;} 
.icon-items li { position: relative; float: left; width:49.0%; text-align: center; margin: 10px 0 0 0;border-radius:3px;box-sizing:border-box;
-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
-webkit-transform:scale(0);-webkit-animation-name:janim;-webkit-animation-duration:.3s;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:1;-web
kit-animation-direction:normal;-webkit-animation-fill-mode:forwards;}
@-webkit-keyframes janim {0%{-webkit-transform:scale(0.2)}50%{-webkit-transform:scale(1.2)}100%{-webkit-transform:scale(1)}}
.icon-items li a{display:block;width: 100%;height:70px;line-height:70px;color:#FFF;font-size:18px;}
.icon-items li a:hover{background-color: rgba(0,0,0,.1); z-index: 1;color:#FFF;}
.icon-items li a i{width:30px;height:30px;display:inline-block;vertical-align:middle;margin-right:15px;}

.icon-items li:nth-child(1){background-color:#3E67E2;-webkit-animation-delay: .15s;}
.icon-items li:nth-child(2){background-color:#678CE1;float:right;}
.icon-items li:nth-child(3){background-color:#1fa9ea;-webkit-animation-delay: .45s;}
.icon-items li:nth-child(4){background-color:#ef9310;-webkit-animation-delay: .75s;float:right;}
.icon-items li:nth-child(5){background-color:#8BCA11;-webkit-animation-delay: .6s;}
.icon-items li:nth-child(6){background-color:#7266d1;-webkit-animation-delay: .6s;float:right;}
.icon-items li:nth-child(7){background-color:#da1e0c;-webkit-animation-delay: 0.55s;}
.icon-items li:nth-child(7) a i{margin:50px 0 0 0;width:100%;clear:both;}
.icon-items li:nth-child(7) a{height:150px;line-height:40px;clear:both;}
.icon-items li:nth-child(8){background-color:#CFA871;-webkit-animation-delay: 0.3s;float:right;}
.icon-items li:nth-child(9){background-color:#FC5366;-webkit-animation-delay: 0.3.3s;float:right;}
.icon-items li:nth-child(9) a i{margin:0px;width:0px;}

比如，你希望修改按钮颜色，只需要修改这些内容即可，里面都是对颜色的描述：

.icon-items li:nth-child(1){background-color:#3E67E2;-webkit-animation-delay: .15s;}
.icon-items li:nth-child(2){background-color:#678CE1;float:right;}
.icon-items li:nth-child(3){background-color:#1fa9ea;-webkit-animation-delay: .45s;}
.icon-items li:nth-child(4){background-color:#ef9310;-webkit-animation-delay: .75s;float:right;}
.icon-items li:nth-child(5){background-color:#8BCA11;-webkit-animation-delay: .6s;}
.icon-items li:nth-child(6){background-color:#7266d1;-webkit-animation-delay: .6s;float:right;}
.icon-items li:nth-child(7){background-color:#da1e0c;-webkit-animation-delay: 0.55s;}
.icon-items li:nth-child(8){background-color:#CFA871;-webkit-animation-delay: 0.3s;float:right;}
.icon-items li:nth-child(9){background-color:#FC5366;-webkit-animation-delay: 0.3.3s;float:right;}

再比如，你希望修改第七个、第九个按钮的大小，只需要修改：

.icon-items li:nth-child(7) a i{margin:50px 0 0 0;width:100%;clear:both;}
.icon-items li:nth-child(7) a{height:150px;line-height:40px;clear:both;}
.icon-items li:nth-child(9) a i{margin:0px;width:0px;}

如果希望调整所有按钮的大小，修改：

.icon-items li { position: relative; float: left; width:49.0%; text-align: center; margin: 10px 0 0 0;border-radius:3px;box-sizing:border-box;
-moz-box-sizing:border-box; 
-webkit-box-sizing:border-box; 
-webkit-transform:scale(0);-webkit-animation-name:janim;-webkit-animation-duration:.3s;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:1;-web
kit-animation-direction:normal;-webkit-animation-fill-mode:forwards;}

总结一下

1. 调整按钮顺序？

登录we7后台-》微站功能-》微站导航图标，设置排序数字。默认是全0，改成你喜欢的从小到大的顺序。

2. 调整页面风格？

修改index.html的样式表。

3. 自己造一个模板？

新建一个目录，如mydream模板。然后里面创建一个index.html文件，以及一个manifest.xml文件。其余文件都是可选。manifest.xml文件怎么写？看看其它模板怎么写，照抄就行了。都弄好后，将mydream文件夹上传到ftp的themems/mobile目录下即可。