博客搭建记录

博客搭建记录

安装必要文件

hexo设置

主题设置

github部署

评论系统

图床设置

动画加载

# Loading Animation (加載動畫)
preloader:
  enable: true
  # source
  # 1. fullpage-loading
  # 2. pace (progress bar)
  source: css/big-counter.css
  # pace theme (see https://codebyzach.github.io/pace/)
  pace_css_url: css/big-counter.css

从网站中下载css文件即可

自定义看板

• 参考

添加导航栏

主题配置中加入

# Menu 目錄
menu:
  Home: / || fas fa-home
  Categories: /categories/ || fas fa-folder-open
  Tags: /tags/ || fas fa-tags
  Archives: /archives/ || fas fa-archive
  Music: /music/ || fas fa-music
  D: /rizhi/ || fas fa-book

hexo new page Music

然后在 新建的page页面下的 index.md编辑即可.

导航二级菜单

menu:
  Article||fas fa-newspaper:
    Archives: /archives/ || fas fa-archive
    Tags: /tags/ || fas fa-tags
    Categories: /categories/ || fas fa-folder-open

• 空两个空格
• : 后为子目录

添加相册

• 新建page

hexo n page tu

• 在tu文件夹中 建立一个index.html

内容：

<div class="gallery-group-main">
    {% galleryGroup 'test2' 'des' '/Tu/d'  https://cdn.pixabay.com/photo/2023/11/12/15/42/fox-8383319_1280.jpg %}
</div>

test2: 相册的名称；des:相册描述 ；/Tu/d: 相册test2中的图片

http是封面

• 建立一个对应的d.md文件, 里面添加多个图片即可

  {% gallery true,220,5 %}
  ![](https://cdn.pixabay.com/photo/2023/11/12/15/42/fox-8383319_1280.jpg)
  ...
  
  ...
  ...
  
  {% endgallery %}

添加html小游戏

• 建立一个放游戏的界面

hexo n page wzq

• 将下载的wzq.html放入该文件夹

• 在主题 配置中添加wzq

GAME||fas fa-gamepad:
    五子棋: /game/wzq/wzq.html || fas fa-gamepad
    文宝子的2048: /game/2048/2048.html || fas fa-gamepad
    魔方: /game//mf/ || fas fa-gamepad

• 跳过渲染 将游戏文件夹里的文件全部跳过渲染

  skip_render: game/**

插入歌曲

• 一些资源

放屁音乐网

单曲

{% aplayer 
"名称" 
"作者" 
"http歌曲链接" 
"图片链接" 
"lrc:歌词.lrc" 
"width:100%" 
%}

歌单

{% aplayerlist %}
{
    "narrow": false,
    "autoplay": false,
    "mode": "random",//（可选）'random', 'single' (单曲播放), 'circulation' (循环播放), 'order' (列表播放)， 默认：'circulation' 
    "showlrc": 3,
    "mutex": true,
    "theme": "#e6d0b2",
    "preload": "metadata",
    "listmaxheight": "513px",
    "music": [
        {
            "title": "名字1",
            "author": "作者1",
            "url": "歌曲链接",
            "pic": "图片链接",
            "lrc": "歌词.lrc"
        },
        {
            "title": "名字1",
            "author": "Goose house",
            "url": "https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.mp3",
            "pic": "https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.jpg",
            "lrc": "https://cn-south-17-aplayer-46154810.oss.dogecdn.com/hikarunara.lrc"
        }
    ]
}
{% endaplayerlist %}

图库里 找不到路径 只能把歌词打出来

[00:00.00]带我去找夜生活 - 告五人
[00:01.00]作词：潘云安
[00:02.00]作曲：潘云安
[00:03.00]【本作品声明，著作权权利保留。未经著作权人书面许可，不得以任何方式（包括翻唱、翻录等）使用。】
[00:47.34]形同虚设的时间
[00:50.88]在你眼里成为了无限
[00:54.67]青春充满了不眠
[00:58.21]是为了追寻更多的明天
[01:17.27]好似无尽的灯街
[01:20.66]从不分你我照亮在心间
[01:24.65]夜已成载心无眠
[01:28.20]再巨大的伤悲皆已成灰
[01:46.48]如果你还没有睡
[01:49.97]如果我还不停追
[01:53.66]如果清醒是种罪
[01:57.40]就把誓言带走换承诺不回
[02:01.79]如果你就是一切
[02:04.89]如果我就是绝对
[02:08.63]如果清醒是种罪
[02:12.32]就让爱去蔓延成全每个夜
[02:46.79]时过境迁的伤悲
[02:50.03]搭配快乐的宣泄
[02:53.67]如果清醒是种罪
[02:57.41]你会不会怨怼将就的明天
[03:01.75]如果你就是一切
[03:04.90]如果我就是绝对
[03:08.74]如果清醒是种罪
[03:12.33]就让爱去蔓延成全每个夜
[03:31.83]记住激情的滋味
[03:35.03]记住流泪的画面
[03:38.67]如果清醒是种罪
[03:42.41]就拿偏执的一切
[03:44.90]放弃无聊的称谓
[03:46.80]如果你真是一切
[03:49.84]如同我真是绝对
[03:53.73]如果夜留下暧昧
[03:57.38]让你我不再挂念
[03:59.82]最后成全每个谁

关于站点地图

• 目前不需要被搜索

之后可 参考 教程 2

• 2024-2-1做到参考的第四步，好像妹必要被检索
• 2024-2-4先做了谷歌的, contex还没填

继续 参考： https://xiguapengpeng.github.io/posts/9f278a1d/

域名解析

参考：

freemon

知乎教程-学生

域名设置
aleyxwang

遇到的问题 :

• 每次 hexo d后就打不开，域名变为原来的io

• 解决：添加完域名后，把目录下的CNAME文件放在本地的ｂｌｏｇ下

• CNAME　文件　文本时域名网址

• 创建了四个 在source blog 下

链接

# URL

## Set your site url here. For example, if you use GitHub Page, set url as

css js 样式

准备工作

• 在source下创建 css js img目录及相应的 文件

• 在主题config中插入相应的文件

  # Inject
  # Insert the code to head (before '</head>' tag) and the bottom (before '</body>' tag)
  # 插入代码到头部 </head> 之前 和 底部 </body> 之前
  inject:
    head:
       - <link rel="stylesheet" href="/config/css/jz.css">
       - <link rel="stylesheet" href="/config/css/lt.css">
    bottom:
      # - <script src="xxxx"></script>

  参考

底部 音乐

参考 ：[官方](https://butterfly.js.org/posts/507c070f/#關閉-asset-inject 、参考

data-lrctype=“-1” : 默认不显示歌词

回收方式

双列文章

参考

状态栏居中

试了好多个可行的：参考

展开文章所有的目录

# toc (目錄)
toc:
  post: true
  page: true
  number: true
  expand: true
  style_simple: true # for post
  scroll_percent: true
  

关闭某些文章的侧边栏

文章开头

aside: false

顶部 底部 设置透明

相应的图片格式 设为 transparent

https://sempkia.xyz/posts/8515/

文章的顶部透明，但保存封面

​ top_img: transparent

嵌套网页

关闭目录序号

# toc (目錄)
toc:
  post: true
  page: true
  number: false
  expand: true
  style_simple: true # for post
  scroll_percent: true
  toc_number: false

• number

侧边栏 比例

参考：https://yisous.xyz/posts/d1fc759/#ba5281cb529b4f28a34609b01cf4c2a0

参考

https://blog.aqcoder.cn/categories/博客搭建/page/2/

参考教程：

• 宽屏适配：https://yisous.xyz/posts/d1fc759/

• butterfly系列教程：

  • https://fe32.top/articles/hexo1605/
  • https://moonshuo.cn/posts/28148.html#Butterfly安装
  • https://cnhuazhu.gitee.io/categories/博客/page/3/
  • https://easyhexo.com/1-Hexo-install-and-config/
  • https://blog.meta-code.top/tags/Hexo/
  • https://plaudern.github.io/2020/11/22/Butterfly主题的使用与魔改/
  • https://blog.imzjw.cn/posts/bfdocs/index.html#相册-gallery
  • https://blog.17lai.site/categories/hexo/
  • https://ciweigg2.github.io/2019/07/04/hexo-theme-butterfly-zhu-ti-an-zhuang-ya/
  • https://blog.leonus.cn/categories/博客相关/
  • https://zhuanlan.zhihu.com/p/69211731

• 加密文章：

  • https://blog.csdn.net/qq_42951560/article/details/122552109
  • 二
  • https://www.itfanr.cc/2021/04/16/hexo-blog-article-encryption/

• pdf

  • https://zsyyblog.com/6dfb88e1.html

• 评论部署

  • https://twikoo.js.org/backend.html

• 音视频插入

  • https://codeantenna.com/a/zsYn9QKRXA
  • https://lovelijunyi.gitee.io/posts/743c.html#使用插件
  • https://easyhexo.com/3-Plugins-use-and-config/3-1-hexo-tag-aplayer/#配置
  • https://www.jianshu.com/p/6e41e3191963
  • https://ftzzloo.com/hexo-add-aplayer-plugins/#Start

• 导航栏

  • https://yisous.xyz/posts/895003b5/

• 跳过渲染

  • https://www.jianshu.com/p/76220131c7e9

• 添加页面游戏

  • https://zwxo.github.io/articles/36588/#部署游戏

• 图床

  • https://zhuanlan.zhihu.com/p/652533486

• 域名

  • https://zhuanlan.zhihu.com/p/634806678
  • https://ftzzloo.com/github-pages-and-domain-name-setting/#域名解析

• emoj

  • https://blog.csdn.net/weixin_42395140/article/details/111642339

• LIve 2d

  • https://qmike.top/posts/6cf9df4b
  • https://blog.csdn.net/CSDN__CPP/article/details/110007453

• LaTex公式

  • https://blog.csdn.net/qq_52466006/article/details/126924064
  • https://blog.csdn.net/weixin_45073562/article/details/120289648

• 学习魔改样板

  • https://gavin-chen.top/
  • https://zayck.gitee.io/
  • https://home.fe32.top/