常见问题
本文解答了一些Icarus常见问题。 如果你的问题没有在这里得到解答,也请阅读 Icarus用户指南, Hexo中文文档, 以及GitHub Issues。 此外,你也可以在GitHub讨论组上向其他Icarus用户请求帮助。
站点
Icarus 5运行在Node.js 12.4.0或更新的版本上。
它同时依赖Hexo 6.0.0或更高版本。
除此之外,请确保所有的Node.js依赖已安装。
你可以在<icarus_directory>/package.json
文件的dependencies
部分下找到这些依赖。
同时,从你的站点中移除所有无用的Node.js依赖,否则它们可能会导致Icarus出现奇怪的问题。
打开站点根目录下的站点配置文件_config.yml
,修改如下设置:
1 | - language: en |
你可以在<icarus_directory>/languages
目录下找到所有可用的翻译。
<语言名>
为不带后缀名的翻译文件名。
布局
如要改变页面的宽度,编辑<icarus_directory>/include/style/responsive.styl
这个样式文件。
此文件定义了不同屏幕尺寸下的页面容器宽度。
如要改变挂件或主内容宽度,编辑<icarus_directory>/layout/common/widgets.jsx
和<icarus_directory>/layout/layout.jsx
。
在这些文件中找到诸如is-12
,is-8-tablet
,和is-4-widescreen
这样的CSS类名。
CSS类名中的数字标志着一个挂件或主内容所占据的栏数量。
数字后的屏幕尺寸,如tablet
和widescreen
,指代着栏数量生效的屏幕尺寸条件。
修改类名中的数字使主内容栏的栏数量和所有挂件栏的栏数量在相同屏幕尺寸下相加等于12。
例如,为使主内容栏在宽屏(widescreen
)下更宽,你可以做出如下修改:
1 | <div class={classname({ |
1 | function getColumnSizeClass(columnCount) { |
你可以参考Bulma文档来获取更多关于布局系统的细节。
下面时一些创建单栏/双栏/三栏布局的提示:
- 你可以从主题配置中移除所有的挂件来创建单栏布局。
- 你可以将所有的挂件移动到页面的一侧来创建双栏布局。
- 你可以将挂件放在页面两边来创建三栏布局。
若要更改单个文章或页面的布局,请参考配置文件与优先级。
插件和挂件的布局文件已被移至一个单独的Node.js库中——hexo-component-inferno
。
这样,主题开发者可以更好地在不同主题之间复用这些通用组件,并且普通用户可以更简便地覆盖这些内置组件。
若要自定义这些组件,从hexo-component-inferno
仓库中拷贝布局文件并把它们放入<icarus_directory>/layout
下的的相应目录中。
例如,如果你想要自定义Valine评论插件,你可以从hexo-component-inferno
仓库中拷贝
src/view/comment/valine.jsx
到<icarus_directory>/layout/comment/valine.jsx
。
同时像下面这样改正此文件头部的一些Node.js引用:
1 | - const { cacheComponent } = require('../../util/cache'); |
最后,用hexo clean
清理你的站点并重新生成HTML文件。
类似的,你可以用同样的方式覆盖主题内置的静态文件,如
asset/js/insight.js
。
当你使用hexo server
启动本地Hexo服务器时,Icarus会缓存布局文件。
如要使布局文件的修改生效,请重启本地服务器。
其他情况下临时生成的数据会被Hexo缓存在内存或者db.json
数据库中。
在运行hexo server
或hexo generate
之前执行hexo clean
应该可以解决此问题。
内容
请确保你使用了图片的绝对路径。
例如,你的站点位于你域名的子目录下,如https://ppoffice.github.io/hexo-theme-icarus
,
并且你的图片image.jpg
放在了source/gallery/
目录下。
那么你应该用/hexo-theme-icarus/gallery/image.jpg
来引用你的图片。
你也可以像下面这样使用{% img %}
这个Hexo标签来自动引用图片:
1 | {% img /gallery/image.jpg "Image title" %} |
在这种情况下,你可以从图片路径中省略网站子目录。 你可以参考Hexo文档来了解更多详情。
在你的文章中添加<!-- more -->
标签。
标签前面的文章内容会被标记为摘要,而其后的内容不会显示在文章列表上。
你也可以在文章的front-matter中设置自定义摘要。
1 | title: 一篇文章 |
使用如hexo-blog-encrypt这样的第三方的Hexo插件。
请参考Bulma文档来了解所有可选的元素和样式。 复制其中的HTML代码段并直接放入你的Markdown文件中。
挂件与插件
这些警示信息通常在你遗漏一些插件或挂件的配置设置时出现。 如果你不想开启某个插件或挂件,把它们从你的主题配置中删掉或注释掉。
例如,注释掉这几行来禁用掉评论插件:
1 | - comment: |