Una | 尤娜

一个基于Spring Boot 2.0构建的Java博客系统

序言

实现尤娜主题渲染标签的目的是为了能够加快主题皮肤的制作,对于不熟悉Java语言或者对Spring Boot不太了解的朋友也能快速的定制出自己的博客主题。尤娜主题渲染标签是在Freemarker框架的基础上实现的,沿用了Freemarker的基础标签,如逻辑判断(if语句,if…else语句,多重if…else语句,switch语句等),数据迭代(对象数组,分页),数据格式化(时间格式化)以及数据排序等。尤娜主题渲染标签分为全局常量,内容标签,格式化函数,脚本函数和分页函数五类,在接下来的内容中,将做详细介绍。下面是Freemarker的基本原理图,对Freemarker不是太熟悉的朋友可访问其官网(https://freemarker.apache.org/) 了解更多详细的知识。

脚本函数

在尤娜v1.2.2版本中,新增了两个脚本函数u_gitalkScript()和u_gitalkSource()。u_gitalkScript()函数用于生成Gitalk的JavaScript初始化脚本,u_gitalkSource()函数用于生成Gitalk的样式文件连接和JS脚本的链接地址。

u_gitalkSource()

u_gitalkSource()函数接收一个String类型参数,该参数的可选值有”css”和”js”(u_gitalkSource()函数会忽略大小写)。下面是使用示例:

html

<html>
    <head>
        <link href="${u_gitalkSource("css")}" rel="stylesheet"/>
    </head>
    <body>
        ...
        <script src="${u_gitalkSource("js")}" type="text/javascript"></script>
    </body>
</html>

Output

<html>
    <head>
        <link href="https://cdn.bootcss.com/gitalk/1.5.0/gitalk.css" rel="stylesheet"/>
    </head>
    <body>
        ...
        <script src="https://cdn.bootcss.com/gitalk/1.5.0/gitalk.js" type="text/javascript"></script>
    </body>
</html>

u_gitalkScript()

u_gitalkScript()函数接收两个参数,文章ID和评论区的DOM属性(可以是div的id或class属性值)。使用此函数后,会生成一段Gitalk评论插件的初始化脚本(使用该函数的前提是在尤娜系统后台配置了Gitalk插件的相关信息)。下面是u_gitalkScript()使用示例:

Data

Integer postId = 1101;

u_gitalkScript()

<html>
    <head>
        <link href="${u_gitalkSource("css")}" rel="stylesheet"/>
    </head>
    <body>
        <div id="gitalk-container"></div>
         <script src="${u_gitalkSource("js")}" type="text/javascript"></script>       
        <script type="text/javascript">
            ${u_gitalkScript(postId "gitalk-container")}
        </script>
    </body>
</html>

Output

<html>
    <head>
        <link href="https://cdn.bootcss.com/gitalk/1.5.0/gitalk.css" rel="stylesheet"/>
    </head>
    <body>
        <div id="gitalk-container"></div>
         <script src="https://cdn.bootcss.com/gitalk/1.5.0/gitalk.js" type="text/javascript"></script>       
        <script type="text/javascript">
            var gitalk = new Gitalk({
                clientID:'e29f4c******e0e90',
                clientSecret:'093e887a62************f01b04bef23d3',
                repo:'your gitalk repository',
                owner:'ramostear',
                admin:'ramostear',
                id:'2564367701**************212042061'
            });
            gitalk.render('gitalk-container');
        </script>
    </body>
</html>

下图是u_gitalkScript()使用的实际效果图: