濬哲的博客

人生如棋，落子无悔

发表于 更新于 分类于 本文字数： 416 阅读时长 ≈ 1 分钟

前言

众所周知，Hexo 会自动将 source 文件夹下的所有 .md 与 .html 文件渲染。但有的时候，这会造成很大的问题。比如我写了个 README.md 文件，或者我想在根目录下添加一个 html 文件（比如谷歌用于验证网站的 html 文件），他们都会在 hexo g 时候被渲染。如果我们把这些文件直接放在 public 文件夹下，那么他们就不会被渲染，但是当我们执行了 hexo clean 之后，这些文件就会被删除。我们希望能够把这些文件放在我们的 source 文件夹下，每次 hexo g 的时候被拷贝到 public 文件夹下而不被渲染。

阅读全文 »

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

前言

在搭建起我的 Hexo 框架并且进行了一些的博客写作之后，我发现我习惯是有一点灵感就把他记录下来，然后想着后面有更多输入之后再来填这个坑。但是这样我就会有大量的文档堆在_posts 文件夹下面，非常混乱。虽然 Hexo 也提供了_drafts 文件夹来存放草稿，但是就算这样，等我想要发布的时候还是会有很多的文件在_posts 文件夹下面。网上很多人都是用年/月/日来建立文件夹进行分类，但是这不能从根本上解决本地分类混乱的问题（线上的分类可以用文章的 front-matter 来解决）。所以我就想着能不能用文件夹来分类，就像我自己在 obsidian 里面搭建的个人知识体系一样，下面给出我的一些解决方法.

阅读全文 »

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

首先来讲一下站点配置文件和主题配置文件

  • 站点配置文件
    • 位于博客根目录下的_config.yml
  • 主题配置文件
    • 位于 themes / next 中的_config.yml

站点配置

主题配置

更换内置主题

在Schemes下可以看到这些主题，去掉想要的主题前面的 # 即可

1
2
3
4
5
# Schemes
#scheme: Muse
scheme: Mist
#scheme: Pisces
#scheme: Gemini

这里我选择了 Mist 主题，我很喜欢他的顶部导航栏

image-20240928212948404

设置菜单

  1. 把你想要展示的东西都取消注释掉 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-senstive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# When running the site in a subdirectory (e.g. yoursite.com/blog), remove the leading slash from link value (/archives -> archives).
# External url should start with http:// or https://
menu:
  home: / || fa fa-home
  about: /about/ || fa fa-user
  tags: /tags/ || fa fa-tags
  categories: /categories/ || fa fa-th
  archives: /archives/ || fa fa-archive
  #schedule: /schedule/ || fa fa-calendar
  #sitemap: /sitemap.xml || fa fa-sitemap
  #commonweal: /404/ || fa fa-heartbeat

这时候在本地预览里可以看到这些入口已经出现了，但是点进去会报错Cannot GET /tags/

这是因为你还没有在_post 里面新建页面（page）。

如果需要更改图标，可以进入Font Awesome 获取新图标，只需将||后的内容改为 “fa + 复制的图标” 即可

  1. 进入终端，输入命令（以创建 tags 为例）
1
2
cd Blogs
hexo new page "tags"

完成以后在 Blogs / source 目录中会出现 tags 文件夹，其中含有 index.md 文件，文件内容如下：

1
2
3
4
---
title: tags
date: 2024-09-28 10:56:39
---
  1. 接下来添加字段： type: tags（必须要添加，不然网页里是不会显示内容的）
1
2
3
4
5
---
title: tags
date: 2024-09-28 10:56:39
type: tags
---
image-20240928214810057

这样就对了

其实这个的原理就是在 hexo g 的时候会在 public 文件夹下生成 tags 文件夹，里面是由刚刚的 index.md 生成的 index.html，它包含了 tags 这个页面的全部内容

其他的几个都同理

  1. （可选）为菜单栏的图标添加内容数量统计，效果如下：
image-20240928215331479

设置侧边栏

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
# ---------------------------------------------------------------
# Sidebar Settings
# See: https://theme-next.org/docs/theme-settings/sidebar
# ---------------------------------------------------------------

sidebar:
  # Sidebar Position.
  position: left
  #position: right

  # Manual define the sidebar width. If commented, will be default for:
  # Muse | Mist: 320
  # Pisces | Gemini: 240
  width: 250

  # Sidebar Display (only for Muse | Mist), available values:
  #  - post    expand on posts automatically. Default.
  #  - always  expand for all pages automatically.
  #  - hide    expand only when click on the sidebar toggle icon.
  #  - remove  totally remove sidebar including sidebar toggle.
  display: post

  # Sidebar padding in pixels.
  padding: 30
  # Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
  offset: 12
  # Enable sidebar on narrow view (only for Muse | Mist).
  onmobile: false

  • position：sidebar 是在左边还是右边展示

  • width：sidebar 的宽度

  • display：默认的显示模式，是默认为展开还是默认为关闭，看个人喜好吧，我默认关闭

  • padding：和顶部的距离，数字越大你的名字、头像这些东西和上面离得越开，默认的 18 太顶天了，我改成 30 了

  • onmobile：当你把网页侧边距变小（把窗口拉窄）时，sidebar 会继续待着还是自动收起来，建议选择 false，即会自动收起来，不然很丑 

1
2
3
4
5
6
7
8
# Sidebar Avatar
avatar:
  # Replace the default image and set the url here.
  url: /images/head.jpg
  # If true, the avatar will be dispalyed in circle.
  rounded: true
  # If true, the avatar will be rotated with the cursor.
  rotated: false
  • 这一部分是设置头像的
  • url：头像的图片保存在 themes/next/source/images 文件夹中
  • rounded：头像变成圆框，推荐
  • rotated：鼠标放上去会旋转，有点沙雕
1
2
# Posts / Categories / Tags in sidebar.
site_state: true
  • 是否展示这三个图标，方便你在 sidebar 里快速导航
image-20240928220954102 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
  GitHub: https://github.com/yourname || fab fa-github
  E-Mail: mailto:yzy20040303@gmail.com || fa fa-envelope
  #Weibo: https://weibo.com/yourname || fab fa-weibo
  #Google: https://plus.google.com/yourname || fab fa-google
  #Twitter: https://twitter.com/yourname || fab fa-twitter
  #FB Page: https://www.facebook.com/yourname || fab fa-facebook
  #StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
  #YouTube: https://youtube.com/yourname || fab fa-youtube
  #Instagram: https://instagram.com/yourname || fab fa-instagram
  #Skype: skype:yourname?call|chat || fab fa-skype
  • 社交链接：自行设置即可，||后面依然是图标

有点写不动了，感觉注释很详细，可以跟着注释去做

设置右上角 Github 图标

1
2
3
4
5
6
# `Follow me on GitHub` banner in the top-right corner.
github_banner:
  enable: true
  permalink: https://github.com/DreamKongcheng
  title: Follow me on GitHub

参考文章： Hexo + Github Page｜基础教程 (二)：NexT 主题基本美化｜全网最细致全面的教程 Hexo 使用总结 & 常见问题

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

双分支管理

参考文章：使用 GitHub 分支保存 Hexo 环境和博文

为什么要双分支管理？

hexo d命令实际上是用了 hexo-deploy-git 工具，将 public 中的内容加入到.deploy_git 文件夹中，然后把这个文件夹的内容同步到远程仓库 (YourgithubName.github.io) 中你前面设置的分支中。我这里设置的是 main。

注意！你的 source 文件夹等是不会到 public 里面去的，所以不会被同步！

那么问题来了。如果我需要在不同地方撰写我的博客，或者我需要使用 github 来进行备份，该怎么办呢？

这时候就需要我们用两个分支，第一个 main 分支保存 public 的 html 内容，也就是我们的网站，另一个 source 分支来保存我们的配置文件、md 源文件等。

阅读全文 »

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

前言

今年我刚刚步入大三，已经进行了两年的计算机科学与技术专业的学习。这两年感觉有些摸鱼，学了一些知识，但是好像也就是为了应付考试，在考试结束以后这些知识慢慢的被遗忘了，这是我不愿意看到的。感觉如果想把自己所学的东西更好的消化吸收，光靠学是不够的，更重要的是把自己学的东西进行分享。只有当你能把一个知识点逻辑清晰的用自己的话讲述给别人时，才能说明自己真的是掌握了这个知识点。

我也见过学校里一些学长学姐的个人网站，他们分享自己的课程笔记，为我的期末补天提供了宝贵的资源。我自己也是一个比较喜欢折腾的人，感觉在这些地方折腾就像是精心布置自己的房间一样，会让自己非常的有归属感与成就感。于是，我也看了网上不少的教程，希望能够从零开始一步步搭建属于我自己的个人网站。

第一篇博客就来讲一下我是怎么搭建个人网站的吧！

阅读全文 »
0%