2021年7月

前言

这两天终于把相册、书单页完善了一下,之前一直都是用独立页面来实现,这样就不便于管理内容,相册还好,书单的话,要想添加书本信息,只能进入服务器源码文件进行添加,这就造成了很大的不便,于是趁着有时间折腾,就完善了一下,完善之后,相册和书单分别为一个分类,相册下面的每一篇文章就是一个单独的相册,书单下面的每一篇文章就是一本书,还加了好句摘录(评论而已),首页输出的文章样式也不一样。
下面是实现过程:

新建分类

主题目录下新建相册、书单分类自定义文件
创建一个category文件夹,文件夹下分别创建:photos.php、books.php(文件名为分类的缩略名)
文件中分别写入判断代码:

<?php if ($this->is('category', 'photos')): ?>//photos.php
<?php if ($this->is('category', 'books')): ?>//books.php

判断代码下面就是输出分类下的每一篇文章,可自定义样式。

添加自定义字段

找到 functions.php 文件
输入后台添加文章时的自定义字段

function themeFields($layout) {
    $article_type= new Typecho_Widget_Helper_Form_Element_Radio('article_type',array('0' => _t('文章'),'photos' => _t('相册'),'books' => _t('书单')),'0',_t('文章类型'),_t("选择文章类型首页输出"));
    $layout->addItem($article_type);

    $photos_name = new Typecho_Widget_Helper_Form_Element_Text('photos_name', NULL, NULL, _t('相册名称'), _t('输入相册的缩略名'));
    $layout->addItem($photos_name);/** 自定义每一个相册的缩略名 */
    $photos_excerpt = new Typecho_Widget_Helper_Form_Element_Text('photos_excerpt', NULL, NULL, _t('相册介绍'), _t('输入相册的介绍'));
    $layout->addItem($photos_excerpt);/** 输出相册介绍 */

    $books_author = new Typecho_Widget_Helper_Form_Element_Text('books_author', NULL, NULL, _t('书的作者'), _t('输入书的作者'));
    $layout->addItem($books_author);/** 输出书的作者 */
    $books_time = new Typecho_Widget_Helper_Form_Element_Text('books_time', NULL, NULL, _t('书的出版时间'), _t('输入书的出版时间'));
    $layout->addItem($books_time);/** 输出书的出版时间 */
    $books_excerpt = new Typecho_Widget_Helper_Form_Element_Text('books_excerpt', NULL, NULL, _t('书的介绍'), _t('输入书的介绍'));
    $layout->addItem($books_excerpt);/** 输出书的介绍 */
    $books_reading = new Typecho_Widget_Helper_Form_Element_Text('books_reading', NULL, NULL, _t('阅读进度'), _t('阅读进度'));
    $layout->addItem($books_reading);/** 输出阅读进度 */
}

通过以上代码可整理出各个自定义字段为:

article_type//文章类型自定义
photos_name//文章缩略名自定义
books_time//书的出版时间
books_excerpt//书的介绍
books_reading//阅读进度

这些自定义字段将会在后台文章编辑页面展示:

[photos]
QQ截图20210728125107.png
[/photos]

在你所需要展示的地方调用即可展示,调用代码为:

<?php $this->fields->字段缩略名(); ?>

自定义首页文章列表样式

接下来就可以通过上面添加好的自定义字段进行自定义首页文章样式
找到index.php
通过以下代码判断而进行输出相应的样式:

<?php while($this->next()): ?>
<?php if($this->fields->article_type == "photos") { ?><!-- 相册样式 -->
这里写你自定义相册的样式
<?php } elseif ($this->fields->article_type == "books") { ?><!-- 书单样式 -->
这里写你自定义书单的样式
<?php } else {?><!-- 默认样式 -->
这里写你默认文章的样式
<?php }?>
<?php endwhile; ?>

自定义文章内容样式

最后就可以自定义文章内容样式了
找到post.php
通过以下代码判断而进行输出相应的样式:

<?php if($this->category == "photos"): ?> <!-- 相册样式 -->
这里写你自定义相册内容的样式
<?php elseif($this->category == "books"): ?><!-- 书单样式 -->
这里写你自定义书单内容的样式
<?php else: ?><!-- 默认样式 -->
这里写你默认文章内容的样式
<?php endif; ?>

End

折腾完毕~

水一篇typecho折腾记录,实现效果可参考本站首页加载更多~
主题目录找到index.php,把主题默认的分页导航的容器换成

<?php $this->pageLink('点击查看更多','next'); ?>

然后

找到footer.php,前引入js:

<script type="text/javascript">
//点击加载更多
jQuery(document).ready(function($) {
    //点击下一页的链接(即那个a标签)
    $('.next').click(function() {
        $this = $(this);
        $this.addClass('loading').text('正在努力加载'); //给a标签加载一个loading的class属性,用来添加加载效果
        var href = $this.attr('href'); //获取下一页的链接地址
        if (href != undefined) { //如果地址存在
            $.ajax({ //发起ajax请求
                url: href,
                //请求的地址就是下一页的链接
                type: 'get',
                //请求类型是get
                error: function(request) {
                    //如果发生错误怎么处理
                },
                success: function(data) { //请求成功
                    $this.removeClass('loading').text('点击查看更多'); //移除loading属性
                    var $res = $(data).find('.article'); //从数据中挑出文章数据,请根据实际情况更改
                    $('.content').append($res.fadeIn(500)); //将数据加载加进posts-loop的标签中。
                    var newhref = $(data).find('.next').attr('href'); //找出新的下一页链接
                    if (newhref != undefined) {
                        $('.next').attr('href', newhref);
                    } else {
                        $('.next').remove(); //如果没有下一页了,隐藏
                    }
                }
            });
        }
        return false;
    });
});
</script>

注:以上代码中.article和.content,根据自身主题文章结构而调整~
文章结构

什么是canvas,简单来说就是一个画布,利用js在画布上绘制图案,这个东西是我在逛好友@豆豆 的博客看到的,他画的是他的头像,感觉比较个性,作为追求个性的我就去尝试画了一下,刚开始摸索不是很熟,以至于我折腾了一下午!介绍一下折腾过程~

介绍

[photos]
irils-canvas.gif
[/photos]

基本就是这样的效果,可拖动,可旋转有着明显的立体感,所显示类似于微笑表情的字样:RZ。
理由开源项目:Zdog制作而成!
刚开始是打算放在我博客头部头像的那个位置的,后来发现,展示效果并不是很友好,于是就移到了
关于页面的头部~

Zdog

Zdog是github上一个优秀的伪3D绘画项目
开源地址:Zdog
介绍为:Round, flat, designer-friendly pseudo-3D engine
意为:圆形、扁平、设计师友好的伪 3D 引擎(googl是这么翻译的~)
食用起来并不是很难,看一遍文档,实际操作一下你也能绘画出nb的伪3d模型。

食用指南

这里我用我的canvas进行演示
首先在你需要展示的地方创建一个canvas画布用于呈现zdog:

<canvas class="zdog-canvas" width="240" height="240"></canvas>

可设置其大小
然后将相关Zdog JavaScript文件添加到你的footer页面

<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>//导入zdog引擎
<script src="zdog-demo.js"></script>//用于绘画你的图像

接下来主要在zdog-demo.js上面编写代码
下面是我完整的图像绘画js,以供参考,必要注释已标注!

$(function() {
//制作zdog

const TAU = Zdog.TAU; //设置常量TAU
let isSpinning = true;//动画开启
var sceneStartRotation = { y:-TAU/1 };//逆时针开始旋转

   // 创建 illo 布局 
const illo = new Zdog.Illustration({
   // 选择class设置画布
  element: '.zdog-canvas',//你所创建canvas的class名
  zoom: 4, //按比例缩放整个场景。
  dragRotate: true,//通过拖动启用旋转场景
  onDragStart: function() {//当拖动的时候动画关闭
  isSpinning = false;
  },
});

//创建一个组,取名Group
var Group = new Zdog.Group({
  addTo: illo,//添加组到所创建的illo布局上
  translate: { z: 0 },
  //这个组在illo布局所在的位置,可设置x,y,z
});

//在组里面创建一个圆柱(Cylinder)作为脸,取名face
let face = new Zdog.Cylinder({
  addTo: Group,//把这个face添加到组
  diameter: 35,//圆柱的直径
  length: 5,//圆柱的长度
  color: '#ededed',//正面的颜色
  frontFace: '#fff',//中间的颜色
  backface: '#c1c1c1',//背面的颜色
});

//在组里面创建一个形状(Shape),展示为rz的r
new Zdog.Shape({
  addTo: Group,//把这个形状添加到组
  translate: { x: -12, y: -5},//这个形状在组的位置
  path: [  //设置形状的路径
    { x: 10, y: -4},// 从左上角开始
    { x:  3, y: -4},// 线到右上角
    { x:  3, y: -4},// 线到左下
    { x:  3, y:  4},// 线到右下角
  ],
  closed: false,//设置这个形状为打开状态
  stroke: 2,//这个形状的粗细程度
  color: '#000',//这个形状的颜色
  backface: false,//正面朝后时隐藏
});

//在组里面创建一个形状(Shape),展示为rz的z
new Zdog.Shape({
  addTo: Group,//把这个形状添加到组
  translate: { x: 5, y: -5 },//这个形状在组的位置
  path: [//设置形状的路径
    { x: -3, y: -4 }, // 从左上角开始
    { x:  3, y: -4 }, // 线到右上角
    { x: -3, y:  4 }, // 线到左下
    { x:  3, y:  4 }, // 线到右下角
  ],
  closed: false,//设置这个形状为打开状态
  stroke: 2,//这个形状的粗细程度
  color: '#000',//这个形状的颜色
  backface: false,//正面朝后时隐藏
});

//在组里面创建一个椭圆(Ellipse),展示为微笑
new Zdog.Ellipse({
  addTo: Group,//把这个形状添加到组
  diameter: 15,//这个椭圆的直径
  quarters: 2, // 设置椭圆的1/几 ,这里设置1/2就是半圆
  translate: { x: -1.5, y: 3},//这个形状在组的位置
  // rotate semi-circle to point up
  rotate: { z: Zdog.TAU/4 },//顺时针旋转 z: -Zdog.TAU/4 即为逆时针旋转
  color: "000",//这个椭圆的颜色
  stroke: 2,//这个形状的粗细程度
  backface: false,//正面朝后时隐藏
});


var ticker = 0;
var cycleCount = 240;//旋转速度
function animate() {
  // update
  if ( isSpinning ) {
    var progress = ticker / cycleCount;
    var theta = Zdog.easeInOut( progress % 1 ) * TAU;//当旋转到正面停留的时间
    illo.rotate.y = theta + sceneStartRotation.y;
    ticker++;
  } 
  illo.updateRenderGraph();//更新渲染图
  requestAnimationFrame( animate );//请求动画帧
}
animate();//开始动画

});

官方文档有更多参考:文档

End

就这样,一个简单的伪3d图像就做出来了!
如果有时间,我一定要把我头像给淦出来!?
希望看到这篇文章的你能画出更nb的图像!

紧跟时事,浅谈最近河南暴雨事件!
最近几天一直在淦主题,也没怎么看新闻,刷视频,前几天村里老人都还在谈今年降水量是真的多,地处云南的我,最近几天都在下雨,虽说不是持续性的,相比较前几年,的确是难见,当我空闲时在短视频app上刷到最近的热点--河南暴雨事件时,我才意识到,这不仅仅是一场简简单单的雨。

千年一遇的暴雨,让河南多地受灾!

事件

zt_e857bb17-3e17-4006-bd28-17b05c67f7cc.jpg

可以通过最近图片中看到,突如其来的暴雨,将河南部分城市淹没在雨水当中,根据气象局消息,从17号到20号,河南郑州在三天内下了往年一整年的雨量,有网友计算,这相当于一个小时内往郑州灌了150个西湖!通过这个数据可见降水量如此之多!

可在这紧急关头,志愿者勇敢的挺身而出,各方力量及时支援,很多网友纷纷表示关心挂念!

一方有难,八方支援,尽显中国力量!

还有人民日报评论:

"事不避难,义不逃责,灾难中凝聚着不屈力量:
越是艰险当前,越需要团结一心,众志成城;
越是关键时刻,越要自救救人,抱团前行!”

当看到此情此景,我想起来有网友在受灾地区,我便问候了一下:

IMG_20210724_074130.jpg

3630f9549d25c64.jpg

可见他在灾难面前还能如此快乐!!!

可身处外地的我又能怎么样?

我只能跟他说:一切都会慢慢好起来的,加油!

希望河南洪灾早日结束!河南加油!