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 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!

已有 143 条评论

  1. 图片轮播图有点bug!就是手机横屏,图片会全屏加载,然后往上拉查看下面的内容,拉不动!具体什么问题我也不知道,因为我没有用过这个主题,我是直接看你博客测试的!其他的完美吧!细节也很到位!
    1. 回复 小白: 感谢反馈问题:)
      不知道你手机用的是哪个浏览器,我刚用Chrome测试了一下是正常的,横屏轮播显示正常,滚动也是。
      不过我用小米自带的浏览器测试则是在轮播区域无法进行滚动,在轮播区域外则可以滚动。
      1. 回复 小宇: 360手机uc测试不管在哪(我已经浏览到下面内容部分了)只要一横屏那个图片就全屏了,不可滚动!小米手机uc实测也横屏也不可滚动,不过没有测试浏览到下面内容部分再横屏!
        1. 回复 小白: 好的,晚点我下个UC浏览器来试下。
  2. 模板到手了用着真得很棒!!!!不过添加百度编辑器添加内容后前台展示自动添加的有html标签,无奈又换回了官方的编辑器
    记些随笔、相册的话官方编辑器够用了
    1. 回复 秀才6666: 嗯嗯,感谢支持:)
  3. 不語 不語
    妈的 我要说粗话了 真特么漂亮!就一个字——惊艳到了我!!!
    无意进来 看得馋死我了 真想立马撸个新博客。。。
    很精致 看得出写的很用心啊
    Typ里不可多得的匠心主题
    感谢分享。顺便问下波主 那个logo可以用图片么。。。首页大图是否是轮播呢~
    1. 回复 不語: 好高的评价阿哈哈哈!~
      右上角LOGO暂时是文字的,图片的后续会添加,可以自主选择用文字或图片。
      关于首页的大图,是轮播图的,但我现在只放了一张图片,所以看不出来,你可以到分类目录中看大图,就知道了。
      1. 夜不語 夜不語
        回复 小宇: Pinterest发来贺电:相比WP Typ由于用户规模原因 精美的相对少些 特别是瀑布流式的主题难得一见 走心折腾的人 是值得夸赞的 况且还是不吝分享的精美主题 哪天有空来撸一套 初步体验demo站kisxy.com 确实很可以的 友人C说handsome主题“可能是typecho第一个有相册的主题”。而你 可能是“第一款瀑布流主题”了 至少我之前真是没见过Typ的瀑布流主题。。。在ui上主题非常讨人喜欢 功能上该有的基本也有 时间轴非常奈斯 移动端也流畅 认真对齐每一个像素 如右侧的自我介绍 相当真实
        1. 回复 夜不語: 感谢支持!~这个时间轴的评论有问题,能力有限,暂时还没有搞定:(
  4. 哇哦,这个好喜欢!
    1. 回复 苏离世晴: 谢谢:)
  5. 550sd 550sd
    文章页轮播图显示不出来请指教
    1. 回复 550sd: 文章页没有轮播图的设置,只有一张大图的设置。
      1. 550sd 550sd
        回复 小宇: 好的谢谢
  6. 大佬,友情链接内页,留言板,你的Timeline那页,不会做,能给个教程吗?(来自一个弱鸡的提问)
    1. 回复 Xin: 这个因为还有点问题所以还没更新上去噢。
      1. 回复 小宇: 那个时间轴,用来写心情应该会很不错
        1. 回复 Xin: 是的,像微语差不多,只不过现在还有问题,一直没时间解决,就没上传。
  7. 哈哈,好久没来看你了,越来越牛了!
    1. 回复 拽立网: 有吗有吗?

添加新评论

  时光笔记:逐渐成长

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

updated on :

  关于博主

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

  近期评论

  •  Cat: 冒个泡
  •  Ronin: 咚门,算是我对这个圈子的启蒙吧(⁎⁍̴̛ᴗ⁍̴̛⁎) 刚上大学那会,看到他的站,直接就买了使用...
  •  Ronin: 小宇也认识咚哥?以前我用的咚哥的wp主题 能加下友链吗?本站已添加,日均100PV,经常更新的...
  •  一稿计划: 定期回访
  •  iherb: 坚持锻炼不容易 赞
  •  小酱博客-记录我的一生: 互相串门啊!超级喜欢你的模板! 网站名称:小酱博客~记录我的一生 网站简介:被嘲笑梦依旧前进着...
  •  哎呦: 这个时间轴啥时候能发布?
  •  bean sprout: 因为我也懒了,周末还要陪小孩,一点点想更新blog的想法也没有了
  •  为迪斯科: 您好,用了和你一样的风格模板,友情链接一下,谢谢。 博客名称:为迪斯科户外 博客描述:各种户外...
  •  叶戈: 来和大佬链接了, 名称 叶戈博客 地址 https://blog.xjqxz.top 好像不用...

要铭记在心:每天都是一年中最美好的日子。

生活远没有咖啡那么苦涩,关键是喝它的人怎么品味!每个人都喜欢和向往随心所欲的生活,殊不知随心所欲根本不是生活。

如果错过了太阳时你流泪了,那么你也要错过群星了。

不如意的时候不要尽往悲伤里钻,想想有笑声的日子吧。

我不明白为什么要那么在意别人的看法,评头论足只是无聊人的消遣,何必看得如临大敌。如果你不吃别人家的饭,就别太把别人的话放在心上。