Cutie
介绍
Cutie 是一个 Hexo 主题。本主题由 Yurchiu 制作，外观借鉴了 handsome 主题，部分代码借鉴自 mkBlog。本主题可在 Github 获取。
本主题依赖一些插件。请务必先看本文档，否则无法部署成功。
本主题已处于开发结束阶段，不接受新的功能建议。若有 Bug、优化需求等，可 Issue、PR 或在 https://yz-hs.github.io/somepage/chat/ 留言。
特点
- 自适应。
- 支持三个第三方评论平台（Gitalk，Livere，Giscus）。
- 几种配色（
std、white、night，本 Blog 使用white配色）与三种特殊样式。 - 中英文支持。
- Pjax 支持。
- 其他的许多特性！
Todo List
在未来支持 Valine 评论。
在未来优化整体框架。
首次使用
Dependencies
“RSS”依赖
hexo-generator-feed插件来运行。 请运行npm install hexo-generator-feed。“wordcount”依赖
hexo-wordcount插件来运行。 请运行npm i hexo-wordcount --save。“blog-encrypt”依赖
hexo-blog-encrypt插件来运行。 请运行npm install --save hexo-blog-encrypt。“Search”依赖
hexo-generator-search。请运行npm install hexo-generator-search --save。其使用方法，参见 https://github.com/wzpan/hexo-generator-search。search.xml模板在插件目录里。设置站内搜索页的方法是：在 front-matter 加上
layout: search。数学公式的依赖见下文。
推荐安装插件：
hexo-neathexo-generator-sitemaphexo-butterfly-tag-plugins-plus。
数学公式
本主题不内置对数学公式的支持。请按照以下方法来支持数学公式：
Git bash 运行：
npm un hexo-math --save
npm un hexo-renderer-markdown --save
npm i hexo-renderer-markdown-it-plus --save
npm i @neilsustc/markdown-it-katex --save
在博客配置文件写入：
markdown_it_plus:
render:
html: true
xhtmlOut: false
breaks: true
linkify: true
typographer: true
quotes: '“”‘’'
plugins:
- "@neilsustc/markdown-it-katex"
anchors:
level: 2
collisionSuffix: 'v'
permalink: true
permalinkClass: header-anchor
permalinkSide: 'left'
permalinkSymbol: ¶
添加文章置顶
方法一
请在 path-to-your-blog/node_modules/hexo-generator-index/lib/generator.js 的合适位置添加如下代码：
posts.data = posts.data.sort(function(a, b) {
if(a.top && b.top) {
if(a.top == b.top) return b.date - a.date;
else return b.top - a.top;
}
else if(a.top && !b.top) {
return -1;
}
else if(!a.top && b.top) {
return 1;
}
else return b.date - a.date;
});
如代码所示，“文章置顶” 原理是按照文章的 top 值排序，并加上 “置顶” 标签。
方法二
卸载系统自带的排序插件：
npm uninstall hexo-generator-index
添加替代插件：
npm install hexo-generator-index-pin-top --save
同样按照文章 top 值排序。
页面配置
Tags/Categories
设置“标签页面”或“分类页面”的方法是：在 front-matter 加上 layout: tags/categories。
Search
本主题支持两种搜索方式：站内搜索和站外搜索。
添加“搜索页面”方法：新建一个 page，在 front-matter 加上 layout: search。依赖 hexo-generator-search。
这里的站外搜索使用必应搜索。对于其他搜索引擎，可以自己更改。
Setting
本主题支持“设置页面”，供访者自主设置主题样式、特殊效果等。
添加“设置页面”方法：新建一个 page，在 front-matter 加上 layout: setting。
请注意：填入 search.xml 的链接时，一定要加上 config.root。
Mood
本主题支持“说说页面”。
添加“设置页面”方法：新建一个 page，添加如下代码：
<script>
$(function(){$("info").prepend("<i class='fa fa-clock-o'></i> ");});
</script>
<ul class="mood-list">
<li><!-- 头像，使用 img 标签 -->"<text><inner>
<!-- 说说内容 -->
<info><!-- 说说发表时间 --></info></inner></text></li>
...<!-- 不断重复第 7-9 行 -->
</ul>
404 page
在博客配置文件写入：
skip_render:
- '404.html'
之后，把主题文件夹下的 _doc/404.html 置入博客 source 文件夹下（不是主题的 source 文件夹）。
或者，创建新 page 作为 404 页面。在 front-matter 写入 permalink: /404.html。
其他
Front-matter
本主题可设置如下 front-matter：
discomments: true——是否禁止评论。top: [number]——设置文章排列优先级。注意，参看“添加文章置顶”部分来获取启用方式。author: [list/array of string]——设置作者（支持多作者）。默认为博客根目录中config_.yml中的内容。
下面是关于文章卡片的。文章卡片指在首页显示的含文章摘要的文本框。设置了背景图片，称为图片文章卡片；否则称为文字文章卡片。
图片文章卡片：
bgimg: /path/to/your/pic.img——设置文章卡片背景图片。height: [string]——设定文章卡片高度（数字+单位）。默认30em，亦可在_config.yml修改默认值。
文字文章卡片：
faname: [string]——设置文章卡片的 Font Awesome 图标。默认是fa-file-text-o。disfa: true——禁用文章卡片的 Font Awesome 图标。
注意：bgimg 和 faname 冲突。bgimg 优先。
禁用 Devtools
在需禁用 Devtools 的页面加入如下代码：
<script src="/js/devtools.js"></script>
功能：
- 当使用 Devtools 时，跳转网页；
- 禁止右键，禁止选中文本。
Custom
为了避免自主修改主题源码造成的麻烦，自定义 css 及 js 时，可以在 /source/custom 文件夹下自主添加所需要的 css 和 js 代码。
主题只会引用其中的 custom.css 和 custom.js。
短代码效果
理论上 Bootstrap5 中的所有都可以使用。另外，本主题还包括下面的一些东西。
混乱文字
代码
<div class="chaffle" data-lang="zh">“她好可爱啊！”</div>
效果
展开折叠
代码
<details>
<summary>请点击</summary>
<p>就算风吹散了冰雪，想念也会留存下来。<br />鼠标点击会展开此内容。</p>
</details>
防止混淆的文字。
效果
请点击
就算风吹散了冰雪，想念也会留存下来。
鼠标点击会展开此内容。
防止混淆的文字。
黑幕类
代码
提示：<shady title="你知道的太多了">就算风吹散了冰雪，想念也会留存下来。鼠标移在此上会显示此内容</shady>。仿自：[萌娘百科](https://zh.moegirl.org.cn/)。
由于本句话被高度加密，即使使用小刀或者<black title="你不知道的太多了">除了被选中</black>也无法划开屏幕上的部分黑幕。
提示：<blur>没错，你近视了。</blur><invsb>以至于你都看不见这句话。</invsb>
<blur>
<fieldset>
<legend>温馨提示</legend>
你需要换眼镜。请立即赶往附近的眼镜店。
</fieldset>
</blur>
<invsb><div class="text-alert danger"><i class="fa fa-info-circle"></i>不用换眼镜了。你已经看不见了。</div></invsb>
效果
提示：
由于本句话被高度加密，即使使用小刀或者
提示：
提示框
代码
<fieldset>
<legend>温馨提示</legend>
<p>提示点什么好呢？让我想想……</p>
</fieldset>
效果
分栏
代码
html（建议不要复制这个）:
<div class="tab-page">
<div class="tabTitle">
<ul>
<li class="current">默认</li>
<li>文字</li>
<li>其他</li>
</ul>
</div>
<div class="tabContent">
<div>
请在 `tabTitle` 的第一个的 `li` 标签加上 `current` 类，除了 `tabContent` 的第一个 `div` 标签都加 `hide` 类。
你可以加不止三个标签。不过太长会溢出。
以下是代码纯净版（建议复制这个）：
```html
<div class="tab-page">
<div class="tabTitle">
<ul>
<li class="current"></li>
<li></li>
<li></li>
</ul>
</div>
<div class="tabContent">
<div></div>
<div class="hide"></div>
<div class="hide"></div>
</div>
</div>
```
</div><div class="hide">
You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!
</div><div class="hide">
<details>
<summary>请点击</summary>
就算风吹散了冰雪，想念也会留存下来。
</details>
另一温馨提示：<shady title="你知道的太多了">是的，在标签页中也可加入HTML元素！</shady>
</div></div></div>
javascript:
$(function(){
var ali = $('tabTitle>ul>li');
var aDiv = $('tabContent>div');
var timeId = null;
ali.click(function(){
var _this = $(this);
timeId = setTimeout(function(){
_this.addClass('current').siblings().removeClass('current');
var index = _this.index();
aDiv.eq(index).show().siblings().hide();
});
});
});
效果
- 默认
- 文字
- 其他
你可以加不止三个标签。不过太长会溢出。
以下是代码纯净版（建议复制这个）：
<div class="tab-page">
<div class="tabTitle">
<ul>
<li class="current"></li>
<li></li>
<li></li>
</ul>
</div>
<div class="tabContent">
<div></div>
<div class="hide"></div>
<div class="hide"></div>
</div>
</div>
You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!You AK IOI!
请点击
就算风吹散了冰雪，想念也会留存下来。
另一温馨提示：
标签
代码
请在 `tabTitle` 的<tag>第一个</tag>的 `li` 标签加上 `current` 类，除了 `tabContent` 的第一个 `div` 标签都加 `hide` 类。
你可以加<tag>不止三个</tag>标签。不过太长会<tag style="background: orange">溢出</tag>。
`tag` 自动轮换四种背景色，当然也可以自己指定。
效果
请在 tabTitle 的li 标签加上 current 类，除了 tabContent 的第一个 div 标签都加 hide 类。
你可以加
tag 自动轮换四种背景色，当然也可以自己指定。
小号文字
代码
温馨提示：提示点什么好呢<small>真的没有可提示的,,,</small>
效果
温馨提示：提示点什么好呢真的没有可提示的,
字幕
代码
<!--滚动方向 direction 4个值 up down left right 默认从右向左-->
<marquee direction="up">我向上滚动</marquee>
<!--3个值 scroll-循环滚动 slide-只滚动一次 alternate-来回滚动 默认循环滚动-->
<marquee behavior="slide">我只滚动一次</marquee>
<!--值越大，滚动速度越快 一般5-10比较适宜消息观看-->
<marquee scrollamount="20">我是速度为20的滚动</marquee>
<!--值越大，滚动速度越慢，通常不设置-->
<marquee scrolldelay="110">我延迟滚动</marquee>
<!-- 默认值-1或infinite 表示无限循环滚动 loop="数值" 表示滚动相应的次数-->
<marquee loop="2">我是loop循环滚动</marquee>
<!--宽100px 高90px 背景色为#f5f5f5的滚动区域-->
<marquee width="100" height="90" bgcolor="#f5f5f5" >
<p>我是滚动1</p>
<p>我是滚动2</p>
<p>我是滚动3</p>
</marquee>
<!--滚动空间 hspace-水平边距 vspace-垂直边距-->
<marquee width="50" hspace="20" vspace="10" >
<p>我是滚动1</p>
<p>我是滚动2</p>
<p>我是滚动3</p>
</marquee>
<!--鼠标悬停，滚动停止 鼠标离开，滚动继续-->
<marquee onmouseover="this.stop()" onmouseout="this.start()">
我是滚动
</marquee>
效果
时间轴
代码
<ol class="timeline">
<li> <t>时间轴</t> </li>
<li> <b>2020/13/32</b><p>内容 1</p> </li>
<li> <b>2020/13/33</b><p>内容 2</p> </li>
</ol>
效果
时间轴 - 2020/13/32
内容 1
- 2020/13/33
内容 2
注音
代码
<ruby>
那 <rt>n</rt>
没 <rt>m</rt>
事 <rt>s</rt>
了 <rt>l</rt>
</ruby>
<ruby>
那没事了 <rt>nmsl</rt>
</ruby>
效果
那 没 事 了 那没事了 外挂标签插件 Third Party
参见 https://akilar.top/posts/615e2dec/。这里只展示效果。未列出的说明不支持，或不实用。通常会造成附近的 markdown 失效。
要想使用它，需要安装第三方插件 hexo-butterfly-tag-plugins-plus。
Yurchiu 已经很努力地尽量适配这个插件了哦！
点击查看
行内文本样式 text
- 带下划线的文本；
- 带
着重号 的文本； - 带
波浪线 的文本； - 带
删除线的文本； - 键盘样式的文本 command + D；
- 密码样式的文本：
这里没有验证码 。
行内文本 span
彩色文字
在一段话中方便插入各种颜色的标签，包括：红色、黄色、绿色、青色、蓝色、灰色。
超大号文字
Cutie A terrible Theme for Hexo段落文本 p
彩色文字
在一段话中方便插入各种颜色的标签，包括：
红色
黄色
绿色
青色
蓝色
灰色
超大号文字Cutie
A terrible Theme for Hexo
复选列表 checkbox
纯文本测试
支持简单的 markdown 语法
支持自定义颜色
绿色 + 默认选中
黄色 + 默认选中
青色 + 默认选中
蓝色 + 默认选中
增加
减少
叉
折叠框 folding
查看图片测试
查看默认打开的折叠框
这是一个默认打开的折叠框。
查看代码测试
貌似内部的代码不能正确换行。
posts.data = posts.data.sort(function(a, b) { if(a.top && b.top) { if(a.top == b.top) return b.date - a.date; else return b.top - a.top; } else if(a.top && !b.top) { return -1; } else if(!a.top && b.top) { return 1; } else return b.date - a.date;});查看列表测试
- haha
- hehe
查看嵌套测试
查看嵌套测试2
查看嵌套测试3
hahaha 
链接卡片 link
进度条 progress
文字不能太长。诗词标签 poem
丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。
明月几时有？把酒问青天。
不知天上宫阙，今夕是何年？
我欲乘风归去，又恐琼楼玉宇，高处不胜寒。
起舞弄清影，何似在人间？
转朱阁，低绮户，照无眠。
不应有恨，何事长向别时圆？
人有悲欢离合，月有阴晴圆缺，此事古难全。
但愿人长久，千里共婵娟。
气泡注释 bubble
最近我学到了不少新玩意儿（虽然对很多大佬来说这些已经是旧技术了），比如CSS的兄弟相邻选择器例如 h1 + p {margin-top:50px;}，Flex 布局Flex 是 Flexible Box 的缩写，意为弹性布局"，用来为盒状模型提供最大的灵活性"，transform 变换transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。，animation 的贝塞尔速度曲线贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋写法，还有今天刚看到的 clip-pathclip-path 属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。 属性。这些对我来说很新颖的概念狠狠的冲击着我以前积累起来的设计思路。附注
- 推荐在文件
path-to-your-blog/_config.yml中将 per_page 设置为 0。 - 为防止喧宾夺主，本主题不再提供博客美化 js。
- 如果一个页面中使用多个“标签页”，应使用 id 标注。例：
- 测试
- 文字
- 留空
- 嵌套
- 可以
- 再次嵌套
本文作者：Yurchiu
本文链接：https://yz-hs.github.io/39e4c172e542/
版权声明：本博客中所有原创文章除特别声明外，均允许规范转载，转载请注明出处。所有非原创文章，按照原作者要求转载。
