使用 volantis 中遇到的坑

使用 volantis 中遇到几个坑，如 volantis404 页面不生效，sidebar 效果不生效，如何更改图片尺寸，手机模式下 toc 会被遮挡等，这里做了笔记

写在前面

404 页面不生效

按照官方的文档配置 404 页面，在本地打开一个不存在的页面，并不显示 404 页面，重启服务器依然不行。干脆直接放到 GitHub page 上，结果 404 页面能生效

sidebar 效果不生效

我的 volantis 版本是 volantis 5.7，主题文件设置中的 sidebar 的 shadow, floatable, blur 效果不生效

1
sidebar:
2
  effect: [shadow, floatable, blur]

我的方法是打开 blog\node_modules\hexo-theme-volantis\layout\_widget，这里存放着 sidebar 的各个组件。

以下以修改 blogger 组件为例：

找到代码

1
<section
2
  class="widget <%- item.class %> <%- page.widget_platform %> <%- page.widget_pjax %>"
3
></section>

可以看到 class 中是没有 shadow, floatable, blur 的，只需要我们手动添加关键词就能生效

1
<section
2
  class="widget floatable <%- item.class %> <%- page.widget_platform %> <%- page.widget_pjax %> shadow blur"
3
></section>

刷新就可以看到效果生效，左边的 blogger 组件有高斯模糊并且有阴影效果了。

其他组件也是同样的方法，关键是要找到这行代码

1
<section class="widget ..."></section>

这行代码可以在浏览器打开元素查看器找到

更改图片显示尺寸和圆角半径

图片显示尺寸

使用以下代码，则能显示如本 post 中的图片一样的效果

其中的 url，width 和 alt 可以自己修改。width 的单位可以是 px 也可以是百分比 %

图片圆角半径

打开 \img.styl 就可以修改圆角半径

1
.md
2
  img
3
    position: relative
4
    trans()
5
    @media screen and (max-width: $device-mobile)
6
      box-shadow: none
7
  div>img,p>img,a>img
8
    display: block
9
    margin: auto
10
    border-radius: 4px
11
    @media screen and (max-width: $device-mobile)
12
      border-radius: 4px
13
  span
14
    img
15
      display: inline
16
      margin: auto

其中的 border-radius 就是半径的 key（默认的配置文件中应该有 3 个，我没有复制全），修改你想要的 value。

如果在像我一样在第 7 行行尾添加 a>img，则可以修改使用 gallery 标签插件的图片中 border-radius 的值。

解决手机模式下 toc 会被遮挡的问题

只需要在 \navbar_first.styl 中修改 z-index 值为一个较小的数字。

1
.l_header
2
  $iconW = 36px
3
  $iconMargin = 4px
4
  position: fixed
5
  z-index: 10

引入 css 的 rel=preload 跨域问题

如果你的 _config.yml 中设置的 css 链接是跨域 url，例如使用了 cdn，在浏览器的控制台中报错 A preload for .css is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute，则需要修改 head.ejs。

1
cdn:
2
  enable: true
3
  set:
4
    css:
5
      style: https://cdn.example.com/style.css

1
<!-- 更改之前 -->
2
<link rel="preload" href="<%- theme.cdn.map.css.style %>" as="style" />
3
<!-- 更改之后 -->
4
<link
5
  rel="preload"
6
  href="<%- theme.cdn.map.css.style %>"
7
  as="style"
8
  crossorigin="anonymous"
9
/>