“逐光者-薪炎”企划

“源计划-重启逐光者-薪炎”企划

逐光者-薪炎，主题代号 hikari，简写 HKR

整体设计风格

动画尽量避免多段构造，形式保证简洁。编写动画时多采用transform、opacity的属性，尽量避免会触发重绘的属性。用 transform 代替 left、right 这些属性来实现位移变换能优化性能。
配色取曙光色的主基调，集中在一个配色文件内，白天模式以卡其色背景和黑灰白线条为主，红黄三色点缀，夜间模式以黑色背景和灰白线条为主，蓝绿两色点缀。
昼夜模式背景切换沿用“源计划-方舟”原理。
背景图片尽量找线稿、蓝图、电路等风格的背景图片，或者直接纯色背景。
主题素材尝试以固定比例用svg图片，局部变换的采用clip-path的形式。或者切割为四角，中间用边框，四角用背景图片。
使用clip-path切割素材时，尽量切割伪类素材，而不是素材本身。避免正文内容被切割。
对手机端适配，考虑到性能问题，非文章信息直接disable。版块仅保留基本图形，边框底纹等都移除。
避免使用filter属性。以渐变色代替blur。
减少对在线API的依赖，避免因为第三方在线API的失效导致的后续维护。如天气、日历、IP、githubcalendar等，尽量避免使用，或者以返回值判断是否加载该版块。对于天气、日历、IP等小版块，在API失效的情况下，可以通过本地配置的图片或文字信息来显示缺省值。
字体文件仅用于英文字母、数字，如电子钟信息。其他使用默认字体。

首页

标题

标题沿用艺术字实现原理，昼夜不同色。

主菜单

主菜单沿用“源计划-方舟”的理念，以驾驶舱代替原本的顶栏菜单。
顶栏底栏版块，用驾驶舱主菜单的首尾部分常驻。
备案号和版号在底部以钢印或徽标风格常驻左下角，手机端仅保留备案号，常驻底栏正中间。
各技术框架（如hexo、theme、cdn等）以轮播形式显示在驾驶舱中，手机端不展示。
网站存续时间和当前时间以电子钟形式显示在顶栏，常规显示电子钟，悬停显示网站存续时间。
常驻四个按钮，左上角显示最新评论面板，右上角为搜索框。左下角和右下角为多功能按钮，通过轮播图展示，或者滑动，参考汽车的多功能方向盘。左下角做成侧栏卡片的触发按钮，右下角做成原侧边栏的按钮。
驾驶舱启动触发，通过添加eventListener监测对应class，方便复用。

搜索栏

搜索版块在驾驶舱中打开。是否添加暗色遮罩层看具体效果。
搜索结果，电脑端搜索框以狙击镜样式体现，搜索结果以弹窗形式展示，通过fixed定位，左右随机排布。手机端去除特效，仅做颜色适配。

侧栏

侧栏卡片顶部底部用svg做电路效果线边框。中间部分添加左右边框，形似嵌入。
手机端沿用“源计划-方舟”的设计理念，常态隐藏侧栏卡片。提供部分侧栏卡片的按钮。
侧栏卡片按钮可联动驾驶舱多功能按钮。
重写侧栏卡片时，需要注意sticky属性的适配，确保侧栏吸附效果。

打赏榜单

打赏榜单以侧栏卡片样式展示。
下方展示打赏按钮，点击后弹窗展示打赏二维码。
内容包含打赏人、打赏金额、打赏日期（角标形式）、打赏途径（图标形式）

侧栏按钮

侧栏按钮移至主菜单，详见“主菜单”设计章节。

轮播图

参考现有的轮播图效果。
电脑端左侧加分类卡片纵向排列分项，可纵向滚动。手机端下方加分类卡片横向排列，可横向滚动。

首页文章卡片

文章卡片沿用“源计划-方舟”的设计语言，绘制动画时，注意不要使用会导致重排的css属性。
电脑端横向布局，将每个文章卡片看做一个显示屏，主体只显示文章标题、封面、文章新建时间、更新时间，提供四个按钮，搭配clip-path和opacity，在标题加时间、分类、标签、描述等不同信息的切换。点击域分布：点击文章标题、描述两个卡片任意位置可跳转至正文。
手机端纵向布局，参考“源计划-方舟”友链卡片设计语言。常态仅显示文章标题和文章更新时间，悬停后可以切换至新建时间，点击后主体闸门开启，显示文章描述。点击域分布：点击文章标题、描述两个卡片任意位置可跳转至正文。
编写eventListener，闸门开启后通过打字形式输出描述。
支持电脑端显示手机端卡片，实现双栏、三栏甚至四栏布局。通过配置项自主开启。
设计闸门效果时，可以考虑添加齿轮形状的svg素材。添加旋转动效。

页面

时间轴页面

沿用“源计划-方舟”的设计理念，以编年史的形式存放。
提供按钮，自主选择横向还是纵向布局。
通过添加差异化class，奇偶数分上下或左右排列。

留言板页面

留言板与友链页面合并，仅展示友链页面。
添加弹幕开关，研究一下twikoo的评论api。（待定，记得dorakika有说过性能不是很好）
居中以布告栏显示有多少条评论。
评论框电脑端提供边框，区分左右，手机端仅半透明纯色背景，单侧排列。

分类卡片和分类页面

弃用原有的分类页面。具体设计详见“轮播图”。
弃用分类卡片封面的设计，仅展示分类名、简介描述、文章数量。

标签卡片和标签页面

标签沿用“源计划-方舟”样式，通过SVG制作边框，文本内容沿用当前设计效果。

友链朋友圈

友链朋友圈待定，看能不能联动在线友链添加。

404页面

体现空驾驶舱，等边三角形效果warning标志飘动，点击warning返回首页。

友链

友链分三种类型。第一种，在最大边框内通过轮播图展示精品友链，内容包含站点预览图，用户头像，站点名称，用户座右铭，博主印象（长文本），参考名片形式。第二种，在下方展示站点卡片，内容包含站点预览图，用户头像，站点名，用户座右铭，样式参考“源计划-方舟”友链卡片。第三种，以类似侧栏形式展示，提供一个展示视窗，一个搜索框，一个通讯录列表。通过点击通讯录或者搜索对应内容，获取到相应友链。
点击域，带遮罩层的，遮罩层本身不添加点击域，仅点击隐藏内容后才跳转。
手机端：第一种友链形式直接隐藏；第二种友链常驻，做下宽度适配；第三种友链形式置顶。

正文

正文文字及配图风格

整体风格以齿轮、蓝图、线稿、电路等为关键词。尽量以点线面结合的风格。

外挂标签

全面弃用现有外挂标签。
重写note、folding、timeline等几个常用外挂标签。
新写外挂标签，看到一个写一个，以后的更新以外挂标签为主。
参考hexo-theme-stellar和hexo-theme-trefoil的标签封装形式。不用在意参数顺序。

仿IDE样式代码块

分两套代码版块。一个放文件树，一个放对应的代码块。支持文件树一键展开成全屏，样式参考IDE。展开后文件树支持侧边伸缩。

文件树外挂标签，参考折叠框实现缩进，代码提供锚点，对应代码块，代码块分三种形式，删除（红），新建（绿），修改（黄）。仅添加锚点链接后才会跳转到对应的代码块。

{% ide id:编辑器唯一标识符 %}
    {% idefold name:目录名称 %}
        {% ideunit name:文件名称 anchor:锚点标识符 style:[add,del,mod]%}
        {% ideunit name:文件名称 anchor:锚点标识符 style:[add,del,mod]%}
        {% ideunit name:文件名称 anchor:锚点标识符 style:[add,del,mod]%}
    {% endidefold %}
{% endide %}

代码块外挂标签，直接嵌套在对应的代码块外，常态正常显示。提供一个全屏展开按钮。锚点对应上方ideunit标签的anchor。
1
2
3
4
5
{% codeunit name:文件名称 anchor:锚点标识符 style:[add,del,mod] %}
```code
text area
```
{% endcodeunit %}