使用“铭软(企业版)“开发官网体验(二)

最新推荐文章于 2024-08-12 16:57:37 发布

初梦依旧

最新推荐文章于 2024-08-12 16:57:37 发布

阅读量143

点赞数 2

文章标签：个人开发

本文链接：https://blog.csdn.net/qq_44149644/article/details/140036261

版权

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}&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;-->
        <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>

初梦依旧

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用“铭软(企业版)“开发官网体验(二)

使用freeMark语言,了解if-else是最重要的,没有地方写模板不识别 ‘>‘和’<’,但是应用的时候就是不能出现正常的结果,所以。6.前台可以使用vue对一些动态的按钮的点击效果进行处理,但是不能过分依赖vue,会比较麻烦.大于号使用 gt 小于号使用 lt ,等号就使用等号就行.如果闭合标签写乱了,就创建一个ftl类型的文件,检查一下标签闭合的状态是否正确.7.直接使用纯js和css加html中的内容实现基本的功能,比较快.2."铭软"使用的是freemark语法。
复制链接

扫一扫