嘘~ 正在从服务器偷取页面 . . .

Matery主题新手常见问题


Matery主题新手常见问题

本文主要针对新手入门的常见问题进行简单整理。大部门问题都可以阅读主题readme解决,如果你看不懂英文,点击这个链接就可以切换中文阅读:

Matery 中文说明

遇到问题先看readme!!!
遇到问题先看readme!!!
遇到问题先看readme!!!

看右侧目录可以快速定位你的问题。

改代码不生效

问题描述:代码都是正确的,修改之后不生效怎么办?

(1)使用 Ctrl + F5 强制刷新之后再看。

(2)自己清除浏览器缓存,各个浏览器可能不一样,请自己搜索怎么清除缓存。

(3)如果你使用了CDN加速,本地调试千万记得先关闭加速。

(4)如果你修改 _config.yml,调试前要执行 hexo clean 命令。

favicon.ico 更换之后不显示

问题描述: favicon.ico 已经更换成自己的图标之后不生效怎么办?

(1)确保 favicon.ico路径没有问题。

(2)有些浏览器不支持localhost显示favicon.ico图标,更换浏览器试试。

(3)更换浏览器还是不能显示,将访问路径http://localhost:4000改为http://127.0.0.1:4000访问。

复制代码粘贴不能换行

修改 themes\matery\layout\_partial\post-detail.ejs

if (selection.getRangeAt(0).commonAncestorContainer.nodeName === 'PRE') {
    newdiv.innerHTML = "<pre>" + newdiv.innerHTML + "</pre>";
}

修改成

// if (selection.getRangeAt(0).commonAncestorContainer.nodeName === 'PRE') {
//     newdiv.innerHTML = "<pre>" + newdiv.innerHTML + "</pre>";
// }

//注释掉上面的if,将if中的内容释放出来
newdiv.innerHTML = "<pre>" + newdiv.innerHTML + "</pre>";

文章多个标签

问题描述:文章标签或分类想添加多个,不知道怎么写?

写法一:

tags: 
  - Hexo
  - Github
  - 博客

写法二:

tags: [Hexo,Github,博客]

分类写法同理。

提示 prism-plugin 配置错误。

问题描述: 高于 Hexo 4.2 的版本 ( 不一定准备,因为我的4.2 版本没有问题), 目前在执行 hexo clean 时提示 prism-plugin 配置错误。

方案1:你可以忽略这个错误,因为这对实际展示不造成影响。 原因没有去细究。

方案2:你无法忍受报错提示,可以卸载高亮插件使用 新版Hexo 自带的高亮。

执行卸载高亮插件:

npm uninstall -S hexo-prism-plugin

大写s是在本地安装,也就是只在你的博客文件所在目录的本地进行安装。卸载也是在本地卸载。

卸载后使用hexo 自带的高亮插件。自带的高亮插件用法

注意: 该问题是群友遇到了,讨论尝试的解决方法。可以自行尝试。

代码块显示问题

问题描述: 代码块中的 { } 被转义
问题描述: 代码块的行号和内容分开成两块了,不完整怎么办?就像下图这样:

代码块显示不正常示例图

怎么解决?按步骤来:

(1)代码高亮插件

安装官方推荐的hexo-prism-plugin的 Hexo 代码高亮插件

npm i -S hexo-prism-plugin

(2)修改配置

修改 Hexo 根目录下 _config.yml 文件:

highlight:
  enable: false
  line_number: true
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false

# 关闭原有 的代码高亮,使用自己的
prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:

可以自己比较一下,highlight下的 enable的值设置成 falseprism_plugin 各个值可以选,如果看不懂意思就不改,或者改一个试试效果,theme 的值官方推荐是 tomorrow,如果你无法显示,就在下面的列表里换个值试试。

参数KEY可选值
moderealtime (Parse code on browser in real time)
preprocess (Preprocess code in node)
themedefault
coy
dark
funky
okaidia
solarizedlight
tomorrow
twilight
如果要更多的选择访问: hexo-prism-plugin
line_numbertrue (Show line numbers)
false (Default, Hide line numbers)
no_assetstrue (Stop loading asset files)
false (Default, load script and stylesheets files)

到此基本能解决。如果还是不行,到群里咨询971887688 ,描述或者截图你的问题,然后给出相关配置代码。

2020年8月14日追加:

对于 代码块中的 { } 被转义的问题,有些人是可以通过这种方式解决的,如果无法解决可以尝试使用 自带的高亮插件,或者将 Hexo 降级到4.2版本。

2020年9月18日追加:

对于 代码块中的 { } 被转义的问题,有的小伙伴说可以升级到hexo5.2 也可以解决。

首页没有轮播

问题描述:为什么别人首页可以轮播,有两个小箭头,你的只有一张图片没有轮播也没有箭头?

因为你没有在文章头部设置cover属性。

cover 设置成 true ,表示该文章需要加入到首页轮播封面中。

coverImg,表示该文章在首页轮播封面需要显示的图片路径,如果没有,则默认使用文章的特色图片。coverImg就是用来设置轮播时的图片的,如果没有可以不设置,就用默认的。

比如我这篇文字的头部设置:

---
title: Matery主题新手常见问题
tags: Hexo
categories: Hexo
summary: Matery主题新手常见问题。
excerpt: Matery主题新手常见问题
keywords: 'hexo,matery,valine'
author: Small-Rose /张小菜
abbrlink: a53a9069
date: 2020-06-30 22:00:00
cover: true
coverImg: /images/hexo/cover_1.jpg
---

设置完成之后,记得把图片放到主题下的 source/images 目录,然后 hexo clean & hexo g hexo s

修改主题颜色

问题描述:不喜欢默认的颜色,想换成自己怎么改?

在主题文件的 /source/css/matery.css文件中,搜索 .bg-color来修改背景颜色:


/* 整体背景颜色,包括导航、移动端的导航、页尾、标签页等的背景颜色. */
.bg-color {
    background-image: linear-gradient(to right, #4cbf30 0%, #0f9d58 100%);
}

关闭首页颜色变换

问题描述:不喜欢首页的颜色变换,怎么关闭?

在主题文件的 /source/css/matery.css文件中,搜索 rainbow来关闭颜色变换:


@-webkit-keyframes rainbow {
   /* 动态切换背景颜色.即滤镜颜色,不想要可以全部注释,或者换成你喜欢的颜色 */
}

@keyframes rainbow {
    /* 动态切换背景颜色.,不想要可以全部注释,或者换成你喜欢的颜色 */
}

首页baner图不显示或不切换

之前的版本有BUG,不过作者已经修复,如果你没有同步代码,就找到主题下的/layout/_partial/文件夹下的bg-cover-content.ejs文件,找到文件末尾,跟下面的片段片段比较一下:


<% if (theme.banner.enable) { %>
<script>
    //) 每天切换 banner 图.  Switch banner image every day.
    var bannerUrl = "<%- theme.jsDelivr.url %><%- url_for('/medias/banner/') %>" + new Date().getDay() + '.jpg';
    $('.bg-cover').css('background-image', 'url(' + bannerUrl + ')');
</script>
<% } else { %>
<script>
    $('.bg-cover').css('background-image', 'url(<%- theme.jsDelivr.url %><%- url_for('/medias/banner/0.jpg') %>)');
</script>
<% } %>

给卡片区添加背景

在主题文件的 /source/css/matery.css文件中,有个 body 选择器,加了中间两行之后长这样:

body {
 background-color: #eaeaea;

  background: linear-gradient(60deg, rgba(224,255,125, 0.5) 5%, rgba(0, 228, 255, 0.35)) 0% 0% / cover;background-attachment: fixed;
  margin: 0;

  color: #34495e;

}

也可以加 url 用图片做背景:

body {
 background-color: #eaeaea;

  background: url('你的图片地址')background-attachment: fixed;
  margin: 0;

  color: #34495e;

}

添加加载动画

参考:Matery 添加加载动画

不想显示英文怎么办

(1) 把 Hexo 根目录的 _config.yml 文件语言 language 设置成 zh-CN

author: 'Small Rose /) 张小菜苔'
language: zh-CN
timezone: 'Asia/Shanghai'

(2)设置了不起作用?

找到 themes/matery/languages/目录下的 zh-CN.yml 文件,里面的中英文是否对好了。我记得有些还是英文需要自己自己改下:

index: 首页
posts: 文章
category: 分类
categories: 分类
tag: 标签
tags: 标签
archives: 归档
about: 关于
contact: 留言
friends: 友情链接
navigate: 导航
startRead: 开始阅读
recommendedPosts: 推荐文章
publishDate: 发布日期
updateDate: 更新日期
readCount: 阅读次数
wordCount: 文章字数
readTimes: 阅读时长
Minutes:readMore: 阅读更多
toc: 目录
curr: 本篇
prev: 上一篇
next: 下一篇
search: 搜索
searchTip: 请输入搜索的关键字
postTagTitle: 文章标签
postCategoryTitle: 文章分类
categoryRadarTitle: 文章分类雷达图
categoryNumber: 文章分类数量
categoryEmptyTip: 你目前还没有对文章进行分类.
postCharts: 文章统计图
postPublishChart: 文章发布统计图
categoriesChart: 文章分类统计图
top10TagsChart: TOP10 标签统计图
postsNumberName: 文章篇数
maximum: 最大值
minimum: 最小值
average: 平均值
myProjects: 我的项目
mySkills: 我的技能
otherSkills: 其他技能
gallery: 相册
notag: 无标签
from: 来源
reprint: 版权声明
author: 文章作者
link: 文章链接
use: 本博客所有文章除特別声明外,均采用
licensed: 许可协议。转载请注明来源
cc_by_url: https://creativecommons.org/licenses/by/4.0/deed.zh
cc_by_name: CC BY 4.0
cc_by_nd_url: https://creativecommons.org/licenses/by-nd/4.0/deed.zh
cc_by_nd_name: CC BY-ND 4.0
cc_by_sa_url: https://creativecommons.org/licenses/by-sa/4.0/deed.zh
cc_by_sa_name: CC BY-SA 4.0
cc_by_nc_url: https://creativecommons.org/licenses/by-nc/4.0/deed.zh
cc_by_nc_name: CC BY-NC 4.0
cc_by_nc_nd_url: https://creativecommons.org/licenses/by-nc-nd/4.0/deed.zh
cc_by_nc_nd_name: CC BY-NC-ND 4.0
cc_by_nc_sa_url: https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh
cc_by_nc_sa_name: CC BY-NC-SA 4.0
cc_0_url: https://creativecommons.org/publicdomain/zero/1.0/deed.zh
toTheExtentPossibleUnderLaw: 在法律允许的范围内,
hasWaivedAllCopyrightAndRelatedOrNeighboringRightsTo: 已放弃此作品的所有版权、相关或相邻的权利
workPublishedFrom: 。此作品发布在:
cc_0_country: 中国大陆。
cc_0_content: CN
noreprint: 本文不允许转载。
paycontact: 请联系作者
payreprint: 付费转载。
pleaseFollowReprintPolicy: 复制成功,请遵循本文的转载规则
checkPolicy: 查看

卜算子显示数字特别大

本地启动后,发现 卜算子显示数字特别大,不要惊慌,localhost 是个比较特殊的域名,只要真正部署上去之后自然就正常了。

想更换图标怎么办

Matery 主题使用的是 font-awesome 的图标库 Font Awesome Free 5.11.1。

如果你想简单的更换图片,找到主题目录下 /source/libs/awesome/css/ 目录的 all.css 文件。 文件中从 192行到4373行都是图片相关的。

你只需要按照格式把 fa-xxxfa-xxx-xxx 写到对应的位置就可以更换图标了。

如果你想在文章中使用图标,可以写个标签

<i  class="fas fa-home" ></i>

效果大概是这样:

可以先去 fontawesome 官网 找,找好之后 F12 ,找到元素之后看看<i>标签的 class 的值是 fa-xxx-xx 的话再到 all.css 文件里搜一下,不过这也无法保证完全一样,因为版本不一致有的时候名字不一定一致。 多试试吧。

想添加特效

有些同学比较喜欢特效,参考大佬写的修改方法:
Matery 主题个性化修改

修改主题相册

有些同学比较喜欢独立相册,Matery 相册在个人里面。如果你想改成独立相册,参考大佬写的修改方法:
修改 matery 原有主题相册

想添加导航页

参考大佬的:Hexo添加导航页

想更换字体怎么办

(1) 选个自己喜欢的字体下载,一般是.ttf格式的。

常见的开源字体有:

思源黑体 、 文泉驿 、 文鼎开放字体 、 柳体 、 cwTeX中文字体 、 濑户字体、江西拙楷体等。

免费可商用的中文字体整理:

免责声明:

以下表格内容收集整理来自网络, 不保证实时性, 使用时建议查清字体使用相关授权说明。本站对读者使用不作任何建议。

字体授权或下载
思源系列思源黑体、思源宋体。授权出处,点我查看
思源系列思源柔黑体。授权出处,点我查看
思源系列思源真黑体。授权出处,点我查看
明朝系列App Mincho明源。授权出处,点我查看
明朝系列花园字体。授权出处,点我查看
明朝系列Oradano-Mincho明朝。授权出处,点我查看
明朝系列装甲明朝。授权出处,点我查看
明朝系列源界明朝。授权出处,点我查看
明朝系列源明朝。授权出处,点我查看
方正系列方正黑体、方正书宋、方正仿宋、方正楷体。
授权出处,点我查看
明体系列源样黑体、源流明体、源石黑体、源样明体、源云明体、源泉圆体。
授权出处,点我查看
中文系列M Plus。授权出处,点我查看
中文系列锐字真言体。授权出处,点我查看
中文系列可以商用,但不能在非Apple硬件上使用,否则就是侵权。
苹果官方说明链接 https://discussions.apple.com/thread/7493969
中文系列联盟起艺卢帅正锐黑体。授权出处,点我查看
中文系列Droid Sans Fallback。授权出处,点我查看
中文系列庞门正道标题体。授权出处,点我查看
中文系列庞门正道粗书体。授权出处,点我查看
中文系列问藏书房品牌字体。授权出处,点我查看
中文系列廻想体。https://moji-waku.com/kaiso/)
中文系列電字遊戯。https://moji-waku.com/denjiyugi/)
中文系列Mogiha用钢笔写的字体。http://ahito.com/item/desktop/font/mogihaPen/#kiyaku
中文系列KH像素字体系列。http://jikasei.me/font/kh-dotfont/)
站酷系列站酷酷黑、站酷快乐体、站酷高端黑、庆科黄油体、站酷小薇LOGO体、站酷文艺体。授权出处,点我查看
日式系列TanukiMagic 麥克筆手繪 POP。授权出处,点我查看
日式系列ラノベPOP 。授权出处,点我查看
日式系列怖い明朝体。授权出处,点我查看
日式系列暗黑恐字体。授权出处,点我查看
日式系列幻ノにじみ明朝。授权出处,点我查看
日式系列Rings Of Saturn。授权出处,点我查看
日式系列Smartfont。授权出处,点我查看
日式系列KanjyukuGothic。授权出处,点我查看
日式系列Shirokuma。授权出处,点我查看
日式系列超極細ゴシック体。授权出处,点我查看
日式系列平成最後。授权出处,点我查看
日式系列コーポレート・ロゴ(ラウンド)。https://moji-waku.com/ronde/)
日式系列トガリテ。https://moji-waku.com/pigmo/)
日式系列マメロン。https://moji-waku.com/mamelon/)
日式系列マキナス 4 シリーズ。https://moji-waku.com/makinas/)
日式系列ピグモ。https://moji-waku.com/pigmo01/)
日式系列Karakaze。https://enuoka.booth.pm/items/1219316
851系列851手写杂体。授权出处,点我查看
851系列851 mkpop。授权出处,点我查看
851系列851 letrogopage。授权出处,点我查看
851系列851 テガキカクット。授权出处,点我查看
851系列851 Chikuru Yoku。授权出处,点我查看
851系列851 チカラヨワク。授权出处,点我查看
851系列851 ゴチカクット。授权出处,点我查看
手写系列濑户字体。授权出处,点我查看
手写系列沐瑶软笔手写体。授权出处,点我查看
手写系列杨任东竹石体。授权出处,点我查看
手写系列包图小白体。授权出处,点我查看
手写系列手写体。授权出处,点我查看
手写系列贤二体。授权出处,点我查看
手写系列清松手寫體。授权出处,点我查看
手写系列台北黑体。授权出处,点我查看
刻石錄系列刻石錄顏體、刻石錄鋼筆鶴體、刻石錄明體
授权出处,点我查看
台湾教育部系列台湾教育部标准楷书
授权出处,点我查看
台湾教育部系列台湾教育部标准宋体
授权出处,点我查看
台湾教育部系列台湾教育部国字隶书
授权出处,点我查看
台湾教育部系列全字库正宋體、全字库正楷體
授权出处,点我查看
王汉宗系列免费字体:细明、超明、细黑、特黑、颜体、酷俪海报、正海报、钢笔行楷、超黑俏皮动物、中明注音体、中明破音字、中楷注音体、中楷破音字、中魏碑简体、细新宋简体
授权出处,点我查看
文泉驿系列文泉驿正黑体、文泉驿微米黑、文泉驿点阵宋体(此宋体无Win版本…)
授权出处,点我查看
阿里系列阿里巴巴普惠体。授权出处,点我查看
阿里系列阿里汉仪智能黑体(仅阿里平台免费商用)。授权出处,点我查看
45款华康字体(仅阿里平台免费商用)华康布丁体、华康彩带体 、华康儿风体、华康方圆体、华康钢笔体、华康海报体、华康手札体、华康手札体、华康翩翩体、华康黑体 、华康金文体、华康楷体、华康勘亭流、华康俪金黑、华康隶书体、华康龙门石碑、华康墨字体、华康POP1体、华康POP2体、华康POP3体、华康少女文字、华康饰艺体、华康瘦金体、华康标题宋、华康宋体、华康唐风隶、华康娃娃体、华康魏碑、华康正颜楷体、华康雅宋体、华康雅艺体、华康圆体、华康新综艺体
授权出处,点我查看
汉仪系列18款汉仪字体(仅京东平台免费使用)
汉仪中黑(简/繁)、汉仪细简黑(简)、汉仪中简黑(简)、汉仪楷体(简/繁)、汉仪书宋一(简)、汉仪书宋二(繁)、汉仪粗仿宋(简)、汉仪水滴体(简/繁)、汉仪珍珠隶(简/繁)
授权出处,点我查看
白舟書体四季词这款字体共28款,分春夏秋冬四季,很漂亮。但只能在用于节日庆祝的创作上。想免费商用的需要发邮件联系
授权出处,点我查看
其他寒蝉手拙体。 授权出处,点我查看
其他卓健橄榄简体。授权出处,点我查看
其他康康体。授权出处,点我查看
其他令东齐汲体。授权出处,点我查看
其他阿朱泡泡字。授权出处,点我查看
其他马善政毛笔楷书。授权出处,点我查看
其他小杉。授权出处,点我查看
其他钟齐志莽行书。授权出处,点我查看
其他钟齐流江毛草。授权出处,点我查看
其他英椎楷書。授权出处,点我查看
其他英椎行書。授权出处,点我查看
其他衡山毛筆フォント。授权出处,点我查看
其他青柳疎石フォント。授权出处,点我查看
其他青柳衡山フォントT。授权出处,点我查看
其他衡山毛筆フォント草書。授权出处,点我查看
其他中文像素字体。授权出处,点我查看
其他香港民間字集。授权出处,点我查看
其他有爱魔兽黑体。授权出处,点我查看
其他有爱魔兽锐方。授权出处,点我查看
其他有爱魔兽圆体。授权出处,点我查看
其他有爱圆体。授权出处,点我查看
其他自由香港楷書。授权出处,点我查看
其他jf open 粉圓字型。授权出处,点我查看
其他思源屏显臻宋.授权出处,点我查看

(2) 将字体放到你博客的相关目录,理论上哪里都可以,但是要注意引入路径。

比如我偷偷将崔建博客hl.ttf字体 ( 江西拙楷体 ) 扒过来了(嘿嘿~ 千万不要告诉他)
我放在工作目录下的 /source/box/font/ 文件夹内,即文件路径为 /source/box/font/hl.ttf ,如果你要用多种字体可以在font目录统一存放。

(3) 添加引入和使用

找到主题文件夹下的 my.css 文件,路径为 /themes/matery/source/css/my.css ,在文件末尾添加下面的代码

@font-face{
    font-family: 'hl';
    src: url('../box/font/hl.ttf');
}

/** 表示全局使用,如果不想全局使用不要添加该段 */
body{
    font-family: 'hl';
}


/* 可以局部使用,建议添加 */
.diyFont{
    font-family: 'hl';
}

在你想要使用的元素的 class 里面加上 diyFont 即可。

  • 直接使用

    F12,找到对应的代码片段即可:

<span class="logo-span diyFont">张小菜苔</span>
  • 模板使用

    找到对应的模板 header.ejs中的代码片段使用即可:

<span class="logo-span diyFont"><%= config.title %></span>

如果有其他问题欢迎留言或邮件提问

QQ:970175021
Email:small-rose@qq.com


相关文章



版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 Small-Rose / 张小菜 !
评论
  目录