主题的相册页面修改为点击图片跳转到文章详情页

首页 -  片刻 -  相册 -  书房 -  邻居 -  关于

本站主题是typecho的oneblogx。作者是彼岸临窗。

其中有个页面是相册页,原主题是相册页里一张一张的照片,点开是放大图。然后一张图片要发一篇文章,我是打算相册页作为图片文章的封面聚合页。

我作为技术小白,完全不知道该如何调整,代码页看不懂。最后想了个笨办法。

既然点击封面缩略图是打开放大图,那我岂不是可以给缩率图加个跳转到文章详情页的链接不就可以了。

于是,就开始折腾了。

1、记忆中大概知道一点给文本加链接的方法,但是记不住具体代码写法。百度搜索得出文本加链接方法如下:

<a href="网址链接" target="_blank">访问Example网站</a>

2、文章链接肯定不是固定连接了,但是这个文章链接的代码该如何整。然后我想到了首页文章列表,打开index.php,在里面根据上下文,一点点的找,终于找到这个 "<?php $this->permalink() ?>",看起来应该是文章链接的代码了。

3、把该代码和文本链接结果合并后,加入到相册页代码里,同样根据上下文观察,找到了缩略图打开为大图的代码行,替换成文章链接代码。保存刷新测试,目标达成。

总结:把主题模版里的photo.php文件里的

        <?php while($this->next()): ?>
        <div class="grid image-shadow blur">
            <div class="grid-item">
                <a data-fancybox="gallery" data-caption="<?php $this->title(); ?>&nbsp;&nbsp;&nbsp;&nbsp;<?php $this->date('M d, Y'); ?>&nbsp;&nbsp;&nbsp;&nbsp;©&nbsp;<?php echo $this->fields->author ? $this->fields->author() : $this->author(); ?>" href="<?php echo $this->fields->photo ? $this->fields->photo() : $this->fields->thumb(); ?>">
                    <img class="lazy-load" data-src="<?php echo $this->fields->thumb(); ?>" />
                </a>
            </div>
        </div>
        <?php endwhile; ?>
    </div>

替换为

        <?php while($this->next()): ?>
        <div class="grid image-shadow blur">
            <div class="grid-item">
                <a href="<?php $this->permalink() ?>" >
                    <img class="lazy-load" data-src="<?php echo $this->fields->thumb(); ?>" />
                </a>
                </a>
            </div>
        </div>
        <?php endwhile; ?>
    </div>

大功告成,方法笨是笨了点,自己瞎折腾能出结果也行,虽然对大神来说,分分钟的事情。

本文著作权归作者 [ 拾光者 ] 享有,未经作者书面授权,禁止转载,封面图片来源于 [ 互联网 ] ,本文仅供个人学习、研究和欣赏使用。如有异议,请联系博主及时处理。

发表留言