blog的诞生系列-1:cf blog plus 搭建

[TOC]

整个的搭建流程按照CFBlog-Plus搭建教程一步一步走就行。

解决id为 000NaN

在搭建的时候碰到几个坑：
在创建好woker，并运行之后，发表文字，会发现所有的文章id都是 000NaN。

解决方案：编辑kv

删除000NaN的密钥项

删除 SYSTEM_INDEX_LIST
将”SYSTEM_INDEX_NUM”项的值改为0

替换tab的logo

默认的logo是cf的，有点丑

把下面的代码添加到 codeBeforHead

<link rel="icon" type="image/x-icon" href="https://cdn.jsdelivr.net/gh/gdtool/zhaopp/cfblog/favicon.ico" />
<link rel="Shortcut Icon" href="https://cdn.jsdelivr.net/gh/gdtool/zhaopp/cfblog/favicon.ico">

里面的logo替换为直接的

valine评论插件失效的问题

但是用默认的代码的时候，会发现 valine插件一直无法评论，那是因为默认的提交评论的apius.leancloud.cn 已经停止解析。

我们需要使用自定义的评论url，再Leancloud的后台，App Keys 中有 Domain Whitelist，这里随便选一个url。

替换新代码如下

codeBeforHead部分：

<script src='https://unpkg.com/valine/dist/Valine.min.js'></script＞

commentCode部分


<div id="vcomment" class="comments-area"></div>
<script>
    new Valine({
        el:'#vcomment',
        appId: '你的appid',
        appKey: '你的appkey',
        avatar:'robohash',
        serverURLs:'你的自定义域名',
        recordIP:false,
        requiredFields:['nick'],
        visitor: true,
        placeholder:"评论可以一针见血..."
    })
</script>

添加鼠标特效

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
/* 鼠标特效 */
var a_idx = 0;
$(function() {
    $("body").click(function(e) {
        var a = new Array("天真","富强", "民主", "文明", "和谐", "自由", "平等", "公正" ,"法治", "爱国", "敬业", "诚信", "友善");
        var $i = $("<span/>").text(a[a_idx]);
        a_idx = (a_idx + 1) % a.length;
        var x = e.pageX,
        y = e.pageY;
        $i.css({
            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
            "top": y - 20,
            "left": x,
            "position": "absolute",
            "font-weight": "bold",
            "color": "#ff6651"
        });
        $("body").append($i);
        $i.animate({"top": y - 180,"opacity": 0},1500,function() {$i.remove();});
    });
});
</script>

添加右侧链接

widgetOther部分

<style>#meta-2{visibility: hidden;}</style>
  <aside id="meta-3" class="widget widget_meta"><p class="widget-title">链接</p>
    <ul>
      <li><a href="/admin/" target="_blank">管理站点</a></li>
      <li><a href="https://console.leancloud.app/" target="_blank">管理评论</a></li>
    </ul>
  </aside>

Glad To See You