瀑布流主题：Practice01【20200515更新】 【置顶】

这是我工作之余每天抽一点点时间来制作的一个瀑布流布局无限加载主题，本人不是专业码农，制作这个主题纯属兴趣爱好，现分享出来，希望你们能够喜欢！

摘要拖延症拖了这么久时间，终于下决心写一下关于这个主题的说明，然后发布提供给大家使用了，当然，完全免费，你可以在此基础上进行任何个性化修改，希望能保留源码中的版权信息，谢谢！

主题使用中有任何问题都可以在此提问，基本上都可以得到回复：）

主题在线演示

请查看本站即可！

关于Practice01

正如之前所说，这款主题是因练习而作的，主题名字Practice01也来源于此，同时也表示这是我写的第一个主题，那么当然在使用中可能会有一些问题存在，欢迎各位提出，我将在后续更新中修复！

这是一个自适应瀑布流布局，整合了文章列表无限加载，以及图片懒加载的适用于个人博客或者图片相册站的主题。

主题功能及特点简要介绍

主题特点是瀑布流布局，自适应屏幕宽度以及手机端界面
支持图片延时加载（图片懒加载）
文章列表无限滚动加载
页面左侧内容区和右侧边栏自动根据内容长度滚动时固定
页面滚动时菜单导航顶部固定
自由设置首页及分类页头部轮播图和链接地址
自由设置文章页头部大图及文字内容
以打字效果随机显示收藏短句
支持设置网站公告及查看以往公告
自由设置文章缩略图
文章列表页中的文章标题前会根据文章内容显示不同图标
可自定义每篇文章的标题颜色
主题支持独立相册功能，具有特定的展现形式
文章中支持通过短代码插入音乐、视频、相册
集成了代码高亮
支持友情链接，可分别设置在首页或内页显示的友链，支持链接分类，无需插件
主题设置中可填写备案号
重写了评论模块，评论回复自动添加回复字样，类似于@
添加留言页面模板，集成读者墙
侧栏底部添加返回顶部按钮
其他小细节我也记不清了...

主题下载（更新日期：20200515）

免费获取本主题：
项目地址：Practice01 v20200515
注意：请将主题文件夹名称修改为practice01

主题交流群

为方便解决主题使用中出现的问题，丢个QQ群号：592345339，入群验证答案：Practice01
或扫二维码加入：查看二维码
或直接点击加入：【Typecho主题Practice01交流群】

主题更新记录

2020年5月15日：更新（懒得改版本号了，以后只标注更新日期咯~）1.增加了首页简洁模式，在主题选项中设置，具体看设置说明
2.原本时间轴是去掉了轮播图显示的，这次重新加回去了
3.主题选项中轮播图的设置优化，可针对每一个分类设置不同的轮播图
4.轮播图的设置有变动：无需再填写之前的数字之类的，仔细看设置说明
5.样式细微调整
6.更新了时间轴文章列表页的评论方式，采用layui弹窗，点击文章下方的comments标签即可弹出窗口进行评论
7.增加了时间轴发布音乐、视频功能，可直接在时间轴文章列表页进行播放

2020年4月17日：更新至1.0.6版本1.增加了时间轴，其实很早就有了，只是比较懒一直没上传，今天终于抽时间传上来了
2.时间轴使用方法：先添加一个分类，分类名随意，缩略名必须设置为timeline
3.正常发布文章，选择发布至timeline分类下即可
4.原先的状态页面已取消，侧栏会读取时间轴分类下的第一篇文章进行展示
5.时间轴展示页面：时间轴展示页

2019年1月24日：更新至1.0.5版本1.调整了侧边栏关于博主微信二维码的显示方式
2.主题增加15种代码高亮配色选择方案
3.调整瀑布流下拉时URL地址保持不变
4.优化了文章标题过长导致显示异常的问题
5.主题增加网站favicon.ico图标设置选项

2019年1月21日：更新至1.0.4版本1.增加主题设置：侧边栏是否显示分类目录
2.增加主题设置：顶部菜单可选择不显示分类
3.CSS细微优化

2019年1月18日：更新至1.0.3版本1.可以主题设置中关闭主题版权说明
2.修复不支持hoe炫彩鼠标插件的问题
3.主题设置增加填写网站统计代码的功能
4.主题设置增加填写百度自动推送工具代码的功能
5.读者墙添加支持显示QQ头像
6.优化几处显示
7.主题设置中增加一键备份主题参数设置，避免切换主题时造成设置丢失。感谢那他提供的方法！
需要注意的是：备份时使用哪个浏览器，那么恢复备份需要使用同样的浏览器来操作！另外：备份的数据是存储在本地的，本地的意思应该都知道吧！

2019年1月16日：更新至1.0.2版本1.可在主题设置中关闭文章底部版权说明、或自定义版权说明
2.可自定义侧栏关于博主下方的第2、3、4个图标及链接地址
3.修补几处BUG

2019年1月15日：更新至1.0.1版本1.增加评论支持通过QQ邮箱获取QQ头像
2.增加评论区自定义博主头像，在主题设置外观的第24项中进行设置
3.为主题设置外观中的选项增加序号，方便定位
4.CSS细微调整

主题使用说明

由于本人水平有限，要熟练使用本主题或许需要一定的学习时间成本，毕竟连我自己现在有时候发布特定帖子还要回头看看格式规则，囧！但我已尽量将常用的设置都写在了主题设置外观的选项以及发布文章里的选项当中。

1.安装启用主题

下载并解压主题文件，确保主题文件夹名称为：practice01，将文件夹上传至/usr/themes/目录下，然后登陆typecho后台，在控制台->外观中启用本主题。

2.主题选项

在控制台->外观（网站外观）->设置外观中可以看到主题的设置选项，主题大部份功能都通过这里进行设置。

一些基本的设置只要看描述就能明白，这里就不再赘述。在设置中需要了解的是网站头部全屏轮播的设置方法、以及友情链接的设置方法。

3.头部轮播图设置

首先勾选中显示轮播图前面的框，然后在轮播图列表的输入框中设置轮播的各项参数，设置轮播需要四个参数，1标题,2链接地址,3图片地址,4轮播分类，参数之间使用英文标点符号,隔开，一行表示一条记录，支持多条轮播。

示例：

Be water my friend,https://kisxy.com,https://kisxy.com/usr/uploads/2018/12/1888809987.jpg,home

通过轮播图列表中的第四个参数（轮播分类），可以设置让首页和文章分类页面显示不同的轮播内容，只需要在首页轮播分类和分类页面轮播分类中分别填入要显示的轮播分类名，也就是第四个参数值。留空表示显示列表中的所有轮播。

首页和分类页面的轮播图数量，此处按照列表中实际输入的数量填写即可！

4.首页友链设置

勾选显示首页友链链接前面的框，然后在首页链接列表的输入框中设置友链的各项参数，包含四个参数，1链接分类,2链接名称,3链接地址*,4链接描述，参数之间使用英文标点符号,隔开，一行表示一条记录，支持多条记录。

示例：

myself,小宇博客,https://kisxy.com,没有什么会永垂不朽

5.内页友链设置

内页友链的设置需要先在选项上指定链接分类，只有指定的链接分类才会显示在内页链接页面中。
指定好分类之后，在内页链接列表的输入框中输入链接参数，此处于设置首页链接方法相同，也是四个参数。
若需要添加rel="nofollow"属性，则需要添加第五个参数，值为0。

示例：

myself,小宇博客,https://kisxy.com,没有什么会永垂不朽,0

设置好链接内容后，前往管理->独立页面，创建一个新页面，自定义模板选择links，然后发布即可！

6.关于文章页和独立页面的头部大图设置

文章或页面的头部预留一块内容用来显示头部大图，默认图片地址为空，显示为黑色背景，可以在选项中设置一个默认的图片地址。

如需要每篇文章使用不同的图片，可以在文章发布页进行设置，可分别设置图片及文字内容。

7.发布文章时常用的设置选项

自定义缩略图设置：顾名思义就是文章缩略图，在文章列表页显示的。

文章置顶标记：此项是为配合sticky插件来使用的，因为sticky插件的置顶添加的标记只有在文章列表页才会有，该选项是在文章内容页的标题后也添加置顶二字，当然你如果不用置顶插件则忽略此选项，默认就是关闭的。

标题文字颜色：可单独设置每篇文章的字体颜色。输入颜色代码即可，如#000000;

8.主题文章缩略图说明

关于文章的缩略图，当你没有设置自定义缩略图时，会自动将文章中的第一张插入的图片将为缩略图。
如果既没有设置自定义缩略图，文章中又不包含图片时，则不显示缩略图，直接从标题开始显示。
当文章中插入的图片达到4张或以上时，列表中该篇文章将以图片封面形式显示。

9.文章中插入mp3音乐

直接在发布文章时进行设置，分别在对应字段中填入歌曲MP3地址，歌名，歌手，歌曲封面即可。

10.读者墙

这一块内容采用了现成的代码修改而来，可以按留言次数显示前40位访客的头像。
设置方法：创建一个新的独立页面，模板选择：message-board，发布即可。

11.创建近期动态或网站公告

同样通过页面的方式来创建，将在侧栏第一个位置显示。
设置方法：创建一个新的页面，模板选择status，然后填写标题：动态或公告按需填写，然后在内容中输入要显示的内容。

此处要注意，需要按照一定的格式填写，每一条内容需要包含在record短代码中，新的内容写在前面，旧的内容往后推。格式如下：

[record]此处写日期或小标题后换行
这一行开始写内容，内容可以换行。
像这样...，然后再换行，输入结束的短代码。
[/record]

然后发布即可！

12.创建独立相册

在管理->分类中创建一个新的分类，取名为相册，分类缩略名设置为gallery。
然后正常发布文章，选择发布到相册分类下，并且在文章发布选项中将该篇文章设置为相册形式，默认不勾选则是普通文章形式。文章的内容请按照以下形式来填写：

发布相册内容方法：一个反斜杠后面加图片地址，一行一条记录

示例：

\https://kisxy.com/usr/uploads/2018/12/347705932.jpg
\https://kisxy.com/usr/uploads/2018/12/1927513038.jpg
\https://kisxy.com/usr/uploads/2018/12/2129023047.jpg

然后发布即可！相册列表演示

13.文章中插入视频

直接在文章内容中通过短代码插入视频，有三种方式可以操作，具体如下：

三种方式都支持以.mp4为结尾的视频地址，或者是youtube在线视频页面地址，暂不支持国内优酷、爱奇艺等视频网站地址！
话说国内主流在线视频网站的视频如果要插入文章根本不需要短代码，直接引用视频网站产生的embed标签代码粘贴过来就可以了

第一种形式（无封面）：

[addvideo]\视频url地址,视频名称或描述,视频宽度,视频高度[/addvideo]

说明：每个参数中间用英文逗号“,”隔开；注意视频地址前需要添加一个反斜杠；

第二种形式（插入typecho附件图片作为视频封面）：

[addvideo2]\视频url地址,此位置直接插入typecho附件图片,视频宽度,视频高度[/addvideo2] 

每个参数中间用英文逗号“,”隔开；注意视频地址前需要添加一个反斜杠；注意不是图片地址，而是用typecho文章发布右侧的附件直接插入

第三种形式（使用外链图片地址作为封面）：

[addvideo3]\视频url地址,视频名称或描述,封面图片url,视频宽度,视频高度[/addvideo3]

每个参数中间用英文逗号“,”隔开；注意视频地址前需要添加一个反斜杠；

演示地址请查看本页面：文章插入视频

14.文章内容中插入相册

这个首先说明一下，文章中普通方式插入的单张图片是没有灯箱效果的，我也没有添加灯箱效果，暂时感觉没有必要，后续可能会考虑。

但是文章内容中插入的相册，均是带有灯箱效果的，且可以在一篇文章中插入多个相册，同样是通过短代码的方式来添加。可以在文章内任何位置插入相册。相册提供一张预览图，点击触发灯箱，显示相册内的多张图片，可以自由切换。

方法如下：

[group]\https://kisxy.com/usr/uploads/2018/12/2674333389.jpg,这是第一个相册的描述，包含了6张图片,1[/group]
[album]\https://kisxy.com/usr/uploads/2018/12/553765828.jpg,1[/album]
[album]\https://kisxy.com/usr/uploads/2018/12/3026050646.jpg,1[/album]
[album]\https://kisxy.com/usr/uploads/2018/12/3933651579.jpg,1[/album]
[album]\https://kisxy.com/usr/uploads/2018/12/1998758631.jpg,1[/album]
[album]\https://kisxy.com/usr/uploads/2018/12/3437516934.jpg,1[/album]

如需要添加第二个相册，那么只需要将以上代码中的1改成2，第三个就是3，以此类推...

演示地址请查看此页面：文章插入相册

15.插入一个点击文字触发灯箱显示图片的短代码

好吧，这个我也不知道该怎么描述，总之这个是为了避免当一张图片高度太大时，直接显示出来会占用很大的篇幅而采取的一个方法，通过这个方法可以将图片隐藏在起来，提供一个文字链接，当需要查看图片时，只击该文字就会以灯箱效果弹出图片。

还是直接看效果吧，当然先说明一下方法：

[addimg]\图片地址,文字描述[/addimg] //注意地址前加一个反斜杠，中间是用英文逗号“,”隔开的！

效果就是这样的，请点击：就是这个效果

好了，大概的内容就这么多了，如果有漏掉的说明，可以在此提问，我会添加上去的：）

接下来主题会进入缓慢的更新状态！！！