疫情之下的苦中作乐

00:00

疫情的降临，让我们都来不及防备，而这个时候偏偏正逢新春佳节，本来我们应该走亲访友，却只能憋屈呆在家中，刚开始还好，可以享受一下宅在家里的快乐，渐渐的干什么都没有了趣味。
不知不觉过来这边已经一个月了，其中居家隔离了十七天，后来虽然解除了，但为了自己的安全以及不给社会添乱，基本上也很少出去。小王子学校已安排上了一周半的网课了，如前文所述，远离课本，以培养德智体美劳为主，慢慢的已经开始适应了学习的节奏。因为疫情的原因，工作也受到了影响，相关工厂那边有的开工了有的没有开工，所以事情也没多少。
无聊中没事就折腾了下网站，禁用了一些东西让网站不那么卡，效果如何貌似没啥感觉。接下之前的笔记做下记录吧。

网站最近动态

最近小朋友放假，每天都是各种玩，没啥好写的。就抽时间折腾网站了，改了错错了改，反反复复，尽力改到自己满意为止吧！

增加书单/影单页面

主要是为了记录小王子看书记录和观看影视记录，感觉功能还是很有必要的。所有书籍和影视信息来自豆瓣。
当然网上有各种插件，无奈一直以来不怎么喜欢用插件，喜欢用代码解决。
刚好在牧风大神那里看到了代码实现的方法，在此表示感谢。
1. 申请API
访问网站https://bm.weajs.com申请API Secret, 另外还需要填写你的豆瓣id及昵称，在该网站可同步豆瓣平台标注的电影和书籍信息，也可以在上面标注电影。

2. 引入资源

html

<meta name="referrer" content="never"><br />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/iMuFeng/bmdb@1.6.0/dist/Bmdb.min.css"><br />
<script src="https://cdn.jsdelivr.net/npm/jquery@latest/dist/jquery.min.js"></script><br />
<script src="https://cdn.jsdelivr.net/gh/iMuFeng/bmdb@1.6.0/dist/Bmdb.min.js" /></script>

3. 初始化参数

<script><br />
new Bmdb({<br />
  type: 'movies',<br />
  selector: '.container',<br />
  secret: '7bf4205a0a62d00409f3cd70b0736e1a11a9a6a60f7231567f056819787b8096',<br />
  noMoreText: '没有更多数据了',<br />
  limit: 30<br />
})<br />
</script>

4. 使用
电影列表：https://bm.weajs.com/api/movies?page=1&secret=你的secret号&limit=30
电影详细信息：https://bm.weajs.com/api/movies/:movieDoubanId?secret=你的secret号
书籍方法相同。

API Secret申请地址：https://bm.weajs.com
牧风的项目地址：https://github.com/iMuFeng/bmdb
效果如本站：https://www.wanghao.me/wanhuatong

微语增加分页

之前有写过加入方法，但没有分页功能

网站增加微言微语页面

好久没有折腾网站了，偶尔也只是发一些类似流水账似的文章。
并不是没事可写，有时因为是一两句的事感觉没必要写。
于是周末想着是不是该整一个类似朋友圈微博类的页面，用来写一下短心情类的。

php

<?php $limit = get_option('posts_per_page');$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;<br />
query_posts();if (have_posts()) : while (have_posts()) : the_post(); ?>

改成

php

<?php $limit = get_option('posts_per_page');<br />
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;<br />
query_posts('post_type=shuoshuo&post_status=publish&showposts=' . $limit=10 . '&paged=' . $paged);<br />
if (have_posts()) : while (have_posts()) : the_post(); ?>

最后把首页分页函数复制过来放到适当位置就可以了。

文章页面增加历史上的今天

主题函数文件functions.php中插入以下代码（代码来自诗梦博客）：

PHP

//历史上的今天<br />
function wp_today(){<br />
    global $wpdb;<br />
    $post_year = get_the_time('Y');<br />
    $post_month = get_the_time('m');<br />
    $post_day = get_the_time('j');<br />
    $sql = "select ID, year(post_date_gmt) as h_year, post_title, comment_count FROM<br />
            $wpdb->posts WHERE post_password = '' AND post_type = 'post' AND post_status = 'publish'<br />
            AND year(post_date_gmt)!='$post_year' AND month(post_date_gmt)='$post_month' AND day(post_date_gmt)='$post_day'<br />
            order by post_date_gmt DESC limit 5";<br />
    $histtory_post = $wpdb->get_results($sql);<br />
    if( $histtory_post ){<br />
        foreach( $histtory_post as $post ){<br />
            $h_year = $post->h_year;<br />
            $h_post_title = $post->post_title;<br />
            $h_permalink = get_permalink( $post->ID );<br />
            $h_comments = $post->comment_count;<br />
            $h_post .= "<li><strong>$h_year:</strong>&nbsp;&nbsp;<a href='".$h_permalink."' title='".$h_post_title."' target='_blank'>$h_post_title($h_comments)</a></li>";<br />
        }<br />
    }<br />
    if ( $h_post ){<br />
        $result = "<h2>历史上的今天:</h2><ul>".$h_post."</ul>";<br />
    }<br />
    return $result;<br />
}<br />
function wp_today_auto($content){<br />
    if( is_single() ){<br />
        $content = $content.wp_today();<br />
    }<br />
    return $content;<br />
}<br />
add_filter('the_content', 'wp_today_auto',9999);

样式根据自己喜好自行编辑。

评论留言人Gravater头像

留言者未申请Gravatar头像，显示的是WordPress自带的默认头像或丑陋的随机图片，如安装一些插件的话，当留言者无Gravatar头像，则以留言者名称第一个字母为头像。
同样不喜欢插件的我在知更鸟大神那里发现了代码的解决方法：

PHP

require get_template_directory() . '/avatar/zm-first-letter-avatar.php';

zm-first-letter-avatar.php文件下载地址：
[ypbtn]https://pan.baidu.com/s/1exL_8lThf2fva1wrzGizLA[/ypbtn] 【提取码: 8nxv】

不好的是使用这个后国内gravatar头像缓存加速就失效了。

评论留言验证码

虽然安装了防垃圾留言插件，但还是有漏网之鱼，而且有不健康的信息，考虑到小王子有时会打开网站，所以考虑加严吧。
网上找了好几种代码方式，无奈都失败了。最后请教狗哥终于解决了。
首先为表单增加验证字段，在主题文件functions.php中添加如下代码（也可以放在评论页面下）：

PHP

function verification_fields($fields) {<br />
	$num_o = rand(0, 99);<br />
	$num_t = rand(0, 99);<br />
	$fields['verification'] = '<input name="num_o" value="' . $num_o . '" type="hidden" />' .<br />
	'<input name="num_t" value="' . $num_t . '" type="hidden" />' .<br />
	'<p class="verification-code"><label for="verification-code">验证：</label>' .<br />
	$num_o . ' + ' . $num_t . ' = ' . '<input id="verification-code" name="pcodes" type="text" value="" size="4" /></p>';<br />
	return $fields;<br />
}<br />
add_filter('comment_form_default_fields', 'verification_fields');

最后给评论表单添加了一个算术运算的验证，然后添加提交评论时验证计算结果的代码，仍然是放在主题文件functions.php中：

PHP

function verification_code() {<br />
	if ( ! $user->ID ) {<br />
		$num_o = trim($_POST['num_o']);<br />
		$num_t = trim($_POST['num_t']);<br />
		$pcodes = trim($_POST['pcodes']);<br />
		if( $pcodes != $num_o + $num_t ) {<br />
			wp_die( __('错误提示：请输入正确的验证码。') );<br />
		}<br />
	}<br />
}<br />
add_filter('pre_comment_on_post', 'verification_code');

样式根据自己主题评论框自行设置吧。

文章索引

比较长的文章查阅起来往下拉比较费时间，于是增加文章索引（目录）就很有必要了。把下述代码放入主题functions.php文件中即可。

PHP

//文章索引<br />
function article_nav($content)<br />
{<br />
    $matches = array();<br />
    $ul_li = '';<br />
    $r = "/<h4>(.*?)<\/h4>/im";<br />
    if (preg_match_all($r, $content, $matches)) {<br />
        foreach ($matches[1] as $num => $title) {<br />
            $content = str_replace($matches[0][$num], '<h4 id="title' . $num . '">' . $title . '</h4>', $content);<br />
            $ul_li .= '<li><a href="#title' . $num . '" title="' . $title . '">' . $title . "</a></li>";<br />
        }<br />
        if (is_singular()) {<br />
            $content = '<div id="fn_article_nav"><div id="article_nav_title">文章目录</div><ul>'<br />
                . $ul_li . '<li style="text-align:center;border-top:1px #aaa dotted"><a href="#respond">发表评论</a></li></ul></div>' . $content;<br />
        }<br />
    }<br />
    return $content;<br />
}<br />
add_filter("the_content", "article_nav");

然后根据自己喜好增加样式：

CSS

/*文章索引*/<br />
.kratos-post-content h4 {<br />
    margin: 15px -25px;<br />
    padding: 0 20px;<br />
    border-left: 5px solid #00a2ff;<br />
    background-color: #eee;<br />
    font-size: 18px;<br />
    line-height: 40px;<br />
}<br />
#fn_article_nav{<br />
	float:right;<br />
	width:28%;<br />
	border-radius: 3px;<br />
	box-shadow:0 0 3px #aaa;<br />
	line-height:23px;<br />
	margin:10px 0 10px 15px;<br />
}</p>
<p>@media (max-width:760px) {<br />
	#fn_article_nav{display:none;}<br />
}<br />
#article_nav_title{<br />
	font-size:14px;<br />
	text-align:center;<br />
	line-height:25px;<br />
	color:#cc0000;<br />
	border-bottom:1px #aaa dotted<br />
}<br />
#fn_article_nav ul{<br />
	padding:0!important;<br />
	margin:0px!important<br />
}<br />
#fn_article_nav li,#fn_article_nav li a{<br />
	font-size:14px;<br />
	color:#000000;<br />
	list-style:none;<br />
	padding:0 3px;<br />
	margin:0;<br />
	}<br />

外链添加go跳转

看到好多网友有用这个特效，感觉挺酷的。于是试着弄了一个，发现平时很快打开的网站变慢了，影响用户体验，最终还是删除了，如果有兴趣可以试试。
把下面代码扔进主题文件functions.php文件中：

PHP

// 文章内外链添加go跳转<br />
function loper_content_nofollow($content){<br />
preg_match_all('/<a(.*?)href="(.*?)"(.*?)>/',$content,$matches);<br />
if($matches){<br />
foreach($matches[2] as $val){<br />
if(strpos($val,'://')!==false && strpos($val,home_url())===false && !preg_match('/\.(jpg|jepg|png|ico|bmp|gif|tiff)/i',$val)){<br />
$content=str_replace("href=\"$val\"", "href=\"".home_url()."/go/?url=$val\" ",$content);<br />
}<br />
}<br />
}<br />
return $content;<br />
}<br />
add_filter('the_content','loper_content_nofollow',999);</p>
<p>// 评论者链接添加go跳转<br />
function loper_redirect_comment_link($text = ''){<br />
$text = str_replace('href="', 'href="'.get_option('home').'/go/?url=', $text);<br />
$text = str_replace("href='", "href='".get_option('home')."/go/?url=", $text);<br />
return $text;<br />
}<br />
add_filter('get_comment_author_link', 'loper_redirect_comment_link', 5);<br />
add_filter('comment_text', 'loper_redirect_comment_link', 99);

然后下载下面文件放入网站下。

[ypbtn]https://pan.baidu.com/s/1UficbpYSnMVuEcj6Ewhx8Q[/ypbtn] 【提取码: ifc8】

使用OL标签时的数字格式

在修改归档页面样式时发现默认的ol标签数字样式太简单了，与后面内容区别不明显，于是修改了一下。

1. CSS样式

CSS

<style><br />
body {<br />
    background-color: #222;<br />
    color: #fff;<br />
    font-family: 'Average', serif;<br />
}<br />
h1 {<br />
    font-family: 'Fjalla One', sans-serif;<br />
    font-size: 3em;<br />
}<br />
ol {<br />
    counter-reset: my-counter;<br />
    list-style: none;<br />
    padding: 0;<br />
}<br />
li {<br />
    margin-bottom: 10px;<br />
    padding-left: 30px;<br />
    position: relative;<br />
}<br />
li:before {<br />
    content: counter(my-counter);<br />
    counter-increment: my-counter;<br />
    background-color: #bada55;<br />
    color: #222;<br />
    display: block;<br />
    float: left;<br />
    line-height: 22px;<br />
    margin-left: -30px;<br />
    text-align: center;<br />
    height: 22px;<br />
    width: 22px;<br />
    border-radius: 50%;<br />
}<br />
</style>

2. html内容

HTML

<h1>Styling numbers with CSS counters</h1><br />
<ol><br />
    <li>小王子 wanghao.me 1</li><br />
    <li>小王子 wanghao.me 2</li><br />
    <li>小王子 wanghao.me 3</li><br />
    <li>小王子 wanghao.me 4</li><br />
    <li>小王子 wanghao.me 5</li><br />
</ol>

纯CSS实现顶部灯笼

过年为了营造一种气氛，于是有大神通过CSS3完美实现顶部灯笼样式。
1. CSS样式：放入样式表中或在header/footer中放入下面的样式：

CSS

.deng-box {<br />
    position: fixed;<br />
    top: -30px;<br />
    left: -10px;<br />
    z-index: 9999;<br />
    pointer-events: none;<br />
}</p>
<p>.deng-box1 {<br />
    position: fixed;<br />
    top: -30px;<br />
    right: 5px;<br />
    z-index: 9999;<br />
    pointer-events: none;<br />
}<br />
.deng-box1 .deng {<br />
    position: relative;<br />
    width: 120px;<br />
    height: 90px;<br />
    margin: 50px;<br />
    background: #d8000f;<br />
    background: rgba(216, 0, 15, 0.8);<br />
    border-radius: 50% 50%;<br />
    -webkit-transform-origin: 50% -100px;<br />
    -webkit-animation: swing 5s infinite ease-in-out;<br />
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);<br />
}</p>
<p>.deng {<br />
    position: relative;<br />
    width: 120px;<br />
    height: 90px;<br />
    margin: 50px;<br />
    background: #d8000f;<br />
    background: rgba(216, 0, 15, 0.8);<br />
    border-radius: 50% 50%;<br />
    -webkit-transform-origin: 50% -100px;<br />
    -webkit-animation: swing 3s infinite ease-in-out;<br />
    box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);<br />
}<br />
.deng-a {<br />
    width: 100px;<br />
    height: 90px;<br />
    background: #d8000f;<br />
    background: rgba(216, 0, 15, 0.1);<br />
    margin: 12px 8px 8px 10px;<br />
    border-radius: 50% 50%;<br />
    border: 2px solid #dc8f03;<br />
}<br />
.deng-b {<br />
    width: 45px;<br />
    height: 90px;<br />
    background: #d8000f;<br />
    background: rgba(216, 0, 15, 0.1);<br />
    margin: -2px 8px 8px 26px;<br />
    border-radius: 50% 50%;<br />
    border: 2px solid #dc8f03;<br />
}</p>
<p>.xian {<br />
    position: absolute;<br />
    top: -20px;<br />
    left: 60px;<br />
    width: 2px;<br />
    height: 20px;<br />
    background: #dc8f03;<br />
}<br />
.shui-a {<br />
    position: relative;<br />
    width: 5px;<br />
    height: 20px;<br />
    margin: -5px 0 0 59px;<br />
    -webkit-animation: swing 4s infinite ease-in-out;<br />
    -webkit-transform-origin: 50% -45px;<br />
    background: #ffa500;<br />
    border-radius: 0 0 5px 5px;<br />
}<br />
.shui-b {<br />
    position: absolute;<br />
    top: 14px;<br />
    left: -2px;<br />
    width: 10px;<br />
    height: 10px;<br />
    background: #dc8f03;<br />
    border-radius: 50%;<br />
}<br />
.shui-c {<br />
    position: absolute;<br />
    top: 18px;<br />
    left: -2px;<br />
    width: 10px;<br />
    height: 35px;<br />
    background: #ffa500;<br />
    border-radius: 0 0 0 5px;<br />
}<br />
.deng:before {<br />
    position: absolute;<br />
    top: -7px;<br />
    left: 29px;<br />
    height: 12px;<br />
    width: 60px;<br />
    content: " ";<br />
    display: block;<br />
    z-index: 999;<br />
    border-radius: 5px 5px 0 0;<br />
    border: solid 1px #dc8f03;<br />
    background: #ffa500;<br />
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);<br />
}<br />
.deng:after {<br />
    position: absolute;<br />
    bottom: -7px;<br />
    left: 10px;<br />
    height: 12px;<br />
    width: 60px;<br />
    content: " ";<br />
    display: block;<br />
    margin-left: 20px;<br />
    border-radius: 0 0 5px 5px;<br />
    border: solid 1px #dc8f03;<br />
    background: #ffa500;<br />
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);<br />
}<br />
.deng-t {<br />
    font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;<br />
    font-size: 3.2rem;<br />
    color: #dc8f03;<br />
    font-weight: bold;<br />
    line-height: 85px;<br />
    text-align: center;<br />
}<br />
.night .deng-t,<br />
.night .deng-box,<br />
.night .deng-box1 {<br />
    background: transparent !important;<br />
}<br />
@-moz-keyframes swing {<br />
    0% {<br />
        -moz-transform: rotate(-10deg)<br />
    }<br />
    50% {<br />
        -moz-transform: rotate(10deg)<br />
    }<br />
    100% {<br />
        -moz-transform: rotate(-10deg)<br />
    }<br />
}</p>
<p>@-webkit-keyframes swing {<br />
    0% {<br />
        -webkit-transform: rotate(-10deg)<br />
    }<br />
    50% {<br />
        -webkit-transform: rotate(10deg)<br />
    }<br />
    100% {<br />
        -webkit-transform: rotate(-10deg)<br />
    }<br />
}<br />

2. html代码

HTML

<br />
<div class="deng-box"><br />
    <div class="deng"><br />
        <div class="xian"></div><br />
        <div class="deng-a"><br />
            <div class="deng-b"><div class="deng-t">宵</div></div><br />
        </div><br />
        <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div><br />
    </div><br />
</div><br />
<div class="deng-box1"><br />
    <div class="deng"><br />
        <div class="xian"></div><br />
        <div class="deng-a"><br />
            <div class="deng-b"><div class="deng-t">元</div></div><br />
        </div><br />
        <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div><br />
    </div><br />
</div><br />

除了上述一些折腾，还对一些小细节做了些修改，同时把代码高亮插件换了，之前的插件不知啥原因，显示全乱了。
小王子已上了快二周的网课了，因为是远离课本以德智体美劳为主的，感觉还可以吧。
从下周开始就开始以课本为主了，昨天学校已统计了地址信息并将统一把课本快递到家。

本文最后更新于2021年3月18日，已超过 2 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！

那年 • 今日

2024年春节归途：穿越冰雪，温情满载！

阿和博士生友邻

4楼

哈哈，还有精力搞网站，不错不错。
虽然每天宅在家里，但是啥都不想干，就躺床上看手机 :lol:

2020年3月18日 11:25 ·浙江温州 · Chrome 70.0.3538.25 · 未知系统

Lvtu^作者

现在这个时候不是最有时间做这些事的吗？ :razz:

2020年3月18日 15:21 ·广东广州 · Safari 13.0.5 · macOS 13

回复

逆时针小学生

三甲

挺好的，留下实用的功能，多余的插件可以删了~

2020年2月28日 23:51 ·广东广州 · Chrome 80.0.3987.116 · 未知系统

Lvtu^作者

嗯，一直不喜欢用插件，折腾性太低了。直接代码容易折腾点 :biggrin:

2020年2月28日 23:54 ·广东广州 · Chrome 80.0.3987.122 · macOS 10.15.3

回复

Mr.Chou 大学生

次席

貌似是第一次收到你的评论提醒，哈…
轨道交通电视大厦的楼盘，
幼儿园还提前交了伙食费，到时候看怎么办…
香港开学时间暂时题定在了四月份…

2020年2月27日 14:37 ·广东广州 · Chrome 78.0.3904.96 · Android 10

Lvtu^作者

哈哈，前几天才把原因搞明白，然后把端口改了。那个地方离我们更近 :biggrin:

2020年2月27日 15:25 ·广东广州 · Safari 13.0.5 · macOS 13

回复
1. Mr.Chou 大学生
  
  嘿嘿，从我这导航到那有一百一十公里左右，还是有点距离，还以为你是樟木头周边呢…
  
  2020年2月27日 16:41 ·广东广州 · Chrome 78.0.3904.96 · Android 10
  
  回复
  1. Lvtu^作者
    
    过樟木头玩过，我们在东莞南城区 :biggrin:
    
    2020年2月27日 16:45 ·广东广州 · Safari 13.0.5 · macOS 13
    
    回复

首评

嘿嘿，都花在细节上的折腾，看了你的说说，我一直以为你博客没有安装评论提醒功能，原来是被阿里禁了25端口，试试587看；
昨天下午去了一趟东莞市人民政府附近送了一点货~
女儿的幼儿园也有任务，在家陪读什么的~
但在家里...

2020年2月27日 14:15 ·广东广州 · Chrome 79.0.3945.130 · Windows 10

Lvtu^作者

嗯，已经改用465搞定了 :smile: ，我们离政府那边没多远。看省的通知幼儿园开学还早吧，不过影响不是很大。

2020年2月27日 14:26 ·广东广州 · Safari 13.0.5 · macOS 13

回复

发表评论

您的邮箱地址不会被公开，必填项已用 * 标注。

2026-08-13

星城长沙亲子三日游

留言册

八仙！

荣耀平板10 Pro开箱评测：准高中生的学习礼物

疫情之下的苦中作乐

增加书单/影单页面

微语增加分页

文章页面增加历史上的今天

评论留言人Gravater头像

评论留言验证码

文章索引

外链添加go跳转

使用OL标签时的数字格式

纯CSS实现顶部灯笼

您可能想看

发表评论

欢迎登录

找回密码

您好，朋友!

欢迎回来!