搜索

欢迎

 字数 5.6k 

欢迎访问akbcd博客
您可以点击所有文章中的搜索图标进行关键字搜索

以下内容为博客yilia主题的操作日志

20240120

本主题已经放置在gitee上，需要的可以去下载~
https://gitee.com/akbcd/hexo-theme-yilia

20230107

  • yilia主题
    • 打赏样式修改，删除left: 50%;
    • 语言文件追加打赏相关配置

20221112

  • yilia主题
    • main.js
      • 启用代码块扩展时，修改代码块扩展highlight-tools 标签圆角样式

20221023

  • yilia主题
    • main.css
      • 代码区块样式修改：追加边框 border ，删除highlight-pre相关样式
    • main.js
      • 启用代码块扩展时，修改代码块扩展div标签相邻pre或table标签圆角样式
      • 代码块渲染工具非highlight的场合，追加的figure标签的class与highlight保持一致

修改前：代码块渲染工具非highlight的场合，追加的figure标签的class为highlight-pre，当时为了解决渲染工具prismjs行号与代码块无法对其的问题，特意追加区分，目前问题已解决。

20220924

  • yilia主题
    • 代码块样式修改
      • highlight 行号添加右框线，与 prismjs 行号保持一致
      • 隐藏代码块按钮位置样式微调
      • 代码块高亮
    • 记录文章页面当前位置修改
      • 跳转前判断页面是否已滚动，已滚动则不再跳转（适用于页面载入很慢的情况）
    • js代理a标签默认锚点跳转，适用于a标签href以#开头的情况
    • 移动端顶部 nav 标签滚动动画修改
      • 定位top的值：(limit || nowTop) + 'px' → limit + 'px'
      • 定位left的值：nowLeft + 'px' → 0
      • 页面载入后，执行一次此动画，解决刷新页面 nav 标签可能消失的情况

记录一下此次修改 记录文章页面当前位置 所遇到的问题：
记录文章页面当前位置 和 目录优化 写在一个方法里，目录优化 中包含return语句（不是循环调用中的return），并且 目录优化 的代码先执行。当先执行的代码执行return后，return下面的代码不会执行，导致 记录文章页面当前位置 没有生效。

1
2
3
4
5
6
7
if(true){
    // 先执行
    return
}
if(true){
    // 上面if中的return执行后，此if不会执行
}

20220918

  • yilia主题
    • 新增代码块扩展 支持隐藏代码块和显示代码块语言，主题配置文件相关选项追加
    • 代码块样式修改，适配代码块扩展
    • 删除残留版权提示样式代码 2020年9月23日

添加代码块扩展的起因是想给主题加一个代码块隐藏的功能，因为代码块隐藏的功能大部分主题都有，追加的意义很大。
本次添加的代码块扩展主要是参考hexo主题 hexo-theme-butterfly，怎么说呢，已经参考很多遍了，以后遇到我认为有用的功能，都会参考别的主题加上，自己由无到有没有那个精力，暂时也没有那个能力。
参照的主题兼容了两种代码高亮的情况，highlight.js 与 prismjs 。本次在此兼容的基础上，追加了两种均不启用的情况，其实与 prismjs 类似，这种情况在hexo官方文档里有说明，准备写一篇文章，记录一下自己追加这项功能所采过的坑。 butterfly 主题还有一个代码块超过指定高度隐藏的功能，没有添加。
这次的样式改动算是很明显了，代码块的背景颜色由黑色变为灰色，与参照主题一致。

20220831

  • yilia主题
    • 目录优化（anchor多次调用接口）
    • 返回顶部按钮 setTimeout() 无法停止计时的bug

本次目录优化，为避免继续踩坑，参照hexo主题 hexo-theme-butterfly 重新修改了一遍，再次感谢。

20220828

这次的更新可以说是很有意义：主题使用的jquery去掉了

  • yilia主题
    • 目录优化（去jQuery）
    • 目录相关样式修改（css）
    • 删除jsdelivr相关代码
    • mathjax判断逻辑修改（全局开启的前提下，仍需要在渲染的文章的Front-matter中再加上mathjax: true才行）

20220820~20220821

  • yilia主题
    • 添加waline评论
    • 代码规范性修改：div中引入的style标签统一移入到head标签中
    • 部分样式微调
    • 文章页表格追加允许换行（20220821）

20220730

  • yilia主题
    • category.ejs 修改，删除url多余的/
    • 主题配置文件 _config.yml 布局修改

LeanCloud国际版发邮件说：8月1日起关闭国际共享域名对中国大陆的服务，先观察一下

20220526~20220601

  • 20220601
    • 更新文章转载html结构
  • 20220528更新
    • 目录样式优化
    • 返回顶部按钮层级调整
    • 文章记录位置跳转优化
  • yilia主题
    1. 有序、无序标签样式修改
    2. 一级标题~六级标题样式修改
    3. 返回顶部按钮样式微调
    4. mobile页面滚动动画微调
    5. 替换jsdelivr加速

笔记：
主题自带有序标签样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
ol {
    list-style: none outside none
}
/* 有序标签计数初始化 */
.article-entry ol {
    counter-reset: item
}
/* 有序标签样式 */
.article-entry ol li:before {
    counter-increment: item;
    content: counter(item) ".";
    margin-right: 10px
}

因排序问题，改成了浏览器默认的，简单调了一下样式：

1
2
3
4
5
/* 有序标签样式 */
.article-entry ol {
    list-style-type: decimal;
    padding-left: 20px
}

20220504~20220509

  • yilia主题
    • 修复文章页jsdelivr加速可能出现的错误
    • button标签追加属性：type=”button”

如果文章页引用的静态资源（视频、音乐、图片）已经手动通过jsdelivr加速，则开启jsdelivr加速时，会遇到错误。

20220430

  • yilia主题
    • source/js/min文件夹删除
    • 修复pc页面aplayer播放器文字居中显示

此次删除min文件夹只是为了简化压缩js，因为大多数js、css压缩工具的默认输出路径均为当前路径。

2022年4月10日

  • yilia主题
    • 基于valine上的长评论，添加评论框字数限制500。
    • 隐藏了火狐浏览器点击所有文章时所出现的滚动条，与webkit内核浏览器保持一致。

2022年3月5日

  • yilia主题
    • 解决浏览器控制台：id attribute value must be unique 的问题，涉及id如下：
      article-content、header、js-jump-container、js-btn-copy
      关联js和css已做修改
    • 解决主题在归档、随笔等页面不显示返回顶部按钮的问题，点击所有文章后右边页面颜色没有正常改变的问题

想说的话：
本次的修改主要来自于控制台的警告错误。页面id必须是唯一的，这是html开发规范，应当禁止相同id重复使用。首先先说一下article-content和js-jump-container这两个id，这两个是在主页面才出现的警告。原因也很简单，yilia主题主页面会显示所有要显示的文章，这就导致了这两个id出现重复，单独进入指定文章时，这两个id是唯一的。解决办法就是将article-content换为class，因为没有对应的css，更改涉及到的js即可。对于js-jump-container则涉及到了其他问题，返回顶部按钮默认是导入到文章页里面的，与article-content问题类似，但是在归档、随笔等页面时，文章显示结构不同，导致返回顶部按钮没有导入。因为返回顶部按钮与目录绑定在一起的原因，无法将其导入其他位置。解决办法就是将返回顶部按钮在与article标签同级导入，原有导入方式设置为只在非index页导入，共计导入两次，并且在aside.ejs文件中添加逻辑，防止重复导入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!--article.ejs文件-->
<!-- 略 -->
<% if (!index){ %>
  <%- partial('post/nav') %>
  <!--非index页面导入，防止与layout.ejs文件重复导入-->
  <%- partial('_partial/aside') %>
  <!--导入结束-->
<% } %>
<!-- 略 -->
<!--layout.ejs文件-->
<!-- 略 -->
<div id="wrapper" class="body-wrap">
    <div class="menu-l">
        <div class="canvas-wrap">
        <canvas data-colors="#eaeaea" data-sectionHeight="100" data-contentId="js-content" id="myCanvas1" class="anm-canvas"></canvas>
        </div>
        <div id="js-content" class="content-ll">
        <%- body %>
        <!-- 追加部分 -->
        <%- partial('_partial/aside', {index: true}) %>
        <!-- 结束 -->
        </div>
    </div>
</div>
<!-- 略 -->

修改后的aside.ejs文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- 如果不是文章页，只导入返回顶部按钮 -->
<% if (!(is_post()) && theme.top){ %>
<aside class="wrap-side-operation">
  <div class="mod-side-operation">
    <div class="jump-container" id="js-jump-container" style="display:none;">
      <a style="cursor:pointer" class="mod-side-operation__jump-to-top">
        <i class="icon-font icon-back"></i>
      </a>
    </div>
  </div>
</aside>
<!-- 文章页，保持原有导入不变 -->
<% } else if (!index){ %>
<aside class="wrap-side-operation">
  <div class="mod-side-operation">
    <% if (theme.top){ %>
    <div class="jump-container" id="js-jump-container" style="display:none;">
      <a style="cursor:pointer" class="mod-side-operation__jump-to-top">
        <i class="icon-font icon-back"></i>
      </a>
    </div>
    <% } %>
    <% if (!index && ((theme.toc === 1 && post.toc) || theme.toc === 2)){ %>
      <%- partial('post/toc') %>
    <% } %>
  </div>
</aside>
<% } %>

header不唯一的问题，将id=”header”更改为class=”header-inner”，对应了很多css，将#header替换为.header-inner即可。查询影响时，发现了一个主题没有使用的ejs文件：header.ejs，已经删除。
对于js-btn-copy，这个是我自己后加的功能，当时考虑不够全面，解决方法就是直接更改为class，同步修改css和js。
对于点击所有文章后右边页面颜色没有正常改变的问题，这个是无意中发现的，增加了css的样式设定。

2022年2月13日

  • yilia主题
    • 对主题部分样式进行微调

补充：
本次改动的css集中在main.css和mobile.css文件。
main.css中，移除了不支持的属性：color: highlight-comment，共计两个位置。*vertical-align: auto和*display: inline一并被删除，这应该是之前就注释掉的属性。
其次就是样式微调，涉及的部分是所有文章弹出之后的样式。
css选择器.tools-col.show中添加width属性，pc为360px，mobile为300px。
.tools-col .tools-section,.tools-col .tools-wrap中删除width: 360px。
.article-header修改padding-left: 7.6923% => 6.8709%，显示结果表现为文章标题与文章内容对其显示。
至于mobile.css中，只是将.tools-col改为.tools-col,.tools-col.show，实现mobile的300px。
这次的更改源自于浏览器控制台的警告，改着改着便发现了之前存在的问题。

2021年12月12日

  • yilia主题js文件修改【main.js】、【slider.js】
    • 修改js获取网页宽度代码：window.screen.width<800 => document.body.clientWidth<=800
    • 修改js判断浏览器是否为移动端：mobile: !!u.match(/AppleWebKit.*Mobile.*/) => mobile: !!u.match(/Mobile/)

2021年11月7日

  • yilia主题
    • 更改主题样式文件，将mobile端样式放置mobile文件夹中
    • 删除【clipboard.css】，内容拆分至mobile.css和main.css中
    • 主题配置文件修改

2021年10月30日

  • yilia主题
    • 优化【slider.js】，将photoswipe（图片查看器）相关js放置指定路径下，不再与slider.js集成
    • 删除【script.js】，将其内容拆分至【mobile.js】和【main.js】
    • 主题配置文件修改

2021年9月18日

  • yilia主题
    • 参考yilia主题《Yilia源码目录结构及构建须知》，重新整理了一下主题所用到的js文件，主要有如下变化：
      【main.js】实现：返回顶部、分享、新窗口打开、目录序号、about me 转义
      【mobile.js】实现：页面滚动动画（自适应）
      【slider.js】实现：浏览器判断、图片查看器、气泡上浮动画等
    • 因为yilia主题使用webpack构建工具对源码进行打包压缩，发现里面出现很多无用代码，遂将无需打包代码抽出（main.js和mobile.js），将需要打包代码全部放置slider.js中。
      结果就是：【main.js】和【mobile.js】文件体积大幅缩小，代码可读性提高；【slider.js】文件体积增大。

2021年8月29日

  • yilia主题
    • 新增主题对文章 Front-Matter 菜单中的 excerpt: 设为 false 的支持，实现主题首页文章只显示标题不显示内容。
      使用方法：在文章 Front-Matter 菜单中添加excerpt: false
      效果：主题首页对应文章只显示文章标题，不会显示文章具体内容，文章具体内容只在文章页显示。

2021年8月7日

  • yilia主题
    • 优化移动端浏览器UA（电脑）模式下的动画显示，不判断浏览器UA是否为mobile，移动端访问电脑版网页显示更好（页面布局）
    • 目录优化
    • 主题所用js（压缩）文件放入js/min文件夹中

2021年5月20日

  • yilia主题引用代码修改
    • 主题所用js文件全部放入js文件夹中
    • js文件命名规范化：采用.js与.min.js命名，css文件命名同理
  • yilia主题配置文件修改
    • aplayer播放器中，pc与mobile页面播放器单独设置

2021年3月27日

  • yilia主题优化、修改
    • 参考hexo官方文档，精简主题js、css引入方式，保留部分原始引用方式，前端注释修改为ejs注释
    • 对目录优化部分进行修改：在不引入jQuery的情况下，用js实现a标签锚点跳转，但无法实现动态目录

2021年3月22日

  • yilia主题优化、修改
    • 修改全局搜索结果显示样式
      css进行如下修改：
      1
      2
      3
      4
      5
      6
      7
      /*#js-searchResult新增如下属性
      原#js-searchModal相关属性已移除*/
      #js-searchResult {
          min-height: 50vh;
          max-height: 60vh;
          overflow: auto
      }

2021年2月12日

  • yilia主题优化、修改
    • 优化主题返回顶部按钮显示逻辑
      原效果：页面完全加载后，滚动显示返回顶部按钮
      现效果：不需要加载完毕，滚动显示返回顶部按钮

2020年12月29日

本想把目录优化部分的代码用原生js实现一下，但是发现有些难度。

  • yilia主题优化、修改：
    • 解决hexo5.0之前版本中文动态目录可能失效的问题

2020年12月6日

  • yilia主题优化、新增：
    • 优化
      • 版权声明，参考 闪烁之狐 主题文章版权声明
      • 简化jsdelivr加速文章静态资源代码
      • 部分代码更改
        • 对文章内容部分添加<div id="article-content"></div>标签
        • js中querySelectorAll(".article-entry img")获取文章img标签，更新为querySelectorAll("#article-content img")，包括jsdelivr加速文章静态资源代码
        • css样式word-wrap: break-word修改为word-break: break-word
      • 修改目录自动滚动代码
    • 新增
      • 复制文章时追加博客和作者的版权信息，实现参考 闪烁之狐 主题
      • 主题aplayer播放器开启吸底模式自动关闭标题显示

2020年11月13日

  • yilia主题优化、修改：
    • 新增记录文章页面浏览位置功能，刷新页面或重新进入文章页面时，页面自动跳转到上次浏览位置
      • 此功能需要浏览器允许cookie
      • 新增scrollPos属性，判断是否开启此功能
      • 代码实现可以参看文章 js实现页面刷新后滚动条不改变位置
    • 修改yiliaConfig相关属性赋值，对部分属性赋值添加? true : false

2020年11月3日

  • yilia主题优化、修改：
    • 解决浏览器屏蔽网站引用的第三方js导致文章加密功能失效问题

2020年10月11日

  • yilia主题优化、修改：
    • 修复移动端所有文章搜索框长度溢出问题
      1
      2
      3
      4
      5
      6
      7
      .tools-col .tools-section .search-wrap,.tools-col .tools-wrap .search-wrap {
          width: 280px
      }
      /* 修改为 */
      .tools-col .tools-section .search-wrap,.tools-col .tools-section .search-wrap .search-ipt {
          width: 280px
      }

2020年9月23日

  • yilia主题新增：
    • 版权提示（参考简书移动端页面）

2020年9月15日

  • yilia主题优化、修改：
    • mobile端适配优化（火狐浏览器）

2020年9月7日

  • yilia主题优化、修改：
    • 新增主题对文章 Front-Matter 中的 layout: 设为 false 的支持。
    • 是否在新窗口打开链接 open_in_new: 设为 true 已生效，文章在新标签页打开。

2020年8月23日、2020年8月24日

  • hexo5.0较之前版本增加了部分属性，可以对比站点配置文件
    • external_link添加enable属性，升级hexo5.0启动hexo服务会有提示
    • 升级hexo5.0版本建议更新hexo站点配置文件_config.yml
  • yilia主题适配hexo5.0：
    • 目录优化，解决hexo5.0导致目录跳转和动态目录失效问题
      • 参看文章 yilia主题目录优化
    • 暂时没有发现其它问题
  • 分享图标简单修改
    1
    2
    3
    4
    /*修改line-height属性，将26px更改为28px*/
    .share-icons a {
        line-height: 28px;
    }
  • yilia主题优化、修改：
    • 对文章加密功能进行优化
      • 关闭JavaScript依然可以访问加密文章，但添加css对文章内容进行隐藏，不过可以通过pc端浏览器控制台将其显示

2020年6月19日

新建文章：大型数据库应用复习，可以在所有文章中查看
修改aplayer播放器preload预加载属性配置，已更新到yilia主题进阶配置页面

2020年6月10日

新建文章：jsdelivr加速博客静态资源

2020年6月8日

这次对主题语言进行优化，减少之前代码，切换语言直接应用到主题
切换语言需要重启本地服务生效

文章：yilia主题目录优化

2020年6月6日

1.删除返回顶部中的jump-plan-container和矢量图标，删除无用代码
css文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/* 删除jump-plan-container样式 */
/* .jump-plan-container {
    position: absolute;
    top: -11px;
    left: -4px;
    width: 50px;
    height: 61px;
    overflow: hidden
}

.jump-plan-container .jump-plane {
    display: block;
    position: absolute;
    width: 42px;
    height: 66px;
    -webkit-transform: translateY(68px);
    transform: translateY(68px);
    left: -2px
} */

/* 删除icon-plane */
/* .icon-plane:before {
    content: "\e67e";
} */

/* 删除icon-plane */
/* .wrap-side-operation .icon-plane {
    color: #fff;
    text-shadow: 1px 1px 1px #509eb7;
    opacity: .7;
    font-size: 52px;
    line-height: 40px;
    width: 40px;
    text-align: center;
    display: block
} */
/* 删除.icon-back:hover样式 */
/* .mod-side-operation__jump-to-top .icon-back:hover {
    background: #24c1f6;
    color: #24c1f6
} */

aside.ejs文件

1
2
3
<div id="js-jump-plan-container" class="jump-plan-container" style="top: -11px;">
    <i class="icon-font icon-plane jump-plane"></i>
</div>

2.重新添加主题需要矢量图标，共计36个

2020年6月3日

近期对主题做了一些改动，主要就是文章目录优化（js实现目录跳转），目录内容移至themes\yilia\layout\_partial\post\toc.ejs中
记录一下如何在页面显示目录（非鼠标悬停显示，只适用于本主题）
1.将.toc-container.tooltip-left .tooltip:hover .tooltip-content中的:hover去掉
2.将.tooltip-left .tooltip:hover .tooltip-content中的:hover去掉

简单优化了valine评论中文章阅读量统计问题，已在相应的页面进行了说明

2020年5月23日

文章springMVC

重置iconfont矢量图标，删除主题自带矢量图标，删除yilia/source/fonts/下的4个文件：
iconfont.8c627f.woff
iconfont.16acc2.ttf
iconfont.45d7ee.svg
iconfont.b322fa.eot
删除不需要的矢量图标，添加主题需要的矢量图标共计37个。

2020年5月19日

在yilia主题添加valine评论文章中添加使用valine评论的文章阅读量统计功能，本主题已应用
修改yilia主题进阶配置中添加字数功能和文章更新时间内容，与本主题保持一致

2020年5月14日

新建文章：微软新旧Micrpsoft Edge浏览器
简单讲解了新旧Edge浏览器发生了哪些变化

2020年5月5日

优化主题样式，针对p标签和img标签定向优化，缩小和增加容器之间的距离

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 文章p标签下的img标签优化，删除之前.article img样式 */
.article p img {
    max-width: 100%;
    margin: 10px 0
}
/* bottom外边距优化，将1.75em改为10px */
.article-inner p {
    margin: 0 0 10px
}
/* 移动端美化文章结束样式，与pc页面同步，将30px修改为20px */
.article .article-entry {
    padding: 10px 0 20px
}

添加文章：电脑无法访问GitHub解决办法

2020年4月24日

创建eclipse安装与测试文章，记录如何使用eclipse

2020年4月23日

对valine评论进行了一些更新，同步到相应文章。valine评论新增了enableQQ配置，在昵称框输入QQ号发表评论，会自动获取QQ头像和昵称
valine评论v1.4.7+出现Code 98提示是已知Bug，官方将在下个版本更新。手动解决，删除引用的av-min.js

2020年4月21日

更新mathjax为version 3
添加valine评论：yilia主题添加valine评论

2020年4月18日

修改aplayer播放器版本为1.9.1，修复部分浏览器锚点跳转失效
更换前端库的cdn地址为jsdelivr以增加访问速度
创建电视直播源分享文章，m3u8格式的源，理论上适用于所有带有自定义直播源的TV应用
根据创建电视直播源分享文章的需求，记录了javascript读取txt文件的方法
对yilia主题进阶配置文章的部分内容进行了更新修改（没有添加新功能）

2020年4月8日

近期GitHub一直在给我发送仓库安全警告邮件

1
2
3
4
5
6
7
8
9
10
11
A new security advisory was published 
We found a vulnerable dependency in repositories you have security alert access to.
Security advisory GHSA-vh95-rmgr-6w4m (high severity) affects 1 repository: 

A new security advisory was published 
We found a vulnerable dependency in repositories you have security alert access to.
Security advisory GHSA-6chw-6frg-f759 (moderate severity) affects 1 repository: 

A new security advisory was published 
We found a vulnerable dependency in repositories you have security alert access to.
Security advisory GHSA-6c8f-qphg-qjgp (moderate severity) affects 1 repository:

总共发了三个邮件，都是属于仓库安全问题，GitHub官网有详细的解决办法，因为家中宽带无法访问GitHub，所以拖了很久
这次解决这个问题
添加了一个BT磁力搜索站点
添加关闭代码块复制配置
修复音乐播放器音乐失效以及友链部分链接失效

置顶

扫一扫，分享到微信

微信分享二维码

标签：

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save
    3、在根目录_config.yml里添加配置：

    jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true