Hexo NexT主题下实现点击博主名回到首页

  因为之前手贱给博主名duang了一个hover变色发光特效,然而并没有链接跳转只是单纯变色有一种蜜汁难受的感觉,于是花了15分钟研究了一下next主题里的layout文件,给博主名加了个超链接。
  感觉这是我学习JavaScript的开始!那么用JS生成相册界面也指日可待了吧!【做梦


.+†+.

JS部分

  • themes\next\layout\_macro\sidebar.swig找到如下内容:
1
2
3
4
5
6
7
8
9
10
11
12
13
<section class="site-overview-wrap sidebar-panel{% if not display_toc or toc(page.content).length <= 1 %} sidebar-panel-active{% endif %}">
<div class="site-overview">
<div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
{% if theme.avatar.url %}
<img class="site-author-image" itemprop="image"
src="{{ url_for( theme.avatar.url | default(theme.images + '/avatar.gif') ) }}"
alt="{{ author }}" />
{% endif %}
<p itemprop="name">{{ author }}</p>
<p class="site-description motion-element" itemprop="description">{#
#}{{ description }}{#
#}</p>
</div>
  • 替换为如下内容:(其实就是在site-author-name外面套了一个a+一个div)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<section class="site-overview-wrap sidebar-panel{% if not display_toc or toc(page.content).length <= 1 %} sidebar-panel-active{% endif %}">
<div class="site-overview">
<div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
{% if theme.avatar.url %}
<img class="site-author-image" itemprop="image"
src="{{ url_for( theme.avatar.url | default(theme.images + '/avatar.gif') ) }}"
alt="{{ author }}" />
{% endif %}
<div class="site-author-name">
<a href="../">
<p itemprop="name">{{ author }}</p>
</a>
</div>
<p class="site-description motion-element" itemprop="description">{#
#}{{ description }}{#
#}</p>
</div>

  然后你的博主名就应该变成一个连接到网站主页的超链接了,本地预览时应该是指向localhost:4000的,如果出了什么奇怪的问题,把a元素里的../替换成你自己的博客域名即可,如果设置了https要记得加https噢

  • 例:<a href="https://co5.me">

CSS部分

  修改了layout文件之后原本的site-author-name已经从一个p元素变成了包含超链接(a)的div元素,但是在next默认的css样式下鼠标移到空白位置也会触发超链接,所以还需要对CSS样式进行一些更改。

  • custom.styl里追加如下内容:
1
2
3
4
5
6
7
.site-author-name p {
display: inline-block;
margin-bottom: 0;
}
.site-author-name a {
border-bottom: 0px;
}
  • Ps. 更改元素构成之后不知道为什么,我原本添加的transition(平滑动画)属性失效了,需要更改到.site-author-name a上才能正确显示

那么这东西有什么用呢

  主要就是(在next主题下)看完一篇文章后可以直接把目录切换到站点概览界面然后返回首页看最近更新。
  其实就是没什么用啦【。
  不过电脑端还有个返回顶部按钮,手机端想切页面挺难的,因为导航栏在最上面……之后我想想有没有办法能把这个功能放到手机端UI里【沉思