疫情之下的苦中作乐

疫情之下的苦中作乐

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

网站最近动态最近小朋友放假,每天都是各种玩,没啥好写的。就抽时间折腾网站了,改了错错了改,反反复复,尽力改到自己满意为止吧! 时间:2018-08-27 评论:10

增加书单/影单页面

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

2. 引入资源

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

3. 初始化参数

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

《疫情之下的苦中作乐》

微语增加分页

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

网站增加微言微语页面好久没有折腾网站了,偶尔也只是发一些类似流水账似的文章。 并不是没事可写,有时因为是一两句的事感觉没必要写。 于是周末想着是不是该整一个类似朋友圈微博类的页面,用来写一下短心情类的。 时间:2018-08-04 评论:9
<?php $limit = get_option('posts_per_page');$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
query_posts();if (have_posts()) : while (have_posts()) : the_post(); ?>

改成

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

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

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

主题函数文件functions.php中插入以下代码(代码来自诗梦博客):

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

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

评论留言人Gravater头像

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

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

zm-first-letter-avatar.php文件下载地址:
云盘下载 【提取码: 8nxv】

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

评论留言验证码

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

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

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

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

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

文章索引

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

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

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

/*文章索引*/
.kratos-post-content h4 {
    margin: 15px -25px;
    padding: 0 20px;
    border-left: 5px solid #00a2ff;
    background-color: #eee;
    font-size: 18px;
    line-height: 40px;
}
#fn_article_nav{
	float:right;
	width:28%;
	border-radius: 3px;
	box-shadow:0 0 3px #aaa;
	line-height:23px;
	margin:10px 0 10px 15px;
}

@media (max-width:760px) {
	#fn_article_nav{display:none;}
}
#article_nav_title{
	font-size:14px;
	text-align:center;
	line-height:25px;
	color:#cc0000;
	border-bottom:1px #aaa dotted
}
#fn_article_nav ul{
	padding:0!important;
	margin:0px!important
}
#fn_article_nav li,#fn_article_nav li a{
	font-size:14px;
	color:#000000;
	list-style:none;
	padding:0 3px;
	margin:0;
	}

外链添加go跳转

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

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

// 评论者链接添加go跳转
function loper_redirect_comment_link($text = ''){
$text = str_replace('href="', 'href="'.get_option('home').'/go/?url=', $text);
$text = str_replace("href='", "href='".get_option('home')."/go/?url=", $text);
return $text;
}
add_filter('get_comment_author_link', 'loper_redirect_comment_link', 5);
add_filter('comment_text', 'loper_redirect_comment_link', 99);

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

云盘下载         【提取码: ifc8

使用OL标签时的数字格式

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

1. CSS样式

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

2. html内容

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

纯CSS实现顶部灯笼

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

.deng-box {
    position: fixed;
    top: -30px;
    left: -10px;
    z-index: 9999;
    pointer-events: none;
}
 
.deng-box1 {
    position: fixed;
    top: -30px;
    right: 5px;
    z-index: 9999;
    pointer-events: none;
}
.deng-box1 .deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 5s infinite ease-in-out;
    box-shadow: -5px 5px 30px 4px rgba(252, 144, 61, 1);
}

.deng {
    position: relative;
    width: 120px;
    height: 90px;
    margin: 50px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.8);
    border-radius: 50% 50%;
    -webkit-transform-origin: 50% -100px;
    -webkit-animation: swing 3s infinite ease-in-out;
    box-shadow: -5px 5px 50px 4px rgba(250, 108, 0, 1);
}
.deng-a {
    width: 100px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.1);
    margin: 12px 8px 8px 10px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}
.deng-b {
    width: 45px;
    height: 90px;
    background: #d8000f;
    background: rgba(216, 0, 15, 0.1);
    margin: -2px 8px 8px 26px;
    border-radius: 50% 50%;
    border: 2px solid #dc8f03;
}

.xian {
    position: absolute;
    top: -20px;
    left: 60px;
    width: 2px;
    height: 20px;
    background: #dc8f03;
}
.shui-a {
    position: relative;
    width: 5px;
    height: 20px;
    margin: -5px 0 0 59px;
    -webkit-animation: swing 4s infinite ease-in-out;
    -webkit-transform-origin: 50% -45px;
    background: #ffa500;
    border-radius: 0 0 5px 5px;
}
.shui-b {
    position: absolute;
    top: 14px;
    left: -2px;
    width: 10px;
    height: 10px;
    background: #dc8f03;
    border-radius: 50%;
}
.shui-c {
    position: absolute;
    top: 18px;
    left: -2px;
    width: 10px;
    height: 35px;
    background: #ffa500;
    border-radius: 0 0 0 5px;
}
.deng:before {
    position: absolute;
    top: -7px;
    left: 29px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    z-index: 999;
    border-radius: 5px 5px 0 0;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng:after {
    position: absolute;
    bottom: -7px;
    left: 10px;
    height: 12px;
    width: 60px;
    content: " ";
    display: block;
    margin-left: 20px;
    border-radius: 0 0 5px 5px;
    border: solid 1px #dc8f03;
    background: #ffa500;
    background: linear-gradient(to right, #dc8f03, #ffa500, #dc8f03, #ffa500, #dc8f03);
}
.deng-t {
    font-family: 华文行楷,Arial,Lucida Grande,Tahoma,sans-serif;
    font-size: 3.2rem;
    color: #dc8f03;
    font-weight: bold;
    line-height: 85px;
    text-align: center;
}
.night .deng-t, 
.night .deng-box, 
.night .deng-box1 {
    background: transparent !important;
}
@-moz-keyframes swing {
    0% {
        -moz-transform: rotate(-10deg)
    }
    50% {
        -moz-transform: rotate(10deg)
    }
    100% {
        -moz-transform: rotate(-10deg)
    }
}

@-webkit-keyframes swing {
    0% {
        -webkit-transform: rotate(-10deg)
    }
    50% {
        -webkit-transform: rotate(10deg)
    }
    100% {
        -webkit-transform: rotate(-10deg)
    }
}

2. html代码


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

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

评论列表 (10条评论)
  1. 阿和说道: 7来自天朝的朋友 QQ浏览器 | 10.5.3866.400 Windows 7

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

    1. Lvtu说道: 9来自天朝的朋友 Safari | 605.1.15 Mac OS X 10_15_3

      @阿和: 现在这个时候不是最有时间做这些事的吗? :razz:

  2. 逆时针说道: 3来自天朝的朋友 Chrome | 80.0.3987.116 Windows 7

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

    1. Lvtu说道: 9来自天朝的朋友 Chrome | 80.0.3987.122 Mac OS X 10_15_3

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

  3. Mr.Chou说道: 5来自天朝的朋友 Chrome | 78.0.3904.96 MI 8 SE) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.96 Mobile Safari/537.36

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

    1. Lvtu说道: 9来自天朝的朋友 Safari | 605.1.15 Mac OS X 10_15_3

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

      1. Mr.Chou说道: 5来自天朝的朋友 Chrome | 78.0.3904.96 MI 8 SE) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.96 Mobile Safari/537.36

        @Lvtu: 嘿嘿,从我这导航到那有一百一十公里左右,还是有点距离,还以为你是樟木头周边呢…

        1. Lvtu说道: 9来自天朝的朋友 Safari | 605.1.15 Mac OS X 10_15_3

          @Mr.Chou: 过樟木头玩过,我们在东莞南城区 :biggrin:

  4. Mr.Chou说道: 5来自天朝的朋友 Chrome | 79.0.3945.130 Windows 10

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

    1. Lvtu说道: 9来自天朝的朋友 Safari | 605.1.15 Mac OS X 10_15_3

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注