关于本主题(Sakura by Mashiro)使用上的建议

历时两天，终于完成了主题的配置。在此感谢作者樱花庄的白猫制作的Sakura主题（https://2heng.xin/）

本文提到的所有方法，如未明确，均使用的是WordPress自带的自定义功能中的额外CSS功能

Sakura主题在免费的主题中算可定义比较多的，但仍有一些不可以手动修改的地方，在此汇总一下我比较Care的项目。

首页的一句话和社交卡片

修改前

修改后

通过修改，原本与标题并不搭配的暗色调可以和标题搭配，减少视觉上的对立。

修改方法：

打开WordPress的后台，找到

点击它

找到自定义，并点击它

接下来点击额外CSS

然后你就进入了一个可以输入文本的地方

在此输入以下内容

.header-info {
 width: 63%;
 margin: auto;
 font-size: 16px;
 color: #EE9CA7;  // 这是修改一句话的颜色  （16进制色值） 
 background: rgba(255,250,250);  //背景色（RGB色值）
 padding: 15px;  //大小
 margin-top: 22px;   //大小
 letter-spacing: 0;
 line-height: 30px;   //大小
 border-radius: 10px;  //大小
 box-sizing: initial;
 white-space: nowrap
 }

.top-social img {
 height: 40px;  //这是修改社交网络外图标的高
 width: 40px;  //这是修改社交网络外图标的宽 
 padding: 9px;  //这是修改社交网络图标的大小 
 background: rgba(255,250,250)  //这是背景颜色 
 }

你可以通过实时预览更好的更改。

关于社交卡片图标的更改

修改后的图标

修改前的图标

可以很清楚的看到，修改前的图标存在一些视觉上的混乱。Github的图标几乎不可见，微博的图标视觉上也存在的不协和。

通过修改统一风格的图标，虽然一定程度上辨别不如原方案，但视觉上十分协调。

修改图标，需要通过修改PHP文件实现

首先，访问目录

找到

打开它

你会发现以下内容

代码

通过一些合理的分析，你可以很快的定位到某个社交网络的图标

例：此段代码多次出现Wechat，因此判定为微信图标

然后将原链接替换为你想要的图标的链接即可。

注意！此代码有两种显示方式，所以该代码有两次重复的内容，推荐全部修改。

关于菜单栏自定义

别人家的方案

咱家的

字体修改方式同第一条

代码是

textarea {
 color: #EE9CA7;  //颜色（十六进制）
 font-size: 15px;
 line-height: 1.5
 }

搜索修改方式

代码是

i.iconfont.js-toggle-search.iconsearch {
 color: #EE9CA7;   //颜色（十六进制） 
 cursor:pointer;
 font-size: 20px;   //大小（慎重改动） 
 -webkit-transition: all .3s ease-in-out;
 transition: all .3s ease-in-out
 }

默认头像修改颜色方法

打开服务器目录:

找到

文件

修改它，找到以下内容

代码

找到 https://cdn.jsdelivr.net/gh/moezx/cdn@3.1.9/img/Sakura/images/none.png

替换你所需要的图标链接

关于首页圆形头像配色

方法同第一条

代码如下

.focusinfo .header-tou img {
 box-shadow: inset 0 0 10px #EE9CA7;    //颜色（十六进制） 
 padding: 5px;      //虚化程度
 opacity: 1;
 transform: rotate(0);
 -webkit-transform: rotate(0);
 -moz-transform: rotate(0);
 -o-transform: rotate(0);
 -ms-transform: rotate(0);
 transition: all ease 1s;
 -webkit-transition: all ease 1s;
 -moz-transition: all ease 1s;
 -o-transition: all ease 1s
 }

占位图修改（图标及图案）

图标

在主题设置中的

修改LazyLoad占位图链接即可（只推荐使用SVG格式）

图案（如特色图片）

注意，此项工作较为复杂，酌情参考。您必须开启主题自定义选项后进行操作。

你将需要修改以下目录下的文件：

Sakura/layouts/post-nextprev.php
Sakura/layouts/feature.php
Sakura/tpl/content-thumb.php
Sakura/inc/theme_plus.php

首先，这个占位图的名称是： orange.progress-bar-stripe-loader.svg

此占位图存放在 jsDelivr，为SVG格式。不推荐尝试其他格式！

为了修改它，你需要准备好替换的SVG文件。

Post-nextprev.php的修改

位于第11行，替换链接｛ https://cdn.jsdelivr.net/gh/moezx/cdn@3.0.1/img/svg/loader/orange.progress-bar-stripe-loader.svg ｝为你要更换的。

位于第14行，替换链接｛ https://cdn.jsdelivr.net/gh/moezx/cdn@3.0.1/img/svg/loader/orange.progress-bar-stripe-loader.svg ｝为你要更换的。

feature.php 的修改

位于第12行，替换链接｛ https://cdn.jsdelivr.net/gh/moezx/cdn@3.0.1/img/svg/loader/orange.progress-bar-stripe-loader.svg ｝为你要更换的。

content-thumb.php 的修改

位于第40行，替换链接｛ https://cdn.jsdelivr.net/gh/moezx/cdn@3.0.1/img/svg/loader/orange.progress-bar-stripe-loader.svg ｝为你要更换的。

theme_plus.php 的修改

此文件有多处需修改

位于第316行，替换链接｛ https://cdn.jsdelivr.net/gh/moezx/cdn@3.0.1/img/svg/loader/orange.progress-bar-stripe-loader.svg ｝为你要更换的。

位于第361行，替换链接｛ https://cdn.jsdelivr.net/gh/moezx/cdn@3.0.1/img/svg/loader/orange.progress-bar-stripe-loader.svg ｝为你要更换的。

位于第367行，替换链接｛ https://cdn.jsdelivr.net/gh/moezx/cdn@3.0.1/img/svg/loader/orange.progress-bar-stripe-loader.svg ｝为你要更换的。

网页鼠标的修改

你需要知道的

主题自带的五种不同的鼠标样式

例子

Normal样式应用于全局
No_Disponible样式用在PC端的返回上文
Ayuda样式有用在选中某个地方的时候
Texto样式有用在文本复制中
Work样式有用在点击选项中

具体各个鼠标样式的使用地方本文不做全面解释

需要准备的

最好Cur格式的鼠标样式（Ani格式未经测试）
最好有五种不同的样式（同一风格）
需要Style.css的修改
需要上传你所需要的鼠标样式，并准备好链接
理解且能正确的使用前文所说的方法（方法可参考本文第一部分）

具体方法

Normal样式的修改

添加以下代码

body {
background: #fff;
background-attachment: fixed;
cursor: url(https://你的.网站/文件/的/目录/下的/Cur.文件), auto
}

No_Disponible样式的修改

添加以下代码

.cd-top {
cursor: url(https://你的.网站/文件/的/目录/下的/Cur.文件), auto;
opacity: 1
}

.botui-actions-buttons-button {
cursor: url(https://你的.网站/文件/的/目录/下的/Cur.文件), auto;
}

button.botui-actions-buttons-button {
cursor: url(https://你的.网站/文件/的/目录/下的/Cur.文件), auto;
-webkit-appearance: button
}

#emotion-toggle,
.emoji-item,   //感谢维安雨轩的提醒
.emotion-box,
.emotion-item,
.on-hover,
.tieba-container span {
cursor: url(https://你的.网站/文件/的/目录/下的/Cur.文件), auto
}

Ayuda样式的修改

添加以下代码

a {
background-color: transparent;
text-decoration: none;
cursor: url(https://你的.网站/文件/的/目录/下的/Cur.文件), auto
}

.ins-section .ins-section-header,.ins-section .ins-search-item {
padding: 8px 15px;
cursor: url(https://你的.网站/文件/的/目录/下的/Cur.文件),auto;
}

.ins-section .ins-search-item .ins-search-preview {
	font-size: 12px;
	color: #9a9a9a;
	margin: 5px 0 0 0px;
	cursor: url(https://你的.网站/文件/的/目录/下的/Cur.文件),auto;
}

Texto样式的修改

添加以下代码

p {
margin-bottom: 1.5em;
cursor: url(https://你的.网站/文件/的/目录/下的/Cur.文件), auto
}

.highlight-wrap code {
cursor: url(https://你的.网站/文件/的/目录/下的/Cur.文件), auto
}

Work样式的修改

添加以下代码

a:active {
cursor: url(https://你的.网站/文件/的/目录/下的/Cur.文件), alias
}

如果你的修改并未生效，请手动修改CSS文件

以上，是我在使用主题中的小建议。后续仍会添加。再次感谢作者制作了本主题。

查看评论 - 5 条评论

Comments | 5 条评论

博客作者 BluSaber

登录以回复

发布于 2020-02-02 15:35 ( Google Chrome 58.0.3000.3 Android 4.2.2 )( )

好棒，很漂亮的风格改变(°∀°)ﾉ
博客作者寒甜同学

登录以回复

发布于 2020-02-13 11:14 ( Google Chrome 79.0.3945.130 Windows 10 )( )

真的是非常不错的修改方式！
（ps：希望可以用专用的代码框框，好抄一点）
博客作者 chanshiyu

登录以回复

发布于 2020-02-29 15:43 ( Google Chrome 80.0.3987.122 Windows 10 )( )

粉粉的主题，少女心爆满~
- 博客作者 Asuhe
  
  登录以回复
  
  发布于 2020-02-29 15:52 ( Safari 605.1.15 Mac OSX 10_15 )( )
  
  @chanshiyu 大佬好
博客作者 funix_cn

登录以回复

发布于 2020-07-15 11:43 ( Google Chrome 84.0.4147.89 Linux )( )

同为infj哈哈哈哈