本篇文章主要记录了我对本博正在使用的主题-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 && 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(","))
});
`</pre>
### 评论框添加插入图片按钮
主题commentform.php大概第117行:
<pre class="language-php">`
<?php if ( c7v5_get_option('smilies') && function_exists('c7v5_smilies') ) : ?>
<i class="icon-smilies" title="表情"></i>
<div class="comment-smilies"><?php c7v5_smilies(); ?></div> `</pre>
在其中增加一个插入图片的按钮:
<pre class="language-php">`
<?php if ( c7v5_get_option('smilies') && function_exists('c7v5_smilies') ) : ?>
<i class="icon-smilies" title="表情"></i>
<i class="icon-pic" title="图片" onclick="addimg();">&#xE3C4;</i>
<div class="comment-smilies"><?php c7v5_smilies(); ?></div> `</pre>
主题选项-自定义代码中添加:
<pre class="language-javascript">`
function addimg(){
document.getElementById('comment').value = document.getElementById('comment').value + '<img src="请输入图像地址,请上传到我的图床(file.aoaoao.me)后获取" alt="图像描述" />';
}
`</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','<img src="$0" alt="" />',$content);
//允许发布img标签
$allowedtags['img'] = array('src' => array (), 'alt' => array (),'class' =>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;
}