搜索到
51
篇与
的结果
-
Typecho文章页面实现长久没有更新文章的提示 方法打开主题目录下post.php文件，在适当位置添加如下代码，一般添加在post-content后面（表示文章正文开始的地方） <div class="tip inlineBlock share" rel="nofollow"> <p> 本文最后更新于<?php echo date('Y年m月d日' , $this->modified);?>， 已超过<?php echo floor((time()-($this->modified))/86400);?>天没有更新。 如果文章内容或图片资源失效，请留言反馈，我会及时处理，谢谢！ </p> </div>注意：代码引用的css是handsome主题内置的，如果要用在其他主题，请自行把这个css扒下来！ -
Typecho不同分类文章标题显示不同颜色 如果你想在index页面，让文章标题的颜色根据分类显示，那么就打开你的模板文件夹下的index.php文件,将:<h2 class="entry_title"></h2>替换为 <h2 class="entry_title"> <a href="<?php $this->permalink() ?>" class="<?php echo $this->category; ?>"><?php $this->title() ?></a> </h2>这样就会在index页面的每篇文章里加上class=”分类缩略名”，然后我们就可以用这个来修改css样式了。打开你的主题文件夹下style.css文件来定义css，比如我的一个分类是news，想把分类下文章标题都变成红色的，那么添加代码.news{color:red;}同理，你也可以将archives.php，以及post.php等页面都照此法处理。注意如果一篇文章属于多个分类，那么用：<?php echo $this->category; ?>只能输出一个分类缩略名，暂时还没找到更好的办法。
-
Typecho 评论增加楼层显示 代码： <span style="margin-left:5px;color:#617d0e;font-size:12px"> <?php if($comments->levels == 0): ?> <?php if($comments->sequence == 1): ?>沙发 <?php elseif($comments->sequence == 2): ?>板凳 <?php elseif($comments->sequence == 3): ?>地毯 <?php else: ?> 第<?php $comments->sequence(); ?>楼<?php endif; ?> <?php endif; ?> </span>
-
记录Typecho纯代码算术验证 Typecho的垃圾评论还是比较多的，除了插件外，还可以通过PHP函数实现简单的算术验证码。第一步function.php如下函数//算术验证评论 function themeInit($comment){ $comment = spam_protection_pre($comment, $post, $result); } function spam_protection_math(){ $num1=rand(1,49); $num2=rand(1,49); echo "<label for=\"math\">请输入<code>$num1</code>+<code>$num2</code>的计算结果：</label>\n"; echo "<input type=\"text\" name=\"sum\" class=\"text\" value=\"\" size=\"25\" tabindex=\"4\" style=\"width:218px\" placeholder=\"计算结果：\">\n"; echo "<input type=\"hidden\" name=\"num1\" value=\"$num1\">\n"; echo "<input type=\"hidden\" name=\"num2\" value=\"$num2\">"; } function spam_protection_pre($comment, $post, $result){ $sum=$_POST['sum']; switch($sum){ case $_POST['num1']+$_POST['num2']: break; case null: throw new Typecho_Widget_Exception(_t('对不起: 请输入验证码。<a href="javascript:history.back(-1)">返回上一页</a>','评论失败')); break; default: throw new Typecho_Widget_Exception(_t('对不起: 验证码错误，请<a href="javascript:history.back(-1)">返回</a>重试。','评论失败')); } return $comment; }第二步comments.php添加函数打开主题comments.php文件，在适当为止插入如下代码：<?php spam_protection_math();?>如果觉得100以内太难了，请修复function.php中添加的代码中rand后面的数字范围。
-
typecho评论验证码插件 很多用户受到垃圾评论的困扰，因为某些国内服务器无法连接到Akismet服务，所以垃圾评论肆虐。有的用户即使启用了Akismet插件，但成千上万条垃圾评论对服务器负载也造成了影响。因此我开发了一个验证码插件，有需要开发类似插件的用户也可以借鉴一下开发方法。使用方法很简单，下载插件解压后，将其上传至/usr/plugins/目录下，先在后台启用插件，然后编辑摸板，在评论的表单位置也就是comments的form标签之间的任何你认为合适的地方，加上如下代码<p><?php Captcha_Plugin::output(); ?></p>[hide]评论验证码插件.zip[/hide]
-
typecho调用多张缩略图，非插件实现 代码如下：/** 输出文章缩略图 */ function showThumbnail($widget,$imgnum){ //获取两个参数，文章的ID和需要显示的图片数量 // 当文章无图片时的默认缩略图 $rand = rand(1,20); $random = $widget->widget('Widget_Options')->themeUrl . '/img/rand/' . $rand . '.jpg'; // 随机缩略图路径 $attach = $widget->attachments(1)->attachment; $pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i'; $patternMD = '/\!\[.*?\]\((http(s)?:\/\/.*?(jpg|png))/i'; $patternMDfoot = '/\[.*?\]:\s*(http(s)?:\/\/.*?(jpg|png))/i'; //如果文章内有插图，则调用插图 if (preg_match_all($pattern, $widget->content, $thumbUrl)) { echo $thumbUrl[1][$imgnum]; } //没有就调用第一个图片附件 else if ($attach && $attach->isImage) { echo $attach->url; } //如果是内联式markdown格式的图片 else if (preg_match_all($patternMD, $widget->content, $thumbUrl)) { echo $thumbUrl[1][$imgnum]; } //如果是脚注式markdown格式的图片 else if (preg_match_all($patternMDfoot, $widget->content, $thumbUrl)) { echo $thumbUrl[1][$imgnum]; } //如果真的没有图片，就调用一张随机图片 else{ echo $random; } }调用的代码就是以下这样，从0开始算，数字0则调用第一张<?php showThumbnail($this,0); ?>
-
为主题添加人生倒计时 教程开始：第一步-先要放在什么位置，我的放在独立页面，加入以下代码：<!-- 时间倒计时代码 --> <div class="sidebar-box classListBox"> <div class="aside aside-count"> <div class="p-3"><span style="font-size: 1.2em; color: orange;"><i class="fas fa-hourglass-half"></i></span> 人生倒计时</div> <div class="content"> <div class="item" id="dayProgress"> <div class="title">今日已经过去<span></span>小时</div> <div class="progress"> <div class="progress-bar"> <div class="progress-inner progress-inner-1"></div> </div> <div class="progress-percentage"></div> </div> </div> <div class="item" id="weekProgress"> <div class="title">这周已经过去<span></span>天</div> <div class="progress"> <div class="progress-bar"> <div class="progress-inner progress-inner-2"></div> </div> <div class="progress-percentage"></div> </div> </div> <div class="item" id="monthProgress"> <div class="title">本月已经过去<span></span>天</div> <div class="progress"> <div class="progress-bar"> <div class="progress-inner progress-inner-3"></div> </div> <div class="progress-percentage"></div> </div> </div> <div class="item" id="yearProgress"> <div class="title">今年已经过去<span></span>个月</div> <div class="progress"> <div class="progress-bar"> <div class="progress-inner progress-inner-4"></div> </div> <div class="progress-percentage"></div> </div> </div> </div> </div> </div> <!-- 时间倒计时代码 -->第二步-添加完成后,在主题后台自定义css里添加如下代码，一般都是在主题设置-自定义设置-自定义CSS样式丢进去就行了/* 人生倒计时css */ .aside-count .content { padding: 15px } .aside-count .content .item { margin-bottom: 15px } .aside-count .content .item:last-child { margin-bottom: 0 } .aside-count .content .item .title { font-size: 12px; color: var(--minor); margin-bottom: 5px; display: flex; align-items: center } .aside-count .content .item .title span { color: var(--theme); font-weight: 500; font-size: 14px; margin: 0 5px } .aside-count .content .item .progress { display: flex; align-items: center } .aside-count .content .item .progress .progress-bar { height: 10px; border-radius: 5px; overflow: hidden; background: var(--classC); width: 0; min-width: 0; flex: 1; margin-right: 5px } @keyframes progress { 0% { background-position: 0 0 } 100% { background-position: 30px 0 } } .aside-count .content .item .progress .progress-bar .progress-inner { width: 0; height: 100%; border-radius: 5px; transition: width 0.35s; -webkit-animation: progress 750ms linear infinite; animation: progress 750ms linear infinite } .aside-count .content .item .progress .progress-bar .progress-inner-1 { background: #bde6ff; background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%); background-size: 30px 30px } .aside-count .content .item .progress .progress-bar .progress-inner-2 { background: #ffd980; background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%); background-size: 30px 30px } .aside-count .content .item .progress .progress-bar .progress-inner-3 { background: #ffa9a9; background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%); background-size: 30px 30px } .aside-count .content .item .progress .progress-bar .progress-inner-4 { background: #67c23a; background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%); background-size: 30px 30px } .aside-count .content .item .progress .progress-percentage { color: var(--info) } /*人生倒计时css*/第三步-添加完成后,在到主题文件/js/里面创建名为timeinfo.js后把下面代码复制进去保存.function init_life_time() { function getAsideLifeTime() { /* 当前时间戳 */ let nowDate = +new Date(); /* 今天开始时间戳 */ let todayStartDate = new Date(new Date().toLocaleDateString()).getTime(); /* 今天已经过去的时间 */ let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60; /* 今天已经过去的时间比 */ let todayPassHoursPercent = (todayPassHours / 24) * 100; $('#dayProgress .title span').html(parseInt(todayPassHours)); $('#dayProgress .progress .progress-inner').css('width', parseInt(todayPassHoursPercent) + '%'); $('#dayProgress .progress .progress-percentage').html(parseInt(todayPassHoursPercent) + '%'); /* 当前周几 */ let weeks = { 0: 7, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6 }; let weekDay = weeks[new Date().getDay()]; let weekDayPassPercent = (weekDay / 7) * 100; $('#weekProgress .title span').html(weekDay); $('#weekProgress .progress .progress-inner').css('width', parseInt(weekDayPassPercent) + '%'); $('#weekProgress .progress .progress-percentage').html(parseInt(weekDayPassPercent) + '%'); let year = new Date().getFullYear(); let date = new Date().getDate(); let month = new Date().getMonth() + 1; let monthAll = new Date(year, month, 0).getDate(); let monthPassPercent = (date / monthAll) * 100; $('#monthProgress .title span').html(date); $('#monthProgress .progress .progress-inner').css('width', parseInt(monthPassPercent) + '%'); $('#monthProgress .progress .progress-percentage').html(parseInt(monthPassPercent) + '%'); let yearPass = (month / 12) * 100; $('#yearProgress .title span').html(month); $('#yearProgress .progress .progress-inner').css('width', parseInt(yearPass) + '%'); $('#yearProgress .progress .progress-percentage').html(parseInt(yearPass) + '%'); } getAsideLifeTime(); setInterval(() => { getAsideLifeTime(); }, 1000); } init_life_time()第四步-最后到页脚里面引入此js.(放在上面即可）<!-- 倒计时引用的JS --> <script src="<?php $this->options->themeUrl('assets/js/timeinfo.js'); ?>"></script> <!-- 倒计时引用的JS -->以上就是完整的代码，复制过去记得不要放错的位置，注意排查细节如果出现了进度条无法显示等问题，根本原因在于你没有引入第三方库需要加载jquery，
-
typecho添加用户个人签名功能 教程开始1.首先，需要在后台个人设置页面增加一个输入框（别想着在admin/profile.php这个文件改，那是最笨的办法），编辑/Widget/Users/Profile.php，找到57行点子邮件地址那些表单的代码下面，插入如下代码： /** 个人简介 */ $intro = new Typecho_Widget_Helper_Form_Element_Textarea('intro', NULL, NULL, _t('个人简介'), _t('个人简介作为此用户对于自己的简单介绍.').'<br />' . _t('字数请不要太多，适中即可.')); $form->addInput($intro);就这样，一个name等于intro的Textarea文本框就出现在界面上了，刷新个人设置界面就能看见，不过现在填写提交都是没有用的，因为并没有进入数据库，所以下一步就是添加数据库字段了。2.打开phpmyadmin或者其它数据库管理工具，编辑typecho_users表结构，在其中新增intro字段，类型我省事写成了text。如果是一个还未安装的typecho，可以直接编辑typecho的install文件夹里面的mysql.sql，找到typecho_users这个表的代码，同样的，在邮箱的字段底下加一行如下代码： `intro` text NOT NULL,已经在运行中的网站通过phpmyadmin修改后就行了，没有的就安装上述修改sql文件，然后执行typecho安装后，会自动出现字段。然而，到这里，用户的提交仍然是无用的，因为我们还没有把入库的字段加入typecho默认的方法3.继续看/Widget/Users/Profile.php文件，找到272行，用户更新的方法里面，看到“取出数据”这条注释，修改它下面的原本那条代码，改为如下： $user = $this->request->from('mail', 'screenName', 'url', 'intro');然后继续找到78行位置，那里有输入框调用数据库值得定义，不写的话，就算提交进入数据库，前台也看不见效果，所以加上一条。 $intro->value($this->user->intro);4.经过上述那些步骤之后，一整个字段定义，入库流程就完成了，而前台的调用也很简单，基本上就是完全按照typecho默认的格式，代码如下： <?php $this->user->intro(); ?> //当前登录用户签名 <?php $this->author('intro'); ?> //文章作者签名
-
给博客添加夜间/护眼模式 食用方法进入主题，首先第一步，在您的页脚文件：footer.php上面加入以下js代码。 < script type = "text/javascript" > function switchNightMode() { var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0"; if (night == "0") { document.body.classList.add("night"); document.cookie = "night=1;path=/"; console.log("夜间模式开启") } else { document.body.classList.remove("night"); document.cookie = "night=0;path=/"; console.log("夜间模式关闭") } } (function() { if (document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === "") { if (new Date().getHours() > 21 || new Date().getHours() < 6) { document.body.classList.add("night"); document.cookie = "night=1;path=/"; console.log("夜间模式开启") } else { document.body.classList.remove("night"); document.cookie = "night=0;path=/"; console.log("夜间模式关闭") } } else { var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0"; if (night == "0") { document.body.classList.remove("night") } else { if (night == "1") { document.body.classList.add("night") } } } })(); </script>加好后在您的页面body处加入php判断，这样当检测到cookie相关字段时直接输出body的class为night，已防止页面闪烁。在头部文件：header.php文件中加入以下代码 <body class="<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>">如果原中已有了class的话就将<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>放在class=“”里面。最后再将网站中所有需要变暗的地方调整其css，已达到变暗效果，具体css调整示例可看下方。 body.night 需要调整的区块{ background-color: #000000; color: #aaa; } body.night img { filter: brightness(30%); }由于每个网站或者博客CSS的命名不一样，所以请根据自己的网站/博客CSS进行修改，大家可以通过右键“审查元素”来获取CLASS的名字。每个CLASS的区块都要用“body.night 需要调整的区块”书写，如“body.night h2”、“body.night .post-tags”等。这样当晚上9点到白天6点之间，网站打开时就自动会变成暗黑模式。当然，你也可以加一个按钮，来手动控制打开关闭暗黑模式。如下代码。 <a href="javascript:switchNightMode()" target="_self">Dark</a>
