73n5lsCR - 8天前注册会员;
NaZ2pUfG - 17天前注册会员;
bwpKIZwD - 66天前注册会员;
jRAbGRXk - 119天前注册会员;
jxE5lfJy - 126天前注册会员;
加入我们(60 )

了解emlog模板开发指南

以下内容,您可在后续参考,或者进入:https://www.emlog.net/docs/#/template 查阅最新文档

第一次学不需要看!!!!

第一次学不需要看!!!!

第一次学不需要看!!!!

🍉 模板开发指南

emlog可以方便的更换模板,模板主题文件位于安装目录content\templates\文件夹下,每个模板都是一个单独的文件夹,文件夹以模板名字命名。通过应用商店以及后台上传安装的模板都保存在这个目录下。

模板文件及目录说明

  • css 文件夹:存放模板所需的所有CSS样式文件。

  • js 文件夹:存放模板所需的所有JS文件。

  • images 文件夹:存放模板所需图片。

  • header.php:页面头部,一般包页面head信息和顶部标题导航。

  • echo_log.php:展示单篇文章内容。

  • log_list.php:展示文章列表。

  • footer.php:页面底部信息。

  • module.php:侧边栏模块:最新文章、评论、分类、标签等。

  • page.php:展示自定义的页面。

  • preview.jpg:在后台模板选择界面显示的模板预览图,300×225 jpg格式。

  • side.php:模板侧边栏文件,如制作单栏模板则该文件不是必须的。

  • 404.php 自定义404页面未找到时的报错页面

  • pw.php 自定义加密文章输入密码页面 【非必须,没有该文件使用系统默认样式】

模板引擎

emlog未采用任何其他第三方的模板引擎,直接使用PHP原生的语法标记来内嵌HTML生成动态页面。这样不但降低了开发者的学习负担,也大大提高了页面加载和渲染效率。

// eg:嵌入变量
<div><?= $value ?></div>

// eg:循环
<?php foreach ($abc as $v) :?>
    <div><?= $v ?></div>
<?php endforeach;?>

// eg: 判断
<?php if($a == 'abc') :?>
    <div>hello</div>
<?php endif;?>

公共代码

通过预览整个模板中的各个文件,你会发现以下代码同时存在于多个文件中,这些代码分别有以下用途:

//此行代码存在于模板目录下的每个php文件起始部分,其作用是防止代码所在的php脚本被直接访问执行。 
if(!defined('EMLOG_ROOT')) {exit('error!');}
//这两行代码作用是调用模板文件夹下的side.php和footer.php的代码到当前文件的当前位置。
//View是emlog的模板视图控制器,View::getView('文件名','文件后缀')将返回当前模板安装路径下对应的文件。
//getView函数的第二个参数为缺省参数,在不传入值的情况下,将默认作为.php文件后缀返回文件路径。
require_once View::getView('side'); 
require_once View::getView('footer'); 
// 如下代码格式是模板里的插件挂载点,参考默认模板,注意保留,不要删除
<?php doAction('xxx') ?>

文件说明

header.php

页头信息

开头注释内容是模板的必要信息,该信息会显示在后台模板管理界面,务必完整填写。

require_once View::getView('module'); // 加载模板通用模块.

变量&常量

变量&常量 类型 说明
$site_title 变量 站点标题(受后台seo优化设置影响)
$site_key 变量 站点关键字
$site_description 变量 输出站点浏览器描述 (受后台seo优化设置影响)
$blogname 变量 站点标题
$bloginfo 变量 站点副标题
BLOG_URL 常量 站点首页的URL,输出形如https://emlog.net/
TEMPLATE_URL 常量 模板文件夹的URL,用于加载模板内的css、js及其他内容,输出形如http://emlog.net/blog/content/templates/default/

上面的变量、常量都可以通过下面的方式在模板中输出

<?= $page_url ?>
<?= BLOG_URL ?>

footer.php

变量&常量

变量、常量 类型 说明
$icp 变量 后台设置的ICP备案号
$footer_info 变量 后台设置的页面底部信息
Option::EMLOG_VERSION 常量 当前emlog版本号

log_list.php

变量、常量、方法 类型 说明
$value['log_cover'] 变量 文章封面图URL
$value['logid'] 变量 当前文章的id
$value['log_url'] 变量 文章地址URL
$value['log_title'] 变量 文章标题
date('Y-n-j', $value['date']) 变量 文章发布时间,参数'Y-n-j G:i l'用于定义日期格式
$value['log_description'] 变量 文章摘要 (没有摘要则输出全文)
$value['comnum'] 变量 当前文章的评论数
$value['views'] 变量 当前文章的浏览量
editflg($value['logid'],$value['author']) 变量 当管理员或作者登陆时显示“编辑”链接
topflg($value['top']) 变量 显示置顶标记,该函数位于模板module.php内
$page_url 变量 显示当前列表页的翻页功能
blog_sort($value['logid']) 方法 展示文章所属的分类
blog_author($value['author']) 方法 展示文章的作者
blog_tag($value['logid']) 方法 展示文章的标签

上面的变量、方法都可以通过下面的方式在模板中输出

<?= $value['logid'] ?>
<?= blog_author($value['author']) ?>

echo_log.php

该文件功能函数与列表页一致,但参数有区别,注意区分。 $logid 该变量为当前文章的id

变量、常量、方法 类型 说明
$log_title 变量 文章标题
$log_cover 变量 文章封面图URL
date('Y-n-j', $date) 变量 文章发布时间,参数'Y-n-j G:i l'用于定义日期格式
$log_content 变量 文章摘要 (没有摘要则输出全文)
$comnum 变量 当前文章的评论数
$views 变量 当前文章的浏览量
$page_url 变量 显示当前列表页的翻页功能
topflg($top) 方法 显示置顶标记
blog_tag($logid) 方法 文章的标签
blog_author($author) 方法 文章的作者
blog_sort($logid) 方法 文章所属的分类
editflg($logid,$author) 方法 当管理员或作者登录时显示“编辑”链接。
neighbor_log($neighborLog) 方法 输出邻近文章,就是上一篇及下一篇。
blog_comments($comments) 方法 输出该文章评论列表
blog_comments_post($logid,$ckname,$ckmail,$ckurl,$verifyCode,$allow_remark) 方法 输出发表评论框

page.php

该文件写法与echo_log.php类似,不再重复。

side.php

侧边栏,主要负责根据后台widgets设置信息输出侧边栏内容。建议该文件内代码保持不变。

module.php

模板公共代码,包含侧边widgets、评论、引用、编辑等。

该文件由若干函数组成,被模板文件调用,可在内自定义函数实现更多功能。

如在自定义函数内调用emlog缓存时,假设读取user缓存信息,则形如: global $CACHE; $user_cache = $CACHE→readCache('user');

如需要操作数据库,则形如: $DB = MySql::getInstance(); $res = $DB→query($sql);

404.php

用于自定义404页面的模板。

pw.php

用于自定义加密文章输入密码页面,如果没有该模板文件,将使用系统默认样式,不影响输入密码功能正常使用,模板内容请参考默认模板。

前台模板挂载点

注意:务必在开发模板时参考默认模板保留下面这些挂载点,方便兼容其他插件。

挂载点 所属文件 改在点描述 实例
doAction('index_head') header.php 站点head标签内挂载点,用于挂载js或css样式文件
doAction('index_footer') footer.php 页脚底部挂载点,用于挂载底部信息展示类插件
doAction('index_loglist_top') log_list.php 首页文章列表顶部挂载点, 建议添加在首页导航栏下方
doAction('log_related', $logData) echo_log.php 相关文章挂载点, 添加在文章内容和评论之间的位置

添加挂载点示例:

<?php doAction('index_footer') ?>

可以直接使用的常量

变量、常量 类型 说明
Option::EMLOG_VERSION 常量 获得当前emlog版本号
ROLE 常量 当前用户角色(用户组):admin 管理员、writer 注册用户 、visitor 访客
ROLE_ADMIN 常量 admin 管理员
ROLE_WRITER 常量 writer 注册用户
ROLE_VISITOR 常量 visitor 访客
UID 常量 当前用户UID
BLOG_URL 常量 站点完整地址
ISLOGIN 常量 是否登录状态,true登录 false未登录

上面的常量可以通过下面的方式在模板中使用

// 输出当前站点网址
<?= BLOG_URL ?>

异步请求

默认emlog的评论发布、用户注册、用户登录接口不管是错误还是成功都会跳转页面,这给构建更加友好的异步ajax交互请求带来了不便,pro2.0开始支持异步请求并返回json的信息。

发布评论

参数 是否必填 描述
gid 必填 文章id
comname 必填 评论人名称
comment 必填 评论内容
commail 评论人邮箱
comurl 评论人主页地址
imgcode 图片验证码
pid 被回复评论ID
resp 必填 传递字符串 "json",将返回json格式数据

返回结果

{
  "code": 1,
  "msg": "评论内容需包含中文",
  "data": ""
}

js调用案例,供参考

const submitBtn = document.getElementById('submit-btn');

submitBtn.addEventListener('click', async () => {
    const params = new URLSearchParams({
        gid: document.getElementById('gid').value,
        comname: document.getElementById('comname').value,
        comment: document.getElementById('comment').value,
        commail: document.getElementById('commail').value,
        comurl: document.getElementById('comurl').value,
        imgcode: document.getElementById('imgcode').value,
        pid: document.getElementById('pid').value,
        resp: 'json',
    });

    try {
        const response = await fetch('https://www.yourdomain.com/index.php?action=addcom', {
            method: 'POST',
            body: params,
        });

        const data = await response.json();

        if (data.code === 1) {
            console.error(data.msg);
        } else if (data.code === 0) {
            console.log(data.data);
        } else {
            console.error('未知错误');
        }
    } catch (error) {
        console.error(error);
    }
});

用户登录

参数 是否必填 描述
user 必填 用户名、邮箱
pw 必填 密码
persist 记住我,保留登录状态
login_code 图片验证码
resp 必填 传递字符串 "json",将返回json格式数据

返回结果(同时附带登录成功cookie)

{
  "code": 0,
  "msg": "ok",
  "data": ""
}

用户注册

参数 是否必填 描述
mail 必填 邮箱
passwd 必填 密码
repasswd 必填 重复密码
login_code 图片验证码
mail_code 邮件验证码
resp 必填 传递字符串 "json",将返回json格式数据

返回结果

{
  "code": 1,
  "msg": "错误的邮箱格式",
  "data": ""
}

模板设置插件

模版设置插件,为模板提供更丰富的设置功能。该插件由emlog官方和爱好者蓝叶共同维护,请放心使用。

https://www.emlog.net/plugin/detail/377

如何让模板能被插件识别?

在模板目录里放入options.php,内容格式如下即可,可以任意增加设置项,注意$options变量和注释:

<?php
/*@support tpl_options*/
!defined('EMLOG_ROOT') &amp;&amp; exit('access deined!');
$options = array(
    'sidebar' => array(
        'type' => 'radio',
        'name' => '侧边栏位置',
        'values' => array(
            'left' => '左边',
            'right' => '右边'
        ),
        'default' => 'right',
    ),
    'sortIcon' => array(
        'type' => 'image',
        'name' => '分类图标设置',
        'values' => array(
            TEMPLATE_URL . 'images/star.png',
        ),
        'depend' => 'sort',
        'unsorted' => true,
        'description' => '给不同的分类设置不一样的小icon,以20×20为宜',
    ),
);

options.php里,每个元素都该写什么?

如上所示,$options数组里,key为设置项的id,而value是一个数组,数组里包含若干个元素。其中type属性和name属性必选,name是设置项名字,而type用来指定设置项的类型,支持的类型如下:

  • radio: 单选按钮
  • checkbox: 复选按钮

  • text: 文本

  • image: 图片

  • page: 页面

  • sort: 分类

  • tag: 标签

  1. 对于所有类型,default属性用于指定默认值,当没有指定default时,使用values里第一个值,若都没有指定,则会使用奇怪的默认值。
  2. 对于radio和chexkbox,values属性用来设置各个按钮的值和显示名称。
  3. 除sort外,均可以指定depend为sort,表示该选项可以根据不同的分类设置不同的值,当指定depend为sort时,可选unsorted属性,为true时,表示包括未分类,为false不包括,默认为true。
  4. sort和page可设置multi属性为true,表示多选。
  5. description属性可选,用以描述该选项。
  6. 若type为text,可设置multi属性为true,表示多行文本,即input和textarea的区别,可选属性rich用以支持富文本,若设置该值,将加载编辑器。
  7. 若type为sort、page或者tag,且设置了多选,默认值将为空,否则将为第一个该类型的值。

模板里如何调用设置项

插件提供简单方法 _g($key),来获取设置

如:

  • 使用_g('sidebar')来获取侧边栏的设置,取到的值将为0或者1,

  • 使用_g('sortIcon')来获取分类icon的全部设置,以分类id为key的数组,

  • 使用_g('sortIcon.1')来获取分类id为1(如果存在)的sortIcon。需要注意的是,对于类型为page的,将取到页面id,类型为sort的,将取到分类id,类型为tag的,将取到标签名。

若不传递参数,即使用_g()方法将获取到所有设置项,对于老的模板迁移来的,可以用extract(_g());来代替原来的加载option文件。

常用函数

//subContent 截取指定长度的内容函数
//第一个参数:要截取的内容
//第二个参数:截取长度
//第三个参数:是否过滤内容中的html标签 1过滤 0不过滤
//如下:截取日志内容的前180个字符,并过滤html标签
<?php echo subContent($value['log_description'], 180, 1); ?>

参考demo

emlog系统自带的默认主题就是最好的演示demo,可以基于该主题进行修改来开发自己的主题,或者参考该主题的部分元素和文件。 默认模板所在目录: content/templates/default

声明:本站原创文章文字版权归本站所有,转载务必注明作者和出处;本站转载文章仅仅代表原作者观点,不代表本站立场,图文版权归原作者所有。如有侵权,请联系我们删除。

用户头像
浩灵游客
2024-03-19 15:24

使用_g('sortIcon.1')来获取分类id为1(如果存在)的sortIcon

怎么在首页导航调用分类的lcon的图标?
比如我后台设置分类1的图标是1.png
分类2是2.png
怎么在导航调用?