V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
xiamuguizhi
V2EX  ›  分享创造

给你的 Typecho 博客添加一个相册吧,支持任何主题

  •  
  •   xiamuguizhi ·
    xiamuguizhi · 2021-02-27 15:23:11 +08:00 · 3635 次点击
    这是一个创建于 1346 天前的主题,其中的信息可能已经有所发展或是发生改变。

    前言

    很早以前就想折腾一个相册页面,但是没有好看的样式就一直耽搁了。最近看到了 Time For Typecho 相册模板 很 nice 啊不过要更换主题感觉太浪费了,后面又发现 photo page for typecho 独立页面模板支持两种样式但是他使用的是 js 动态输出。我就寻思自己折腾一下,就参考了两者搞了相册独立页面模板这样和博客现有主题不冲突两者兼得。

    声明

    主题样式:https://github.com/wclk/time

    参考代码:

    介绍

    1.支持延迟加载 2.支持图片分页

    效果

    预览

    请输入图片描述

    下载

    github:https://github.com/xiamuguizhi/typecho-page-photo

    本站:https://xiamuyourenzhang.cn/usr/uploads/2021/02/1684881163.zip

    使用

    1.下载 page-img.php 放到主题根目录就可以

    2.新建独立页面,选择模板 Lens 风格相册

    58327-pvunhz7s4n.png

    3.一些设置

    点击添加字段,填入相对应文字或者链接!

    jianjie myqq myweibo mygithub

    29434-5og7rl0ktl5.png

    86868-uu82g1zm21.png

    3.添加图片格式

    标题 @时间 @描述 @图片地址 一张图片一行,记得换行{如下:}

    泉州少林寺 @2021 年 2 月 泉州 @第一次到了泉州少林寺 @http://127.0.0.1/tp/img/ia_100000001765.jpg

    81773-f39v0ji002d.png

    核心详解

    很简单的代码,看完你可以把相册主题改成追番列表什么的 都可以 哈哈

    
    	<?php
    	 
     
    	$page=$_GET['page'];//获取当前页数
    	 
    	$max=999;//设置每页显示图片最大张数
    	 
    	 
    		$html = $this->row['text']; //获取文章内容纯文本化
    		
    		$array= explode("\n",$html); //分割换行符,存入数组
    			
    	 	$i=count($array); //获取数组 array  全部图片数量 分页使用
    
    		
    		for ($j=$max*$page;$j<($max*$page+$max)&&$j<$i;++$j){//循环条件控制显示图片张数
    			
    		$post = explode('@',$array[$j]);   // 分割数组  @ 在存入数组 方便读取
    
    //.$post[0].  标题  .$post[1]. 时间   .$post[2].  描述 .$post[3].  图片地址
    		
    		echo "<article class=\"thumb img-area\"> <a class=\"image my-photo\"  alt=\"loading\"  data-src=\"https://a-oss.zmki.cn/2020/20200212-fcf30f3d33625.gif\"  href=\"".$post[3]."\" > <img class=\"zmki_px  my-photo\" data-src=\"".$post[3]."\"  /> </a> <h2>".$post[0]."</h2> <p><p>".$post[1]."</p><p>".$post[2]."</p></p> </article>";
    		
    		
    	}
    
    
    	 
    		/**	 照片分页  使用前请设置  $max=999;   还有 把注释去掉    页面输出照片数量 
    
    		$Previous_page=$page-1;
    		 
    		$next_page=$page+1;
    		 
    		if ($Previous_page<0){
    		 
    			echo "上页";
    		 
    			echo "<a href=?page=$next_page>下页</a>";
    		 
    		}
    		 
    			else if ($page<=$i/$max-2){
    		 
    			  echo "<a href=?page=$Previous_page>上页</a>";
    		 
    			  echo "<a href=?page=$next_page>下页</a>";}
    		 
    				else{
    		 
    				  echo " <a href=?page=$Previous_page>上页</a>";
    		 
    				  echo "下页";
    		 
    				}
    
    		**/	 
    
    	?>	
    
    

    25098-gvyszx5k9e6.png

    15 条回复    2021-02-28 15:14:59 +08:00
    EasonC
        1
    EasonC  
       2021-02-27 15:27:38 +08:00 via iPhone
    大佬有写日志的那种模版吗
    xiamuguizhi
        2
    xiamuguizhi  
    OP
       2021-02-27 15:29:47 +08:00
    @EasonC 日志?纯文本?
    Tink
        3
    Tink  
       2021-02-27 15:42:38 +08:00 via Android   ❤️ 1
    @EasonC https://www.gaojinan.com 这算是写日志的吗
    EasonC
        4
    EasonC  
       2021-02-27 15:50:55 +08:00 via iPhone
    @xiamuguizhi 是的😁
    EasonC
        5
    EasonC  
       2021-02-27 15:51:25 +08:00 via iPhone
    @Tink 算,就是颜值低点
    xiamuguizhi
        6
    xiamuguizhi  
    OP
       2021-02-27 16:51:32 +08:00
    @EasonC 给你推荐 V2EX 一个人分享过的主题吧 https://github.com/youranreus/G 感觉很不错~
    Track13
        7
    Track13  
       2021-02-27 20:47:04 +08:00 via Android   ❤️ 1
    @Tink 昨天打开你博客,吓得我查看控制台检查是不是我的网有问题😂
    LeeReamond
        8
    LeeReamond  
       2021-02-27 20:48:25 +08:00 via Android
    通过 lz 的网站 30 秒才能打开的速度,我们知道 tpc 加相册并不是个好主意
    Tink
        9
    Tink  
       2021-02-27 21:04:15 +08:00 via Android
    @Track13 哈哈哈哈哈,昨天换了个主题
    xiamuguizhi
        10
    xiamuguizhi  
    OP
       2021-02-27 22:04:07 +08:00
    @Track13 资源加载的有点多 而且最近阿里云 跟 cloudflare 合作什么 搞得我 cdn 到晚上就出问题 明天换回来
    xiamuguizhi
        11
    xiamuguizhi  
    OP
       2021-02-27 22:04:37 +08:00
    @LeeReamond 是我没优化好的问题。。还是换七牛吧。。
    wolong
        12
    wolong  
       2021-02-28 00:09:16 +08:00
    @Tink 我就喜欢你这种风格。
    myevery
        13
    myevery  
       2021-02-28 01:51:19 +08:00 via Android
    @Tink 你这博客太简洁了,非常有意思,我收录一下了: https://wanweiku.com/am.php?t=IToiMHF2h2e4
    xiamuguizhi
        14
    xiamuguizhi  
    OP
       2021-02-28 12:22:22 +08:00
    @myevery https://github.com/xiamuguizhi/simplifier 可以吧 这里可以下载 typecho 的主题
    myevery
        15
    myevery  
       2021-02-28 15:14:59 +08:00 via Android
    @xiamuguizhi 谢谢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1212 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 18:12 · PVG 02:12 · LAX 10:12 · JFK 13:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.