Tiny框架的官网已经开通:http://www.tinygroup.org/
新增加war包下载地址,呵呵愿意体验的可以直接下载并发布到容器即可试用,也可以查看里面的内容。
由于只花了两天时间制作,一天时间搞页面,一天时间搞内容,所以还非常粗糙,还有许多需要完善的地方,欢迎同学们提出改进和完善意见,但是今天网站做的好不好不是重点,重点讲讲网站是怎么做出来的。当然了,不用问,必须用Tiny框架来做,所以今天就来讲一下如何利用Tiny框架来高速有效的进行网站开发。
网站模板选择
首先声明,本人是美工盲,前台界面盲,JS盲。所以,指望自己弄个漂亮的网站出来那是根本没有可能的。好在现在互联网发达,只要用心找就是可以找得到的。想想准备用bootstrap方式的响应式网页方式,于是就找到了themeforest.net,然后就在其主题世界荡漾,最后感觉Perfetto网站效果不错,是我想要的效果,再查看一下源文件,发现比较简单,比较容易搞定。于是就想着就是它了。
于是从http://www.angelomazzilli.com/Perfetto/index.html上把源文件搞下来,呵呵,第一手资料就算有了。由于这个不是重点,所以就快速过掉,总之,我拿到了这个网站的html,js,css,图片等等一应资源,在本地目录中打开文件访问也正确,OK,可以进入下一步骤。
宏提取
所谓宏提取,就是把网页里重复出现的东东搞成个宏,这样就避免了重复内容到处复制来复制去:
#macro (a $aHref $title $aTarget )
<a#if($title) title="$title"#end#if($aHref)
href="#if($aHref.startWith('/'))#if($TINY_CONTEXT_PATH.equals("/"))#else{TINY_CONTEXT_PATH}#end$#end$aHref"#end#if($aTarget)
target="$aTarget"#end>
$bodyContent
</a>
#end
#macro (img $imgHref $imgTitle)
<img#if($imgTitle) alt="$imgTitle"#end#if($imgHref)
src="#if($imgHref.startWith('/'))#if($TINY_CONTEXT_PATH.equals("/"))#else{TINY_CONTEXT_PATH}#end$#end$imgHref"#end#>
</a>
#end
#macro(section)
<div class="section">
$bodyContent
</div>
#end
#macro(container)
<div class="container">
$bodyContent
</div>
#end
#macro(row)
<div class="row">
$bodyContent
</div>
#end
#macro(span1)
<div class="span1">
$bodyContent
</div>
#end
#macro(span2)
<div class="span2">
$bodyContent
</div>
#end
#macro(span3)
<div class="span3">
$bodyContent
</div>
#end
#macro(span4)
<div class="span4">
$bodyContent
</div>
#end
#macro(span5)
<div class="span5">
$bodyContent
</div>
#end
#macro(span6)
<div class="span6">
$bodyContent
</div>
#end
#macro(span7)
<div class="span7">
$bodyContent
</div>
#end
#macro(span8)
<div class="span8">
$bodyContent
</div>
#end
#macro(span9)
<div class="span9">
$bodyContent
</div>
#end
#macro(span10)
<div class="span10">
$bodyContent
</div>
#end
#macro(span11)
<div class="span11">
$bodyContent
</div>
#end
#macro(span12)
<div class="span12">
$bodyContent
</div>
#end
#macro(hr)
<hr/>
#end
#macro(dropdownMenu $dropdownTitle $dropdownHref $dropdownSubTitle )
<li class="dropdown"><a href="$dropdownHref?activePage=$!menuKey">$dropdownTitle</a> <b class="caret"></b>
<span>$dropdownSubTitle</span>
$!bodyContent
</li>
#end
#macro(menu $menuTitle $menuHref $menuSubTitle $menuKey)
<li class="dropdown#if($menuKey==$activePage) active#end"><a
href="${menuHref}">$menuTitle</a>
<span>$menuSubTitle</span>
$!bodyContent
</li>
#end
#macro(nav)
<ul class="nav">
$bodyContent
</ul>
#end
#macro(subMenu)
<ul>
$bodyContent
</ul>
#end
#macro(subMenuItem $title $href $menuKey)
<li><a href="$href"#if($menuKey==$activePage) class="current"#end >$title</a></li>
#end
#macro(pageTitle $title $page)
#set($pageTitle="$title")
#set($activePage="$page")
#end
#macro(modalFooter)
<div class="modal-footer&#