美文网首页hexoHexo程序员
Hexo NexT 主题添加留言本页面

Hexo NexT 主题添加留言本页面

作者: lancelot_lewis | 来源:发表于2016-05-14 10:51 被阅读2500次

    留言让博客看起来更加的人性化

    NexT 主题官网有给出添加标签页、分类页的方法,其实添加留言本的方式异曲同工。方式稍微会有一点不同。

    一、添加留言本 page

    进入到博客的根目录,运行命令:

    hexo new page guestbook
    

    二、留言本页面中添加多说访客代码

    上一步中使用 hexo 命令新建了一个 page,进入到博客的source目录,里面会多了一个gusetbook文件夹,里面有一个index.md文件,打开该文件编辑:

    <div class="ds-recent-visitors" data-num-items="28" data-avatar-size="42" id="ds-recent-visitors"></div>
    

    这段代码加到index.md底部就行。
    然后要登录自己多说的站点,进入设置->自定义CSS,添加:

    #ds-reset .ds-avatar img,
    #ds-recent-visitors .ds-avatar img {
        width: 54px;
        height: 54px;     /*設置圖像的長和寬,這裏要根據自己的評論框情況更改*/
        border-radius: 27px;     /*設置圖像圓角效果,在這裏我直接設置了超過width/2的像素,即為圓形了*/
        -webkit-border-radius: 27px;     /*圓角效果:兼容webkit瀏覽器*/
        -moz-border-radius: 27px;
        box-shadow: inset 0 -1px 0 #3333sf;     /*設置圖像陰影效果*/
        -webkit-box-shadow: inset 0 -1px 0 #3333sf;
    }
    
    #ds-recent-visitors .ds-avatar {
        float: left
    }
    /*隱藏多說底部版權*/
    #ds-thread #ds-reset .ds-powered-by {
        display: none;
    }
    

    三、菜单设置中添加留言本

    找到NexT主题设置的_config.yml文件里面的menu

    menu:
      home: /
      #about: /about
      archives: /archives
      tags: /tags
      categories: /categories
      guestbook: /guestbook
    

    四、添加多语言文件的值

    因为这里使用的是中文,找到languages文件夹里面的zh-Hans.yml文件,menu子项中添加留言:

    menu:
      home: 首页
      archives: 归档
      categories: 分类
      tags: 标签
      about: 关于
      search: 搜索
      commonweal: 公益404
      guestbook: 留言
    

    附上个人博客对应博文地址:
    http://lancelot_lewis.coding.me/2016/05/11/blog/hexo-guestbook/

    相关文章

      网友评论

      • 7700475cd846:多说关闭了,怎么办?
        lancelot_lewis:@告别小李 畅言支持二级域名啊,你百度找找一级域名的备案,就能通过审核的
        7700475cd846:要域名啊!我不想买域名
        lancelot_lewis:@告别小李 建议更换到畅言或者网易云跟帖
      • 老司机Wicky:请问图标怎么设置啊
      • Insisting:#ds-recent-visitors .ds-avatar {
        float: left
        }我的这个没有实现left什么原因
      • cyang812:完美实现。谢谢!
      • hume6633:很有帮助,谢谢帮助!
      • everfight:浅显易懂,很有帮助~

      本文标题:Hexo NexT 主题添加留言本页面

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