分类:折腾

又一次折腾博客,这次换主题了


正如文章标题所说,我又换主题了。上一次换主题是6月份的时候,花钱买了Begin正版主题,刚开始是喜欢Begin大气的风格,功能多,样式好看,特别是方框式的评论框,知更鸟大神真厉害!但是我觉得我希望我博客偏向文字类,而不是“大杂烩”,我喜欢写,喜欢写文章,用Begin的话,就感觉大材小用了;而且Begin主题好多人在用,我也有点审美疲劳了。

之所以看上官方Twenty Twelve主题,是因为我觉得它比较适合文字类的博客,专注写作,写日记,淡淡的风格,我也喜欢;虽然单调但不落俗套。知道我换了主题的几个朋友都说,体验效果更好了(完全没有贬低Begin主题的意思)。这个主题呢,纯代码,图片少,功能少,但是写博客足够了;正因为功能不多,不繁杂,网站速度也有了很大的提高,不过我发现官方主题文件里,注释挺多的。

很早之前就看到许多博主用Twenty Twelve主题,比如说:
土木坛子 夜阑静 尺宅即江湖 灵尘居 佐仔志 ……
以上这些博主用的都是这个主题。简单,不落俗套,文章又写得好,学习的榜样。

明月登楼博主曾说的,博客最主要的还是内容,其余都是修饰,内容才是王道。我也会尽我所能写出好的文章来,让大家不虚此行。

Begin主题修改文章摘要形式

继续魔改我们的Begin主题,这次是修改WordPress自带的摘要样式,先贴出css代码:

/* 摘要 */
/* 修改 */
.abstract {
	color: #999;
	font-size: 14px;
}
/* 修改 */
.abstract fieldset {
	margin: 0 0 10px;
	padding: 5px 15px;
	border: 5px solid #ddd;
	border-radius: 10px;
}
/* 修改 */
.abstract legend {
	padding: 0 5px;
	color: #999;
	font-weight: bold;
	font-size: 18px;
}

将上面的代码粘贴至style.css文件,或后台-外观-主题-自定义,添加css代码。

看看效果:

这是修改之前的
这是修改之后的

是不是特别有立体感,比原先的好看多了。

新版Begin主题侧边栏和两栏标题美化

侧边栏标题 sidebar h3  位置css修改成如下所示:

  1. #sidebar h3, #sidebar-l h3 {
  2. background: #fff;
  3. height: 37.5px;
  4. line-height: 37.5px;
  5. border-bottom: 1px solid #e2e1e1;
  6. margin: 0 20px 0 20px;
  7. text-align: center;
  8. font-size: 1.8rem;
  9. letter-spacing: 4px;
  10. color: #606777;
  11. }

按照以上css修改后,标题栏位置还多了一个 .title-i  ,后台找到 .title-i  将其隐藏:

  1. .title-i {
  2.     floatleft;
  3.     width16px;
  4.     displaynone;
  5. }

将 .title-i 隐藏后,如下效果图:

然后,如果使用杂志布局的会发现两栏位置前面的标题ICO也会不见了。

接着,将 .cat-box .cat-title a  位置css修改成以下即可。

  1. .cat-box .cat-title a {
  2. float: left;
  3. width: 98%;
  4. margin-left: 20px;
  5. color: #606777;
  6. font-size: 1.8rem;
  7. }

要注意font-size: 1.8rem;是原先的教程中没有的,新版本的Begin主题需要再加入这条代码,不然标题很小。

以上就是美化侧边栏和两栏标题的教程,具体效果请移步至本博客首页查看。

为 WordPress 评论功能增加字数长度限制

这个功能其实实现起来很简单,只要利用好 WordPress 为我们提供的 preprocess_comment 钩子即可,使用这个钩子可以实现对评论内容的各种处理,不管是过滤评论中的恶意链接还是处理特定的垃圾评论,通过 preprocess_comment 钩子我们都可以实现。

将下面的代码添加到当前 WordPress 主题的 functions.php 文件:

/**
* 为WordPress评论功能增加字数长度限制 – 龙笑天下
* https://www.ilxtx.com/limit-wordpress-comment-length.html
*/
function lxtx_set_comments_length($commentdata) {
    $minCommentlength = 5; //最少字數限制,建议设置为5-10个字
    $maxCommentlength = 220; //最多字數限制,建议设置为150-200个字
    $pointCommentlength = mb_strlen($commentdata[‘comment_content’],‘UTF8’); //mb_strlen 一个中文字符当做一个长度
    if ( ($pointCommentlength < $minCommentlength) && !is_user_logged_in() ){
    err(‘抱歉,您的评论字数过少,最少输入’ . $minCommentlength .‘个字(目前字数:’. $pointCommentlength .‘)【登录后无此限制】’);
    exit;
    }
    if ( ($pointCommentlength > $maxCommentlength) && !is_user_logged_in() ){
    err(‘抱歉,您的评论字数过多,最多输入’ . $maxCommentlength .‘个字(目前字数:’. $pointCommentlength .‘)【登录后无此限制】’);
    exit;
    }
    return $commentdata;
}
add_filter(‘preprocess_comment’, ‘lxtx_set_comments_length’);

即可实现对评论字数进行控制。(代码来自龙笑天博客

 

 

纯CSS为博客网站添加时光轴记录

在我们所使用的WordPress主题的style.css文件后面添加以下代码:

/* 站点动态时间轴 */
#teamnewslist ol{list-style:none;margin-left: 36px;padding-left: 14px;border-left: 2px solid #eee;font-size: 18px;color: #666;}
#teamnewslist b{font-size: 12px;font-weight: normal;color: #999;display: block;position: relative;margin-bottom:5px;}
#teamnewslist b::after{position: absolute;top: 6px;left: -22px;content: '';width: 14px;height: 14px;border-radius: 50%;background-color: #fff;border: 2px solid #ccc;box-shadow: 2px 2px 0 rgba(255,255,255,1), -2px -2px 0 rgba(255,255,255,1)}
#teamnewslist li{list-style:none;margin: 0 0 20px 0;line-height: 100%;}
#teamnewslist li:hover{color: #555;}
#teamnewslist li:hover b::after{border-color: #C01E22;}
#teamnewslist li:hover b{color: #C01E22;}

在编辑页面或文章时,切换到文本模式, 然后按以下格式编辑内容:

<div id="teamnewslist">
<ol>
 	<li><b>2018年07月21日</b> 域名提交公安备案审核,至今仍无消息,处于待审核状态中</li>
 	<li><b>2018年07月19日</b> 域名通过管局备案审核,成功搬家至腾讯云</li>
 	<li><b>2018年07月10日</b> 域名提交ICP备案审核</li>
 	<li><b>2018年06月17日</b> 购买正版知更鸟Begin主题并启用</li>
 	<li><b>2018年05月18日</b> 更换域名www.huhexian.com,将longest.men跳转至新域名</li>
 	<li><b>2018年04月29日</b> 使用梦月酱2013年的主题:PureLove</li>
 	<li><b>2018年04月28日</b> 花了98元买了一年的香港主机,并赠送com域名,注册huhexian.com</li>
 	<li><b>2018年04月11日</b> 博客更名为:青山与绿水,使用Tokin的主题:Adams</li>
 	<li><b>2018年03月18日</b> 暂时选用老薛的太阳1号美国主机,博客诞生。暂定名为:最长的男人</li>
 	<li><b>2018年03月17日</b> 购买域名<a href="http://longest.men" target="_blank" rel="noopener">longest.men</a>现在已停用</li>
</ol>
</div>

以后增加时光轴记录的时候,就切换到文本模式按以下格式一条条记录增加即可。

1、具体效果,请移步《关于青山》。

2、由于这个时光轴仅仅是通过CSS来实现,所以在编辑时光轴记录的时候一定要严格按照相应的格式编写才行。

3、同样是因为时光轴是通过CSS来实现,所以任何博客网站,包括WordPress、zblog等程序建立的博客网站都可以按这个方法成功添加时光轴记录。(教程来自沈唁志博客

让评论框更有趣:评论框加载一言

什么是一言

一言网(Hitokoto.cn)创立于2016年,隶属于萌创Team,目前网站主要提供一句话服务。动漫也好、小说也好、网络也好,不论在哪里,我们总会看到有那么一两个句子能穿透你的心。我们把这些句子汇聚起来,形成一言网络,以传递更多的感动。如果可以,我们希望我们没有停止服务的那一天。简单来说,一言指的就是一句话,可以是动漫中的台词,也可以是网络上的各种小段子。或是感动,或是开心,有或是单纯的回忆。来到这里,留下你所喜欢的那一句句话,与大家分享,这就是一言存在的目的。*:本段文本源自hitokoto.us.

我在文章末尾已经调用了一言api,具体效果请前往文章末尾翻看。

突发奇想

我也就是突发奇想,想把一言调用至评论框,刷新一下又是一个句子。可惜能力有限,询问朋友也没个结果,最后是群里一位不相识的朋友发给了我教程。

具体教程

在网站header或者footer添加下面的代码

<script>
    $.get("https://v1.hitokoto.cn/",function(data){ 
      $("#comment").text(data.hitokoto);
    });
    $(function(){
      $("#comment").click(function() {
        $(this).select();
      })
    })
</script>

如果你的评论框id不是comment,请参考如下步骤获取 首先右键评论框-审查元素-查看id或者class,选其一即可,之后把获取的id或者class替换到上述代码中的#conment 注意,如果你要用id,请用修改成#你的id名,如果是class,请修改成.你的class名即可 该js需要引入jquery库,如果未能正常显示请注意是否成功引入jquery库或者是否成功匹配评论框id或者class值。(代码来自憶の年

但是,最终我博客还是没有用这个功能。

 

知更鸟主题右侧滚动条按钮美化

代码部署

把下面的代码复制,粘贴到:后台→外观→主题选项→定制风格→自定义样式

  1. /*右侧滚动条美化*/
  2. #scroll{width:32px;float:rightright;position:fixed;rightright:10px;bottombottom:50px;z-index:9999;}#scroll li a{font-size:16px;color:#fff;width:32px;height:32px;line-height:28px;text-align:center;vertical-align:middle;margin-top:4px;display:block;cursor:pointer;border:1px solid #ddd;border-radius:15px;box-shadow:0 1px 1px rgba(0,0,0,0.04);}#scroll li a:hover{background:#2f889a;color:#fff;border:1px solid #2f889a;transition:all .2s ease-in 0s;}.scroll-h{background-color:#ff5e5c !important;}.scroll-c{background-color:#24a5db !important;}.scroll-b{background-color:#ff9531 !important;}#gb2big5{background-color:#aec534 !important;}.qr{background-color:#4a4a4a !important;}.qqonline a{background:#39c!important;}@media screen and (min-width:900px){#scroll li a:hover{background:#2f889a;color:#fff;border:1px solid #2f889a;transition:all 0.2s ease-in 0s;}}.qr-img{position:fixed;background:#fff;bottombottom:50px;rightright:50px;max-width:300px;z-index:9999;display:none;border-radius:4px;padding:10px 10px 2px 10px;animation:fade-in;animation-duration:0.5s;-webkit-animation:fade-in 0.5s;border:1px solid #ddd;box-shadow:0 1px 1px rgba(0,0,0,0.05);}#output img{position:absolute;top:72px;rightright:72px;width:25px;height:25px;}.qr .fa-qrcode{font-size:20px !important;line-height:32px !important;}.qr-img .arrow{position:absolute;font-size:26px;bottombottom:2px;}.arrow-y{color:#fff;rightright:-8px;}.arrow-z{color:#c6c6c6;rightright:-9px;}#output td{border:none;}#output td{padding:0;}.page-template-template-blog #scroll li a.scroll-c,.page-template-template-code #scroll li a.scroll-c,.page-template-template-links #scroll li a.scroll-c,.page-template-template-archives #scroll li a.scroll-c,.page-template-template-cms #scroll li a.scroll-c,.page-template-template-hot #scroll li a.scroll-c,.page-template-template-tag #scroll li a.scroll-c,.page-template-template-tougao #scroll li a.scroll-c,.page-template-template-contact #scroll li a.scroll-c,.page-template-template-message #scroll li a.scroll-c,.page-template-template-baidu #scroll li a.scroll-c{display:none;}

注意:

主题更新后添加了搜索栏目图标,需添加一下css,搜索图标才能上色。

  1. #scroll li a {
  2.     background: #2f9a3c;
  3. }

效果图:

WordPress实现“历史上的今天”

将下面的代码放到博客主题的function.php里即可自动实现上图的效果了:

  1. //历史上的今天,代码来自柳城博客的WP-Today插件
  2. //针对现实的时间
  3. function wp_today(){
  4.     global $wpdb;
  5.     $post_year = get_the_time(‘Y’);
  6.     $post_month = get_the_time(‘m’);
  7.     $post_day = get_the_time(‘j’);
  8.     $sql = “select ID, year(post_date_gmt) as h_year, post_title, comment_count FROM 
  9.             $wpdb->posts WHERE post_password = ” AND post_type = ‘post’ AND post_status = ‘publish’
  10.             AND year(post_date_gmt)!=’$post_year’ AND month(post_date_gmt)=’$post_month’ AND day(post_date_gmt)=’$post_day’
  11.             order by post_date_gmt DESC limit 5″;
  12.     $histtory_post = $wpdb->get_results($sql);
  13.     if$histtory_post ){
  14.         foreach$histtory_post as $post ){
  15.             $h_year = $post->h_year;
  16.             $h_post_title = $post->post_title;
  17.             $h_permalink = get_permalink( $post->ID );
  18.             $h_comments = $post->comment_count;
  19.             $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>”;
  20.         }
  21.     }
  22.     if ( $h_post ){
  23.         $result = “<h2>历史上的今天:</h2><ul>”.$h_post.“</ul>”;
  24.     }
  25.     return $result;
  26. }
  27. function wp_today_auto($content){
  28.     if( is_single() ){
  29.         $content = $content.wp_today();
  30.     }
  31.     return $content;
  32. }
  33. add_filter(‘the_content’, ‘wp_today_auto’,9999);

上述代码的23行里的“历史上的今天”大家可以随意修改的,比如:历史文章推荐等等。并不见得一定要用“历史上的今天”。

本段代码出自柳城博客的WP-Today插件,再次特此感谢柳城博主!

可惜我建站不久,暂时插入代码也没有效果。 🙄

鼠标悬停位移效果+点击提示

演示请看本站效果

  1. //标题抖动
  2. jQuery(document).ready(function($) {
  3.     $(“.list-title a, .entry-title a, .new-title a, .message-widget a, .flexisel-h-title a, .li-icon a”).hover(function() {
  4.         $(this).stop().animate({
  5.             //.list-title a, 改成你标题的样式名称,可以应用多个链接,用英文逗号隔开
  6.             “marginLeft”“15px”
  7.         }, 300)
  8.     }, function() {
  9.         $(this).stop().animate({
  10.             “marginLeft”“0px”
  11.         }, 300)
  12.     });
  13.     $(“.list-title a, .entry-title a, .new-title a, .message-widget a, .flexisel-h-title a, .li-icon a”).click(function() {
  14.         myloadoriginal = this.text;
  15.         $(this).text(“客官请骚等,正在努力加载中 …”);
  16.         //点击后的链接会替换成如上文字,可自由修改。
  17.         var myload = this;
  18.         setTimeout(function() {
  19.             $(myload).text(myloadoriginal)
  20.         }, 2011)
  21.     })
  22. });

将以上代码添加到主题的script.js文件中