文章目錄
添加背景圖片,效果圖:
注:因爲有博客不是修改時寫的,部分代碼沒有進行備份,所以有些只能從git中獲取代碼,有些可能有點亂。
同時因爲每個人選的背景圖片可能有所不同,主體顏色可能差異很大,需要調整的顏色可能比較多,這篇博客僅供參考,請自行選擇是否替換背景。
1.左側邊欄
取消上半部分的背景顏色
:themes/yilia/layout/_partial/left-col.ejs
,如下:這是掉上面的一行代碼,使用下面的
<!-- <div class="overlay" style="background: <%= theme.style && theme.style.header ? theme.style.header : defaultBg %>"> -->
<!-- 左側邊欄(上半部分)不設置背景顏色 -->
<div class="overlay" >
添加背景圖片
H:\Hexo\themes\yilia\source\main.0cf68a.css
,註釋掉原有的背景顏色,添加照片:
.left-col {
/* background:#fff; */
background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
url('http://bucket836.oss-cn-shenzhen.aliyuncs.com/wallpaper/381535373.jpeg') no-repeat 0% 20%/ cover;
width:300px;
position:fixed;
opacity:1;
transition:all .3s ease-in;
-ms-transition: all .3s ease-in;
height:100%;
z-index:999
}
根據背景圖片修改字體顏色(這步可以自定義),我是將color:#696969
改成color:#673ab7
:git
.left-col #header a {
- color:#696969
+ color:#673ab7^M
}
.left-col #header a:hover {
- color:#b0a0aa
+ color: #03A9F4^M
}
.left-col #header .header-subtitle {
text-align:center;
- color:#999;
+ color:#673ab7;
font-size:18px;
2.右邊的文章
調整背景顏色爲透明
主要是將白色背景變成透明的,background:#fff;
–>background: rgba(255,255,255,.5);
調整後Git
.article {
- margin:30px;
- position:relative;
- border:1px solid #ddd;
- border-top:1px solid #fff;
- border-bottom:1px solid #fff;
- background:#fff;
- /* background: rgba(255,255,255,.5); */
- transition:all .2s ease-in
+ margin: 30px;^M
+ border: 1px solid #ddd;^M
+ border-top: 1px solid #fff;^M
+ border-bottom: 1px solid #fff;^M
+ background: rgba(255,255,255,.5);^M
+ transition: all .2s ease-in^M
}
即:
.article {
margin: 30px;
border: 1px solid #ddd;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
background: rgba(255,255,255,.5);
transition: all .2s ease-in
}
取消右側欄背景顏色
(2019-11-18補充)該背景可能會遮住全局背景,因此應該取消掉,如果已取消可忽略。
3.添加背景圖片
將白色background-color:#fff;
替換爲照片:
body {
margin:0;
font-size:14px;
font-family:Helvetica Neue, Helvetica, STHeiTi, Arial, sans-serif;
line-height:1.5;
color:#333;
/* background-color:#fff; */
min-height:100%;
background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
url('https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/00/ChMkJlbKw6KIXhXnAA4L-_oxRzUAALG6QBUSg8ADgwT181.jpg') no-repeat 0% 0%/ cover;
}
/* 手機端換用一張背景圖片,可以不使用 */
@media screen and (max-width:800px) {
body {
background: url('https://oss.yansheng.xyz/your-name-phone2ys.jpg') no-repeat fixed top;
}
效果:
4.微調
4.1調整評論區背景
原來爲白色,現在改爲透明。
先將之前定義在H:\Hexo\themes\yilia\layout\_partial\article.ejs
的樣式統一放到H:\Hexo\themes\yilia\source\main.0cf68a.css
,如下git diff
<!-- 《valine評論 -->
<% if (theme.valine && theme.valine.appid && theme.valine.appkey){ %>
<section id="comments" class="comments">
- <style>
- .comments{margin:30px;padding:10px;background:#fff}
- @media screen and (max-width:800px){.comments{margin:auto;padding:10px;background:#fff}}
- </style>
+
<%- partial('post/valine', {
key: post.slug,
title: post.title,
在最後面添加:
/* 《評論框 */
.comments {
margin:30px;
padding:10px;
/* background:#fff */
background: rgba(255,255,255,.5);
}
@media screen and (max-width:800px) {
.comments {
margin:auto;
padding:10px;
/* background:#fff */
background: rgba(255,255,255,.5);
}
}
/* valine的背景顏色 */
#vcomment{
/* background:#fff */
background: rgba(255,255,255,.9);
}
/* 設置valine佔位符的顏色 */
#vcomment :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #979292;
}
#vcomment ::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #979292;
}
#vcomment input:-ms-input-placeholder, #vcomment textarea:-ms-input-placeholder {
color: #979292;
}
#vcomment input::-webkit-input-placeholder,#vcomment textarea::-webkit-input-placeholder {
color: #979292;
}
/* 評論框》 */
效果:
4.2調整歸檔背景
之前調整的文章背景透明好像沒有影響到這個:
進行調整:
.archives-wrap {
position:relative;
margin:0 30px;
padding-right:60px;
border-bottom:1px solid #eee;
/* background:#fff */
background: rgba(255,255,255,.5);
}
調整日期顏色
.article-meta time {
/* color:#aaa */
color: #2f2d2a;
}
日期時間大小
.archive-article-inner .article-meta .archive-article-date {
cursor:default;
font-size:15px;
margin-bottom:5px;
margin-top:-10px;
margin-right:0
}
微調歸檔頁面的標題樣式:
/* 丟棄之前的 */
.archives .archive-article-title {
font-size: 16px;
color: #333;
transition: color .3s
}
/* 修改: */
/* 分類頁面的標題 */
.archives .archive-article-title {
font-size:20px;
/* color:#333; */
transition:color .3s
}
.archives .archive-article-title:hover {
/* color:#657b83 */
}
因爲將右邊欄的超鏈接都統一進行了設置,如果不需要特效,可以通過下面的代碼取消超鏈接的下劃線樣式:
a.share-outer:hover::after {
transform: scaleX(0);
}
4.3主頁的文章塊的日期取消超鏈接樣式
日期和文章統計數樣式
原:
.archive-article-date {
color:#999;
margin-right:7.6923%;
float:right
}
修改後:
/* 日期欄(如果是文章還包含卜算子的頁面訪問量) */
.archive-article-date {
/* color:#0087ca; */
color:#4b4949;
margin-right:7.6923%;
float:right
}
/* 日期 */
.archive-article-date time{
color:#4b4949;
}
/* 日期同一行的文章閱讀數量 */
.archive-article-date[id=busuanzi_container_page_pv] {
color:#4b4949;
}
主頁的“展開全文”按鈕樣式:受全局超鏈接樣式影響,懸浮後,會變成紅色。處理:提前加一個懸浮,掩蓋全局的:
/* 防止鼠標懸浮時,變色,因爲會被全局的超鏈接樣式影響 */
.article-more-link a:hover{
color:#fff;
}
前一頁後一頁:去掉懸浮的樣式,可以直接註釋掉:
#article-nav .article-nav-link-wrap:hover .article-nav-title, #article-nav .article-nav-link-wrap:hover i {
/* color:#4d4d4d */
}
標籤按鈕:受全局超鏈接樣式影響,懸浮後,會變成紅色。處理:提前加一個懸浮,掩蓋全局的:
.tagcloud a:hover {
+ color:#fff;^M
opacity:.8
}
4.4手機端頭部背景顏色
H:\Hexo\themes\yilia\layout\_partial\mobile-nav.ejs
取消內嵌樣式,在全局css中進行設置:
<!-- <div class="overlay js-overlay" style="background: <%= theme.style && theme.style.header ? theme.style.header : defaultBg %>"></div>-->
<div class="overlay js-overlay"></div>
H:\Hexo\themes\yilia\source\main.0cf68a.css
設置成漸變:
#mobile-nav .overlay {
height:110px;
position:absolute;
width:100%;
z-index:2;
/* 漸變:淺綠色變淡藍色 */
background-image: linear-gradient(#8fecc5,#0badf7);
/* 瀏覽器不支持漸變時顯示默認顏色 */
background-color: #4d4d4d;
}
效果圖:
4.5鼠標圖片
去網上找一種鼠標指針的圖片,用圖片替換默認的鼠標樣式:cursor:url('url'), default;
,default表示:如果圖片不起效,就是用默認的。
body {
margin:0;
font-size:14px;
font-family:Helvetica Neue, Helvetica, STHeiTi, Arial, sans-serif;
line-height:1.5;
color:#333;
/* background-color:#fff; */
min-height:100%;
background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
url('https://oss.yansheng.xyz/wallpaper/qinshimingyue.jpg') no-repeat 0% 0%/ cover;
cursor:url('https://oss.yansheng.xyz/ico/favicon-2019110906554413.ico'), default;
}
/* 因爲超鏈接默認情況下是:cursor: pointer; 顯示爲手,這裏進行設置 */
a {
cursor:url('https://oss.yansheng.xyz/ico/favicon-2019110906554413.ico'), default;
}
4.6行內代碼、引用塊的背景顏色
.article-entry li code, .article-entry p code {
color: #c7254e;
/* background-color: #f9f2f4; */
background-color: rgba(249, 242, 244, .7);
border-radius: 2px;
padding:2px 4px;
margin:0 3px;
/* background:#ddd; */
/* border:2px solid #ccc; */
font-family:Menlo, Monaco, Andale Mono, lucida console, Courier New, monospace;
word-wrap:break-word;
/* font-size:14px */
}
.article-entry blockquote {
background:#ddd;
border-left:5px solid #ccc;
padding:15px 20px;
margin-top:10px;
border-left:5px solid #657b83;
/* background:#f6f6f6; */
background: rgba(246, 246, 246, .7);
/* 如果超長,自動截斷 */
word-wrap:break-word;
word-break:break-all;
}
文章首發於:hexo+yilia添加背景圖片