Back
Featured image of post 对C7V5主题的修改记录及本站使用的自定义代码等

对C7V5主题的修改记录及本站使用的自定义代码等

本篇文章主要记录了我对本博正在使用的主题-C7V5进行的一些修改,方便给有需要的人参考,也为了日后升级主题时做一个参考。其中在functions.php中添加的代码几乎都不是原创的。

让C7V5支持使用UPYUN API获取题图主题色

默认情况下C7V5只支持从七牛获取主题色,如果博客的图片不放在七牛的话就没法获取。上次被七牛坑了之后博客图片全部转移到了又拍云,而主题色获取也只要修改一点JS代码即可: 打开主题目录下js/script.js,大概在第269行(已格式化):

    if (T) d(T.split(","));
    else if (C7V5.qiniu_host && V.indexOf(C7V5.qiniu_host) > -1) e.getJSON(V.split("?")[0] + "?imageAve",
    function(e) {
            var t = c(e.RGB);
            d(t),
            z && localStorage.setItem("pcc_" + V, t.join(","))
    });

修改为:

    if (T) d(T.split(","));
    else if (C7V5.qiniu_host && V.indexOf(C7V5.qiniu_host) > -1) e.getJSON(V.split("?")[0] + "!/excolor/1/exformat/hex",
    function(e) {
            var t = c(e[0].color);
            d(t),
            z && localStorage.setItem("pcc_" + V, t.join(","))
    });

评论框添加插入图片按钮

主题commentform.php大概第117行:

    <?php if ( c7v5_get_option('smilies') && function_exists('c7v5_smilies') ) : ?> 
           <i class="icon-smilies" title="表情"></i>
    <div class="comment-smilies"><?php c7v5_smilies(); ?></div>

在其中增加一个插入图片的按钮:

    <?php if ( c7v5_get_option('smilies') && function_exists('c7v5_smilies') ) : ?> 
           <i class="icon-smilies" title="表情"></i>
           <i class="icon-pic" title="图片" onclick="addimg();"></i>
    <div class="comment-smilies"><?php c7v5_smilies(); ?></div>

主题选项-自定义代码中添加:

    function addimg(){
          document.getElementById('comment').value = document.getElementById('comment').value + '<img src="请输入图像地址,请上传到我的图床(file.aoaoao.me)后获取" alt="图像描述" />';
    }        

主题选项-自定义CSS中添加:

    .icon-pic{
        float:left;
        position: relative;
        top: -1px;
        width: 1em;
        height: 1em;
        font-size: 21px;
        color: #999;
        cursor: pointer;
        display: inline-block;
        font-family: "Material Icons";
        font-style: normal;
        font-weight: 400;
        line-height: 1;
        text-transform: none;
        letter-spacing: normal;
        word-wrap: normal;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
        -webkit-font-feature-settings: "liga";
        font-feature-settings: "liga";
    }

functions-diy.php中添加:

    function auto_comment_image( $comment ) {// by https://mufeng.me
          global $allowedtags;
          $content = $comment["comment_content"];
          // alt部分自行填写
          $content = preg_replace('/((https|http|ftp):\/\/){1}.+?.(jpg|gif|bmp|bnp|png)$/is','<img src="$0" alt="" />',$content);
          //允许发布img标签
          $allowedtags['img'] = array('src' => array (), 'alt' => array (),'class' =>array());
          // 重新给$comment赋值
          $comment["comment_content"] = $content;
          return $comment;
    }

效果图:

 

给LOGO和标题添加阴影

最近把首页大图换成了我老婆,但默认白色的logo看不清了,所以给logo加上了阴影特效(前提是你的logo是svg绘制的)

主题设置-自定义CSS中添加:

    #logo {
            -webkit-filter: drop-shadow(0px 0px 5px black);
    }
    #site-description,#site-title{
            text-shadow:0px 0px 5px #000 ;
    }

让Prism.js右上方显示语言名称

主题-自定义CSS中添加:

    div.prism-show-language {
    	position: relative;
    }
    div.prism-show-language > div.prism-show-language-label {
    	color: black;
    	background-color: #CFCFCF;
    	display: inline-block;
    	position: absolute;
    	bottom: auto;
    	left: auto;
    	top: 0;
    	right: 0;
    	width: auto;
    	height: auto;
    	font-size: 0.9em;
    	border-radius: 0 0 0 5px;
    	padding: 0 0.5em;
    	text-shadow: none;
    	z-index: 1;
    	-webkit-box-shadow: none;
    	-moz-box-shadow: none;
    	box-shadow: none;
    	-webkit-transform: none;
    	-moz-transform: none;
    	-ms-transform: none;
    	-o-transform: none;
    	transform: none;
    }
Licenced under CC BY-NC-SA 4.0
views
这篇文章发表于 1468 天前,可能包含过期内容、中二言论、失效链接