community
community copied to clipboard
volantis-x
留言灌水区
Volantis: 一个功能丰富、高度模块化的 Hexo 博客主题。支持多人协作、wiki文档等复杂系统，支持大量的标签插件。 - Volantis
Volantis 是一个功能丰富、高度模块化的 Hexo 博客主题。得益于其强大的模块化特性，您可以轻松搭建一个极简风格的博客，也可以仿照官网搭建一个多人协作的、包含文档模块的大体量综合型博客。
@aner1001
- name: 文档
icon: fad fa-book faa-tada
url: /getting-started/
target: _blank
把要轮播的图片都写进去就可以
作者大佬您好，我根据您这篇博客设置了我的主题，但是遇到了几个问题，希望您能帮到我： 1，我在设置友链页面时，复制了您提供的数据结构但是友链页面的显示没有达到预期：https://blog.tsgzvore.com/friends/ 显示效果如上（附结构图）
2，我按照您的说法创建了404页面，但我的网站在抛出404异常的时候并没有走到404的页面去，这个是什么原因呢？是否需要配置NGINX或者别的什么？
3，我在配置【wordcount】的时候，分别使用7.7.5与7.7.6版本的npm执行npm i wordcount命令后：
7.7.6报错，7.7.5安装成功但页面没有显示字数与阅读时间的相关内容。
相关配置都已打开。
4，我看到许多使用这个主题的博客都有一个【公告】栏目，请问这个栏目是可以配置的吗？还是说需要自己把它给加上去。因为我貌似没有找到相关配置信息。
5，我把顶部导航栏设置成了最大【navbar: width: max # auto, max】 然后导航列表就跑到了最右边，我想让它保持【width: auto】时的位置结构，让导航列表在中间偏左的位置，这个需要怎么设置呢？还是说需要自己修改？
这里写友链上方的内容。
@NeyaCat
1.友链数据不是写在MD文件里，是写在/source/_data/friends.yml中，详情见参考1；
2.404页面如果本地正常，那么在主机上需要设定错误页面；
3.看看在Article Layout 文章布局里是否添加了wordcount，如图1；
4.公告栏可以自行在侧边栏里添加，如图2，见参考2；
5.这个我也遇到过，所以我是修改了styl文件，而不是改的yml配置文件。
参考1：https://volantis.js.org/v4/page-settings/ #目录1.8.3
参考2：https://volantis.js.org/v4/theme-settings/ #目录7.6
@NeyaCat 关于您的第 5 点，我可以提一下修改思路（参考源来自 inkss）：
一、关闭 CDN
在 blog 目录下 _config.volantis.yml 文件里（如果您不是另外创建的主题配置文件，您需要在主题目录下修改 _config.yml）
use_cdn: false # true
二、在 Custom css 设置 navbar：width：auto
设置回 auto 就是居中方式，一会第三步再增加 css 代码，就可以实现您想要的效果。
三、为 css 增加样式
打开此文件：hexo-theme-volantis > source > css > _first > search.styl 在此文件最尾端增加以下代码：
@media screen and (max-width:2560px)
.l_header
left: 0!important
border-radius: 0!important
max-width: 100%!important
@media screen and (max-width:500px)
#safearea
margin: 16px 0 0!important
box-shadow: none!important
#safearea #l_main article#arc
#safearea #l_main article#comments
#safearea #l_main article#friends
#safearea #l_main article#page
#safearea #l_main article#post
border-radius: 0!important
margin-top: -16px!important
#safearea #l_main article#cat
#safearea #l_main article#tag
margin: -16px -16px 0!important
border-radius: 0!important
#safearea #l_main .post-wrapper
margin: 0 16px!important
#safearea #l_side .widget.mobile
border-radius: 0!important
.iconfont
width: 1em
height: 1em
vertical-align: -.15em
fill: currentColor
overflow: hidden
.rem1p5
font-size: 1.5rem
.rem2
font-size: 2rem
.rem6
font-size: 6rem
.rem12
font-size: 12rem
四、尝试一下吧！
hexo clean 之后进行 hexo s 吧！XD
@Tikas 感谢分享。楼上那位朋友可以尝试一下，由于我改了Navbar的高度和调整了logo的位置，所以目前还是比较满意这个样式，并且也是auto然后把宽度拉长，工作量更小。
@Tikas @W4J1e 非常感谢两位大佬的耐心指导，我提出的问题都已经解决或知道了解决方案。 关于404的问题我最开始以为hexo或volantis主题会自动处理404异常，后来我意识到它或许需要通过设置服务器的异常显示页面才能显示。 然而设置之后也没有用，依旧显示Cannot GET /xxx 后面我多方查证，最终定位到原因是因为我用的hexo s服务，在服务器站点配置通过反向代理访问本地4000端口，因此无法使用nginx的error_page功能。 使用hexo deploy 生成静态资源并将运行目录设置成public文件夹后再次访问就可以显示404页面了。 第5个关于顶部导航的问题我已经get到了，知道没法通过配置实现就好了，感谢大佬提供的样式修改意见。
@NeyaCat 关于您的第 5 点，我可以提一下修改思路（参考源来自 inkss）
PPS: 导航栏拉宽居中只用改这个就行：
https://github.com/inkss/volantis/blob/master/source/css/_szyink-plugins/first.styl#L5-L10
剩下的修改主要是把卡片覆盖掉，平铺移动端下的阅读：
https://github.com/inkss/volantis/blob/master/source/css/_szyink-plugins/first.styl#L27-L47
更剩下的与此处无关。
