网页公用代码

一般指网站公用的头部和尾部,可以命名为:_layout.html。

做法:头尾部的代码提取出来,然后用标签:

#define layout()
  ...
  #@content()
  ...

#end

其他页面引用头尾部代码时,用标签:

#include("./_layout.html")

#define content()
...
#end

公用代码示例代码如下:

#define layout()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="#(SEO_DESCRIPTION)">
    <meta name="keywords" content="#(SEO_KEYWORDS)">
    <title>#(SEO_TITLE ?? WEB_TITLE +'-'+ WEB_SUBTITLE)</title>
</head>
<body>
<nav class="">
    <div class="container">
        <div class="navbar-left">
            <button class="navbar-toggler" type="button">&#9776;</button>
            <a class="navbar-brand" href="#(CPATH)/">
                <img class="logo-dark" src="#option('jpress_logo_light','images/logo.png')" alt="logo">
                <img class="logo-light" src="#option('jpress_logo_dark','images/logo-inverse.png')" alt="logo">
            </a>
        </div>
        <section class="navbar-mobile">

            <ul class="nav-navbar nav ml-auto">
                #for(menu : MENUS)
                <li class="nav-item">
                    #if(menu.hasChild())
                    <a class="nav-link #(menu.isActive ? 'active' : '')">
                        #(menu.text ??)
                        <i class="fa fa-caret-down"></i>
                    </a>
                    #else
                    <a class="nav-link #(menu.isActive ? 'active' : '')" href="#(menu.url ??)">
                        #(menu.text ??)
                    </a>
                    #end

                    #if(menu.hasChild())
                    <nav class="nav">
                        #for(childMenu : menu.getChilds())
                        <a class="nav-link" href="#(childMenu.url ??)">#(childMenu.text ??)</a>
                        #end
                    </nav>
                    #end
                </li>
                #end
            </ul>
            <div class="nav-download d-inline-flex">
                #if(USER)
                <div class="dropdown">
                                <span class="dropdown-toggle no-caret" data-toggle="dropdown">
                                    <img class="avatar avatar-xs" src="#(USER.avatar ?? 'images/jp-portrait.jpg')" alt="user">
                                </span>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="#(CPATH)/ucenter/article/write">我要投稿</a>
                        <a class="dropdown-item" href="#(CPATH)/ucenter/info">我的信息</a>
                        <a class="dropdown-item" href="#(CPATH)/ucenter/avatar">修改头像</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#(CPATH)/ucenter/doLogout?csrf_token=#(CSRF_TOKEN)">退出登录</a>
                    </div>
                </div>
                #else
                <a class="nav-link"  href="#(CPATH)/user/login">登录</a>
                #end

                <a class="btn" href="/download">下载源码</a>
            </div>


        </section>
    </div>
</nav>



#@content()


<footer class="footer">
    ...
</footer>


<!-- Scripts -->
<script src="js/main.js"></script>
#@script?()

</body>
</html>

#end
备注:

#(SEO_DESCRIPTION) —— 网站的SEO描述

#(SEO_KEYWORDS) —— 网站的SEO关键字

#(SEO_TITLE ?? WEB_TITLE +'-'+ WEB_SUBTITLE) —— 网站的标题调用后台填写SEO的标题,如果没有填写,则使用 网页标题-网页描述 的方式。

#(menu.text ??) —— 菜单名称

#(childMenu.text ??) —— 子菜单名称

#(menu.url ??) —— 菜单链接

#(childMenu.url ??) —— 子菜单链接

#(CPATH)/ucenter/doLogout?csrf_token=#(CSRF_TOKEN) —— 退出登录

#(CPATH)/user/login —— 登录

加入VIP


如果你想系统学习JPress涉及到的知识点,或者希望有人解答你在深度使用JPress时遇到问题,加入VIP是个很不错的选择

立马 了解一下