Hexo博客搭建及Post文章技巧

这篇文章分享了使用Hexo主题搭建个人博客的经验和心得，以及在此过程中遇到的一些问题和解决方法。我在搭建博客的过程中遇到了很多困难，也从各种资料中学到了很多知识，深刻地感受到自己的不足。正如古人所说：“他山之石，可以攻玉”。在这里我将一些我认为写得很好的Hexo-Blog搭建教程推荐给大家，同时也总结了日常使用Markdawn的一些技巧，希望能对大家有所启发和帮助。🥰

Hexo 博客的搭建

优秀文章

互联网开源精神让我们能够获取和分享众多优秀的文档和帮助！这让我们和许多博主、开发者可以相互学习、交流和进步！以下是我搭建博客时参考的一些好文章，希望对大家有所帮助！

从零开始搭建个人博客

知乎大佬枫叶的文章👍，按照他的思路我完成了初始博客网站的搭建！虽然有些内容可能有些过时，但是在评论区有很多热心的朋友在补充完善。总的来说搭建过程算是十分流畅且完善了。
打造个性超赞博客 Hexo + NexT + GitHub Pages 的超深度优化

一个很有意思的博主，帮助我完成了Blog后期的优化完善。reuixiy 的进阶完善写的十分详细，同时他的生活板块的Blog写的也相当不错，推荐大家去读一读！
hexo的next主题个性化教程:打造炫酷网站

有十分详细的优化步骤，在博客搭建的过程中主要参考了他的博客加密功能🔒。
Hexo官方

官网对于部分问题的解释更加的完善且详细，对于config部分参数感到困惑的时候去官网看看是一个不错的选择。👍
Next官方

Next的官方网站，对于Next主题的Blog优化和主题配置有详细的说明。

搭建流程

优化博客

改变博客文章页面大小

在搭建了Next主题的初始博客后感觉无论是在首页还是在具体界面，文章的宽度适配的都不太好，于是，经过查阅众多资料发现很多的更改方法都已经不适用于现版本的Next主题。经过一些摸索我发了如下解决办法：直接修改content-desktop变量的值。

Path: Blogs\themes\next\source\css\_variables\base.styl

// Layout sizes
// --------------------------------------------------
//$content-desktop                = 700px;
//$content-desktop-large          = 800px;
//$content-desktop-largest        = 900px;
$content-desktop                = 750px;
$content-desktop-large          = 850px;
$content-desktop-largest        = 1300px;

优化表格背景颜色

Markdawn文本的表格使得奇偶行都保持一致，我们可以直接把table-row-odd-bg-color变量设置为注释即可。

Path: Blogs\themes\next\source\css\_variables\base.styl

// Table
// --------------------------------------------------
$table-border-color             = $grey-lighter;
$table-font-size                = $font-size-small;
$table-cell-border-bottom-color = $grey-lighter;
//$table-row-odd-bg-color         = #f9f9f9;
//$table-row-odd-bg-color-dark    = #282828; 
$table-row-hover-bg-color       = $whitesmoke;
$table-row-hover-bg-color-dark  = #363636;

加入文章背景的渐变

可以实现鼠标移动到文章界面时，背景底纹的渐变效果。

Path:Blogs\themes\next\source\css\_common\components\post

.use-motion  
{
  if (hexo-config('motion.transition.post_block')) 
    {
    .post-block 
        {
      opacity: 0;
      margin-top: 60px;
      margin-bottom: 60px;
      padding: 25px;
      background:rgba(255,255,255,0.25) none repeat scroll !important;
            // 设置背景颜色为白色，透明度为0.25，不重复，不滚动，以及使用 !important 标签提高优先级。
      -webkit-box-shadow: 0 0 5px rgba(202, 203, 203, .5);
            //- 为WebKit浏览器设置一个水平偏移0、垂直偏移0、模糊半径5px、颜色为灰色透明度0.5的盒子阴影。
      -moz-box-shadow: 0 0 5px rgba(202, 203, 204, .5);
            //- 为Firefox浏览器设置一个类似的盒子阴影。
      transition: background 0.3s; 
            //- 设置背景颜色过渡效果，过渡时间为0.3秒。
    	}
  .post-block:hover 
        {   // 定义一个后代选择器，匹配鼠标悬停时的状态
  background:rgba(255,255,255,0.8) none repeat scroll !important; 
            // - 设置鼠标悬停时的背景颜色为白色，透明度为0.8，不重复，不滚动，以及使用 !important 标签提高优先级。
    	}
    .pagination, .comments
        {
      opacity: 0;
    	}
  	}
}

待优化点

仅在首页启用背景的渐变
- 目前的背景透明会对部分文章的阅读造成一些困难，部分字体与背景重合难以分辨。
展示字体优化
- Google Fonts 已支持思源宋体，准备接下来的阶段进行字体的替换。
git上传不稳定
- 在站点的配置(_config.yml)处, repository 的值往往要在 Github 仓库中 HTTPS 和 SSH 之间切换，否则在hexo d的过程中会产生报错，说无法链接至 Github 仓库。目前仍未找到一个合适的解决办法。
1
2
3
4
deploy:
type: git
repository: git@github.com:yourname/yourname.github.io.git #https://github.com/yourname/yourname.github.io.git
branch: main
图片、视频的存储方式改为云储存
- 当前所使用的本地存储，当我们将图片上传到图床网站后，图片实际上是存储在图床网站的服务器上。这样，博客服务器(Github)不需要存储大量图片，从而节省了服务器的空间和带宽资源。
- 当前使用的视频托管平台都有一定的缺点，在加载速度和视频画质之间需要进行取舍。
- 购买阿里云对象存储服务，目前有一定的教程，访问阿里云OSS对象云存储站点，创建Bucket。所谓的Bucket类似于一个存储空间，可以将自己要存储的对象放在该空间里，例如图片。

Markdawn文本与Blog

Blog常用格式

Blog开头设置

Blog的文章常采用Markdawn文本，在我们发文前往往需要设置这篇blog的属性。我们可以使用以下格式，我认为是比较常用且便捷，在使用时删除属性前的#即可。

title: Hexo博客搭建及Post文章技巧	
# date: 2023-03-22 10:00:00  
# updated: 2023-04-16 23:50:00  
# categories:
- [技术, Hexo]
- [技术, Next]
# tags:
#- 123
#- 1234
#top: 1		
#description: "这是一篇关于我的博客文章的描述。" 
#password: 你生日
#mathjax: true

图片与视频的插入

对于当前的Blog图片采用的是本地储存，
视频是使用外部视频服务，将视频上传到 YouTube、Bilibili 或其他视频托管平台。之后，在博客文章中，将视频嵌入到博客文章中。经过测试B站的视频在国内加载速度较快，但是画质低。YouTube视频加载较慢，但是可以调整较高的画质

//插入图片
<img src="/images/读书/我俩的故事/我俩的故事.jpg" title="我们的故事" style="display: block; margin-left: auto; margin-right: auto; max-width: 50%;" />
//插入YouTube视频
<iframe width="560" height="315" src="https://www.youtube.com/embed/v7Bmoo7RV64?vq=hd1080" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
//插入Bilibili站视频
<iframe src="//player.bilibili.com/player.html?aid=227444592&bvid=BV1Gh411u7T8&cid=1095478893&page=1&autoplay=0&quality=112" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

Emoji的使用

可以直接从emojicopy网站进行copy，直接past到markdawn文本中即可。Emoji在不同设备的显示可能存在一些问题，我们可以找到一些解决教程

优秀的介绍文章

发文小技巧

跳过1级标题，直接从2级标题开始。
合理使用emoji，可以使文章的表达生动很多。
Blog的核心是内容，优质的内容要远比一个漂亮的形式重要。
一个形象的比喻要比一个细致的图片更能表达作者思想。