hexo 的 next 主题自己配置与修改

自己动手修改 hexo 上的 next 主题,修改成自己喜欢的样式

自己动手修改 Hexo 的 next 主题

Fork me on github

themes/next/layout/_layout.swig 修改
<div class="headband"></div> 下面添加

https://blog.github.com/2008-12-19-github-ribbons/

https://blog.github.com/2008-12-19-github-ribbons/

主页文章加阴影

打开 \themes\next\source\css_custom\custom.styl,加入:

1
2
3
4
5
6
7
.post {
margin-top: 60px;
margin-bottom: 60px;
padding: 25px;
-webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
-moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
}

添加文章热度

打开 /themes/next/layout/_macro/post.swig

<span class="leancloud-visitors-count"></span>

下添加一句:

<span>℃</span>

然后打开,/themes/next/languages/zh-Hans.yml

visitors: 阅读次数改为visitors: 热度

修改网站小图标

将图标放入 /themes/next/source/images

修改出题的配置文件

1
2
3
4
5
favicon:
small: /images/favicon-16x16-next.png
medium: /images/favicon-32x32-next.png
apple_touch_icon: /images/apple-touch-icon-next.png
safari_pinned_tab: /images/logo.svg

修改文章底部的那个带#号的标签

修改模板 /themes/next/layout/_macro/post.swig

搜索 rel=”tag”>#,将 # 换成 <i class="fa fa-tag"></i>

Hexo NexT主题内接入网页在线联系功能

daovoice

先注册一个用户,然后拿到 appid

修改 /themes/next/layout/_partials/head.swig 文件,添加内容如下:

1
2
3
4
5
6
7
8
9
{% if theme.daovoice %}
<script>
(function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/0f81ff2f.js","daovoice")
daovoice('init', {
app_id: "{{theme.daovoice_app_id}}"
});
daovoice('update');
</script>
{% endif %}

-w1125

添加网页音乐播放器功能

  1. 点击访问 Aplayer 源码:GitHub Aplayer

    下载到本地,解压后将 dist 文件夹复制到 themes\next\source 文件夹下

  2. 新建 themes\next\source\dist\music.js 文件,添加内容

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    const ap = new APlayer({
    container: document.getElementById('aplayer'),
    fixed: true,
    autoplay: true,
    volume: 0.3,
    loop: 'all',
    audio: [
    {
    name: '时间煮雨',
    artist: '郁可唯',
    url: 'http://up.mcyt.net/?down/37600.mp3',
    cover: 'http://imge.kugou.com/stdmusic/20130625/20130625181709936236.jpg',
    },
    {
    name: '爱情转移',
    artist: '陈奕迅',
    url: 'http://other.web.ra01.sycdn.kuwo.cn/resource/n2/320/52/97/1397406180.mp3',
    cover: 'http://imge.kugou.com/stdmusic/20161010/20161010200518926406.jpg',
    }
    ]
    });
  1. 打开 themes\next\layout_layout.swig 文件

    将以下文件添加到 <body itemscope ...>

    后面就行,即在 <body></body> 里面。

    1
    2
    3
    4
    <link rel="stylesheet" href="/dist/APlayer.min.css">
    <div id="aplayer"></div>
    <script type="text/javascript" src="/dist/APlayer.min.js"></script>
    <script type="text/javascript" src="/dist/music.js"></script>

添加点击爱心效果

  • /themes/next/source/js/src 下新建文件 clicklove.js 接着把该链接下的代码拷贝粘贴到 clicklove.js 文件中。

    1
    !function(e,t,a){function n(){c(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fi xed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o(),r()}function r(){for(var e=0;e<d.length;e++)d[e].alpha<=0?(t.body.removeChild(d[e].el),d.splice(e,1)):(d[e].y--,d[e].scale+=.004,d[e].alpha-=.013,d[e].el.style.cssText="left:"+d[e].x+"px;top:"+d[e].y+"px;opacity:"+d[e].alpha+";transform:scale("+d[e].scale+","+d[e].scale+") rotate(45deg);background:"+d[e].color+";z-index:99999");requestAnimationFrame(r)}function o(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),i(e)}}function i(e){var a=t.createElement("div");a.className="heart",d.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:s()}),t.body.appendChild(a)}function c(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function s(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var d=[];e.requestAnimationFrame=function(){return e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)}}(),n()}(window,document);
  • \themes\next\layout_layout.swig 文件末尾添加

    1
    <script type="text/javascript" src="/js/src/clicklove.js"></script>

永久链接(Permalinks)

变量 描述
:year 文章的发表年份(4 位数)
:month 文章的发表月份(2 位数)
:i_month 文章的发表月份(去掉开头的零)
:day 文章的发表日期 (2 位数)
:i_day 文章的发表日期(去掉开头的零)
:title 文件名称
:post_title 文章标题
:id 文章 ID
:category 分类。如果文章没有分类,则是 default_category 配置信息。

您可在 permalink_defaults 参数下调整永久链接中各变量的默认值:

1
2
permalink_defaults:
lang: en
参数 结果
:year/:month/:day/:title/ 2013/07/14/hello-world
:year-:month-:day-:title.html 2013-07-14-hello-world.html
:category/:title foo/bar/hello-world

多语种支持

若要建立一个多语种的网站,您可修改 new_post_namepermalink 参数,如下:

new_post_name: :lang/:title.md
permalink: :lang/:title/

当您建立新文章时,文章会被储存到:

$ hexo new “Hello World” –lang tw
# => source/_posts/tw/Hello-World.md
而网址会是:

http://localhost:4000/tw/hello-world/

部署 Hexo 到自己的服务器上

  • 安装 Git

    1
    sudo apt-get install git
  • 在自己的用户目录上新建一个 git deploy

    1
    2
    cd /home/USERNAME/
    git init --bare hexo_blog.git
  • 新建一个 post-receive

    1
    vim /home/ubuntu/hexo_blog.git/hooks/post-receive #新建一个名为post-receive的钩子文件
  • post-receive 文件新增以下内容

    1
    git --work-tree=/home/ubuntu/hexo_blog --git-dir=/home/ubuntu/hexo_blog.git checkout -f

    work-tree : Nginx 网站的目录
    git-dir : 就是用户目录新增的文件夹

  • 最后保存文件并且增加可执行的权限

    1
    chmod +x /home/ubuntu/hexo_blog.git/hooks/post-receive
  • 在 hexo 的配置文件增加以下

    1
    2
    3
    4
    5
    6
    deploy:
    type: git
    repository:
    blog-biyongyao: root@108.61.217.xxx:/home/ubuntu/hexo_blog.git
    blog2-biyongyao: ssh://root@23.106.158.xxx:26884/root/blog.git
    branch: master
  • 部署到服务器

    1
    hexo clean && hexo g && hexo d
文章对你有用?给博主一个支持
0%