分类 教程 下的文章

添加

在 index.php 的 $this->title(); 前面加上 $this->sticky();例如下面这段代码

    <h2 class="title"><a href="<?php $this->permalink() ?>"><?php $this->sticky(); $this->title() ?></a></h2>
    //其实就是这个
    <?php $this->sticky(); $this->title() ?>

创建后台设置选项:

在主题的 functions.php 文件中添加代码,创建一个新的后台设置选项来存储置顶文章的 cid

    // 在主题的 functions.php 文件中
    $stickyCids = new Typecho_Widget_Helper_Form_Element_Text('stickyCids', NULL, NULL, _t('置顶文章CID'), _t('在这里填入置顶文章CID,支持多填,用英文逗号隔开'));
    $form->addInput($stickyCids);
    $stickyCids->setAttribute('class', 'j-setting-content j-setting-global');

前台index.php添加

    <?php
    $stickyCids = $this->options->stickyCids;
    if ($stickyCids) {
        // 用英文逗号分割
        $sticky_cids = explode(',', $stickyCids);
        // 去除每个元素的空格并过滤掉空元素
        $sticky_cids = array_filter(array_map('trim', $sticky_cids), 'trim');
        $sticky_html = "<span style='color:red'>[置顶] </span>";
        $db = Typecho_Db::get();
        $pageSize = $this->options->pageSize;
        $select1 = $this->select()->where('type =?', 'post');
        $select2 = $this->select()->where('type =? && status =? && created <?', 'post', 'publish', time());
        $this->row = [];
        $this->stack = [];
        $this->length = 0;
        $order = '';
        $stickyCidMap = [];
        $whereClauses = [];
        $whereParams = [];
        foreach ($sticky_cids as $i => $cid) {
            $whereClauses[] = 'cid =?';
            $whereParams[] = $cid;
            $order.= " when ". $cid. " then ". $i;
            $select2->where('table.contents.cid!=?', $cid);
            $stickyCidMap[$cid] = $i;
        }
        if (!empty($whereClauses)) {
            $select1->where(implode(' OR ', $whereClauses),...$whereParams);
        }
        if (empty(trim($order))) {
            $orderBy = 'table.contents.created';
            $sort = Typecho_Db::SORT_DESC;
        } else {
            $orderBy = null;
            $sort = "(case cid$order end)";
        }
        if ($orderBy!== null) {
            $select1->order($orderBy, $sort);
        }
        if ($this->_currentPage == 1) {
            $stickyPosts = $db->fetchAll($select1);
            // 对获取到的置顶文章按照设置的顺序排序
            usort($stickyPosts, function ($a, $b) use ($stickyCidMap) {
                return $stickyCidMap[$a['cid']] - $stickyCidMap[$b['cid']];
            });
            foreach ($stickyPosts as $sticky_post) {
                $sticky_post['sticky'] = $sticky_html;
                $this->push($sticky_post);
            }
        }
        $uid = $this->user->uid;
        if ($uid) {
            $select2->orWhere('authorId =? && status =?', $uid, 'private');
        }
        $sticky_posts = $db->fetchAll($select2->order('table.contents.created', Typecho_Db::SORT_DESC)->page($this->_currentPage, $this->parameter->pageSize));
        foreach ($sticky_posts as $sticky_post) {
            $this->push($sticky_post);
        }
        $this->setTotal($this->getTotal() - count($sticky_cids));
    }
    ?>

来源:https://deepsea.xin/archives/77.html


Typecho-Options
TTDF后台设置框架独立版
支持文章字段,如果不需要直接删除fields.php即可

下载

GitHub: https://github.com/ShuShuicu/Typecho-Options

快速上手

在主题functions.php引入options.php即可快速调用设置选择框架进行开发
functions.php:

<?php
if (!defined('__TYPECHO_ROOT_DIR__')) exit;
// 引入设置框架
require_once 'options.php';

开发示例

主题后台设置项
字段类型 描述
Text 文本框
Textarea 文本域
Radio 单选框
Select 下拉框
Checkbox 多选框
Html 自定义 HTML 标签

setup.php

$options = [
    '基础设置' => [
        'title' => '基础设置',
        'fields' => [
            [
                // 'Html' => '自定义HTML标签',
                'type' => 'Html',
                'content' => '<h3>感谢使用 TTDF 进行开发</h3>'
            ],
            [
                // 'Text' => '文本框',
                'type' => 'Text',
                'name' => 'SubTitle',
                'value' => null,
                'label' => '副标题',
                'description' => '这是一个文本框,用于设置网站副标题,如果为空则不显示。'
            ],
            [
                // 'Textarea' => '文本域',
                'type' => 'Textarea',
                'name' => 'TTDF_Textarea',
                'value' => null,
                'label' => '文本域',
                'description' => '用于输入多行文本'
            ]
        ]
    ],
    'select-elements' => [
        'title' => '选择设置',
        'fields' => [
            [
                // 'Radio' => '单选框',
                'type' => 'Radio',
                'name' => 'TTDF_Radio',
                'value' => 'option1',
                'label' => '单选框',
                'description' => '用于选择一个选项',
                'options' => [
                    'option1' => '选项一',
                    'option2' => '选项二',
                    'option3' => '选项三'
                ]
            ],
            [
                // 'Select' => '下拉框',
                'type' => 'Select',
                'name' => 'TTDF_Select',
                'value' => 'option2',
                'label' => '下拉框',
                'description' => '用于从列表中选择',
                'options' => [
                    'option1' => '选项一',
                    'option2' => '选项二',
                    'option3' => '选项三'
                ]
            ],
            [
                // 'Checkbox' => '多选框',
                'type' => 'Checkbox',
                'name' => 'TTDF_Checkbox',
                'value' => ['option1', 'option3'],
                'label' => '多选框',
                'description' => '用于选择多个选项',
                'options' => [
                    'option1' => '选项一',
                    'option2' => '选项二',
                    'option3' => '选项三'
                ]
            ]
        ]
    ],
    'TTDF-Options' => [
        'title' => '其他设置',
        'fields' => [
            [
                'type' => 'Select',
                'name' => 'TTDF_RESTAPI_Switch',
                'value' => 'false',
                'label' => 'REST API',
                'description' => 'TTDF框架内置的 REST API<br/>详细教程见 <a href="https://github.com/Typecho-Framework/Typecho-Theme-Development-Framework#rest-api" target="_blank">官方文档 REST API 部分</a>',
                'options' => [
                    'true' => '开启',
                    'false' => '关闭'
                ]
            ],
        ]
    ],
    'HTML-Demo' => [
        'title' => 'HTML示例',
        // 定义HTML TAB栏
        'html' => [
            [
                // 'Content' => '自定义输出HTML内容',
                'content' => '<h2>欢迎使用TTDF框架</h2>
            <p>Typecho Theme Development Framework</p>
            <blockquote style="border-left: 4px solid #ccc; padding-left: 20px; margin: 20px 0;">
                <p>一个 Typecho 主题开发框架,设计之初是写给自己用的。<br>
                <del>还算不上框架只能说让开发变得更简单些</del></p>
            </blockquote>'
            ],
        ]
    ],
];

return $options;

文章字段项

字段类型 描述
Text 文本框
Textarea 文本域
Radio 单选框
Select 下拉框
Checkbox 多选框

$fields =  [
    [
        // Text
        'type' => 'Text',
        'name' => 'TTDF_Fields_Text',
        'value' => null, // 默认值为 null
        'label' => '文本框',
        'description' => '用于输入单行文本',
        // 添加字段属性
        'attributes' => [
            'style' => 'width: 100%;'
        ]
    ],
    [
        // Textarea
        'type' => 'Textarea',
        'name' => 'TTDF_Fields_Textarea',
        'value' => null, // 默认值为 null
        'label' => '文本域',
        'description' => '用于输入多行文本',
        // 添加字段属性
        'attributes' => [
            'style' => 'width: 100%;height: 100px;'
        ]
    ],
    [
        // Radio
        'type' => 'Radio',
        'name' => 'TTDF_Fields_Radio',
        'value' => null, // 默认值为 null
        'label' => '单选框',
        'description' => '用于选择一个选项',
        'options' => [
            'option1' => '选项一',
            'option2' => '选项二',
            'option3' => '选项三'
        ]
    ],
    [
        // Select
        'type' => 'Select',
        'name' => 'TTDF_Fields_Select',
        'value' => null, // 默认值为 null
        'label' => '下拉框',
        'description' => '用于从列表中选择',
        'options' => [
            'option1' => '选项一',
            'option2' => '选项二',
            'option3' => '选项三'
        ]
    ],
    [
        // Checkbox
        'type' => 'Checkbox',
        'name' => 'TTDF_Fields_Checkbox',
        'value' => [], // 默认值为空数组
        'label' => '多选框',
        'description' => '用于选择多个选项',
        'options' => [
            'option1' => '选项一',
            'option2' => '选项二',
            'option3' => '选项三'
        ]
    ]
];

return $fields;



前几天在测试新主题中,遇见双栏图片总是对不齐(在前面有2个字符空白),并换行,后来求助了一下就解决了,其实只需要在页面直接插入以下代码就解决了。

p {
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 10px;
}

在buyu魔改主题中,我想给p换行后的前面加2个空白字符,“达到缩进效果”,文字的效果达到了,但会把首个图片也缩进了,因为我的图片灯箱可能会被识别成a字符,后面我通过加一个图片识别就完美解决了。

    p img{
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    }

其中gap: 10px;是间隔,图片间隔有点丑就删除。


贴图:<img src="图片地址">

加入连接:<a href="所要连接的相关地址">写上你想写的字</a>

在新窗口打开连接:<a href="相关地址" target="_blank">写上要写的字</a>

消除连接的下划线在新窗口打开连接:<a href="相关地址" style="text-decoration:none" target="_blank">写上你想写的字</a>

移动字体(走马灯):<marquee>写上你想写的字</marquee>

字体加粗:<b>写上你想写的字</b>

字体斜体:<i>写上你想写的字</i>

字体下划线: <u>写上你想写的字</u>

字体删除线:<s>写上你想写的字</s>

字体加大:<big>写上你想写的字</big> #wiki.geekfans.com

字体控制大小:<h1>写上你想写的字</h1> (其中字体大小可从h1-h5,h1最大,h5最小)

更改字体颜色:<font color="#value">写上你想写的字</font>(其中value值在000000与ffffff(16位进制)之间

消除连接的下划线:<a href="相关地址" style="text-decoration:none">写上你想写的字</a>

贴音乐:<embed src=音乐地址 width=300 height=45 type=audio/mpeg autostart="false">

贴flash:<embed src="flash地址" width="宽度" height="高度">

贴影视文件:<img dynsrc="文件地址" width="宽度" height="高度" start=mouseover>

换行:<br>

段落:<p>段落</p>

原始文字样式:<pre>正文</pre>

换帖子背景:<body background="背景图片地址">

固定帖子背景不随滚动条滚动:<body background="背景图片地址" body bgproperties=fixed>

定制帖子背景颜色:<body bgcolor="#value">(value值见10)

帖子背景音乐:<bgsound="背景音乐地址" loop=infinite>

返回上一页:<a href=javascript :history.back(1)>『返回上一页』</a>

关闭窗口:<a href=javascript :self.close()>『关闭窗口』</a>

关于iframe的透明背景:
<IFRAME ID="iFrame1" SRC="iframe.htm"allowTransparency="true"style="background-color: green"></IFRAME>

oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键<table border oncontextmenu=return(false)><td>no</table> 可用于Table

<body onselectstart="return false"> 取消选取、防止复制

onpaste="return false" 不准粘贴

oncopy="return false;" oncut="return false;" 防止复制

<link rel="Shortcut Icon" href="favicon.ico"> IE地址栏前换成自己的图标

<link rel="Bookmark" href="favicon.ico"> 可以在收藏夹中显示出你的图标

<input style="ime-mode:disabled"> 关闭输入法

网页将不能被另存为:<noscript><iframe src=*.html></iframe></noscript>

查看网页源代码:<input type=button value=查看网页源代码 onclick="window.location = "view-source:"+ "http://www.pconline.com.cn"">

删除时确认:<a href="javascript :if(confirm("确实要删除吗?"))location="boos.asp? &areyou=删除&page=1"">删除</a>

不要滚动条?

让竖条没有:<body style="overflow:scroll;overflow-y:hidden"></body>

让横条没有:<body style="overflow:scroll;overflow-x:hidden"></body>

两个都去掉?更简单了:<body scroll="no"></body>

怎样去掉图片链接点击后,图片周围的虚线?:<a href="#" onFocus="this.blur()"><img src="logo.jpg" border=0></a>

在打开的子窗口刷新父窗口的代码里如何写?:window.opener.location.reload()

如何设定打开页面的大小:<body onload="top.resizeTo(300,200);">打开页面的位置<body onload="top.moveBy(300,200);">

获得一个窗口的大小:document.body.clientWidth; document.body.clientHeight

怎么判断是否是字符;if (/[^/x00-/xff]/g.test(s)) alert("含有汉字");else alert("全是字符");

ENTER键可以让光标移到下一个输入框:<input onkeydown="if(event.keyCode==13)event.keyCode=9">

空格代码;<span style="font-size:12px;">&nbsp;&nbsp;&nbsp;</span>
这个只要在编写的时候加上换行代码就可以了,换行代码有两种

css 代码:自定义字体

@font-face {
  font-family: 'MyFont';   /*字体名称*/
  src: url('font.ttf');       /*字体源文件*/
}

然后在定义就可以了:

.text{
    font-family: MyFont;    /*刚刚定义的字体名称*/
}

这样就可以正常显示了。


.douyin{
    animation: uk-text-shadow-glitch .65s cubic-bezier(1,-2.91,0,3.79) 0s infinite normal both running;
}
@keyframes uk-text-shadow-glitch {
    0% {
        text-shadow: none
    }
    25% {
        text-shadow: -2px -2px 0 #ff0048,2px 2px 0 #3234ff
    }
    50% {
        text-shadow: 2px -2px 0 #ff0048,-2px 2px 0 #3234ff
    }
    75% {
        text-shadow: -2px 2px 0 #ff0048,2px -2px 0 #3234ff
    }
    100% {
        text-shadow: 2px 2px 0 #ff0048,-2px -2px 0 #3234ff
    }
}
@keyframes uk-flicker {
    0% {
        opacity: 0
    }
    10% {
        opacity: .6;
        transform: scale(.8)
    }
    20% {
        opacity: 0
    }
    40% {
        opacity: 1
    }
    50% {
        opacity: .2;
        transform: scale(1.1)
    }
    100% {
        opacity: 1;
        transform: scale(1)
    }
}

其中 cubic-bezier(1,-2.91,0,3.79) 是贝赛尔曲线,数值越大,抖的越厉害。
然后给你需要抖起来的文字加上 .douyin 的 class ,就可以了,代码如下:

www.w3h5.com