美文网首页Web前端之路让前端飞程序员
个性化hexo博客,添加评论系统,分享,友情链接功能并优化seo

个性化hexo博客,添加评论系统,分享,友情链接功能并优化seo

作者: 凌霄_ | 来源:发表于2017-04-12 22:11 被阅读515次

    个人博客地址:http://lx.nextdev.cn

    前言

    上一篇文章我们用 coding page + hexo 搭建了个人博客,这篇文章我们将对博客进行修改

    注意,本篇文章一切修改基于hexo博客的next主题

    评论系统

    官网
    • 打开主题配置文件,找到 Gentie productKey,修改为以下代码:
    # Gentie productKey
    gentie_productKey: 在这里写key
    
    • OK!

    分享系统

    ShareSDK
    • ShareSDK
    • 开始使用
      注册一个账号,然后打开后台,找到appkey
    appkey
    • 打开
    博客\themes\next\layout\_partials\share
    
    • 新建一个文件名为 sharesdk.swig ,并输入以下代码:
    <!--MOB SHARE BEGIN-->
                                <div class="-mob-share-ui-button -mob-share-open">分享</div>
                                <div class="-mob-share-ui" style="display: none">
                                    <ul class="-mob-share-list">
                                        <li class="-mob-share-weibo"><p>新浪微博</p></li>
                                        <li class="-mob-share-tencentweibo"><p>腾讯微博</p></li>
                                        <li class="-mob-share-qzone"><p>QQ空间</p></li>
                                        <li class="-mob-share-qq"><p>QQ好友</p></li>
                                        <li class="-mob-share-weixin"><p>微信</p></li>
                                        <li class="-mob-share-douban"><p>豆瓣</p></li>
                                        <li class="-mob-share-renren"><p>人人网</p></li>
                                        <li class="-mob-share-kaixin"><p>开心网</p></li>
                                        <li class="-mob-share-facebook"><p>Facebook</p></li>
                                        <li class="-mob-share-twitter"><p>Twitter</p></li>
                                        <li class="-mob-share-pocket"><p>Pocket</p></li>
                                        <li class="-mob-share-google"><p>Google+</p></li>
                                        <li class="-mob-share-youdao"><p>有道云笔记</p></li>
                                        <li class="-mob-share-mingdao"><p>明道</p></li>
                                        <li class="-mob-share-pengyou"><p>朋友网</p></li>
                                        <li class="-mob-share-tumblr"><p>Tumblr</p></li>
                                        <li class="-mob-share-instapaper"><p>Instapaper</p></li>
                                        <li class="-mob-share-linkedin"><p>LinkedIn</p></li>
                                    </ul>
                                    <div class="-mob-share-close">取消</div>
                                </div>
                                <div class="-mob-share-ui-bg"></div>
                                <script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey={{ theme.shareSDKappkey }}"></script>
                                <!--MOB SHARE END-->
    
    • 打开:
    LX-Blog\themes\next\layout\post.swig
    
    • 将以下代码:
    <div class="post-spread">
          {% if theme.jiathis %}
            {% include '_partials/share/jiathis.swig' %}
          {% elseif theme.baidushare %}
            {% include '_partials/share/baidushare.swig' %}
          {% elseif theme.add_this_id %}
            {% include '_partials/share/add-this.swig' %}
          {% elseif theme.duoshuo_shortname and theme.duoshuo_share %}
            {% include '_partials/share/duoshuo_share.swig' %}
          {% endif %}
        </div>
    
    • 改成:
    <div class="post-spread">
          {% if theme.jiathis %}
            {% include '_partials/share/jiathis.swig' %}
          {% elseif theme.baidushare %}
            {% include '_partials/share/baidushare.swig' %}
          {% elseif theme.add_this_id %}
            {% include '_partials/share/add-this.swig' %}
          {% elseif theme.duoshuo_shortname and theme.duoshuo_share %}
            {% include '_partials/share/duoshuo_share.swig' %}
          {% elseif theme.sharesdk %}
            {% include '_partials/share/sharesdk.swig' %}
          {% endif %}
        </div>
    
    • 打开 主题配置文件,添加以下代码:
    sharesdk: true
    shareSDKappkey: 你的appkey
    

    添加友情链接

    • 打开 主题配置文件 ,找到 Blog rolls,将代码改成:
    links_title: 友情链接
    links_layout: inline
    links: 
      凌霄的博客: http://lx.nextdev.cn/
    

    完成!


    欢迎评论

    相关文章

      网友评论

        本文标题:个性化hexo博客,添加评论系统,分享,友情链接功能并优化seo

        本文链接:https://www.haomeiwen.com/subject/rahvattx.html