记下使用hexo来的一些使用经验和主题修改,针对的是默认的landscape主题。

忽略目录或文件的渲染

我们通常会用一个REMEME.md文件来描述项目,或者我们想放上一些自定义demo展示页面,但是source目录下的文件默认都会在执行hexo deploy命令时被渲染,因此Hexo也提供了忽略个别文件的配置方法:

  • 在根目录下_config.yml文件中添加以下配置,代表不渲染source目录下的README.md文件:
    skip_render: README.md
    
  • 如果想配置不渲染多个文件,则可以这样配置:
    其中,demo/**代表不渲染source/demo/下的所有目录和文件
    skip_render:
      - 'README.md'
      - 'demo/**'
    
  • 此外,配置中还可以使用正则来匹配:
    skip_render: demo/*.html
    

添加回顶部功能

  1. themes/landscape/layout/_partial/ 下新建 totop.ejs ,代码如下:
    <!-- 回顶部 -->
    <div id="to-top" style="position:fixed;bottom:30px;right:-50px;z-index:999;cursor:pointer;">
    <span style="color:#fff;background:#333;border-radius:3px;display:block;height:40px;width:40px;line-height:40px;text-align:center;">TOP</span>
    </div>
    
  2. themes/landscape/source/js/ 下新建totop.js,代码如下:
    (function($) {
     $(window).scroll(function(){
         if ($(window).scrollTop() > 200){
             $("#to-top").stop().animate({right:"5px"});
         }else{
             $("#to-top").stop().animate({right:"-50px"});
         }
     });
     $("#to-top").click(function(){
         $('body,html').animate({
             scrollTop:0
         },300);
         return false;
     });
    })(jQuery);
    
  3. themes/landscape/layout/_partial/after_footer.ejs最后添加如下代码:
    <%- partial('totop') %>
    <%- js('js/totop') %>
    

添加新浪微博组件

  1. 新浪开放平台 选择需要添加的微博组件
  2. 设置组件的样式,复制生成的代码
  3. theme/landscape/layout/_widget/下新建weibo.ejs 文件,文件内容为上一步所复制的代码
  4. theme/landscape/_config.yml 中添加如下代码:

    widges:
    - weibo