Yilia个性设置

时间  2021-01-16

 

       这段时间一直在构建自己的个人博客，如想参观，请移步[我的博客](https://lijinhongpassion.github.io)，以下内容是我在yilia主题的基础上修改的样式，这里分享出来供大家参考。

melinda-gimpel-1395900-unsplash.jpg

####1、yilia更改头部图片

​ 在yilia的根目录下，我这里是E:\my_personnel_blog_hexo\themes\yilia下的_config.yml

找到如下配置：

1
2
3
4

# Miscellaneous
baidu_analytics: ''
google_analytics: ''
favicon: /img/header.jpg

将喜欢的图片放入E:\my_personnel_blog_hexo\themes\yilia\source\img路径下，然后修改_config.yml的favicon: /img/图片名字.jpg

####2、QQ加好友链接

​ 在yilia的根目录下，我这里是E:\my_personnel_blog_hexo\themes\yilia下的_config.yml

找到如下配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# SubNav
subnav:
  github: "#"
  weibo: "#"
  rss: "#"
  zhihu: "#"
  #将QQ后的链接里面的uin值改为自己的QQ号即可。
  qq: http://wpa.qq.com/msgrd?v=3&uin=2604068029&site=qq&menu=yes
  #weixin: "#"
  #jianshu: "#"
  #douban: "#"
  #segmentfault: "#"
  #bilibili: "#"
  #acfun: "#"
  #mail: "mailto:[email protected]"
  #facebook: "#"
  #google: "#"
  #twitter: "#"
  #linkedin: "#"

####3、样式定制

​ 在yilia的根目录下，我这里是E:\my_personnel_blog_hexo\themes\yilia下的_config.yml

找到如下配置：

1
2
3
4
5
6

# 样式定制 - 一般不需要修改，除非有很强的定制欲望…
style:
  # 头像上面的背景颜色'url(https://i.loli.net/2019/03/15/5c8b3688b845e.jpg) 38px 23px'
  header: '#4d4d4d'
  # 右滑板块背景'linear-gradient(200deg,#a0cfe4,#e8c37e)'
  slider: 'linear-gradient(200deg,#ccc,#000)'

​ 这里更改了slider: ‘linear-gradient(200deg,#ccc,#000)’，效果图如下：

QQ截图20190315141450.png

4、设置文章标题

​ 原标题样式我自己不是特别喜欢，颜色不喜欢，还有位置不喜欢，有共同需要的可以随我一起改源代码。

原样式：

1-1.png

目的样式：

1-2.png

1：经过调试，涉及两个文件，article.ejs和article.scss,路径分别为：

1
2

E:\my_personnel_blog_hexo\themes\yilia\layout\_partial\article.ejs
E:\my_personnel_blog_hexo\themes\yilia\source-src\css\article.scss

2：打开article.scss，添加如下样式（喜欢什么样式可以自己修改）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.article-title_code_ant {
  color: black;
  margin-left: 0px;
  font-weight: 300;
  line-height: 35px;
  margin-bottom: 20px;
  font-size: 32px;
  -webkit-transition: color 0.3s;
  -moz-transition: color 0.3s;
  -o-transition: color 0.3s;
  transition: color 0.3s;
  &:hover{
    color: #B0A0AA;
  }
}

保存关闭

3：打开article.ejs,修改如下：

1-3.png

1
2
3

<%# 注释掉-partial('post/title', {class_name: 'article-title'}) %>
<%# 修改模板 %>
<center><p><%- partial('post/title', {class_name: 'article-title_code_ant'}) %></p></center>

保存退出

4：异常修改

​ 修改过后，文章详情达到了目标要求，但是主页的文章标题有误，为a标签设置颜色，如图：

1-4.png

继续修改文件，找到E:\my_personnel_blog_hexo\themes\yilia\source\main.0cf68a.css，打开编辑，添加如下代码：

1
2
3
4
5
6
7
8
9

.article-inner h1.article-title_code_ant, .article-title_code_ant {
	color: #000000;
	margin-left: 0;
	font-weight: 300;
	line-height: 35px;
	margin-bottom: 20px;
	font-size: 32px;
	transition: color .3s
}

保存修改，大功告成。

5、引入GITMENT评论

1：注册OAuth Application

1-6.png

  • Application name:博客名字
  • Homepage URL; 网站主页地址(这里我填写的是域名/index.html大部分的默认网页都是index.html)
  • Application description:描述，选填
  • Authorization callback URL: 填写域名就行了

2：修改yilia的_config.yml

1
2
3
4
5
6
7
8
9

gitment_owner: github名        

gitment_repo: 'github名.github.io' 

gitment_oauth:         

  client_id: '5ad7ec70a25067e86139'        

  client_secret: '21a8b9052808acddd0734e828103e88beabd97c5'

这里就配置好了，开始入坑，会发现有一系列的错误。

(1) [object ProgressEvent]

因为服务器证书过期的原因，无法登录。这里有两个解决方案：

  • 用别人的服务器，打开themes\yilia\layout_partial\post\gitment.ejs将
1
2
3
4
5
6
7
8
9

<!--找到下两列-->
<!--<link rel="stylesheet" href="//imsun.github.io/gitment/style/default.css">-->
<!--<script src="//imsun.github.io/gitment/dist/gitment.browser.js"></script>-->
<!--替换成下两列-->
<link rel="stylesheet" href="https://jjeejj.github.io/css/gitment.css">
<script src="https://jjeejj.github.io/js/gitment.js"></script>
<!--或者替换成下两列-->
<link rel="stylesheet" href="https://jjeejj.github.io/css/gitment.css">
<script src="https://www.wenjunjiang.win/js/gitment.js"></script>

(2) Error: Validation Failed

原因：issue的标签label有长度限制！labels的最大长度限制是50个字符。

解决：打开themes\yilia\layout_partial\post\gitment.ejs，将id那一行替换成

1
2
3

id: '<%= page.title %>'
或者
id: '<%= page.date %>'

1-7.png

####6、删除博客底部Hexo Theme Yilia by Litten

​ 打开themes\yilia\layout_partial\footer.ejs,修改如下：

1
2

<div class="footer-right">
</div>

7、在关于我页面添加每日一言功能

​ 这里我用的是每日一言的链接

1
2
3
4

//每日一言的链接
https://api.lwl12.com/hitokoto/v1?encode=js&charset=utf-8
//返回的数据格式
function lwlhitokoto(){document.write("判断一个诉有不是看他的等在你内在，而是看他的行为。");}

在这里我调了很久，因为对前端知识不是特别了解，但是最后还是把我想要的样式调出来了，看一下效果图：

1-8.png

话不多说，上代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

//找到themes\yilia\layout\_partial\tools.ejs，打开编辑找到如下代码块
<%if(theme.aboutme){%>
  	  		<div class="aboutme-wrap" id="js-aboutme">
					<%=theme.aboutme%>
			</div>
<%}%>

//用下面的代码替换掉
<%if(theme.aboutme){%>
  	  		<div class="aboutme-wrap">
				<div style="display:;">
					<script type="text/javascript" src="https://api.lwl12.com/hitokoto/v1?encode=js&charset=utf-8"></script>
					<p style="margin:0 20px 0 20px;">
						<span id="lwlhitokoto">
							<script>
								lwlhitokoto();
							</script>
						</span>
					</p>
					<p id="js-aboutme" style="margin:0 20px 0 20px;"><%=theme.aboutme%></P>
				</div>
			</div>
  	  	<%}%>

保存就ok！

  1. 8、文章过长，设置部分显示

    • 问题。点击主页时，发现所有文章都是全文显示，不利于查找，可控制显示的字数

    • 解决办法。 在你 MD 格式文章正文插入 <!-- more -->即可，只会显示它之前的，此后的就不显示，点击文章标题，全文阅读才可看到，同时注释掉以下 themes/yilia/_config.yml

      1
2

      # 文章太长，截断按钮文字，去除more>>链接
#excerpt_link: more

    9、文章添加版权声明

    在themes/yilia/layout/_partial/article.ejs中标注的位置添加代码

    1
2
3
4
5
6
7
8
9
10
11
12
13
14

    <div class="article-entry" itemprop="articleBody">
	<% if (post.excerpt && index){ %>
		<%- post.excerpt %>
		<% if (theme.excerpt_link) { %>
			<a class="article-more-a" href="<%- url_for(post.path) %>#more"><%= theme.excerpt_link %> >></a>
		<% } %>
	<% } else { %>
		<%- post.content %>
	<% } %>
	<-- 在此处添加代码-->
	<% if ((theme.reward_type === 2 || (theme.reward_type === 1 && post.reward)) && !index){ %>
	<div class="page-reward">
		<a href="javascript:;" class="page-reward-btn tooltip-top">
		<div class="tooltip tooltip-east">

    添加的代码如下

    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

    <%# 添加文章版权 %>
		<%
		  var sUrl = url.replace(/index\.html$/, '');
		  sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'https:' + sUrl;
		%>
		<% if ((theme.declare_type === 2 || (theme.declare_type === 1 && post.declare)) && !index){ %>
		  <div>
			<blockquote>
				<strong>本文作者：</strong>
				<% if(config.author != undefined){ %>
				  <%= config.author%>
				<% }else{%>
				  <font color="red">请在博客根目录“_config.yml”中填入正确的“author”</font>
				<%}%>
				<br>
				<strong>本文链接：</strong>
				<%= sUrl%>
				<br>
				<strong>版权声明：</strong>
				本作品采用
				<a rel="license" href="<%= theme.licensee_url%>"><%= theme.licensee_name%></a>
				进行许可。转载请注明出处！
				<% if(theme.licensee_img != undefined){ %>
				  <br>
				  <a rel="license" href="<%= theme.licensee_url%>"><img alt="知识共享许可协议" style="border-width:0" src="<%= theme.licensee_img%>"/></a>
				<% } %>
			</blockquote>
			
			<%# 添加文章底部标语 %>
			<hr>
				<center><strong><%= theme.licensee_slogan%></strong></center>
			<hr>
		  </div>
		<% } else {%>
		  <div hidden="hidden"></div>
		<% } %>

    修改themes/yilia/_config.yml

    在需要进行版权声明的文章的md文件头部，设置属性declare: true。

    • 版权基础设定：0-关闭声明； 1-文章对应的md文件里有declare: true属性，才有版权声明； 2-所有文章均有版权声明
    • 当前应用的版权协议地址。
    • 版权协议的名称
    • 版权协议的Logo
    • 标语
    1
2
3
4
5

    declare_type: 2
licensee_url: https://creativecommons.org/licenses/by-nc-sa/4.0/
licensee_name: '知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议'
licensee_img: https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png
licensee_slogan: 感谢有你，伴我成长。
联系我们 沪ICP备2021010478号-7