Hexo的next主题个性化配置

对Hexo的Next主题配置和使用,我还是有一些心得的,无非是各种样式覆盖一下,逃:)

https://foreti.me/2017/12/31/hexo-next-personal/


添加RSS

首先在博客根目录安装hexo插件:

$ npm install --save hexo-generator-feed

npm安装失败请用cnpm

然后在博客配置文件_config.yml中修改

plugins: hexo-generate-feed
feed:
  type: atom       #feed 类型 (atom/rss2)
  path: atom.xml   #rss 路径
  limit: 0        #在 rss 中最多生成的文章数(0显示所有)

然后在主题配置文件_config.yml中修改

rss: /atom.xml

修改作者头像并旋转

打开\themes\next\source\css\_common\components\sidebar\sidebar-author.styl,在里面添加如下代码:

.site-author-image {
  display: block;
  margin: 0 auto;
  padding: $site-author-image-padding;
  max-width: $site-author-image-width;
  height: $site-author-image-height;
  border: $site-author-image-border-width solid $site-author-image-border-color;

  /* 头像圆形 */
  border-radius: 80px;
  -webkit-border-radius: 80px;
  -moz-border-radius: 80px;
  box-shadow: inset 0 -1px 0 #333sf;

  /* 设置循环动画 [animation: (play)动画名称 (2s)动画播放时长单位秒或微秒 (ase-out)动画播放的速度曲线为以低速结束 
    (1s)等待1秒然后开始动画 (1)动画播放次数(infinite为循环播放) ]*/
 

  /* 鼠标经过头像旋转360度 */
  -webkit-transition: -webkit-transform 1.0s ease-out;
  -moz-transition: -moz-transform 1.0s ease-out;
  transition: transform 1.0s ease-out;
}

img:hover {
  /* 鼠标经过停止头像旋转 
  -webkit-animation-play-state:paused;
  animation-play-state:paused;*/

  /* 鼠标经过头像旋转360度 */
  -webkit-transform: rotateZ(360deg);
  -moz-transform: rotateZ(360deg);
  transform: rotateZ(360deg);
}

/* Z 轴旋转动画 */
@-webkit-keyframes play {
  0% {
    -webkit-transform: rotateZ(0deg);
  }
  100% {
    -webkit-transform: rotateZ(-360deg);
  }
}
@-moz-keyframes play {
  0% {
    -moz-transform: rotateZ(0deg);
  }
  100% {
    -moz-transform: rotateZ(-360deg);
  }
}
@keyframes play {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(-360deg);
  }
}

添加相册

<div id="album">我的相册。</div>

原理很简单,就是建立一个github仓库存储用于存储图片,然后将每个图片的路径保存到一个json文件里,在hexo博客中解析这个json文件,渲染成html页面后就可以在显示图片了。当然这里肯定要有页面的样式和图片的裁剪压缩,原理简单,实际操作起来有一些坑,我并不懂css样式,还是要感谢litten提供的方法。

相册源

  • 首先在github上新建一个仓库,命名Blog_Album

  • clone我的Hexo-Album仓库,改一下文件名为Blog_Album或者其他,记住之后要上传的相片就放到photos文件夹内。

  • 在博客根目录运行

hexo new photo
  • 回到Blog_Album文件夹,在make-json.py中96行、98行,修改路径为blog源文件中的photo页面路径。这里后两行打印json的可以不需要。
with open("../Blog_Source/source/photo/" + target_file, "w") as fp:
    json.dump(final_dict, fp, indent=4, separators=(',', ': '))
with open("../Blog_Source/source/photo/" + target_file, "r") as fp:
    print (json.load(fp))
  • 添加一些图片到Blog_Albumphotos文件夹中
  • 运行compress.py生成图片缩略图到min_photos/
  • 运行make-json.py生成json文件到blog源文件中
  • Blog_Album的修改传到github远程仓库Blog_Album

上传前可以将Hexo文件夹移出,这个文件夹中的文件在后面还有作用。如果你不用七牛云,也可以将qiniu相关的脚本删掉。

博客相册页

  1. 回到yourblog\source\photo目录下,下载这些定义好的photo页面文件,后期你可以自己修改其中内容。

ins.js中的114行的render()函数需要修改这两个变量,这里是将图片存在github对应的连接,如果是七牛云需要绑定域名了。

var minSrc = 'https://raw.githubusercontent.com/fakeYanss/Blog_Album/master/min_photos/' + data.link[i];
var src = 'https://raw.githubusercontent.com/fakeYanss/Blog_Album/master/photos/' + data.link[i];

如果你的仓库名和我相同,只用把这里的fakeYanss改为你自己的github name即可。

  1. yourBlog/themes/next/source/js/src下加入两个js文件photoswipe.min.js和photoswipe-ui-default.min.js,都可以在Hexo文件夹中找到。
  1. yourBlog/themes/next/layout/_scripts/pages/post-details.swig中添加
<script type="text/javascript" src="{{ url_for(theme.js) }}/src/photoswipe.min.js?v={{ theme.version }}"></script>
<script type="text/javascript" src="{{ url_for(theme.js) }}/src/photoswipe-ui-default.min.js?v={{ theme.version }}"></script>
  1. yourBlog/themes/next/layout/_layout.swig

head内插入

<script src="{{ url_for(theme.js) }}/src/photoswipe.min.js?v={{ theme.version }}"></script>
<script src="{{ url_for(theme.js) }}/src/photoswipe-ui-default.min.js?v={{ theme.version }}"></script>

body内插入

{% if page.type === "photos" %}
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="pswp__bg"></div>
    <div class="pswp__scroll-wrap">
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <div class="pswp__counter"></div>
                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
                <button class="pswp__button pswp__button--share" title="Share"></button>
                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>
            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>
            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>
            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>
            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>
        </div>
    </div>
</div>
{% endif %}
  1. 重新编译博客内容即可看到相册内容。

  2. 注意:

  • 如果py脚本不能运行,先安装python环境,再安装Pillowpip install Pillow
  • 相册图片的命名请遵循yyyy-mm-dd_abc.jpg格式,虽然脚本里写了其他格式的处理,但实际情况似乎只能对jpg文件裁剪压缩
  • 最后的不足是,相片的裁剪算法,可能会把一张图片中的人体头部裁剪掉
  • next主题源码是不支持相册的,如果有不懂的地方,可以看看评论的相似情况,或者查一下yilia主题的issue,然后再来问我
  • 相册源文件中处理图片生成json和上传图片的处理,我写了一个releash.sh脚本,可以修改一下,以后添加图片后快捷处理

changelog

  • 2018.2.23修改
    发现ios设备拍摄的正方形照片的压缩图上传后仍然有orientation值为6即偏转90度问题,索性修改了整个裁剪切割和生成json的脚本。在压缩同时修改偏转值,并且在生成json时获取图片尺寸,在前端显示图片原图时在data-size中设置json中的对应图片尺寸,这样可以不切割原图,修改后的设置方法在

    • 生成缩略图和json数据并上传七牛云

    • 对于修改后的相册的ins.js,需要做一些修改,以适应修改后的脚本生成的json数据,在render()方法中,注意内层<img>标签为缩略图,<a>标签为原图,在对应的属性处设为对应值。

var minSrc = 'http://pic.yanss.top/min_photos/' + data.link[i];
var src = 'http://pic.yanss.top/' + data.link[i];
var type = data.type[i];
var target = src + '.' +type;
var size = data.size[i];
src = src + (type === 'mp4' ? '.jpg' : '.' + type) + '?imageMogr2/auto-orient';
minSrc = minSrc + (type === 'mp4' ? '.jpg' : '.' + type);
type = (type === 'mp4' ? 'video' : 'image')

liTmpl += '<figure class="thumb" itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">\
               <a href="' + src + '" itemprop="contentUrl" data-size="' + size + '" data-type="' + type + '" data-target="' + target + '">\
                   <img class="reward-img" data-type="' + type + '" data-src="' + minSrc + '" src="./assets/empty.png" itemprop="thumbnail" onload="lzld(this)">\
               </a>\
               <figcaption style="display:none" itemprop="caption description">' + data.text[i] + '</figcaption>\
           </figure>';
  • 2019.3.2修改
    由于换了主题hollow,不支持添加页面,所以讲相册独立出来,发到一个github仓库并开启page功能,目前是在https://fakeyanss.github.io/gallery

并且做了一些修改:

  • 不在使用七牛云图床,转到github,毕竟不限流,不限量,慢点就慢点。
  • 如果图片的orientaion信息有问题,可以自己修改一下,mac上用Xee³,window上用bandizip家的蜂蜜浏览器,都是打开图片保存一下就好了,直接将orientation值重设为1。
  • 修改了一些样式,计划做成Instagram的样式。

添加Gitment评论

原本是用的livere评论,后来总是加载速度太慢,上了梯子也一样,索性改成了Gitment评论。

感谢作者imsun,Gitment评论源自github仓库的issue,所以在将博客地址关联了某个github仓库后,在博客下评论其实就是在对应仓库的issue中评论,这创意真是太好了。

我之前的next主题一直是5.1.0版本,本来是想在主题中添加gitment的js和css文件,结果没成功。然后在next的官方文档中看到已经发行到5.1.4了,而且已经集成了gitment评论。这下可方便,干脆直接升级了next主题,然后就改config文件就好啦。

以前主题中配置了一些设置项,时间久了还忘了改了哪些文件!!!所以升级版本很痛苦,用的Sublime的一个插件Sublimerge,可以对比两个文件的代码差异,就是这样


Sublimerge

就像git pull操作之后改动时一样,这样子把每个有可能改过的文件都对比了一遍,然后升级到了5.1.4,发现集成了很多新功能,其他的有时间再试吧,这里就只说gitment。

首先在这里注册一个OAuth Application,Homepage URLAuthorization callback URL填写博客首页地址,也就是站点配置文件中的url,其他随意填写即可。

然后会得到一个Client IDClient Secret,把这两个值填到主题配置文件的gitment对应位置

gitment:
  enable: true
  mint: true # gitment仓库有两个,这里填true是引用第一个,false引用第二个,具体在layout下的conment文件中可以找到
  count: true # 评论计数
  lazy: false # 如果要点击按钮再显示评论就填true
  cleanly: true # 隐藏底部信息
  language: # Force language, or auto switch by theme
  github_user: 填github ID
  github_repo: 填保存issue的仓库名,一般就用博客发布的仓库名
  client_id: 刚才的值
  client_secret: 刚才的值
  proxy_gateway: # 设置代理,不用填
  redirect_protocol: # 没搞懂,不用填

然后重新部署博客(本地调试是没用的,因为url不同),再打开博客,这时候需要在每一个有评论的页面上使用自己的github长航登录并初始化一遍评论,之后就不用了。文章多的话会有点麻烦,不知道gitment作者有没有做好自动初始化?好像查到了这个,不过我还没试过。
这里是成功的样子

gitment

但是,这个鼠标放上有两条横线什么鬼啊!!!
gitment1

还有这里头像下面为什么有一条横线!!!![图片上传失败...(image-f92665-1558977716563)]

强迫症忍不了,查看了gitment的css定义,没发现什么问题啊,然后在浏览器中调试,发现了这个

a{  
  color: #555;
  border-bottom: 1px solid #999;
  text-decoration: none;
  word-wrap: break-word;
}

这里的border-bottom: 1px solid #999就是a标签下有一条横线的意思,但是这个属性是主题的属性main.css啊,显然是不能改的,于是只有在themes\next\source\css\_common\components\third-party\gitment.styl下改动了,在这里可以重写前面定义的属性,我是这样改的,在最后面加上

.gitment-comment-main a{
  color: #555;
  border-bottom: none;
  text-decoration: none;
  word-wrap: break-word;
}
.gitment-editor-avatar{
  color: #555;
  border-bottom: none;
  text-decoration: none;
  word-wrap: break-word;
}

第一个就是修改的ID下的横线,显示为none就好了;第二个是修改编辑框头像下的横线,也是显示为none

这样,算是完成了Gitment的配置了。

gitment已经失效了,看到作者的博客下的评论也失效了,查到似乎是因为gitment中在与github认证时需要作者提供的服务端支持,但是作者的服务端已经停掉了。

我现在转到了disqus。


设置自定义页面不显示Sidebar

主题配置文件中是这样的

toc:
  enable: true
  number: true
  wrap: false
sidebar:
  position: left
  display: post

讲道理这样就是是没有问题的,但是我发现自定义的页面里如果写了太多的#或者<h1>,就会被识别为post类型而不是page,也就是博客文章,会被自动加载目录,这就很蛋疼了不是,毕竟有的页面不想要目录啊尴尬!!!

{% blockquote %}一般这种样式问题都在layout文件夹中找原因。{% endblockquote %}

<s>在themes\next\layout\_macro\sidebar.swig,找到开头的</s>

{% macro render(is_post) %}
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

<s>在下面加上</s>

{% if page.toc and theme.toc.enable %}

<s>然后在倒数第二行加上</s>

{% endif %}

发现这样修改有bug,重新改。在themes\next\layout\_macro\sidebar.swig找到这一句

{% set display_toc = is_post and theme.toc.enable or is_page and theme.toc.enable %}

改为

{% set display_toc = is_post and theme.toc.enable or is_page and page.toc or is_page and theme.toc.enable and page.toc %}

其实就是多加一个判断,判断页面的开头有没有toc属性

最后,在需要有sidebar目录的文章前加上toc: true即可。

为了以后的方便,可以在scaffolds\post.md中加上toc: true



<p id="div-border-left-red"><i>DigitalOcean 优惠码,注册充值 5 送100,链接一 链接二</i></p>
<p id="div-border-left-red"><i>Lastly, welcome to follow me on github</i></p>

推荐阅读更多精彩内容