JunZhe's Blog

志存高远，追求卓越

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

前言

前段时间自己折腾了一下博客，初步建立起了自己的小站，今天心血来潮在谷歌搜索自己之前写的从零搭建个人博客的文章，结果在 Google 上面翻了十页都没有翻到，我一开始还以为是因为发了没多久的缘故，后来一查才知道 GitHub Pages 屏蔽了Google 的爬虫，所以在 Google 里是搜索不到 GitHub Pages 上面的网页的。

这怎么行？！

对于我来说，我写博客主要是为了将自己学习的知识进行一个输出，虽然不是什么高大上的东西，但是我相信一定有和我一样刚刚在计算机领域起步，并且热爱探索、折腾工具的朋友，我的这些经验和感悟或许就能给大家带来一点小小的启发。另外，因为是要写给别人看，所以要更加注重自己语言的逻辑组织。并且要把一件事能够完全的和别人讲清楚，还需要自己更高层次的理解，这反过来也倒逼了我自己去进行更深度的思考，让我更好的理解掌握知识。

话说回来，我不是写只给自己看的日记的，那些我都存放在本地的 obsidian 里面。之后或许有机会写一些我折腾 obsidian 的记录（逃），我希望我的博客能在网络的海洋里有幸被人看到。

阅读全文 »

发表于 更新于 分类于 本文字数： 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里面搭建的个人知识体系一样，下面给出我的一些解决方法.

阅读全文 »

发表于 更新于 分类于 本文字数： 3.9k 阅读时长 ≈ 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%