# 介绍

自定义指令,使用方法类似于#for #end,如标识了不需要end结束符,则为#mdToHtml()

名称 是否需要end结束符 可用页面 描述
articlePage 任意 获取文章列表(分页)
archivePage 任意 获取文章归档列表(分页)
categories 任意 获取所有分类
commentPage 文章页(article.html)或任意与页面关联的菜单页(参考perfree主题友链link.html) 获取评论列表(分页)
hotArticle 任意 获取N条热门文章
hotTag 任意 获取N条热门标签
latestArticle 任意 获取N条最新文章
linkPage 任意 获取友链列表(分页)
mdSummary 任意 获取指定文章指定长度简介
mdToHtml 任意 markdown转html
menus 任意 获取所有菜单
nextArticle 文章页(article.html) 获取下一篇文章
preArticle 文章页(article.html) 获取上一篇文章
option 任意 获取任意配置项
pageRender 任意,需配合articlePage等分页列表指令 根据分页信息自动渲染分页html
statistics 任意 获取文章,标签分类等统计信息
timeAgo 任意 根据日期获取人性化时间,如1小时前

# articlePage

该指令用于获取文章分页列表,参数pageSize为每页多少条

#articlePage(pageSize=5)
#end
1
2

属性说明

名称 类型 描述
articlePage.data 集合List 文章列表数据
articlePage.pagers 集合List 分页数据

示例:

#articlePage(pageSize=5)
    #for(article: articlePage.data)
        <div class="article-box">
            <h2 class="article-title">
                <a href="#(article.url)">#(article.title)</a>
            </h2>
            <div class="article-info">
                <span>作者:#(article.user.userName ??)</span>
                <span>时间:#date(article.createTime, "yyyy-MM-dd")</span>
                <span>浏览:#(article.viewCount ??)</span>
                <span>评论:#(article.commentCount ??)</span>
            </div>
            <div class="article-content">
                #mdSummary(article.content,200)...
            </div>
        </div>
    #else
        暂无文章
    #end
    #if(articlePage.pagers)
        <nav class="m-pager-box">
            <a class="m-pager #(articlePage.preUrlStyle)" href="#(articlePage.preUrl ??)">上一页</a>
            #for(page : articlePage.pagers)
                <a class="m-pager #(page.style)" href="#(page.url ??)">#(page.text ??)</a>
            #end
            <a class="m-pager #(articlePage.nextUrlStyle)" href="#(articlePage.nextUrl ??)">下一页</a>
        </nav>
    #end
#end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

以上示例就完成了文章列表带分页的功能,如果觉得分页过于复杂,可以使用分页指令,渲染默认的分页,如下:

#articlePage(pageSize=5)
    #for(article: articlePage.data)
        <div class="article-box">
            <h2 class="article-title">
                <a href="#(article.url)">#(article.title)</a>
            </h2>
            <div class="article-info">
                <span>作者:#(article.user.userName ??)</span>
                <span>时间:#date(article.createTime, "yyyy-MM-dd")</span>
                <span>浏览:#(article.viewCount ??)</span>
                <span>评论:#(article.commentCount ??)</span>
            </div>
            <div class="article-content">
                #mdSummary(article.content,200)...
            </div>
        </div>
    #else
        暂无文章
    #end

    #pageRender(articlePage, preText="上一页",nextText="下一页")
#end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

# archivePage

文章归档列表数据分页,参数pageSize为每页多少条

#archivePage(pageSize=12)
#end
1
2

属性说明

名称 类型 描述
archivePage.data 集合List 文章列表数据
archivePage.pagers 集合List 分页数据

示例:

#archivePage(pageSize=12)
    #for(archive: archivePage.data)
        #for(archiveArticle: archive.articles)
            <a href="#(archiveArticle.url)" class="m-archive-link">
                #date(archiveArticle.createTime, "MM/dd"):&nbsp;#(archiveArticle.title)
            </a>
        #end
    #else
        暂无文章
    #end
    #pageRender(archivePage, preText="上一页",nextText="下一页")
#end
1
2
3
4
5
6
7
8
9
10
11
12

# categories

获取所有分类

 #categories()
 #end
1
2

示例:

#categories()
    #for(category: categories)
        <dd lay-unselect>
            <a href="#(category.url)">
                #(category.name ??)
                <span class="empty"></span>
                <span class="layui-badge-rim">#(category.count ??)</span>
            </a>
        </dd>
    #end
#end
1
2
3
4
5
6
7
8
9
10
11

# commentPage

引入评论的话建议使用自带的评论组件,使用只需要以下步骤即可

  • 引入css<link href="/static/public/components/comment/comment.css" rel="stylesheet">
  • 引入页面#include("/static/public/components/comment/comment.html")
  • 引入js<script src="/static/public/components/comment/comment.js"></script>

获取评论列表分页数据,该指令只能在文章页(article.html)或任意与页面关联的菜单页使用(参考perfree主题的link.html),参数pageSize为每页多少条

#commentPage(pageSize=6)
#end
1
2

属性说明

名称 类型 描述
commentPage.data 集合List 评论列表数据
commentPage.pagers 集合List 分页数据

示例:

#commentPage(pageSize=6)
     #for(comment : commentPage.data)
        #for(comment : commentPage.data)
        #end
     #else
        暂无评论
     #end
    #pageRender(commentPage, anchor="#commentList",preText="上一页",nextText="下一页")
#end
1
2
3
4
5
6
7
8
9

# hotArticle

获取热门文章参数count获取多少条,type热门文章类型0按照评论数,1按照浏览量

#hotArticle(count=10,type=0)
#end
1
2

示例

 #hotArticle(count=10,type=0)
    #for(article : articles)
        <li class="m-right-article">
            <a href="#(article.url)">#(article.title)</a>
        </li>
    #else
        暂无文章
    #end
#end
1
2
3
4
5
6
7
8
9

# hotTag

获取热门标签,参数count获取多少条

#hotTag(count=10)
#end
1
2

示例

#hotTag(count=10)
    #for(tag : tags)
        <a href="#(tag.url)" class="m-right-tag" title="共#(tag.articleCount ??)篇文章">#(tag.name)</a>
    #end
#end
1
2
3
4
5

# latestArticle

获取最新文章,参数count获取多少条

#latestArticle(count=10)
#end
1
2

示例:

#latestArticle(count=10)
    #for(article : articles)
        <li class="m-right-article">
            <a href="#(article.url)">#(article.title)</a>
        </li>
    #else
        暂无文章
    #end
#end
1
2
3
4
5
6
7
8
9

# linkPage

获取友链分页列表数据,参数pageSize为每页多少条

#linkPage(pageSize=12)
#end
1
2

属性说明

名称 类型 描述
linkPage.data 集合List 文章列表数据
linkPage.pagers 集合List 分页数据

示例:

#linkPage(pageSize=12)
    #for(link: linkPage.data)
    #else
        暂无数据
    #end
    #pageRender(linkPage, preText="上一页",nextText="下一页")
#end
1
2
3
4
5
6
7

# mdSummary

获取指定文章指定长度简介,需要传入文章内容和获取简介的长度

#mdSummary(article.content,200)
1

# mdToHtml

将markdown转为html,需要传入markdown内容

#mdToHtml(article.content ??)
1

获取菜单列表

#menus()
    #for(menu : menus)
        <li class="layui-nav-item">
            <a href="#(menu.url ??)"><i class="fa #(menu.icon ??)"></i> #(menu.name ??)</a>
        </li>
        #if(menu.childMenu && menu.childMenu)
            #for(childMenu: menu.childMenu)
                子菜单
            #end
        #end
    #end
#end
1
2
3
4
5
6
7
8
9
10
11
12

# nextArticle

获取下一篇文章,该指令需要在文章页使用

#nextArticle()
    #if(nextArticle)
        <a class="a-next-article" href="#(nextArticle.url)" title="#(nextArticle.title)">下一篇 <i class="fa fa-angle-right"></i></a>
    #end
#end
1
2
3
4
5

# preArticle

获取上一篇文章,该指令需要在文章页使用

 #preArticle()
    #if(preArticle)
        <a class="a-pre-article" href="#(preArticle.url)" title="#(preArticle.title)">
                <i class="fa fa-angle-left"></i> 上一篇
        </a>
    #end
#end
1
2
3
4
5
6
7

# option

用于读取指定的配置信息,可配合主题setting.html实现自由配置网站,setting.html保存option,前台读取option,该指令需要传入需要读取的key以及默认值

#option('WEB_NAME','未设置')
1

# pageRender

用于分页渲染,在前边几个分页列表指令中已经演示了怎么使用,这里描述下具体的参数

 #pageRender(articlePage, preText="上一页",nextText="下一页")
1

第一个参数为当前分页指令数据,preText为上一页的文字,nextText为下一页的文字

# statistics

用于获取统计信息

 #statistics()
    <div class="m-info-other">
        <span>文章</span>
        <span>#(statistics.articleCount)篇</span>
    </div>
    <div class="m-info-other">
        <span>评论</span>
        <span>#(statistics.commentCount)条</span>
    </div>
    <div class="m-info-other">
        <span>标签</span>
        <span>#(statistics.tagCount)个</span>
    </div>
#end
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# timeAgo

获取人性化时间,如两小时前,一天前等

#timeAgo(comment.createTime)
1
Last Updated: 12/27/2020, 8:46:02 PM