Hexo博客的修改与功能的添加

2024-01-27 04:54:56

当我决定搭建我的博客时，我非常激动。我想和世界分享我的想法、知识和经验。我选择了Hexo作为我的博客平台，因为它简单易用，而且有许多很棒的主题和插件可供选择。

我的博客最初使用的是landscape主题，这是一个非常简洁的主题。但随着时间的推移，我想让我的博客更个性化一些，所以我开始寻找其他主题。我最终选择了yelee主题，因为它更符合我的审美。

1.更换Hexo主题

在网上浏览了几个Hexo主题后，我找到了yelee主题。我认为这个主题非常适合我，因为它既简洁又美观。而且，它还有很多有用的功能，比如侧边栏、社交媒体图标和评论系统。

要更换Hexo主题，我首先需要在终端中输入以下命令：

hexo-theme-yelee

这将安装yelee主题。然后，我需要在_config.yml文件中将主题名称更改为yelee。

theme: yelee

最后，我需要运行以下命令来生成我的博客：

hexo g

2.添加搜索功能

我认为博客中搜索功能非常重要，因为它可以让读者快速找到他们想要的内容。于是我决定在博客中添加一个搜索功能。

要添加搜索功能，我首先需要安装一个搜索插件。我选择使用hexo-generator-search插件，因为它非常简单易用。

要安装hexo-generator-search插件，我需要在终端中输入以下命令：

npm install --save hexo-generator-search

然后，我需要在_config.yml文件中启用hexo-generator-search插件。

plugins: [
  'hexo-generator-search'
]

最后，我需要运行以下命令来生成我的博客：

hexo g

3.添加评论系统

评论系统也是博客中非常重要的一个功能，它可以让读者与我进行互动。于是我决定在博客中添加一个评论系统。

要添加评论系统，我首先需要安装一个评论插件。我选择使用hexo-duoshuo-comments插件，因为它非常简单易用，而且支持中文。

要安装hexo-duoshuo-comments插件，我需要在终端中输入以下命令：

npm install --save hexo-duoshuo-comments

然后，我需要在_config.yml文件中启用hexo-duoshuo-comments插件。

plugins: [
  'hexo-duoshuo-comments'
]

最后，我需要在_config.yml文件中配置hexo-duoshuo-comments插件。

duoshuo_short_name: 'YOUR_DUOSHUO_SHORT_NAME'

把YOUR_DUOSHUO_SHORT_NAME替换成你的多说短名称。

最后，我需要运行以下命令来生成我的博客：

hexo g

4.添加社交媒体图标

社交媒体图标可以帮助读者快速关注我的社交媒体账号。于是我决定在博客中添加一些社交媒体图标。

要添加社交媒体图标，我首先需要在_config.yml文件中配置社交媒体图标。

social_links: [
  {
    "icon": "icon-github",
    "link": "https://github.com/YOUR_GITHUB_USERNAME",
    "title": "GitHub"
  },
  {
    "icon": "icon-twitter",
    "link": "https://twitter.com/YOUR_TWITTER_USERNAME",
    "title": "Twitter"
  },
  {
    "icon": "icon-facebook",
    "link": "https://facebook.com/YOUR_FACEBOOK_USERNAME",
    "title": "Facebook"
  },
  {
    "icon": "icon-linkedin",
    "link": "https://linkedin.com/in/YOUR_LINKEDIN_USERNAME",
    "title": "LinkedIn"
  }
]

把YOUR_GITHUB_USERNAME、YOUR_TWITTER_USERNAME、YOUR_FACEBOOK_USERNAME和YOUR_LINKEDIN_USERNAME替换成你的社交媒体账号。

然后，我需要在themes/yelee/layout/_partial/footer.ejs文件中添加社交媒体图标。

<ul class="social-icons">
  <% social_links.forEach(function(link) { %>
    <li>
      <a href="<%= link.link %>" target="_blank" title="<%= link.title %>">
        <i class="icon <%= link.icon %>"></i>
      </a>
    </li>
  <% }) %>
</ul>

最后，我需要运行以下命令来生成我的博客：

hexo g

5.添加自定义CSS

我想让我的博客看起来更有个性，所以我决定添加一些自定义CSS。

要添加自定义CSS，我首先需要在themes/yelee/source/css/目录下创建一个名为custom.css的文件。

然后，我需要在custom.css文件中添加以下代码：

/* 自定义CSS */

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1 {
  font-size: 2em;
  font-weight: bold;
}

h2 {
  font-size: 1.5em;
  font-weight: bold;
}

h3 {
  font-size: 1.2em;
  font-weight: bold;
}

p {
  font-size: 1em;
  line-height: 1.5em;
}

a {
  color: #007bff;
}

/* 等等 */

最后，我需要运行以下命令来生成我的博客：

hexo g

6.添加自定义JavaScript

我想让我的博客更具交互性，所以我决定添加一些自定义JavaScript。

要添加自定义JavaScript，我首先需要在themes/yelee/source/js/目录下创建一个名为custom.js的文件。

然后，我需要在custom.js文件中添加以下代码：

/* 自定义JavaScript */

(function() {
  // 自定义脚本

  // 例如，添加一个点击事件监听器到导航栏上的链接
  document.querySelectorAll('.nav-link').forEach(function(link) {
    link.addEventListener('click', function(event) {
      // 做一些事情
    });
  });

  // 等等
})();