zoukankan      html  css  js  c++  java
  • Hexo博客网站再配置

    这两天整理网站方面的事,本地IIS部署个人网站,发现我的hexo做的个人网站实在很单调,于是找来资料做进一步的配置。

    一、网站图标

    看一下hexo hemesmodernistlayout\_partialhead.ejs,找到这句:

    <link rel="icon" type="image/x-icon" href="<%- config.root %>favicon.ico">
    

    我的是<link rel="icon" type="image/x-icon" href="<%- theme.favicon %>"> 不修改,好像也可以。。只是把favicon.ico放到hexosource目录下了。

    你懂的,将你的favicon.ico放到工程根目录下即可,也就是hexosource目录。可以在线制作你的ico图标

    二、主题的更换

    萝卜白菜各有所爱,玩博客换主题是必不可少的,hexo的默认主题为landscape,hexo的主题列表 Hexo Themes
    我比较喜欢 pacmanmodernistishgoraytaylorism。Pacman最为优秀,简洁大方小清新,同时移动版本支持的也很好,但作者并没有把很多参数分离出来给出可配置项,我最终选择了modernist。

    安装modernist主题的方法就是一句git命令:

    git clone https://github.com/heroicyang/hexo-theme-modernist.git themes/modernist

    (参考了主题列表的文章里   Install:

    Execute the following command, and modify theme in _config.yml to theme-name

    $ git clone<repository> themes/<theme-name>

    安装完成后,打开hexo\_config.yml,修改主题为modernist

    1
    theme: modernist

    打开hexo hemesmodernist目录,编辑主题配置文件_config.yml:

    menu: #配置页头显示哪些菜单(下面几个自己定义页面,往下文看)
    #  Home: /
      Archives: /archives
      Reading: /reading
      About: /about
    #  Guestbook: /about
    
    excerpt_link: Read More #摘要链接文字
    archive_yearly: false #按年存档
    
    widgets: #配置页脚显示哪些小挂件
      - category
    #  - tag
      - tagcloud
      - recent_posts
    #  - blogroll
    
    blogrolls: #友情链接
      - bruce sha's duapp wordpress: http://ibruce.duapp.com
      - bruce sha's javaeye: http://buru.iteye.com
      - bruce sha's oschina blog: http://my.oschina.net/buru
      - bruce sha's baidu space: http://hi.baidu.com/iburu
    
    fancybox: true #是否开启fancybox效果
    
    duoshuo_shortname: buru #多说账号
    
    google_analytics:
    rss:
    View Code

    更新主题

    cd themes/modernist
    git pull

     

    三、评论框

    静态博客要使用第三方评论系统,hexo默认集成的是Disqus,因为你懂的,所以国内的话还是建议用多说

    多说——专门基于社交网络的评论系统,能够轻松的帮网站主搭建自己互动性极强的社区,让留言的用户都有“家”的感觉,功能强大且永久免费。

    直接用你的qq账号/微博/豆瓣/人人/百度/开心网帐号登录多说,做一下基本设置。

    如果使用modernist主题,在modernist_config.yml中配置duoshuo_shortname为多说的基本设置->域名中的shortname即可(fml710)。

    你也可以在多说后台自定义一下多说评论框的格式,比如评论框的位置,对于css设置,可以参考这里,我是在HeroicYang的基础上修改的。

    如果使用的是默认的landscape主题只需要修改themeslandscapelayout\_partialarticle.ejs模板中的

    <% if (!index && post.comments && config.disqus_shortname){ %>
     <section id="comments">
       <div id="disqus_thread">
         <noscript>Please enable JavaScript to view the <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
       </div>
     </section>
    <% } %>
    View Code

    改为

    <% if (!index && post.comments && config.duoshuo_shortname){ %>
      <section id="comments">
       <!-- 多说评论框 start -->
    <div id="ds-thread" class="ds-thread" data-thread-key="<%= post.path %>" data-title="<%= post.title %>" data-url="<%= post.permalink %>"></div>
    <!-- 多说评论框 end -->
    <!-- 多说公共JS代码 start (一个网页只需插入一次) -->
    <script type="text/javascript">
    var duoshuoQuery = {short_name:"datoublog"};
    true(function() {
    truetruevar ds = document.createElement('script');
    truetrueds.type = 'text/javascript';ds.async = true;
    truetrueds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
    truetrueds.charset = 'UTF-8';
    truetrue(document.getElementsByTagName('head')[0] 
    truetrue || document.getElementsByTagName('body')[0]).appendChild(ds);
    true})();
    true</script>
    <!-- 多说公共JS代码 end -->
      </section>
    <% } %>
    View Code

    如果是其他主题,也只需要修改主题layout\_partialcomment.ejs

    四、自定义页面

    执行new page命令:

    hexo new page "about"

    在hexosource下会生成about目录,里面有个index.md,直接编辑就可以了,然后在主题的_config.yml中将其配置显示出来。

    上述步骤,也可以手工生成,在hexosource下手工新建about和index.md也是完全等价的。

    因为markdown对table的支持不好,我是在about中直接建立index.html,里面书写页面内容,hexo会帮你加上头和尾。

    五、404页面

    GitHub Pages 自定义404页面非常容易,直接Hexo/source目录下创建自己的404.html就可以。但是自定义404页面仅对绑定顶级域名的项目

    才起作用,GitHub默认分配的二级域名是不起作用的,使用hexo server在本机调试也是不起作用的。

    其实,404页面可以做更多有意义的事,来做个404公益项目吧,做点有意义的事情,也对得起这个域名。

    目前有如下几个公益404接入地址,我选择了腾讯的。404页面,每个人可以做的更多。

    404.html的内容可以设置为下面的内容

    <span style="font-size:14px;"><html>
        <head>
             <meta http-equiv="Content-Type" content="text/html; charset="UTF-8" />
             <title>公益404</title>                                                                                                                                        
        </head>
        <body>
             <script type="text/javascript" src="http://www.qq.com/404/search_children.js" charset="utf-8" homePageUrl="http://fml710.xyz/" homePageName="回到我的主页"></script>
        </body>
    </html></span>
    View Code

    注:

    1、页面有个链接默认是返回腾讯网,改修“homePageUrl”、“homePageName”两个参数,可定制化,

    homePageUrl="http://yoursite.com/yourPage.html" homePageName="回到我的主页"

    2、本地查看的话,<meta>中 一定要加  http-equiv="Content-Type" content="text/html;  否则中文乱码,content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

  • 相关阅读:
    MySQL中的while循环和repeat循环的区别
    Python 基础语法_Python脚本文件结构
    Python 基础语法_Python脚本文件结构
    MySQL存储过程和函数的区别
    第四章 语句和声明
    haproxy 4层和7层负载
    献血是件很赞的事——北漂18年(26)
    JavaScript字符串数值比较问题
    MySQL查看所有可用的字符集
    MySQL获取表格信息
  • 原文地址:https://www.cnblogs.com/peterYong/p/6556632.html
Copyright © 2011-2022 走看看