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 样式分享

未完待续~