本篇文章主要记录了我对本博正在使用的主题-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(","))
});
`</pre>
修改为:
<pre class="language-javascript">`
if (T) d(T.split(","));
else if (C7V5.qiniu_host &amp;&amp; V.indexOf(C7V5.qiniu_host) &gt; -1) e.getJSON(V.split("?")[0] + "!/excolor/1/exformat/hex",
function(e) {
        var t = c(e[0].color);
        d(t),
        z &amp;&amp; localStorage.setItem("pcc_" + V, t.join(","))
});
`</pre>

### 评论框添加插入图片按钮

主题commentform.php大概第117行:
<pre class="language-php">`
&lt;?php if ( c7v5_get_option('smilies') &amp;&amp; function_exists('c7v5_smilies') ) : ?&gt; 
       &lt;i class="icon-smilies" title="表情"&gt;&lt;/i&gt;
&lt;div class="comment-smilies"&gt;&lt;?php c7v5_smilies(); ?&gt;&lt;/div&gt; `</pre>
在其中增加一个插入图片的按钮:
<pre class="language-php">`
&lt;?php if ( c7v5_get_option('smilies') &amp;&amp; function_exists('c7v5_smilies') ) : ?&gt; 
       &lt;i class="icon-smilies" title="表情"&gt;&lt;/i&gt;
       &lt;i class="icon-pic" title="图片" onclick="addimg();"&gt;&amp;#xE3C4;&lt;/i&gt;
&lt;div class="comment-smilies"&gt;&lt;?php c7v5_smilies(); ?&gt;&lt;/div&gt; `</pre>
主题选项-自定义代码中添加:
<pre class="language-javascript">`
function addimg(){
      document.getElementById('comment').value = document.getElementById('comment').value + '&lt;img src="请输入图像地址,请上传到我的图床(file.aoaoao.me)后获取" alt="图像描述" /&gt;';
}        
`</pre>
主题选项-自定义CSS中添加:
<pre class="language-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";
}
`</pre>
functions-diy.php中添加:
<pre class="language-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','&lt;img src="$0" alt="" /&gt;',$content);
      //允许发布img标签
      $allowedtags['img'] = array('src' =&gt; array (), 'alt' =&gt; array (),'class' =&gt;array());
      // 重新给$comment赋值
      $comment["comment_content"] = $content;
      return $comment;
}
`</pre>
效果图:
![qq%e6%88%aa%e5%9b%be20161001142355](https://cdn.aoaoao.me/wp-content/uploads/2016/10/QQ截图20161001142355.png)

### 给LOGO和标题添加阴影

最近把首页大图换成了我老婆,但默认白色的logo看不清了,所以给logo加上了阴影特效(前提是你的logo是svg绘制的)\
主题设置-自定义CSS中添加:
<pre class="language-css">`
#logo {
        -webkit-filter: drop-shadow(0px 0px 5px black);
}
#site-description,#site-title{
        text-shadow:0px 0px 5px #000 ;
}
`</pre>

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

主题-自定义CSS中添加:
<pre class="language-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;
}