Today I am going to switch my blog’s theme from next
to yilia-plus
. This blog records some steps I’ve taken to do the job.
Hexo blog personalization
Today I am going to switch my blog’s theme from next
to yilia-plus
.
Theme – switching to yilia-plus
Currently I am trying to change my blog style from “next” to “yilia-plus”
- next(not my favorite but been using it for quite a long time)
- yilia-plus
- Others: 8 款颜值爆赞的 Hexo 主题推荐!快来搭建个人博客玩玩 | Github掘金计划 - 知乎 (zhihu.com)
Firstly download the theme into “/themes” folder
1 | cd ./themes/ |
Then edit the _config.yml
in the root directory and do the following change: theme: yilia-plus
Finally if everything goes well(impossible), use hexo generate
to re-render the blog pages.
My way of changing the blog’s theme
My original blog folder is broken so I have to directly use a new one.
So I downloaded JoeyBling/yilia-plus-demo: hexo-theme-yilia-plus配置Demo ➡️ (github.com) and make some changes.
1 | git clone https://github.com/JoeyBling/yilia-plus-demo.git |
Then change the folder’s name into Blog
or anything else
then
1 | cd Blog |
and a demo blog is deployed on the local host.
Remove Github Ribbons
edit the .ejs
pattern file: Blog\themes\yilia-plus\layout\layout.ejs
and comment the following codes:
1 | <!-- <% if (theme.github && theme.github.url){ %> |
or just change _config.yml
in the /theme/yilia-plus
directory and set the following to false:
1 | # GitHub Ribbons(https://github.blog/2008-12-19-github-ribbons/) |
Change my blog’s basic configs
edit _config.yml
at the root directory
and here I changed the title
, subtitle
, description
, keywords
, author
and other stuff.
then edit _config.yml
at the yilia-plus
directory
Menu
Firstly I change the menu
: I divide my blogs’ tags into 3:
- CV: my cv. only contains 1 blog
- Study: my blogs on study
- Game: blogs on gaming experience
Subnav
I only put my github link and mail on it.
Left-col
yilia-plus\source\main.xxxxx.css
1 | .left-col{background:#fff;width:300px;position:fixed;opacity:1;transition:all .2s ease-in;height:100%;z-index:999;overflow:hidden;overflow-y:auto;margin-bottom:15px} |
to
1 | .left-col { |
Article
add opacity:
_partial/article.ejs
1 | <article id="<%= post.layout %>-<%= post.slug %>" class="article article-type-<%= post.layout %> <%if(index){%> article-index<%}%>" itemscope itemprop="blogPost"> |
to
1 | <article id="<%= post.layout %>-<%= post.slug %>" class="article article-type-<%= post.layout %> <%if(index){%> article-index<%}%>" itemscope itemprop="blogPost" style="<%=theme.article_style%>"> |
and add:
1 | article_style: "opacity:0.98" |
Aboutme
make it center
edit _partial/tools.ejs
1 | <!-- <div class="aboutme-wrap" id="aboutme"><%-theme.aboutme%></div> --> |
to
1 | <div class="aboutme-wrap" id="aboutme" style=<%=theme.aboutme_style%>><%-theme.aboutme%></div> |
then add in _config.yml
:
1 | aboutme_style: "text-align:center" |
Avatar
_partial/mobile-nav.ejs
:
_partial/left-col.ejs
:
1 | <img src="<%- url_for(theme.avatar) %>" class="js-avatar" style="<%=theme.avatar_style%>"> |
then add in _config.yml
1 | avatar_style: "margin-right:50px;" |
actually this is for bugfix. my avatar isn’t aligned.
Title
edit _partial/post/title.ejs
1 | <% if (post.link){ %> |
and add in config:
1 | article_title_style=”color:black" |
Date
edit in _partical/post/date.ejs
:
1 | <time datetime="<%= date_xml(post.date) %>" itemprop="datePublished" style="<%= theme.article_time_style %>"><i class="icon-calendar icon"></i><%= date(post.date, date_format) %></time> |
and add in config:
1 | article_time_style=”color:black" |
Background
add in config:
1 | style: |
then edit in layout.ejs
:
1 | <div class="mid-col" q-class="show:isShow,hide:isShow|isFalse" style="background: <%= theme.style && theme.style.article_ground.enable && theme.style.article_ground.url ? theme.style.article_ground.url : theme.style.article_ground.default %>"> |
1 | <div class="left-col" q-class="show:isShow" style="background: <%= theme.style && theme.style.left_ground.enable && theme.style.left_ground.url ? theme.style.left_ground.url : theme.style.left_ground.default %>"> |
Live2D(unfinished)
want to get a tsukihime live2d but no currently available one
Music
add music id in config
(158条消息) Hexo博客设置背景音乐_hexo music_Z先森9701的博客-CSDN博客
Hexo-Butterfly音乐播放器的添加 | 学习笔记 (guodongblog.site)
hexo+yilia添加背景音乐_秦时明月之君临天下的博客-CSDN博客
请问国内有没有哪个可以支持音乐外链的网站? - 知乎 (zhihu.com)
最后比较成功的是参考这个:
hexo博客yilia-puls主题使用aplayer音乐插件_路痴的兔子的博客-CSDN博客
网易云代码
修改主题中layout/left-col.ejs
的代码,将网易云音乐插件的代码剪切下来。(直接注释掉可能还是会有bug)
1 | <% if (theme.music && theme.music.enable){ %> |
使用APlayer插件
首先安装插件
1 | npm install --save hexo-tag-aplayer |
然后在博客的根目录下的_config.yml
,注意不是主题的_config.yml
文件,下添加如下代码:
1 | aplayer: |
在文章中使用
只需要在文章对应位置添加如下代码即可,详细的配置项的意义见MoePlayer/hexo-tag-aplayer: Embed aplayer in Hexo posts/pages (github.com)
1 | {% meting "60198" "netease" "playlist" "autoplay" "mutex:false" "listmaxheight:340px" "preload:none" "theme:#ad7a86" %} |
在主页中使用
修改主题中layout/left-col.ejs
的代码,添加以下代码:
1 | <% if (theme.music){ %> |
然后修改主题中的_config.yml
文件:
将原来的music
配置项修改成如下:
1 | # 音乐插件 |
最后
1 | hexo generate && hexo server |
即可查看效果。
Multiple Tags/Categories
add multiple tags/categories:
1 | tags: |
Hexo中如何给一篇文章加多个tags? - 知乎 (zhihu.com)
hexo博客中tags与categories用法 - 知乎 (zhihu.com)
Bugfix&Other
Fix broken categories’ links
edit _partial/post/categories.ejs
1 | <!-- <a href="<%= config.root %><%= tag.path %>/" class="article-tag-list-link color<%= tag.name.length % 5 + 1 %>"><%-tag.name%></a> --> |
to
1 | <a href="<%= config.root %><%= tag.path %>" class="article-tag-list-link color<%= tag.name.length % 5 + 1 %>"><%-tag.name%></a> |
Fix broken friends’ links
must add https://
as a prefix.
Fix unclear font color
change in yilia-plus/source-src/js/fix.js
1 | function init() { |
and archive.ejs
:
1 | <nav id="page-nav" style="background:url(/img/overlay.jpg);"> |
Fix &
bug
the &
in« Prev
will be translated into &s;
, leading to bugs
so I just avoid using these chars, and simply replace them with « and »
修复一个post有多个categories时的分类生成错误(未完全解决)
现在的解决方案:不使用多个categories。每一个文章完全只对应一个category。
比如说有个blog的categories同时有Study
和Game
两个
然后它生成出来的链接就会有两个:
一个是:
https://taardisaa.github.io/categories/Study/Game/
另一个是
https://taardisaa.github.io/categories/Study/Game/
太诡异了
首先定位生成链接的代码位置,应该是_partial/post/categories.ejs
这个文件上:
1 | <% if (post.categories && post.categories.length){ %> |
Tags/Categories Style
edit layout.ejs
:
from
1 | <div id="js-content" class="content-ll" > |
to
1 | <div id="js-content" class="content-ll" style="<%= theme.body_style %>"> |
then add in config:
1 | body_style: "opacity:0.92" |
Deploy
1 | npm install hexo-deployer-git --save --registry=https://registry.npm.taobao.org |
1 | deploy: |
添加私人加密博客
https://github.com/D0n9X1n/hexo-blog-encrypt/
在Blog主页面执行
1 | npm install --save hexo-blog-encrypt |
安装成功后就可以直接用了。
在想要加密的blog头部添加
1 | password: <自己设置的密码> |
即可。
举例:
1 | title: 测试私人博客加密 |
添加文章目录
添加文章目录,方便索引。
其实默认有的,就是在右下角,平时没仔细看的话就找不到。(无语)
主题_config.yml
里面查一下toc
相关设置即可。
自行添加(不需要)
2.7 添加文章目录 - hexo (90byte.com)
在主题目录下layout/_partial
文件夹中新建toc.ejs
文件,存放文章目录的代码。
1 | <% if (post.toc != false) { %> |
这里的toc()
函数就是Hexo官方提供的辅助函数,不用再自行写这部分代码了,直接调用toc()
函数即可,post.content
代表该文章内容,list_number: false
是函数提供的一个配置参数,这里指定false
代表文章列表不默认显示序号。
同时这段代码添加了一个文章变量toc
,当在文章front-matter
里添加toc: false
时,就表示该文章不想显示目录。这样便可以控制哪些文章显示目录,哪些文章不想显示目录。
添加在页面内
文章目录应该显示在文章内容的页面,这里将它放到文章的开始部分,找到主题目录文章布局文件layout/_partial/article.ejs
,找到下面代码:
1 | ... |
可以看到,在<%- post.content %>
前面添加了一行<%- partial('toc') %>
引用了目录代码。现在刷新页面就可以看到目录了 。(比较简陋)
Todo
- add ability to switch backgrounds at intervals
- add a button to disable or change bg
- add music text
- multi-language support (Translator!)√
- add music list √
- enhance tag search support
- tags&categories exchange?
- 加一个文章标题索引,方便快速查内容
- add private blog encryption √
Reference
background-position - CSS:层叠样式表 | MDN (mozilla.org)
background-attachment - CSS:层叠样式表 | MDN (mozilla.org)
(158条消息) CSS里怎么让背景图片固定不动_在html网页中把一个图固定住不动用什么_我是高手高手高高手的博客-CSDN博客
live2d模型包展示 · JoeyBling/hexo-theme-yilia-plus Wiki (github.com)
JoeyBling/live2d-widget.js: 在网站上集成Live2D看板娘具有开箱即用的体验 (github.com)
(158条消息) 【Hexo搭建个人博客】:yilia主题配置(二) - 背景图片_yilia旋转头像_Alfred_|_derflA的博客-CSDN博客
[(158条消息) yilia-puls美化hexo个人博客_rongyuecho的博客-CSDN博客](https://blog.csdn.net/rongyuecho/article/details/129742104#:~:text=下载yilia-plus主题到本地,将hexo-theme-yilia安装到themes目录下 cd.%2Fthemes%2F git clone,–depth%3D1 https%3A%2F%2Fgithub.com%2FJoeyBling%2Fhexo-theme-yilia-plus.git.%2Fyilia-plus 1 2 3)
yilia-plus常用配置 | 随风而行的个人博客 (wkzqn.github.io)
如何实现Hexo多语系博客搭建 - ballwql - 博客园 (cnblogs.com)
夏日换新装,升级到 Hexo 6 - sysin | SYStem INside | 软件与技术分享
Node.js 版本管理工具 n 最全使用手册 - 掘金 (juejin.cn)
Hexo常用指令以及调试_羊书change的博客-CSDN博客
Hexo 使用过程遇到的一些问题收集 | Dev.liang’s Blog (leaderliang.github.io)
yilia-plus: 一个简洁优雅的hexo主题 A simple and elegant theme for hexo. (gitee.com)
- 本文作者: Taardis
- 本文链接: https://taardisaa.github.io/2023/05/07/Hexo-blog-personalization/
- 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!