Typecho瀑布流主题:Practice01

    

瀑布流主题:Practice01

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

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

主题使用中有任何问题都可以在此提问,基本上都可以得到回复:)

网站缩略图.png

主题在线演示

请查看本站即可!

关于Practice01

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

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

主题功能及特点简要介绍

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

主题下载(当前版本:v1.0.5)

提供两种方式免费获取本主题:
1.项目地址:Practice01 v1.0.5
2.本地下载:Practice01 v1.0.5.zip [49kb]

主题交流群

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

主题更新记录

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] //注意地址前加一个反斜杠,中间是用英文逗号“,”隔开的!

效果就是这样的,请点击:就是这个效果

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

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

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!

已有 140 条评论

  1. 小宇我又来辽,有个问题就是觉得评论需要填写的信息太多了,有没有什么方法,只需要填写QQ号就能评论
  2. 还有首页文章的展示会把后台代码显示出来,你看看我首页文章样式就是这样
    1. 回复 Mrlinn: 嗯,我看到了,这个问题不大,可以修正的,我会找个时间搞一下,然后你的版本应该不是最新的,我刚看了下,我最新的还没有发布哈哈哈。因为发布了的都还没有时间轴功能。
      1. 回复 小宇: 好的期待你的发布(✪ω✪)
  3. 大佬你好这里反应个问题,就是文章中添加了多张图片首页会显示为图片形式而你不是文章样式,这个如何解决,你看这篇文章就是这样https://www.wlinn.xyz/index.php/archives/48/
    然后首页显示就是图片形式https://www.wlinn.xyz/
    1. 回复 Mrlinn: 嗯,看到了,这个我在后续的版本中有添加了关闭封面形式的选项,你看下在主题外观设置中有没有第37个选项,如果没有的话,表示不是最新版本。
      1. 回复 小宇: 好的谢谢,我看下!
        1. 回复 Mrlinn: 我找个时间发布下更新吧,有段时间没动了,需要整理一下。
  4. feitisn feitisn
    大佬好,就是我在设置“21.要显示在首页侧边栏的链接分类(支持多分类,请用英文逗号“,”分隔)”这个选项的时候,我设置了分类,但是侧边栏还是都显示出来了,测试了很多遍还是都显示出来,我想请问一下大佬,这个是什么问题?
    1. 回复 feitisn: 第22项设置“首页链接列表”是否有按格式填写正确了?
  5. 小宇,就是那个置顶插件,我没有在index.php中找到this title 这个东西哇
    1. 回复 imlike: post_common.php
      1. 回复 小宇: 谢谢,找到了
  6. 谢谢,模板非常好用,感谢小宇
    1. 回复 陈员外: 感谢支持:)

添加新评论

  时光笔记:逐渐成长

有天晚上下班,和豆豆吃过饭后一起接了小家伙回家,开车的时候我说了句:哎呀晚上吃太饱了。没想到小家伙拖着长长的音在边上说:我——也——是——,边说还一本正经地用手摸了摸自己的肚子,笑死我了。

updated on :

  关于博主

84年生人,天秤座与处女座交接,有一点点强迫症,性格诡异,情绪复杂多变。爱好健身、跑步,一年必跑一场全程马拉松,N场半程马拉松。也喜欢听歌与阅读,喜欢接触新鲜事物。座右铭:活到老,学到老,生命在于运动!

  近期评论

  •  爱你哦: 这是我的网站,www.nsh.pub大佬的模板就是好用,只能膜拜,期待大佬有新的作品,顺便提个...
  •  北海轻歌: 期待你的下一个主题。哈哈
  •  使用者: 这个链接的页面内容格式是什么?
  •  清风: 博客换链接了,请更新一下~ 博客名称:岁月小筑 博客描述:流年似谎,很久以后才懂那些旧时光。 ...
  •  imlike: 小宇我又来辽,有个问题就是觉得评论需要填写的信息太多了,有没有什么方法,只需要填写QQ号就能评论
  •  一稿计划: 名称: 一稿計畫 | Last ONE 网址:https://lastone.ohhh.cc ...
  •  一稿计划: 加个友链吧!
  •  凡涛: 我博客更换了域名,名称也改了,还请小宇更新一下站点名称:凡涛の小栈 地址:https://ww...
  •  一稿计划: 脸熟一下,问个好
  •  阿飞: 全局https 不就行了?

只有脚踏实地的人,才能够说:路,就在我的脚下。

无论你选择做什么,追求完美的程度决定你成就的高度。

这个世界最脆弱的是生命,身体健康,很重要。

上帝说:你要什么便取什么,但是要付出相当的代价。

现在站在什么地方不重要,重要的是你往什么方向移动。