前言

本站由Sakura主题驱动。

所以就写一些比较需要自定义修改的地方吧,以及非常不完全的疑难解答。

大部分的修改在GitHub中的README-zh_cn.md中已经写的很清楚了,这里主要针对一些css与js文件的修改。

已有内容

  • 顶部站点logo修改
  • 菜单栏居中问题
  • Valine评论
  • 阅读量统计不蒜子修改为Valine
  • 颜色修改
  • 不定期更新ing··· ···

主题链接


顶部站点logo修改为图片

在Wordpress的Sakura主题中,默认直接是图片,不过Hexo的Sakura主题中默认是文字样式

Hexo的默认还是很好看的,不过想改回图片也只需要稍加修改。

themes/Sakura/_config.yml 中开头的 prefixNamesiteName 就是顶部站点的配置。

在这里加入一个 siteLogo 的变量,并且给一个图片链接。

例如:

siteLogo: /images/logo/logo.png

之后打开 themes/Sakura/layout/_partial/header.ejs ,注释掉里面的:

<span class="sakurasono"><%= theme.prefixName %></span>
<span class="shironeko"><%= theme.siteName %></span>

在这里添加一行:

<img src = <%= theme.siteLogo %>>

这样就可以把左上角的站点文字logo改为图片。

这样的好处是可以在不影响 prefixNamesiteName 的使用下,把logo替换为图片,而且也便于修改。

不过现在还有一个问题,修改为图片之后logo的位置太靠下了。

这里要打开 /themes/Sakura/source/css/style.css 修改一下样式。

随便一提大部分其他的样式也在 style.css 里面。

定位到 .site-title img

.site-title img {
    height:40px;
    margin-top:17px;
    opacity:.75;
    ... ...
}

其中 margin-top 就是控制logo的上下位置的,改小一点就可以了。

height控制图片大小,opacity控制透明度的。

logo的位置修改在 .logolink.moe-mashiro a
.logolink.moe-mashiro a {
    color:#464646;
    float:left;
    font-size:28px;
    font-weight:800;
    height:56px;
    line-height:56px;
    padding-left:6px;
    padding-right:15px;
    padding-top:11px;
    text-decoration-line:none
}

修改 padding-leftpadding-top 的值就可以了

菜单栏居中问题

菜单栏偏移

菜单栏的居中有个小问题,在去掉一部分菜单选项之后,菜单栏的位置就会向左偏移。

同样打开 /themes/Sakura/source/css/style.css 文件,

定位到 .site-top .lower-cantiner

.site-top .lower-cantiner {
    position:absolute;
    left:50%;
    min-width:758.4px;
    pointer-events:none
}

min-width:758.4px; 删去就可以解决问题了。

Valine评论

Hexo的Sakura主题评论功能用的是Valine

配置过程可以参考

hexo 博客添加 Valine 评论系统

APP IDAPP KEY

粘贴到 themes/Sakura/_config.yml 中,就可以了。

valine: true
v_appId: *********************
v_appKey: ********************

需要注意的是leancloud现在需要域名绑定,在域名的dns那里设置下二级域名就可以了。

如果有如下报错:

Code 403: 访问被api域名白名单拒绝,请检查你的安全域名设置.   

需要在 leancloud.cn-应用-设置-安全中心-Web安全域名 里写上你自己的域名。

Web安全域名

阅读量统计由不蒜子修改为Valine

Hexo的Sakura主题默认阅读计数使用了不蒜子,不过Valine从v1.2.0开始也支持了阅读量统计。

从数据的同步考虑,于是决定把不蒜子统计改为Valine。

Valine官方已经给出修改了示例:文章阅读量统计

首先打开 /themes/Sakura/source/js/sakura-app.js

定位到 valine.init ,添加一行 visitor: true, ,开启阅读量统计。

valine.init({
          el: '#vcomments',
          appId: mashiro_option.v_appId,
          appKey: mashiro_option.v_appKey,
          visitor: true, // 阅读量统计
          path: window.location.pathname,
          placeholder: '你是我一生只会遇见一次的惊喜 ...'
        })

打开 /themes/Sakura/layout/_widget/common-article.ejs ,定位到:

<span id="busuanzi_value_page_pv"></span>次阅读

一共有两个地方,将其全部注释掉,之后两个地方都要添加:

<span id='/<%= page.path %>' class="leancloud-visitors" data-flag-title="<%= page.title %>">
    <a class="leancloud-visitors-count">1000000</a>
    <a class="post-meta-item-text"> 次阅读</a>
</span>

之后是收尾工作,打开 themes/Sakura/source/js/sakura-app.js ,注释掉:

$.getScript('//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js');

打开 themes/Sakura/layout/_partial/footer.ejs ,注释掉:

<script src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

如果一切没问题的话现在阅读量统计就已经被替换为了Valine。

Valine会自动在 leancloud.cn-应用-存储 中新建一个counter类用于记录每个文章的阅读量。

ValineCounter

这样也可以把wordress中的阅读量迁移过来了。

主题颜色修改

Sakura主题颜色值主要是 orange#FE9600

查询全局文件,之后替换就可以了。

结语

Hexo的设置项的确神烦,不过配合chrome和文本编辑器还是很容易修改很多东西的。

至此站点迁移完成,感谢主题原作者Mashiro与移植者hojun

撒花★,°:.☆( ̄▽ ̄)/$:.°★


仅此而已的地方