胡杨树的博客

积跬步以至千里

0%

Hexo-github搭建个人博客(6):博客美化和进阶

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

1. 修改文章中网络连接文本样式

next默认的URL连接为黑色,不好看出是超链接,这里修改其颜色显示.
修改文件 themes\next\source\css_common\components\post\post.styl，在末尾添加如下css样式，：

1
2
3
4
5
6
7
8
9
10
11
// 文章内网络链接文本样式,将颜色改成了淡蓝色
.post-body p a{
  color: #0593d3;
  border-bottom: none;
  border-bottom: 1px solid #0593d3;
  &:hover {
    color: #fc6423;
    border-bottom: none;
    border-bottom: 1px solid #fc6423;
  }
}

2. 修改阅读全文样式

修改文件 themes\next\source\css_common\components\post\post.styl，在末尾添加如下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
.btn {
  color: #ff6060;
  background-color: #fff;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid #ff6060;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

  &:hover {
    color: #fff;
    background-color: #ff6060;
    border-color: #ff6060;
  }
}

3. 修改底部文字样式

修改文件 themes\next\source\css_common\components\post\post.styl，在末尾添加如下css样式，：

1
2
3
4
5
6
7
8
9
10
// 底部文字样式
.footer, .footer a {
  color: #ffa868;
  opacity: .8;
  border: none;
  
  &:hover {
    border: none;
  }
}

4. 修改主题页面布局为圆角

  • 修改主题配置文件, 将custom_file_path字段中的variables.styl打开
    1
    2
    custom_file_path:
      variable: source/_data/variables.styl
  • 新建 hexo/source/_data 目录,并在旗下下新建 variables.styl 文件，填写下面内容:
    1
    2
    3
    // 圆角设置
    $border-radius-inner     = 20px 20px 20px 20px;
    $border-radius           = 20px;

5. 设置背景图片以及透明化

  • 修改主题配置文件, 将custom_file_path字段中的variables.styl打开
    1
    2
    custom_file_path:
      style: source/_data/styles.styl
  • 新建 hexo/source/_data 目录,并在旗下下新建 styles.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
    //背景图片
    body {
        background:url(https://yanxiangyfg.github.io/images/yfg_blog_bg_blackcolor.jfif);
        background-repeat: no-repeat;
        background-attachment:fixed;
        background-size: cover;
        background-position:50% 50%;
    }


    //博客内容透明化
    //文章内容的透明度设置
    .content-wrap {
      opacity: 0.9;
    }
     
    //侧边框的透明度设置
    .sidebar {
      opacity: 0.9;
    }
     
    //菜单栏的透明度设置
    .header-inner {
      background: rgba(255,255,255,0.9);
    }
     
    //搜索框（local-search）的透明度设置
    .popup {
      opacity: 0.9;
    }

    //首页banner渐变色
    .site-brand-container {
        background: linear-gradient(200deg, #2e80a5, #0c0c0b);
    }
    如果想每天自动换背景图片,则将图片的 background:url地址缓存每日必要的URL:background:url(https://api.uixsj.cn/bing/bing.php);

6. 修改侧边栏链接样式

打开./themes/next/source/css/_common/outline/header/menu.styl，找到.menu-item-active a，插入颜色属性color: #ff6060, 如下：

1
2
3
4
5
.menu-item-active a {
  background: var(--menu-item-bg-color);
  color: #ff6060; //此行为插入内容，红色
}

7. 设置主页中标题和副标题的颜色

打开./themes/next/source/css/_common/outline/header/site-meta.styl，找到.site-title和.site-subtitle分别设置颜色:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.site-title {
  font-family: $font-family-logo;
  font-size: $font-size-title;
  font-weight: normal;
  margin: 0;
  color: #ff6060; //设置为红色
}

.site-subtitle {
  //color: $subtitle-color;
  color: #558833; //设置为浅绿色
  font-size: $font-size-subtitle;
  margin: 10px 0;
}

8. 修改标签列表颜色

打开主题配置文件_config.yml，找到tagcloud，修改以下内容:

1
2
3
4
5
6
7
8
# TagCloud settings for tags page.
tagcloud:
  # All values below are same as default, change them by yourself.
  min: 12 # Minimun font size in px
  max: 30 # Maxium font size in px
  start: "#EE7AE9" # Start color (hex, rgba, hsla or color keywords)
  end: "#FFD700" # End color (hex, rgba, hsla or color keywords)
  amount: 200 # Amount of tags, change it if you have more than 200 tags

9. 可视化编程

  • 安装Hexo Admin插件：npm install --save hexo-admin
  • 执行命令启动服务hexo server -d
  • 然后打开localhost:4000/admin/就可以可视化编辑文章了.

10. 文章加密

  • 安装Hexo 加密插件：npm install –save hexo-blog-encrypt
  • 然后在hexo全局配置文件_config.yml 中启用该插件,修改或者新增如下几行即可：
    1
    2
    3
    # Security
    encrypt:
        enable: true
  • 在需要加密的文章头部添加所要求的字段，如：password，message等字段:
    1
    2
    3
    4
    5
    title: 文章机密
    date: 2022-03-05 14:06:00
    description: 这是一篇加密博文，请输入密码后查看
    password: 'xxx'
    message: 这是一篇加密博文，请输入密码后查看

11. 添加标签云

  • 安装标签云插件：npm install hexo-tag-cloud --save
  • 在主题文件夹找到文件 theme/next/layout/_macro/sidebar.swig, 然后添加如下代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <!-- 添加标签云配置 -->
    	  {% if site.tags.length > 1 %}
    	    <script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
    	    <script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script>
    	    <div class="widget-wrap">
    		  <!-- 如果需要标签云的标题，请打开下面这行即可 -->
    		  <!-- <h3 class="widget-title">标签云</h3> -->
    		  <div id="myCanvasContainer" class="widget tagcloud">
    			<canvas width="200" height="200" id="resCanvas" style="width=100%">
    				{{ list_tags() }}
    			</canvas>
    		  </div>
    	    </div>
    	  {% endif %}
    具体添加的位置如下:
  • 在博客根目录，找到 _config.yml配置文件。然后在最后添加如下的配置项
    1
    2
    3
    4
    5
    6
    7
    8
    # hexo-tag-cloud
    tag_cloud:
        textFont: Trebuchet MS, Helvetica
        textColor: '#fc6423'    #字体颜色
        textHeight: 20          #字体高度
        outlineColor: '#557744'
        maxSpeed: 0.1           #文字滚动速度
        #pauseOnSelected: false #选择后暂停转动，默认打开

12. 添加lazyload 图片懒加载

  • 安装插件npm install hexo-lazyload-image --save
  • 在Hexo 目录的配置文件 _config.yml 中任意位置添加配置:
    1
    2
    3
    4
    lazyload:
      enable: true
      onlypost: false	#是否仅文章中的图片做懒加载, 如果为 false, 则主题中的其他图片, 也会做懒加载, 如头像, logo 等任何图片
      loadingImg: 		# 图片未加载时的代替图,不填写使用默认加载图片

13. 网站运行时间

进入 Hexo/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
<div>
	<span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
	<script>
		var now = new Date();
		function createtime() {
			var grt= new Date("02/26/2022 16:00:00");
			now.setTime(now.getTime()+250);
			days = (now - grt ) / 1000 / 60 / 60 / 24; dnum = Math.floor(days);
			hours = (now - grt ) / 1000 / 60 / 60 - (24 * dnum); hnum = Math.floor(hours);
			if(String(hnum).length ==1 ){hnum = "0" + hnum;} minutes = (now - grt ) / 1000 /60 - (24 * 60 * dnum) - (60 * hnum);
			mnum = Math.floor(minutes); if(String(mnum).length ==1 ){mnum = "0" + mnum;}
			seconds = (now - grt ) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
			snum = Math.round(seconds); if(String(snum).length ==1 ){snum = "0" + snum;}
			document.getElementById("timeDate").innerHTML = "本站已持续运行 "+dnum+" 天 ";
			document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
		}
	setInterval("createtime()",250);
	</script>
</div>

兄弟姐妹们，写文章费脑啊，求打赏点烟钱.