1.将html文件变成"铭软"项目可以识别的
2."铭软"使用的是freemark语法
http://freemarker.foofun.cn/ref_directive_if.html
3.我们可以将他理解为,后台解析返回的相当于是固定页面结构;然后浏览器再去解析这个页面结构
4.据说是跟jsp类似,
5后台返回的页面当前普通html,然后在前端该怎么处理就怎么处理
6.前台可以使用vue对一些动态的按钮的点击效果进行处理,但是不能过分依赖vue,会比较麻烦.
7.直接使用纯js和css加html中的内容实现基本的功能,比较快.
<html>
<head>
<title>{ms:global.name/}</title>
<#include "header-file.htm" />
</head>
<body>
<#include "header.htm" />
<div class="homeUser">
<!-- 这个是5篇文章,使用的是循环,所以最外层是一个循环 -->
<!-- //整个系统都是栏目的循环-->
{ms:arclist typeid=1805837914469322753 size=1 orderby="sort" order="asc" }
<div class="TitleComponentStyle">
<div class="bg-text"> ${field.author}</div>
<!-- 文章副标题-->
<div class="fg-text">${field.shorttitle}</div>
<!-- 文章正标题-->
<div class="line"></div>
</div>
{/ms:arclist}
<div class="topImgInstruct">
{ms:arclist typeid=1805837914469322753 size=2 orderby="sort" order="asc" }
<#if field.index gt 1>
<div class="imgContainer">
<img src="{@ms:file field.litpic/}">
</div>
</#if>
{/ms:arclist}
<div class="insideContainer">
{ms:arclist typeid=1805837914469322753 size=6 orderby="sort" order="asc" }
<#if field.index gt 2>
<!-- 上面的div-->
<!-- ${field}------------------------------------------>
<div class="imgInsideContainer">
<img class="imgInsideContainerImg" src="{@ms:file field.litpic/}">
</div>
</#if>
{/ms:arclist}
</div>
</div>
<div class="bottomImgInstruct">
{ms:arclist typeid=1805837914469322753 size=10 orderby="sort" order="asc" }
<#if field.index gt 6>
<div class="bottomContainerItem">
<img src="{@ms:file field.litpic/}" class="bottomContainerItemImg">
<div class="bottomContainerItemContent">
<!-- 下面的div-->
<!-- ${field}*******************************************-->
<div class="titleClass">${field.shorttitle}</div>
<div class="contentStyle">${field.descrip}</div>
<div class="contentButtonContainer">
<div class="timeStyle">时长:${field.author}</div>
<div class="buttonContainer"><button class="blue-border-button">立即观看</button></div>
</div>
</div>
</div>
</#if>
{/ms:arclist}
</div>
</div>
<#include "footer.htm" />
</body>
<style>
.homeUser{
padding: 60px 0;
}
.bottomImgInstruct {
display: flex;
flex-wrap: nowrap;
width: 78vw;
margin: auto;
justify-content: space-between;
}
.bottomContainerItem {
width: 24%
}
.bottomContainerItemImg {
width: 100%;
height: auto;
}
.bottomContainerItemContent {
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 28px;
}
.titleClass {
font-weight: 500;
font-size: 24px;
color: #3F3E3E;
line-height: 25px;
}
.contentStyle {
font-family: SourceHanSansCN;
font-weight: 400;
font-size: 18px;
color: #AEAEAE;
line-height: 25px;
margin-top: 18px;
}
.contentButtonContainer {
display: flex;
width: 100%;
justify-content: space-between;
align-items: baseline;
}
.timeStyle {
font-family: SourceHanSansCN;
font-weight: 400;
font-size: 18px;
color: #AEAEAE;
line-height: 25px;
margin-top: 14px;
}
.buttonContainer {}
.buttonStyle {}
.blue-border-button {
background-color: white;
/* color: black; */
/* border: 2px solid blue; */
padding: 5px;
text-align: center;
text-decoration: none;
display: inline-block;
margin: 4px 2px;
cursor: pointer;
transition: all 0.3s ease;
font-family: SourceHanSansCN;
font-weight: 400;
font-size: 16px;
color: #3463D7;
line-height: 25px;
border-radius: 56px;
border: 1px solid #3463D7;
}
.blue-border-button:hover {
background-color: #3463D7;
color: white;
/* 当鼠标悬停在按钮上时,更改背景颜色 */
}
.topImgInstruct {
display: flex;
width: 78vw;
margin: auto;
justify-content: space-between;
flex-direction: row;
margin-bottom: 20px;
margin-top: 32px;
}
.topImgInstruct .imgContainer {
width: 50%;
}
.topImgInstruct .imgContainer img {
width: 100%;
height: auto;
}
.topImgInstruct .insideContainer {
width: 49%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
align-content: space-between;
}
.imgInsideContainer {
width: 49%;
}
.imgInsideContainerImg {
width: 100%;
}
/* //使用手机端的时候需要使用的是 */
@media screen and (max-width: 1024px) {
.imgInsideContainerImg {
width: 100%;
margin-bottom: 10px;
}
.homeUser{
padding: 0;
padding-bottom: 60px;
}
.topImgInstruct {
display: flex;
width: 78vw;
margin: auto;
justify-content: space-between;
flex-direction: column;
margin-bottom: 20px;
margin-top: 20px;
}
.topImgInstruct .imgContainer {
width: 100%;
margin-bottom: 10px;
}
.topImgInstruct .insideContainer {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
align-content: space-between;
flex-direction: column;
}
.imgInsideContainer {
width: 100%;
}
.bottomImgInstruct {
display: flex;
flex-wrap: nowrap;
width: 78vw;
margin: auto;
justify-content: space-between;
flex-direction: column;
}
.bottomContainerItem {
width: 100%;
}
}
</style>
</html>
使用freeMark语言,了解if-else是最重要的,没有地方写模板不识别 ‘>‘和’<’,但是应用的时候就是不能出现正常的结果,所以
大于号使用 gt 小于号使用 lt ,等号就使用等号就行.
不要着急慢慢写,标签一定要闭合
如果闭合标签写乱了,就创建一个ftl类型的文件,检查一下标签闭合的状态是否正确.
<#if condition>
...
<#elseif condition2>
...
<#elseif condition3>
...
...
<#else>
...
</#if>