XBlog开发手册 XBlog开发手册
  • 快速入门
  • API参考
  • 快速入门
  • API参考
GitHub (opens new window)
  • 快速入门
  • API参考
  • 快速入门
  • API参考
GitHub (opens new window)
  • 快速入门

    • 简介
    • 结构介绍
    • 主页
      • 主页的一些重要函数
      • 主页设置
      • 头部内容
        • 头部设置
        • 脚本和css样式信息
      • 头部导航
      • 文章分类
      • 文章分页
      • 文章分页、文章分类、文章标签、搜索
      • 侧边栏
      • 文章卡片
      • 底部内容
    • 登录和注册
    • 文章
    • 日记
    • 文档系统
    • 更多界面
    • 站点地图
  • API参考

  • 主题开发
  • 快速入门
小游
2021-08-01

主页

主页就是我们博客系统的重要入口,一个好看的主页是很重要的

# 主页的一些重要函数

<?php get_header('index');?>
1

这个可以获取头部信息,注意这个需要带一个参数,值就是index。因为考虑到不同页面头部可能不同的情况,所以这里就加了这个参数。

<?php get_footer(); ?>
1

这个可以获取底部信息。

<?php xy_left_side(); ?>
1

这个可以获取左边的侧边栏信息,如果你的主题不想要侧边栏,那么这个可以不调用

 <?php xy_right_side(); ?>
1

这个可以获取右边侧边栏的信息

 <?php xy_posts(); ?>
1

这个函数也是很重要的,主要用于显示文章卡片。

# 主页设置

主页设置可以获取主页的一些设置

<?php setting_index_background(); ?>
1

上面这个就可以获取主页的背景信息

image-20210801105924309

其他所有的设置可以到API参考章节查看

# 头部内容

头部内容作为主题的一个重要的组件,在 common/header.php 这个函数里面。

# 头部设置

头部设置就是头部的设置内容,我们博客的很多设置,比如关键词,描述,标题等内容都需要通过头部设置来实现。详细的设置可以到API参考里面查看,这里就不一一介绍了

image-20210801112034994

# 脚本和css样式信息

如果是一些常用的库,那么直接使用博客系统自带的就好,因为这个用的是CDN缓存,加载速度更快,而且大家的都可以通用,这样切换主题的时候某些样式就不需要重新加载了。用法如下,详细的可以到API参考里看

image-20210801112337322

如果是自己主题的css样式,那么我们就需要使用到 setting_template 这个函数来获取主题的路径信息。比如下面这样:

 <link rel="stylesheet" type="text/css" href="<?php echo setting_template()."/static/css/animate.min.css"?>">
1

# 头部导航

头部导航就是显示头部的导航栏信息。就是下面这个:

image-20210801112846396

具体的json结构如下

[
    {
        "title": "主站",
        "link": "/",
        "children": []
    },
    {
        "title": "之前已有的功能",
        "link": "",
        "children": [
            {
                "title": "日记",
                "link": "/more/diary",
                "children": []
            }
        ]
    }
]
1
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>
1
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笔记"
        }
    ]
}
1
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; ?>
1
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)
			}
		}
	})
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

还有就是xy这个函数的详细用法可以参考 xiaoyou.js 板块介绍,这里就不介绍了

# 文章分页、文章分类、文章标签、搜索

上面我们获取到了分页的内容,那么我们如果在主页显示对应的分页内容呢?其实就是指定一个参数page

image-20210801111524764

文章分类指定一下category

image-20210801111609492

文章标签指定一下tag

image-20210801111707367

关键词搜索指定q

image-20210801111726484

当然这几个参数也可以结合起来

image-20210801111800905

# 侧边栏

侧边栏部分在 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; ?>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

# 文章卡片

文章卡片用于显示首页文章的信息,比如下面这个就是一个文章卡片

image-20210801113349949

文章卡片的代码在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>
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
30
31
32
33
34
35
36
37
38
39

# 底部内容

底部内容主要显示了一些底部信息,这里就不说了。。可以自己找一个主题的源代码来参考一下

编辑 (opens new window)
上次更新: 2021/08/01, 17:13:03
结构介绍
登录和注册

← 结构介绍 登录和注册→

Theme by Vdoing | Copyright © 2021-2021 小游
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式