首页扁平网页制作
2024-12-11
首页扁平模式,默认调用出了全站置顶主题数据,全站主题数据,自定义标签主题数据和友情链接。
对应官方默认文件为view/htm/flat.htm,请勿修改这个文件,如需修改请按照模板开发说明操作
所有数据以实际打印的数据为准,本站为实例,但不代表为最新最全的数据,实际打印包含所有插件数据。
置顶和主题变量,置顶排在最前面,扁平模式首页仅调用了全站置顶,置顶按照置顶时间排序,最后置顶排在最前。
$threadlist
二维数组,数据格式为:
Array ( [9] => Array ( [tid] => 9 [fid] => 1 [forum_name] => 最新 [subject] => 网易科技讯 1月3日消息,据外媒BGR报道 [url] => read-9.html [type] => 0 [link] => 0 [views] => 4 [posts] => 2 [images] => 1 [files] => 1 [mods] => 0 [status] => 0 [closed] => 0 [brief] => [keyword] => 网易科技讯 1月3日消息,据外媒BGR报道,苹果知名分析师郭明池(Ming-Chi Kuo)的一份最新研究报告称,苹果将重组其无 [description] => 网易科技讯 1月3日消息,据外媒BGR报道,苹果知名分析师郭明池(Ming-Chi Kuo)的一份最新研究报告称,苹果将重组其无线耳机AirPods Pro、下一代智能手表Apple Watch和便携式移动产品iPod Touch的供应商。 [attach_on] => 0 [image_url] => [flags] => 2 [i] => 0 [create_date] => 1578024213 [create_date_fmt] => 5天前 [last_date_fmt] => 3小时前 [create_date_text] => 2020-01-03 [last_date_text] => 2020-01-08 [uid] => 1 [username] => admin [user_avatar_url] => view/img/avatar.png [user] => Array ( [uid] => 1 [gid] => 1 [username] => admin [avatar] => 0 [articles] => 1 [comments] => 0 [groupname] => 管理员组 [avatar_url] => view/img/avatar.png [online_status] => 1 ) [user_url] => user-1.html [lastuid] => 9 [last_date] => 1578475328 [lastusername] => test [sticky] => 3 [sticky_class] => danger [icon] => 1578024213 [icon_text] => upload/thumbnail/202001/1_9_1578024213.jpeg [pages] => 1 [tag] => {"1":"iPod","2":"网易科技","3":"AppleWatch"} [tag_text] => Array ( [1] => iPod [2] => 网易科技 [3] => AppleWatch ) [allowupdate] => 1 [allowdelete] => 1 ) )
几乎相关数据都以调用,具体对应参数请参照数据表文件对照,数据表文件有备注,只需在模板将数组内容遍历出来即可。
在模板中实现遍历展示,以下为包含公用的列表文件:
<ul class="threadlist list-group list-group-flush shadow"> <!--{hook index_flat_threadlist_before.htm}--> <?php include _include(APP_PATH . 'view/htm/thread_list.inc.htm');?> <!--{hook index_flat_threadlist_after.htm}--> </ul>
如果需要修改列表样式,需要复制 thread_list.inc.htm 到你的自制模板目录,修改样式即可,如不需要前台管理功能,直接删除代码即可。
<li class="media thread tap bg-white" data-href="<?php echo $_thread['url']; ?>" tid="<?php echo $_thread['tid'];?>">
threadlist这class要保留,ajax modal 调取数据使用。
class里的tap是移动端使用,点击整行跳转,data-href="<?php echo $_thread['url']; ?>"则为跳转地址。
tid="<?php echo $_thread['tid'];?>" 是前端管理时使用。
thread_list.inc.htm 这个文件,不懂的php代码原样保留。
自制模板目录应该为 view/template/demo/htmdemo应为你的模板目录名。 thread_list.inc.htm 文件应复制到这个目录下的 htm 目录里。
包含该文件的方式应为:
<ul class="threadlist list-group list-group-flush shadow"> <!--{hook index_flat_threadlist_before.htm}--> <?php include _include(APP_PATH . 'view/template/demo/htm/thread_list.inc.htm');?> <!--{hook index_flat_threadlist_after.htm}--> </ul>
<!-- **.htm --> 这种为系统内置的钩子,二开时hook使用,自制模板可删除。
//-------------- 分页代码 ---------------
<?php if ($pagination) { ?> <nav class="my-3"> <ul class="pagination justify-content-center flex-wrap"> <?php echo $pagination; ?> <!--此处为分页变量--> </ul> </nav> <?php } ?>
//-------------- 站点名和站点介绍 ---------------
<div class="mx-3 pt-3"> <h5 class="text-center"> <?php echo $conf['sitename'];?> </h5> <!--{hook index_flat_sitename_after.htm}--> <div class="small line-height-3"> <?php echo $conf['sitebrief'];?> </div> <!--{hook index_flat_sitebrief_after.htm}--> </div>
//-------------- 自定义标签主题代码 ---------------
自定义标签主题是多维数组
Array ( [6] => Array ( [flagid] => 6 [name] => 热门 [fid] => 0 [rank] => 0 [number] => 10 [count] => 1 [icon] => 0 [display] => 1 [create_date] => 1578491363 [create_date_fmt_ymd] => 2020-01-08 [title] => [keywords] => [description] => [tpl] => [alias] => [i] => 2 [forum_name] => 首页 [display_fmt] => 是 [forum_url] => ./ [url] => flag-6.html [icon_text] => [tids] => Array ( [0] => 9 ) [list] => Array ( [0] => Array ( [tid] => 9 [fid] => 1 [forum_name] => 最新 [subject] => 网易科技讯 1月3日消息,据外媒BGR报道 [url] => read-9.html [type] => 0 [sticky] => 3 [link] => 0 [views] => 4 [posts] => 2 [images] => 1 [files] => 1 [mods] => 0 [status] => 0 [closed] => 0 [brief] => [keyword] => 网易科技讯 1月3日消息,据外媒BGR报道,苹果知名分析师郭明池(Ming-Chi Kuo)的一份最新研究报告称,苹果将重组其无 [description] => 网易科技讯 1月3日消息,据外媒BGR报道,苹果知名分析师郭明池(Ming-Chi Kuo)的一份最新研究报告称,苹果将重组其无线耳机AirPods Pro、下一代智能手表Apple Watch和便携式移动产品iPod Touch的供应商。 [attach_on] => 0 [image_url] => [flags] => 3 [i] => 20 [lastuid] => 9 [lastusername] => 福星 [last_date] => 1578475328 [last_date_fmt] => 2020-01-08 [create_date] => 1578024213 [create_date_fmt] => 5天前 [last_date_fmt] => 5小时前 [create_date_fmt] => 2020-01-03 [uid] => 1 [username] => admin [user_avatar_url] => view/img/avatar.png [user] => Array ( [uid] => 1 [gid] => 1 [username] => admin [avatar] => 0 [articles] => 1 [comments] => 0 [groupname] => 管理员组 [avatar_url] => view/img/avatar.png [online_status] => 1 ) [user_url] => user-1.html [sticky_class] => danger [icon] => 1578024213 [icon_fmt] => upload/thumbnail/202001/1_9_1578024213.jpeg [pages] => 1 [tag] => {"1":"iPod","2":"网易科技","3":"AppleWatch"} [tag_fmt] => Array ( [1] => iPod [2] => 网易科技 [3] => AppleWatch ) [allowupdate] => 1 [allowdelete] => 1 ) ) ) )
以实际打印的数组为准
遍历方法 单独调用自定义标签主题,请看 自定义调用这篇内容
<?php if($flaglist){foreach($flaglist as &$_flag) { <div class="shadow mt-3"> <!--html代码 自定义标签名和链接 --> <div class="card-header bg-light"> <h3 class="font-weight-bold my-0"> <a href="<?php echo $_flag['url'];?>" title='<?php echo $_flag['name'];?>' aria-label='<?php echo $_flag['name'];?>'> <?php echo $_flag['name']; ?> </a> </h3> </div> <ul class="list-group list-group-flush nowrap"> <!-- 循环输出 自定义标签的主题,根据设置的数量输出 --> <?php if(isset($_flag['list'])){foreach($_flag['list'] as $_thread) { ?> <li class="list-group-item bg-white"> <h4 class="my-0"> <!-- 主题和主题链接,如需输出其他信息,请根据上面数组显示的数据,调用即可 --> <a href="<?php echo $_thread['url'];?>" class="d-block ellipsis" <?php echo ($_thread['type']==10?'rel="nofollow" target="_blank"':''); ?> title='<?php echo $_thread['subject'];?>' aria-label='<?php echo $_thread['subject'];?>'> <?php echo $_thread['subject'];?> </a> </h4> </li> <?php }} ?> </ul> </div> <?php }} ?>
//-------------- 友情链接代码 ---------------
<?php if(!empty($linklist)){ ?> <div class="shadow mt-3"> <div class="card-header bg-light"> <h3 class="font-weight-bold my-0"> <?php echo lang('friends_link');?> </h3> </div> <ul class="list-group list-group-flush nowrap"> <!-- 循环输出友情链接 --> <?php foreach($linklist as &$_link) { ?> <li class="list-group-item"> <a href="<?php echo $_link['url'];?>" class="d-block" target="_blank" aria-label='<?php echo $_link['name'];?>'> <?php echo $_link['name'];?> </a> </li> <?php } ?> </ul> </div> <?php } ?>
//-------------- 页头导航栏 active 放在页面最下面 ---------------
<script> $('#nav li[data-active="fid-<?php echo $fid;?>"]').addClass('active'); </script>
加载公用的页头和页脚,这个页面就完成了。不懂php没关系,只要懂bootstrap和html、css就可以了,把官方 htm 文件里的php代码复制过去即可。