LLLK
0%

Blog美化日志

发表于 更新于

测试图片
默认的muse布局显得有些单调，因此借着网上各类教程摸索着对布局进行个性化装饰，这篇文章按时间顺序记录了从初始主题一步步增加新内容的过程，列出了碰到的问题以及解决办法，文章随着进度持续更新~

6.24

添加测试

见First-test-1

6.26

更换默认图标

测试图片

FuFu可爱吧~(●'◡'●)

添加访问量

1.主题下_config.yml文件，将busuanzi_count的enable改为true

1
2
3
4
5
6
7
8
busuanzi_count:
  enable: true
  total_visitors: true
  total_visitors_icon: fa fa-user
  total_views: true
  total_views_icon: fa fa-eye
  post_views: true
  post_views_icon: fa fa-eye

2.打开/themes/next/layout/_partials/footer.swig，在文末添加：

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
{% if theme.busuanzi_count.enable %}
    <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

    <span id="busuanzi_container_site_pv">总访问量<span id="busuanzi_value_site_pv"></span>次</span>
    <span class="post-meta-divider">|</span>
    <span id="busuanzi_container_site_uv">总访客数<span id="busuanzi_value_site_uv"></span>人</span>
    <span class="post-meta-divider">|</span>
<!-- 不蒜子计数初始值纠正 -->
<script>
$(document).ready(function() {

    var int = setInterval(fixCount, 50);  // 50ms周期检测函数
    var countOffset = 20000;  // 初始化首次数据

    function fixCount() {            
       if (document.getElementById("busuanzi_container_site_pv").style.display != "none")
        {
            $("#busuanzi_value_site_pv").html(parseInt($("#busuanzi_value_site_pv").html()) + countOffset); 
            clearInterval(int);
        }                  
        if ($("#busuanzi_container_site_pv").css("display") != "none")
        {
            $("#busuanzi_value_site_uv").html(parseInt($("#busuanzi_value_site_uv").html()) + countOffset); // 加上初始数据 
            clearInterval(int); // 停止检测
        }  
    }
       	
});
</script> 
{% endif %}

出现问题：不蒜子计数爆炸
问题原因：似乎和浏览器隐私安全设置有关，待深究。
解决方法：换用vercount，具体参考博客：解决不蒜子文章阅读计数错误的问题
失败！
并非失败！只有本地测试时出问题

6.27

关闭底部Powered By xxx

1
2
#Powered by Hexo & NexT
powered: false

修改代码主题及复制选项

1
2
3
4
5
6
7
8
9
#Code Highlight theme
#Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
#See: https://github.com/chriskempson/tomorrow-theme
    highlight_theme: night eighties
#Add copy button on codeblock
copy_button:
    enable: true
#Show text copy result.
    show_result: true

6.28

统一文章预览格式：

图片+概述

调整代码块样式

自定义Next.Muse CSS

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

// Next.Muse 自定义CSS
if hexo-config('scheme') == 'Muse' {
    //为Header和Footer添加背景色
    .header {
        +desktop() {
            background: #F5F5F5;
        }
        +tablet() {
            background: #F5F5F5;
        }
        +mobile() {
        }

    }

    .footer {
        +desktop() {
            background: #F5F5F5;
        }
        +tablet() {
            background: #F5F5F5;
        }
        +mobile() {

        }
    }

    //调节header空白
    .header-inner {
        +desktop() {
            padding-top: 70px;
            padding-bottom: 50px;
        }
        +tablet() {
            padding-top: 70px;
            padding-bottom: 50px;
        }
        +mobile() {
            padding-top: 50px;
            padding-bottom: 30px;
        }
    }

    //文章样式
    .post-body {

        //宽屏模式下字体太大了，改回mediun   
        +desktop-large() {
            font-size: $font-size-medium;
        }

        //文章内用H2做一级标题，加下横线  
        h2 {
            border-bottom: 1px solid #eee;
            padding-bottom: 10px;
        }
        
        //文章内用H3做二级标题，加大字号  
        h3 {
            font-size: 1.2em;
        }

        //文章图片说明
        .image-caption {
            font-size: 0.5em;
            font-weight: normal;
            margin: -10px auto 15px
        }
    }

    //文章内图片样式
    .post-body img {
        border: 1px solid #ddd;
        box-sizing: border-box;
        padding: 0px;
        border-radius: 3px;
        box-shadow: 4px 4px 4px 0px #ddd;
    }

    /* 阅读更多按钮美化 */

/*.post-button {
      text-align: center;
      margin-top: 20px;
  
      a {
        display: inline-block;
        padding: 8px 20px;
        background: #4a90e2;
        color: white !important;
        border-radius: 20px;
        font-weight: 500;
        transition: background 0.3s;
    
        &:hover {
          background: #3a7bc8;
          text-decoration: none;
        }
      }
    }*/

    //赞赏按钮样式
    .reward-container button {
        background: #222222;
        color: #F5F5F5
        height: 38px;
        width: 38px;
        padding: 0 0 0;
        border: 0;
        border-radius: 5px;
        line-height:0;
        outline: 0
        -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        transition: 0.2s ease-out;

        &:hover {
            background: #26aca3;
        }
    }

    //版权声明样式
    .post-copyright ul{
        background-color: #f9f9f9;
        border-left: 0px;
        list-style: none;
        margin: 2em 0 0;
        padding: 0.5em 1em;
        border: 1px solid #dddddd;
    }

    //底部上下篇导航留空
    .post-nav-item {
        padding: 10px 0px 10px 0px
    }
}

参考博客：NexT 主題自定义 CSS 样式分享

自定义样式问题

出现问题：自定义样式在本地hexo s时能实现，提交到github后通过域名访问没有自定义样式(如背景、图片设置等)。
问题原因：也许是hexo d未递交根目录下source/_data文件夹内内容？待深究。
解决方法：在根目录的gitignore中添加：

1
!source/_data/

7.6

添加live2d

参考博客：Next主题个性化配置

在Git Bash中运行：

1
npm install -save hexo-helper-live2d

在博客文件目录下新建文件***<喜欢的模型名>.model.json***，路径为[博客目录]\live2d_models[喜欢的模型名]，需要自己新建目录

接着运行

1
npm install --save live2d-widget-model-<喜欢的模型名>

并在hexo的_config.yml文件中添加以下配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  log: false
  model:
    use: live2d-widget-model-<喜欢的模型名>
  display:
    position: left
    width: 150
    height: 300
  mobile:
    show: false

据说移动端显示live2d会有问题，干脆改成false。

最终效果如下所示（模型名为tororo）
live2d图片

未完待续~