Hexo折腾日记之侧栏篇

发表于 分类于 Valine： 本文字数： 22k

前言

现在我相信兴趣是最好的学习动力了。作为一个对前段完全提不起兴趣的人，在见识到别人的博客有多好看之后，我居然对美化博客产生了强烈的兴趣。以至于在折腾的过程中浑然不知时间的流逝，有时候明明已经饥肠辘辘了却依然乐之不疲，连我自己都在怀疑自己是不是着了魔。在高强度折腾了将近一天后，我终于将我的博客侧栏打造成了我满意的样子。对于我这种毫无任何HTML，CSS等基础的人，在折腾过程中遇到了难以计数的bug，所以能有这样的成果已经是相当满足了。这篇博客记录我对侧栏进行魔改的整个过程。

折腾过程

改造思路

我希望主页的侧栏以及浏览文章时的侧栏显示的内容是不同的。

  • 在主页时，博客侧栏要尽可能多地显示和我博客有关的各种信息，比如博主的信息，文章分类信息，文章标签信息等等。
  • 在浏览文章时，侧栏的信息要加以精简，仅仅保留博主信息以及文章目录，同时在滚动页面时侧栏要固定在头部。

由于NexT主题默认在任何页面侧栏在滚动到页面顶部时都固定不动。但我想在主页面时侧栏能够显示更多的信息，于是我的想法就是写一个if语句判断当前页面是否为浏览文章页面，若不是，则侧栏随页面滚动，并且尽可能多的显示信息。若是，则仅仅显示博主信息以及文章目录。

具体实现

首先打开/next/layout/_macro文件夹下的sidebar.swig文件，这就是我们博客侧栏的源代码了，我们开始进行魔改

首先开头第一段

1
2
3
4
5
6
7
<div class="sidebar-toggle">
<div class="sidebar-toggle-line-wrap">
    <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
    <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
    <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
</div>
</div>

我们保持不动，然后接下来aside标签下的内容全部删除，是的你没听错，全部删除，我们重新实现。
首先先写个if语句来判断当前的页面

1
2
3
4
{%- set display_toc = theme.toc.enable and display_toc %}
{%- if not display_toc or toc(page.content).length <= 1 %}
...
{%- endif %}

接着我们在if语句内部协商我们想在主页面侧栏现实的内容

  1. 博主信息。包括头像，自我介绍以及附加博客的文章数，类别数以及标签数。这段代码在next/layout/_partials/sidebar/的site-overview.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
    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
    <div class="author-overview">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            {%- if theme.avatar.url %}
            <img class="site-author-image" itemprop="image"
                src="{{ url_for( theme.avatar.url | default(theme.images + '/avatar.gif') ) }}"
                alt="{{ author }}">
            {%- endif %}
            <p class="site-author-name" itemprop="name">{{ author }}</p>
            <div class="site-description motion-element" itemprop="description">{{ description }}</div>
        </div>

        {%- if theme.site_state %}
            <nav class="site-state motion-element">
            {%- if config.archive_dir != '/' and site.posts.length > 0 %}
                <div class="site-state-item site-state-posts">
                {%- if theme.menu.archives %}
                    <a href="{{ url_for(theme.menu.archives).split('||')[0] | trim }}">
                {% else %}
                    <a href="{{ url_for(config.archive_dir) }}">
                {%- endif %}
                    <span class="site-state-item-count">{{ site.posts.length }}</span>
                    <span class="site-state-item-name">{{ __('state.posts') }}</span>
                </a>
                </div>
            {%- endif %}

            {%- if site.categories.length > 0 %}
                {%- set categoriesPageQuery = site.pages.find({type: 'categories'}, {lean: true}) %}
                {%- set hasCategoriesPage = categoriesPageQuery.length > 0 %}
                <div class="site-state-item site-state-categories">
                {%- if hasCategoriesPage %}
                    {%- if theme.menu.categories %}
                    <a href="{{ url_for(theme.menu.categories).split('||')[0] | trim }}">
                    {% else %}
                    <a href="{{ url_for(config.category_dir) + '/' }}">
                    {%- endif %}
                {%- endif %}
                {%- set visibleCategories = 0 %}
                {%- for cat in site.categories %}
                    {%- if cat.length %}{%- set visibleCategories += 1 %}{%- endif %}
                {%- endfor %}
                <span class="site-state-item-count">{{ visibleCategories }}</span>
                <span class="site-state-item-name">{{ __('state.categories') }}</span>
                {%- if hasCategoriesPage %}</a>{%- endif %}
                </div>
            {%- endif %}

            {%- if site.tags.length > 0 %}
                {%- set tagsPageQuery = site.pages.find({type: 'tags'}, {lean: true}) %}
                {%- set hasTagsPage = tagsPageQuery.length > 0 %}
                <div class="site-state-item site-state-tags">
                {%- if hasTagsPage %}
                    {%- if theme.menu.tags %}
                    <a href="{{ url_for(theme.menu.tags).split('||')[0] | trim }}">
                    {% else %}
                    <a href="{{ url_for(config.tag_dir) + '/' }}">
                    {%- endif %}
                {%- endif %}
                {%- set visibleTags = 0 %}
                {%- for tag in site.tags %}
                    {%- if tag.length %}{%- set visibleTags += 1 %}{%- endif %}
                {%- endfor %}
                <span class="site-state-item-count">{{ visibleTags }}</span>
                <span class="site-state-item-name">{{ __('state.tags') }}</span>
                {%- if hasTagsPage %}</a>{%- endif %}
                </div>
            {%- endif %}
            </nav>
        {%- endif %}

        {%- if theme.social %}
            <div class="links-of-author motion-element">
            {%- for name, link in theme.social %}
                <span class="links-of-author-item">
                {%- set sidebarURL = link.split('||')[0] | trim %}
                {%- if not (theme.social_icons.enable) or (not theme.social_icons.icons_only) %}
                {%- set sidebarText = name %}
                {%- endif %}
                {%- if theme.social_icons.enable %}
                {%- set sidebarIcon = '<i class="fa fa-fw fa-' + link.split('||')[1] | trim | default('globe') + '"></i>' %}
                {%- endif %}
                {{ next_url(sidebarURL, sidebarIcon + sidebarText, {title: name + ' &rarr; ' + sidebarURL}) }}
                </span>
            {%- endfor %}
            </div>
        {%- endif %}

        {%- if theme.rss %}
            <div class="feed-link motion-element">
            <a href="{{ url_for(theme.rss) }}" rel="alternate">
                <i class="fa fa-rss"></i>RSS
            </a>
            </div>
        {%- endif %}

        {%- if theme.chat.enable and theme.chat.service !== '' %}
            <div class="chat motion-element">
            {%- if theme.chat.service == 'chatra' and theme.chatra.enable %}
            <a onclick="Chatra('openChat', true)">
            {%- endif %}
            {%- if theme.chat.service == 'tidio' and theme.tidio.enable %}
            <a onclick="tidioChatApi.open();">
            {%- endif %}
            {%- if theme.chat.icon %}<i class="fa fa-{{ theme.chat.icon }}"></i>{%- endif %}
            {{ theme.chat.text }}
            </a>
            </div>
        {%- endif %}

        {%- if theme.creative_commons.license and theme.creative_commons.sidebar %}
            <div class="cc-license motion-element" itemprop="license">
            {%- set ccLanguage = theme.creative_commons.language %}
            {%- if theme.creative_commons.license === 'zero' %}
            {%- set ccType = 'publicdomain/zero/1.0/' + ccLanguage %}
            {% else %}
            {%- set ccType = 'licenses/' + theme.creative_commons.license + '/4.0/' + ccLanguage %}
            {%- endif %}
            {%- set ccURL = 'https://creativecommons.org/' + ccType %}
            {%- set ccImage = '<img src="' + url_for(theme.images + '/cc-' + theme.creative_commons.license + '.svg') + '" alt="Creative Commons">' %}
            {{ next_url(ccURL, ccImage, {class: 'cc-opacity'}) }}
            </div>
        {%- endif %}
    </div>

  2. 博客公告。内容就自由发挥了。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <div class="card-announcement">
        <div class="card-content">
            <div class="item_headline">
            <i class="fa fa-bullhorn card-announcement-animation" aria-hidden="true"></i>
            <span>公告</span>
        </div>
            <div class="announcement_content">
            谢谢你这么帅，这么漂亮还来看我的博客，如果喜欢的话记得收藏哦
            </div>
        </div>
    </div>

  3. 博客信息。我主要就显示文章数量，博客运行天数，访问人数以及点击量四条信息。

    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
    <div class="blog-overview">
        <div class="item_headline"><i class="fa fa-line-chart" aria-hidden="true"></i><span>网站资讯</span></div>
        <div class="blog-info">
            <script{{ pjax }} async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
            <li class="blog-info-list">
            <span class="blog-info-name">文章数目</span>
            <span class="blogs-count">{{ site.posts.length }}</span>
            </li>
            <li class="blog-info-list">
            <span class="blog-info-name">运行天数</span>
            <span class="days-count" id="sitedays"></span>
            <script language=javascript>
                function siteTime(){
                    window.setTimeout("siteTime()", 1000);
                    var seconds = 1000;
                    var minutes = seconds * 60;
                    var hours = minutes * 60;
                    var days = hours * 24;
                    var years = days * 365;
                    var today = new Date();
                    var todayYear = today.getFullYear();
                    var todayMonth = today.getMonth()+1;
                    var todayDate = today.getDate();
                    var todayHour = today.getHours();
                    var todayMinute = today.getMinutes();
                    var todaySecond = today.getSeconds();
                    var t1 = Date.UTC(2019,07,26,00,00,00); //北京时间2018-2-13 00:00:00
                    var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond);
                    var diff = t2-t1;
                    var diffYears = Math.floor(diff/years);
                    var diffDays = Math.floor((diff/days)-diffYears*365);
                    document.getElementById("sitedays").innerHTML=diffDays+" 天 ";
                }
                siteTime();
            </script>
            </li>
            <li class="blog-info-list">
            <span class="blog-info-list">访问数</span>
            <span class="site-uv" title="{{ __('footer.total_visitors') }}">
                <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
            </span>
            </li>
            <li class="blog-info-list">
            <span class="blog-info-name">点击量</span>
            <span class="site-pv" title="{{ __('footer.total_views') }}">
                <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
            </span>
            </li>
        </div>
    </div>

  4. 分类信息。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="sidebar-categoreus">
        <div class="item_headline">
        <i class="fa fa-folder-open" aria-hidden="true"></i>
        <span>分类</span>
        </div>
        <div>
        {{ list_categories() }} 
        </div>
    </div>

  5. 标签云。GitHub地址：https://github.com/MikeCoder/hexo-tag-cloud

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <div class="sidebar-tags">
        <div class="item_headline">
        <i class="fa fa-tags" aria-hidden="true"></i>
        <span>标签云</span>
        </div>
        {% if site.tags.length > 1 %}
        <script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcloud.js') }}"></script>
        <script type="text/javascript" charset="utf-8" src="{{ url_for('/js/tagcanvas.js') }}"></script>
        <div class="widget-wrap">
            <div id="myCanvasContainer" class="widget tagcloud">
            <canvas width="250" height="250" id="resCanvas" style="width=100%">
                {{ list_tags() }}
            </canvas>
            </div>
        </div>
        {% endif %}
    </div>

  6. 友情链接

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <div class="link-of-blogroll">
        <div class="item_headline">
        <i class="fa fa-handshake-o" aria-hidden="true">
        </i><span>友情链接</span>
        </div>
        {%- if theme.links %}
        <div class="links-of-blogroll motion-element {{ "links-of-blogroll-" + theme.links_layout | default('inline') }}">
            <div class="links-of-blogroll-title">
            <i class="fa  fa-fw fa-{{ theme.links_icon | default('globe') | lower }}"></i>
            {{ theme.links_title }}
            </div>
            <ul class="links-of-blogroll-list">
            {%- for blogrollText, blogrollURL in theme.links %}
                <li class="links-of-blogroll-item">
                {{ next_url(blogrollURL, blogrollText, {title: blogrollURL}) }}
                </li>
            {%- endfor %}
            </ul>
        </div>
        {%- endif %}
    </div>

主页的侧栏就设置完成了。

接下来就是浏览文章时的侧栏的设计，这里就直接上我的代码了

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
139
140
141
142
143
144
145
146
147
148
149
<div class="sidebar-inner"> 
    {%- if display_toc and toc(page.content).length > 1 %}
    <!--noindex-->
    <div class="author-overview">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            {%- if theme.avatar.url %}
            <img class="site-author-image" itemprop="image"
                src="{{ url_for( theme.avatar.url | default(theme.images + '/avatar.gif') ) }}"
                alt="{{ author }}">
            {%- endif %}
            <p class="site-author-name" itemprop="name">{{ author }}</p>
            <div class="site-description motion-element" itemprop="description">{{ description }}</div>
        </div>
        {%- if theme.site_state %}
        <nav class="site-state motion-element">
            {%- if config.archive_dir != '/' and site.posts.length > 0 %}
            <div class="site-state-item site-state-posts">
                {%- if theme.menu.archives %}
                <a href="{{ url_for(theme.menu.archives).split('||')[0] | trim }}">
                {% else %}
                <a href="{{ url_for(config.archive_dir) }}">
                {%- endif %}
                <span class="site-state-item-count">{{ site.posts.length }}</span>
                <span class="site-state-item-name">{{ __('state.posts') }}</span>
                </a>
            </div>
            {%- endif %}

            {%- if site.categories.length > 0 %}
            {%- set categoriesPageQuery = site.pages.find({type: 'categories'}, {lean: true}) %}
            {%- set hasCategoriesPage = categoriesPageQuery.length > 0 %}
            <div class="site-state-item site-state-categories">
                {%- if hasCategoriesPage %}
                {%- if theme.menu.categories %}
                    <a href="{{ url_for(theme.menu.categories).split('||')[0] | trim }}">
                {% else %}
                    <a href="{{ url_for(config.category_dir) + '/' }}">
                {%- endif %}
                {%- endif %}
                {%- set visibleCategories = 0 %}
                {%- for cat in site.categories %}
                {%- if cat.length %}{%- set visibleCategories += 1 %}{%- endif %}
                {%- endfor %}
                <span class="site-state-item-count">{{ visibleCategories }}</span>
                <span class="site-state-item-name">{{ __('state.categories') }}</span>
                {%- if hasCategoriesPage %}</a>{%- endif %}
            </div>
            {%- endif %}

            {%- if site.tags.length > 0 %}
            {%- set tagsPageQuery = site.pages.find({type: 'tags'}, {lean: true}) %}
            {%- set hasTagsPage = tagsPageQuery.length > 0 %}
            <div class="site-state-item site-state-tags">
                {%- if hasTagsPage %}
                {%- if theme.menu.tags %}
                    <a href="{{ url_for(theme.menu.tags).split('||')[0] | trim }}">
                {% else %}
                    <a href="{{ url_for(config.tag_dir) + '/' }}">
                {%- endif %}
                {%- endif %}
                {%- set visibleTags = 0 %}
                {%- for tag in site.tags %}
                {%- if tag.length %}{%- set visibleTags += 1 %}{%- endif %}
                {%- endfor %}
                <span class="site-state-item-count">{{ visibleTags }}</span>
                <span class="site-state-item-name">{{ __('state.tags') }}</span>
                {%- if hasTagsPage %}</a>{%- endif %}
            </div>
            {%- endif %}
        </nav>
        {%- endif %}

        {%- if theme.social %}
        <div class="links-of-author motion-element">
            {%- for name, link in theme.social %}
            <span class="links-of-author-item">
            {%- set sidebarURL = link.split('||')[0] | trim %}
            {%- if not (theme.social_icons.enable) or (not theme.social_icons.icons_only) %}
                {%- set sidebarText = name %}
            {%- endif %}
            {%- if theme.social_icons.enable %}
                {%- set sidebarIcon = '<i class="fa fa-fw fa-' + link.split('||')[1] | trim | default('globe') + '"></i>' %}
            {%- endif %}
                {{ next_url(sidebarURL, sidebarIcon + sidebarText, {title: name + ' &rarr; ' + sidebarURL}) }}
            </span>
            {%- endfor %}
        </div>
        {%- endif %}

        {%- if theme.rss %}
        <div class="feed-link motion-element">
            <a href="{{ url_for(theme.rss) }}" rel="alternate">
            <i class="fa fa-rss"></i>RSS
            </a>
        </div>
        {%- endif %}

        {%- if theme.chat.enable and theme.chat.service !== '' %}
        <div class="chat motion-element">
        {%- if theme.chat.service == 'chatra' and theme.chatra.enable %}
            <a onclick="Chatra('openChat', true)">
        {%- endif %}
        {%- if theme.chat.service == 'tidio' and theme.tidio.enable %}
            <a onclick="tidioChatApi.open();">
        {%- endif %}
        {%- if theme.chat.icon %}<i class="fa fa-{{ theme.chat.icon }}"></i>{%- endif %}
            {{ theme.chat.text }}
        </a>
        </div>
        {%- endif %}

        {%- if theme.creative_commons.license and theme.creative_commons.sidebar %}
        <div class="cc-license motion-element" itemprop="license">
        {%- set ccLanguage = theme.creative_commons.language %}
        {%- if theme.creative_commons.license === 'zero' %}
            {%- set ccType = 'publicdomain/zero/1.0/' + ccLanguage %}
        {% else %}
            {%- set ccType = 'licenses/' + theme.creative_commons.license + '/4.0/' + ccLanguage %}
        {%- endif %}
        {%- set ccURL = 'https://creativecommons.org/' + ccType %}
        {%- set ccImage = '<img src="' + url_for(theme.images + '/cc-' + theme.creative_commons.license + '.svg') + '" alt="Creative Commons">' %}
            {{ next_url(ccURL, ccImage, {class: 'cc-opacity'}) }}
        </div>
        {%- endif %}
    </div>
    <div class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active" id="post-toc-wrap">
        <div class="item_headline">
        <i class="fa fa-list" aria-hidden="true">
        </i><span>目录</span>
        </div>
        <div class="post-toc">

        {%- set next_toc_number = theme.toc.number %}
        {%- if page.toc_number !== undefined %}
            {%- set next_toc_number = page.toc_number %}
        {%- endif %}
        {%- set next_toc_max_depth = page.toc_max_depth|default(theme.toc.max_depth)|default(6) %}
        {%- set toc = toc(page.content, { "class": "nav", list_number: next_toc_number, max_depth: next_toc_max_depth }) %}

        {%- if toc.length <= 1 %}
            <p class="post-toc-empty">{{ __('post.toc_empty') }}</p>
        {% else %}
            <div class="post-toc-content">{{ toc }}</div>
        {%- endif %}
        </div>
    </div>
    <!--/noindex-->
    {%- endif %}
</div>

之后就可以自由发挥添加CSS样式了。

0%