主页
主页就是我们博客系统的重要入口，一个好看的主页是很重要的
# 主页的一些重要函数
<?php get_header('index');?>
这个可以获取头部信息，注意这个需要带一个参数，值就是index。因为考虑到不同页面头部可能不同的情况，所以这里就加了这个参数。
<?php get_footer(); ?>
这个可以获取底部信息。
<?php xy_left_side(); ?>
这个可以获取左边的侧边栏信息，如果你的主题不想要侧边栏，那么这个可以不调用
<?php xy_right_side(); ?>
这个可以获取右边侧边栏的信息
<?php xy_posts(); ?>
这个函数也是很重要的，主要用于显示文章卡片。
# 主页设置
主页设置可以获取主页的一些设置
<?php setting_index_background(); ?>
上面这个就可以获取主页的背景信息
其他所有的设置可以到API参考章节查看
# 头部内容
头部内容作为主题的一个重要的组件，在 common/header.php 这个函数里面。
# 头部设置
头部设置就是头部的设置内容，我们博客的很多设置，比如关键词，描述，标题等内容都需要通过头部设置来实现。详细的设置可以到API参考里面查看，这里就不一一介绍了
# 脚本和css样式信息
如果是一些常用的库，那么直接使用博客系统自带的就好，因为这个用的是CDN缓存，加载速度更快，而且大家的都可以通用，这样切换主题的时候某些样式就不需要重新加载了。用法如下，详细的可以到API参考里看
如果是自己主题的css样式，那么我们就需要使用到 setting_template 这个函数来获取主题的路径信息。比如下面这样：
<link rel="stylesheet" type="text/css" href="<?php echo setting_template()."/static/css/animate.min.css"?>">
# 头部导航
头部导航就是显示头部的导航栏信息。就是下面这个：
具体的json结构如下
[
{
"title": "主站",
"link": "/",
"children": []
},
{
"title": "之前已有的功能",
"link": "",
"children": [
{
"title": "日记",
"link": "/more/diary",
"children": []
}
]
}
]
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
这里贴一下sakura主题的处理逻辑
<nav class="mobile-fit-control hide">
<ul id="menu-new" class="menu">
<?php foreach (setting_index_head_nav() as $head): ?>
<li>
<?php echo '<a href="'.$head["link"].'"><span class="faa-parent animated-hover">'.$head["title"].'</span></a>' ?>
<?php if (count($head["children"])>0): ?>
<ul class="sub-menu">
<?php foreach ($head["children"] as $head1): ?>
<?php echo '<li><span class="faa-parent animated-hover"><a href="'.$head1["link"].'">'.$head1["title"].'</span></a></li>' ?>
<?php endforeach; ?>
</ul>
<?php endif; ?>
</li>
<?php endforeach; ?>
</ul>
</nav>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 文章分类
如果你的主题想显示所有的文章分类，那么就可以使用 get_index_category()这个函数来获取文章的分类信息。文章分类的结构如下:
{
"parent": [
{
"count": 29,
"id": 8,
"link": "0200",
"name": "硬件奇谈"
}
],
"child": [
{
"id": 9,
"parent": 8,
"link": "0201",
"name": "STC51笔记"
},
{
"id": 10,
"parent": 8,
"link": "0202",
"name": "STM32笔记"
}
]
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
这里贴一下默认主题的文章分类处理逻辑
<?php $category = get_index_category();foreach ($category["parent"] as $parent): ?>
<div class="item">
<el-popover
placement="top-start"
width="100"
trigger="hover"
>
<?php foreach ($category["child"] as $child){
if($parent["id"]==$child["parent"]){
echo "<a href=\"/?category=${child["link"]}\">${child["name"]}</a>";
}
}
echo "<a slot=\"reference\" class=\"name\" href=\"javascript:void(0);\"><span>${parent["name"]}<em>${parent["count"]}</em></span></a>"?>
</el-popover>
</div>
<?php endforeach; ?>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 文章分页
当我们的文章有很多页的时候，就需要实现文章分页这个功能了。目前主要有下面这个几个函数
current_total总页数current_count总的数据条数get_current_count或者总的数据条数，这个是直接返回数据条数，而不是打印current_current当前第几页get_current_current当前第几页，这个也是返回一个int类型，而不是直接打印current_size每页有多少条数据
这里拿kratos的分页来进行举例，这里我用的是layui的分页功能，请自行参考
layui.use('laypage', function() {
var laypage = layui.laypage;
laypage.render({
elem: 'post-page',
theme: '#51aded',
count: <?php current_count(); ?> ,
limit: <?php current_size(); ?> ,
curr: <?php current_current(); ?> ,
jump: function(content, first) {
if (!first) {
window.location.href = xy.tools.updateQueryStringParameter(window.location.href, 'page', content.curr)
}
}
})
});
2
3
4
5
6
7
8
9
10
11
12
13
14
15
还有就是xy这个函数的详细用法可以参考 xiaoyou.js 板块介绍，这里就不介绍了
# 文章分页、文章分类、文章标签、搜索
上面我们获取到了分页的内容，那么我们如果在主页显示对应的分页内容呢？其实就是指定一个参数page
文章分类指定一下category
文章标签指定一下tag
关键词搜索指定q
当然这几个参数也可以结合起来
# 侧边栏
侧边栏部分在 common/side.php 文件夹里面。左右侧边栏都是用的同一个，我这边会自动帮你处理好，你这边只需要显示侧边栏的内容就行了，这是当个侧边栏卡片的内容
大家可以参考下面这个
<?php if (get_widget_title()==""): ?>
<div class="notice-panel">
<div class="textwidget">
<?php widget_html(); ?>
</div>
</div>
<?php else: ?>
<div class="notice-panel tools-item" >
<h4 class="widget-title">
<?php widget_title(); ?>
</h4>
<div class="textwidget side-padding">
<?php widget_html(); ?>
</div>
</div>
<?php endif; ?>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 文章卡片
文章卡片用于显示首页文章的信息，比如下面这个就是一个文章卡片
文章卡片的代码在conten/post.php 里面，这里我就直接贴sakura主题的文章卡片代码了，所有的文章卡片函数都可以到API参考里面查到
<article class="post post-list-thumb <?php echo get_post_no()%2==1?'post-list-thumb-left':'' ?>" itemscope="" itemtype="https://schema.org/BlogPosting">
<div class="post-thumb">
<a href="<?php echo setting_web()."/archives/".get_post_id();?>">
<img class="lazyload" id="post-th-4482"
src=""
onerror="imgError(this,3)"
data-src="<?php post_image(); ?>"
/>
</a>
</div>
<div class="post-content-wrap">
<div class="post-content">
<div class="post-date">
<i class="iconfont icon-time"></i>发布于 <?php post_date(); ?>
</div>
<a href="<?php echo setting_web()."/archives/".get_post_id();?>" class="post-title">
<h3><?php post_title(); ?></h3>
</a>
<div class="post-meta">
<span>
<i class="iconfont icon-attention"></i><?php post_view(); ?>热度
</span>
<span class="comments-number">
<i class="iconfont icon-mark"></i><?php post_comment(); ?> 条评论
</span>
</div>
<div class="float-content">
<p>
<?php post_content(); ?>
</p>
<div class="post-bottom">
<a href="<?php echo setting_web()."/archives/".get_post_id();?>" class="button-normal">
<i class="iconfont icon-caidan"></i>
</a>
</div>
</div>
</div>
</div>
</article>
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
30
31
32
33
34
35
36
37
38
39
# 底部内容
底部内容主要显示了一些底部信息，这里就不说了。。可以自己找一个主题的源代码来参考一下