落雨晨星

0%

关于博客的一些设置

发表于 更新于 分类于 Valine：
本文字数： 2.2k 阅读时长 ≈ 4 分钟

感觉可以聊聊整个博客的设置。。毕竟经过了大幅度的魔改，最终变成了这个亚子。

博客构成介绍

博客基于hexo静态博客，图片使用外部图床加载（路过图床）。然后主题是魔改后的next，版本号7.4.0，还是能多少看出来的8。

魔改的地方大致是背景图，部分文字强调（换颜色不然整个博客的可读性就更差了虽然现在也8太行）

背景图的修改

之前能查到的主题添加背景的教程都是6版本的，新版本完全8行。所以经过摸索，确定了背景图元素的插入位置，在主题目录下的source\css\_common\components\components.styl中添加如下字段

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
body {
background-image:url(/images/background.jpg);    //声明背景文件的位置
background-repeat: no-repeat;
background-attachment:fixed;
background-position:40% 50%;                     //确定不同页面大小的观感微调的
background-size:cover;
  +mobile() {                                   //手机屏幕
    background-image:url(/images/background.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:20% 50%;                     //确定不同页面大小的观感微调的
background-size:cover;
  }
+tablet() {                                       //平板屏幕
    background-image:url(/images/background.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:20% 50%;                     //确定不同页面大小的观感微调的
background-size:cover;
  }

}

这些位置的确定可以用chrome的开发者工具进行不同页面比例测试然后调节出来（而做这些设备的自适应也是在浏览这些样式表的时候突发奇想做出来的）（不然在手机上完全看不见人这怎么能行（哼））

其实这是最主要的而且影响最大的调节，其他的感觉想不起来w。

页面透明化（2022.02.28新增）

最近又玩回hexo，next主题也升级到了7.8.0，目前来看上面的背景图插入方式仍然没有大问题

但插完图片之后发现透明化忘了解决

随后修改_schemes/Pisces内的styl文件(这取决于你选择的主题格式，不同主题格式的修改方式可能有所差别)

基本操作就是ctrl+F搜索background，并替换对应的值

_header.styl文件：（以下都只是指明修改透明化而改动的部分代码，并非完整代码）

1
2
.site-brand-container {
  background: rgba(0,0,0,0.7);

_layout.styl文件：

1
2
.header-inner {
  background: rgba(255,255,255,0.7); 
1
2
.content-wrap {
  background: rgba(255,255,255,0.7);

_menu.styl文件：

1
2
3
.toggle-line {
      background: rgba(255,255,255,0.7);
    }
1
2
.menu-item-active a::after {
    background: rgba(255,255,255,0.9);
1
2
.badge {
    background: rgba(255,255,255,0.7);

_sidebar.styl文件：

1
2
.sidebar {
  background: rgba(255,255,255,0.7);
1
2
.sidebar-inner {
  background: rgba(255,255,255,0.7);
&:hover {
  background: rgba(255,255,255,0.7);

1
2
.back-to-top {
  background: rgba(255,255,255,0.7);

_sub-menu.styl文件：

1
2
.sub-menu {
  background: rgba(255,255,255,0.7);

建议参考之后自行调试以达到最佳效果(最后编辑于22.02.28，hexo=6.0.0,next=7.8.0)