0%

博客美化

发表于 更新于 分类于
本文字数： 16k 阅读时长 ≈ 29 分钟

1. 更改主题

  1. 通过网络下载主题
  2. 将解压后的文件存到（我的本地博客文件夹为 myblog） myblog/themes/ 下
  3. 打开主题配置文件 myblog/config.yml
  4. 找到以下代码
    1
    theme: landscape

修改成：

1
2
theme: name
# name 就是你解压后的文件夹名字

2. 更改主题样式（以 nextT 为例子）

  1. 打开 themes/next/config.yml 文件（主题配置文件）
  2. 找到如下代码
    1
    2
    3
    4
    5
    # Schemes
    scheme: Muse
    #scheme: Mist
    #scheme: Pisces
    #scheme: Gemini

有四种，只要将当前的样式（前面没 # 号的）屏蔽，也就是前面加个 # 号，要选择的删除掉 # 字符就行。

3. 增加侧边栏选项

打开主题配置文件 themes/next/config.yml 找到如下代码：

1
2
3
4
5
6
7
8
9
menu:
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar
  #sitemap: /sitemap.xml || sitemap
  #commonweal: /404/ || heartbeat

想要的取消屏蔽就行

4. 更改语言

打开站点配置文件 config.yml
找到对应的代码：

1
2
3
4
5
6
7
8
# Site
title: 不忘什么心？
subtitle: 努力的，都将以另一种方式呈现。
description: 努力的，都将以另一种方式呈现
keywords:
author: 志者
language: zh-Hans
timezone:

修改对应的 language 字段

5. 首页显示文章的部分

打开主题配置文件 themes/next/config.yml ，找到代码修改

1
2
3
4
auto_excerpt:
    enable: true
    length: 280
# length 为长度

image

6. 开启图标

如图：
image
打开主题配置文件 themes/next/config.yml

1
2
3
4
5
6
7
8
9
10
11
social:
  GitHub: https://github.com/yourname || github
  E-Mail: mailto:yourname@gmail.com || envelope
  Google: https://plus.google.com/yourname || google
  Twitter: https://twitter.com/yourname || twitter
  #FB Page: https://www.facebook.com/yourname || facebook
  #VK Group: https://vk.com/yourname || vk
  #StackOverflow: https://stackoverflow.com/yourname || stack-overflow
  #YouTube: https://youtube.com/yourname || youtube
  #Instagram: https://instagram.com/yourname || instagram
  #Skype: skype:yourname?call|chat || skype

取消屏蔽就行

7 点击头像回到博客首页

  1. 把头像avatar.gif放在~/blog/source/uploads/下，则：
    1
    2
    3
    4
    5
    修改主题配置文件，位置：~/myblog/themes/next/_config.yml
    # Sidebar Avatar
    # in theme directory(source/images): /images/avatar.gif
    # in site  directory(source/uploads): /uploads/avatar.gif
    avatar: /uploads/avatar.gif

然后编辑文件：

1
2
3
4
5
6
修改文件，位置：~/blog/themes/next/layout/_macro/sidebar.swig
       <a href="/">
          <img class="site-author-image" itemprop="image"
               src="{{ url_for( theme.avatar | default(theme.images + '/avatar.gif') ) }}"
               alt="{{ theme.author }}" />
       </a>

8. 移动端显示 back-to-top 按钮和侧栏

1
2
3
# 文件位置：~/blog/themes/next/_config.yml
# Enable sidebar on narrow view
onmobile: true

9. 更改标签云的颜色

文件位置：~/blog/themes/next/layout/page.swig

1
{{ tagcloud({min_font: 13, max_font: 31, amount: 1000, color: true, start_color: '#9733EE', end_color: '#FF512F'}) }}

修改对应参数值即可，参数说明见 Hexo 官方文档，颜色可以参考这个网站，自己去纠结……

10. 修改文章底部的那个带#号的标签

实现效果图
image
具体实现方法
修改模板 /themes/next/layout/_macro/post.swig，搜索 rel="tag">#，将 # 换成 <i class="fa fa-tag"></i>

11. 在每篇文章末尾统一添加“本文结束”标记

实现效果图
image
具体实现方法
在路径 \themes\next\layout_macro 中新建 passage-end-tag.swig 文件,并添加以下内容：

1
2
3
4
5
<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
    {% endif %}
</div>

接着打开 \themes\next\layout\_macro\post.swig 文件，在 post-body 之后， post-footer 之前添加如下画红色部分代码（post-footer之前两个DIV）：
image
代码如下：

1
2
3
4
5
<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

然后打开主题配置文件 （_config.yml),在末尾添加：

1
2
3
# 文章末尾添加“本文结束”标记
passage_end_tag:
  enabled: true

11. 修改``代码块自定义样式

实现效果图
image
具体实现方法
打开 \themes\next\source\css\_custom\custom.styl ,向里面加入：(颜色可以自己定义) 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Custom styles.
code {
    color: #ff7600;
    background: #fbf7f8;
    margin: 2px;
}
// 大代码块的自定义样式
.highlight, pre {
    margin: 5px 0;
    padding: 5px;
    border-radius: 3px;
}
.highlight, code, pre {
    border: 1px solid #d6d6d6;
}

12. 侧边栏社交小图标设置

实现效果图
image
实现方法
打开主题配置文件（_config.yml），搜索social:,在图标库找自己喜欢的小图标，并将名字复制在如下位置，保存即可
image

13. 网站底部字数统计

实现效果图
image
具体实现方法
切换到根目录下，然后运行如下代码
npm install hexo-wordcount --save
然后在/themes/next/layout/_partials/footer.swig文件尾部加上：

1
2
3
4
<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">博客全站共{{ totalcount(site) }}字</span>
</div>

14. 添加“404”页面

腾讯公益404页面，寻找丢失儿童，让大家一起关注此项公益事业！效果如下 http://www.ixirong.com/404.html， 使用方法，新建 404.html 页面，放到主题的 source 目录下，内容如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8;"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="robots" content="all" />
  <meta name="robots" content="index,follow"/>
</head>
<body>

<script type="text/javascript" src="http://www.qq.com/404/search_children.js"
        charset="utf-8" homePageUrl="your site url "
        homePageName="回到我的主页">
</script>

</body>
</html>

15. 文章置顶

首先移除默认安装的插件：
npm uninstall hexo-generator-index --save
然后安装新插件：
npm install hexo-generator-index-pin-top --save
最后编辑有这需求的相关文章时，在 Front-matter（文件最上方以 — 分隔的区域）加上一行：
top: true
然后就行了。如果你置顶了多篇，怎么控制顺序呢？设置 top 的值（大的在前面），比如： 

1
2
3
# Post a.md
title: a
top: 1

可是，没有任何标记啊，读者怎么知道文章置顶了,编辑文件：

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
// 文件位置：~/blog/node_modules/hexo-generator-index-pin-top/lib/generator.js

'use strict';
var pagination = require('hexo-pagination');
module.exports = function(locals){
  var config = this.config;
  var posts = locals.posts;
    posts.data = posts.data.sort(function(a, b) {
        if(a.sticky && b.sticky) { // 两篇文章sticky都有定义
            if(a.sticky == b.sticky) return b.date - a.date; // 若sticky值一样则按照文章日期降序排
            else return b.sticky - a.sticky; // 否则按照sticky值降序排
        }
        else if(a.sticky && !b.sticky) { // 以下是只有一篇文章sticky有定义，那么将有sticky的排在前面（这里用异或操作居然不行233）
            return -1;
        }
        else if(!a.sticky && b.sticky) {
            return 1;
        }
        else return b.date - a.date; // 都没定义按照文章日期降序排
    });
  var paginationDir = config.pagination_dir || 'page';
  return pagination('', posts, {
    perPage: config.index_generator.per_page,
    layout: ['index', 'archive'],
    format: paginationDir + '/%d/',
    data: {
      __index: true
    }
  });
};

也就是将 top 全部替换为 NexT 原有的 sticky，然后将 Front-matter 中的 top 替换为 sticky。

最后可以自定义一下样式： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* 文件位置：~/blog/themes/next/source/css/_custom/custom.styl */

/* 自定义的文章置顶样式 */
.post-sticky-flag {
    font-size: inherit;
    float: left;
    color: rgb(0, 0, 0);
    cursor: help;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    transition-delay: 0s;
}
.post-sticky-flag:hover {
    color: #07b39b;
}

16. 建立模板文件

如果你是在站点文件夹根目录用 hexo new post <title> 新建的文章，那么其实它就是将文章的模版文件 post.md「复制」了一份到 ~/myblog/source/_posts/ 下，所以这也意味着：

  1. 你可以直接通过在 ~/blog/source/_posts/ 下新建.md 结尾的文件来写新的文章。
  2. 你可以通过自定义文章的模版文件，从而每次命令行新建的文章都会有你自定义的内容。
  3. 如果自己直接新建文件，一定要记得加上文件最上方的参数，即下面的相关内容，还有编码请用 UTF-8。
    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
    # ！！！！！！！！！！
    # 每一项的 : 后面均有一个空格
    # 且 : 为英文符号
    # ！！！！！！！！！！

    title:
    # 文章标题，可以为中文

    date:
    # 建立日期，如果自己手动添加，请按固定格式

    updated:
    # 更新日期，其它与上面的建立日期类似

    permalink:
    # 若站点配置文件下的 permalink 配置了 title
    # 则可以替换文章 URL 里面的 title（文章标题）

    categories:
    # 分类，支持多级，比如：

    tags:
    # 标签
    # 多个可以这样写 [标签1,标签2,标签3]

    description:
    # 文章的描述，在每篇文章标题下方显示
    # 并且作为网页的 description 元数据
    # 如果不写，则自动取 <!-- more -->
    # 之前的文字作为网页的 description 元数据

    keywords:
    # 关键字，并且作为网页的 keywords 元数据
    # 如果不写，则自动取 tags 里的项

    comments:
    # 是否开启评论
    # 默认值是 true
    # 要关闭写 false

    layout:
    # 页面布局，默认值是 post，默认值可以在
    # 站点配置文件中修改 default_layout
    # 另：404 页面可能用到，将其值改为 false

    type:
    # categories，目录页面
    # tags，标签页面
    # picture，用来生成 group-pictures
    # quote？
    # https://io-oi.me/tech/test/

    photos:
    # Gallery support，用来支持画廊╱相册，用法如下：
    # - photo_url_1
    # - photo_url_2
    # - photo_url_3
    # https://io-oi.me/tech/test/

    link:
    # 文章的外部链接
    # https://io-oi.me/tech/test/

    image:
    # 自定义的文章摘要图片，只在页面展示，文章内消失
    # 先配置好，否则请勿添加！

    sticky:
    # 文章置顶
    # 先配置好，否则请勿添加！

    password:
    # 文章密码，此项只有参考教程：
    # http://shenzekun.cn/hexo的next主题个性化配置教程.html
    # 第 24 节，配置好，否则请勿添加！
    # 发现还是有 bug 的，就是右键在新标签中打开
    # 然后无论是否输入密码，都能看到内容

附加：
如果要应用多个类别层次结构，请使用名称列表而不是单个名称。如果Hexo在帖子上看到以这种方式定义的任何类别，它会将该帖子的每个类别视为其自己的独立层次结构。 

1
2
3
4
5
categories:
- [Sports, Baseball]
- [MLB, American League, Boston Red Sox]
- [MLB, American League, New York Yankees]
- Rivalries

17. 文章图片

文章摘要（excerpt）是指每篇文章（post）在页面（page）上显示的那部分内容，[Read More] 之前的文章内容。由于它会展示在页面，因此在每篇文章的文章摘要中加一张图片。但会出现你想从文章中选一张图片作为文章摘要图片，而这张图片由于写作要求，必须添加在文章的末尾，这样点 [Read More] 查看文章时，这张图片就会重复出现了。咋办？

前提是在主题配置文件中： 

1
2
3
4
5
6
# 文件位置：~/blog/themes/next/_config.yml

excerpt_description: false

auto_excerpt:
  enable: false

首先加代码： 

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
<!-- 文件位置：~/blog/themes/next/layout/_macro/post.swig -->

      {% if is_index %}
        {% if post.description and theme.excerpt_description %}
          {{ post.description }}
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="{{ url_for(post.path) }}">
              {{ __('post.read_more') }} &raquo;
            </a>
          </div>
          <!--/noindex-->
        {% elif post.excerpt  %}
          {{ post.excerpt }}
+          
+        {% if post.image %}
+        <div class="out-img-topic">
+          <img src={{ post.image }} class="img-topic" />
+        </div>
+        {% endif %}
+          
          <!--noindex-->
          <div class="post-button text-center">
            <a class="btn" href="{{ url_for(post.path) }}{% if theme.scroll_to_more %}#{{ __('post.more') }}{% endif %}" rel="contents">
              {{ __('post.read_more') }} &raquo;
            </a>
          </div>
          <!--/noindex-->

为了防止有的图片宽度不够导致风格不够统一，页面不美观，需要在 custom.styl 中加入： 

1
2
3
4
5
6
/* 文件位置：~/blog/themes/next/source/css/_custom/custom.styl */

/* 自定义的文章摘要图片样式 */
img.img-topic {
    width: 100%;
}

最后编辑有这需求的相关文章时，在 Front-matter（文件最上方以 — 分隔的区域）加上一行：
image: url
参考：这里

18. 添加评论

效果图
image
首先在_config.yml文件添加如下配置 

1
2
3
# Support for LiveRe comments system.
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: your uid

其中your uid在来必力注册获得，注册完后点击右上角如图：
image
在这里放上自己的博客网站，之后点击认证就可以获取安装代码（City版），然后代码中的data-uid就是your uid
image
然后在 layout/_scripts/third-party/comments/ 目录中添加 livere.swig，文件内容如下： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
{% if not (theme.duoshuo and theme.duoshuo.shortname) and not theme.duoshuo_shortname and not theme.disqus_shortname and not theme.hypercomments_id and not theme.gentie_productKey %}
  {% if theme.livere_uid %}
    <script type="text/javascript">
      (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];
        if (typeof LivereTower === 'function') { return; }
        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;
        e.parentNode.insertBefore(j, e);
      })(document, 'script');
    </script>
  {% endif %}
{% endif %}

然后在 layout/_scripts/third-party/comments.swig文件中追加： 

1
{% include './comments/livere.swig' %}

最后，在 ``layout/_partials/comments.swig `文件中条件最后追加 LiveRe 插件是否引用的判断逻辑：

1
2
3
{% elseif theme.livere_uid %}
      <div id="lv-container" data-id="city" data-uid="{{ theme.livere_uid }}"></div>
{% endif %}

参考：这里

19. 文章底部添加版权信息

在目录 next/layout/_macro/下添加 my-copyright.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
{% if page.copyright %}
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
  
  <!-- JS库 sweetalert 可修改路径 -->
  <script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
  <p><span>本文标题:</span><a href="{{ url_for(page.path) }}">{{ page.title }}</a></p>
  <p><span>文章作者:</span><a href="/" title="访问 {{ theme.author }} 的个人博客">{{ theme.author }}</a></p>
  <p><span>发布时间:</span>{{ page.date.format("YYYY年MM月DD日 - HH:mm") }}</p>
  <p><span>最后更新:</span>{{ page.updated.format("YYYY年MM月DD日 - HH:mm") }}</p>
  <p><span>原始链接:</span><a href="{{ url_for(page.path) }}" title="{{ page.title }}">{{ page.permalink }}</a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="{{ page.permalink }}"  aria-label="复制成功！"></i></span>
  </p>
  <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    $(".fa-clipboard").click(function(){
      clipboard.on('success', function(){
        swal({   
          title: "",   
          text: '复制成功',
          icon: "success", 
          showConfirmButton: true
          });
	});
    });  
</script>
{% endif %}

在目录next/source/css/_common/components/post/`下添加`my-post-copyright.styl 

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
.my_post_copyright {
  width: 85%;
  max-width: 45em;
  margin: 2.8em auto 0;
  padding: 0.5em 1.0em;
  border: 1px solid #d3d3d3;
  font-size: 0.93rem;
  line-height: 1.6em;
  word-break: break-all;
  background: rgba(255,255,255,0.4);
}
.my_post_copyright p{margin:0;}
.my_post_copyright span {
  display: inline-block;
  width: 5.2em;
  color: #b5b5b5;
  font-weight: bold;
}
.my_post_copyright .raw {
  margin-left: 1em;
  width: 5em;
}
.my_post_copyright a {
  color: #808080;
  border-bottom:0;
}
.my_post_copyright a:hover {
  color: #a3d2a3;
  text-decoration: underline;
}
.my_post_copyright:hover .fa-clipboard {
  color: #000;
}
.my_post_copyright .post-url:hover {
  font-weight: normal;
}
.my_post_copyright .copy-path {
  margin-left: 1em;
  width: 1em;
  +mobile(){display:none;}
}
.my_post_copyright .copy-path:hover {
  color: #808080;
  cursor: pointer;
}

修改next/layout/_macro/post.swig，在代码

1
2
3
4
5
<div>
      {% if not is_index %}
        {% include 'wechat-subscriber.swig' %}
      {% endif %}
</div>

之前添加增加如下代码： 

1
2
3
4
5
<div>
      {% if not is_index %}
        {% include 'my-copyright.swig' %}
      {% endif %}
</div>

修改next/source/css/_common/components/post/post.styl文件，在最后一行增加代码：
@import "my-post-copyright"
保存重新生成即可。
如果要在该博文下面增加版权信息的显示，需要在 Markdown 中增加copyright: true的设置，类似：

20 代码块添加复制功能

在新版本的 next7.3 下已经内置了复制按钮，在主题配置文件设置即可，且提供不同主题风格（default / flat / mac）进行选择。。
1
2
3
4
5
6
copy_button:
   enable: true
   # Show text copy result.
   show_result: false
   # Available values: default | flat | mac
   style: mac

参考博客

以上皆为参考别人博客记录，下面一一列出。

  1. 打造个性超赞博客 Hexo + NexT + GitHub Pages的超深度优化
  2. 【搜索优化】Hexo-next百度和谷歌搜索优化
  3. Hexo 个人博客 SEO 优化（3）：改造你的博客，提升搜索引擎排名
  4. Hexo博客Next主题SEO优化方法
  5. 白衣秀才
  6. 博采众长
  7. hexo史上最全搭建教程

本文标题:博客美化

文章作者:志者

发布时间:2019年08月21日 - 22:10:00

最后更新:2019年08月30日 - 11:38:25

原始链接:http://witman1999.github.io/博客美化.html

许可协议: 署名-非商业性使用-相同方式共享 4.0 国际 转载请保留原文链接及作者。

-------------本文结束感谢您的阅读-------------
copy