Zen的小站

小舟从此逝，江海寄余生

0%

【hexo】博客部署

发表于 更新于 Valine：
hexo补给站，内涵大量链接，萌新还是大佬统统进来看！

hexo日常使用

  • 新建文章hexo new articlename

  • 编辑文章

    • <!-- more --> 阅读全文按钮

    • 编辑tags:和top:，保证文章便于查询

    • <div align = center>文本居中</div>

    • 植物

      陆生植物

    • 标签引用

    • 标签

更多详见 基于 Hexo 的 Markdown 博文语法简介 | EisenHao’s Note

  • 上传文章
1
2
3
4
hexo cl
hexo g
hexo d	# 地址为https://zennnnnnnnnnnn.github.io。
# 本地测试可以用hexo s，并在http://localhost:4000/上看到结果

从零开始hexo

搭建hexo环境

(105条消息) hexo史上最全搭建教程_zjufangzh的博客-CSDN博客_hexo

Hexo系列 | Hexo的基本使用 - 知乎 (zhihu.com)

文件夹说明

  • source
    • hexo的文章位于source/_posts文件夹中，可以自己新建文件夹存放，没区别。
    • 可通过hexo new page name新建tags、categories、about等文件，存放于此。
  • _config.yml编辑文章标题等基础元素。
  • scaffolds文件夹存放新建文章的模板。
  • themes存放主题，一般留一个就行了。
  • public：存放生成的页面

其余的都在主题文件夹中。

更换hexo主题

一开始就找了一个好看的主题，结果发现功能不能自己开发，最后还是选择了比较常用的next主题。开发新主题——新的支线任务。

next主题使用说明

(105条消息) Next主题美化_蜗牛非牛的博客-CSDN博客_next主题美化

现在的主题包括：

​ 菜单栏、搜索功能、网页图标、联系方式、文章结束标志、文章版权信息、访问统计（ (105条消息) hexo笔记十二：next主题统计网站与文章的浏览人数及次数_小镇攻城狮的博客-CSDN博客 ）、github绑带、修改块间距 （(105条消息) Hexo博客NexT主题下添加文章边框阴影效果_野猿新一的博客-CSDN博客 ）、添加圆角（ (105条消息) next主题美化——背景图片、页面透明化、阴影、圆角、动画_Oath丶forever的博客-CSDN博客_next主题美化 ）、文章排序（ (105条消息) hexo博客文章置顶功能实现的两种方法_玖涯的博客-CSDN博客_hexo置顶 ）

此外还有：

​ 代码复制、修改背景颜色、修改字体

插入图片

修改typora的偏好设置，之后从网页复制图片会自动下载图片到对应文件夹。

我用的配置：

1663507479006

hexo引用本地图片无法显示

！！！⬆帮大忙了！感谢⬆！！！

注意还是要存放图片的文件夹名与 md文件名 一致才行

最后的解决办法：

删除node_modules的hexo-asset-image文件夹，npm install https://github.com/CodeFalling/hexo-asset-image --save，设置配置文件post_asset_folder: true(最后一步很重要，我是看了public文件夹发现没有他，hexo g之后不会打包图片文件)

此外github不太稳定，有时很奇怪的只是打不开.github.io的项目

2022.12.17

改成用图床了，picgo + smms，图床设置如下

（老版本 typora 没有这个选项）

选择 smms 一部分原因是，配置方便，只需要在官网注册账号，下面链接获取 token，填到 picgo 中就行了

smms 存储空间只有 5GB

Releases · Molunerfinn/PicGo (github.com)

API Access - SM.MS | Dashboard 获取token

image-20221217163306575

  • 遇到的问题

    1. picgo本地导不进去

      参考新版本方法image-20221217163453870

    2. 图片上传和显示速度都比较慢（偶尔有快了）

      考虑不用smms

博客管理

  1. 在_post文件夹中自己新建文件夹，每组文件夹添加模板文档

  2. 网页端管理：

    在线尝试：Hexon

    网站和安装：gitee | github

    进一步electron封装

一键部署

bat相关知识 创建`.bat`文件，里面写入正常cmd命令，即可双击运行。
1
2
cd D:\MyData\hexoData\first\first
hexo cl && hexo g && hexo d

我还创建了一键上传和新建博客，放在存放 md 文件的文件夹中。

隐藏部分文章

npm install hexo-hide-posts --save安装，并在站点_config.yml下添加如下配置

1
2
3
4
5
6
7
8
9
10
# hexo-hide-posts
hide_posts:
# 可以改成其他你喜欢的名字
  filter: hidden
# 指定你想要传递隐藏文章的位置，比如让所有隐藏文章在存档页面可见
# 常见的位置有：index, tag, category, archive, sitemap, feed, etc.
# 留空则默认全部隐藏
  public_generators: []
# 为隐藏的文章添加 noindex meta 标签，阻止搜索引擎收录
  noindex: true

添加版本更新通知

1663655817135

真没想到成功了，以为寄了，有生之年！

​ npm i hexo-offline-popup --save安装后就有了。

​ 他主要是一个提升访问速度的插件，只不过配置后好像不增反降，就索性关掉了配置。

百度、谷歌收录

​ 完全参考 hexo-submit-urls-to-search-engine 中文文档 | 峡州仙士之页 (cjh0613.com) ，以后更新也得靠他！

​ 谷歌的上传和搜索都需要翻墙，暂时没弄。

​ 可以配合 hexo搭建博客系列(六)百度，必应，谷歌收录 食用，里面有些具体操作。

github表

手把手教你在Hexo中使用Github贡献日历（以Next主题为例）

提升访问速度

静态资源压缩常规做法用gulp，不过我尝试失败了，同时每次压缩还要输入额外的命令，个人不喜欢

  • 图片压缩：hexo-neat

    安装 npm install hexo-neat --save

    在配置文件中添加

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    # hexo-neat
    # 博文压缩
    neat_enable: true
    # 压缩html
    neat_html:
      enable: true
      exclude:
    # 压缩css  
    neat_css:
      enable: true
      exclude:
        - '**/*.min.css'
    # 压缩js
    neat_js:
      enable: true
      mangle: true
      output:
      compress:
      exclude:
        - '**/*.min.js'
        - '**/jquery.fancybox.pack.js'
        - '**/index.js'

    GitHub项目地址

    Hexo文件压缩：使用hexo-neat插件压缩页面静态资源

完全新建界面

  • hexo n page mypage创建界面
  • 在新界面中新建index.html文件
  • 在主题配置文档中添加mypage: /mypage/ || fa fa-th

插入数学公式

(106条消息) hexo博客next主题添加对数学公式的支持_阳光洒在杨树上的博客-CSDN博客_hexo公式

代码自动折叠

hexo博客代码折叠功能 | Coding World (toimc.com)

其中有一步不同，就是找不到他说的 themes/next/source/css/_common/components/index.styl 文件

我对应找了一下，同目录下的 components.styl 有相似内容，对应修改这个文件就行了。

此外创建的 highlight.styl 要放在相同名字的文件夹中，格式与 components.styl 中其他 import 的相同

梦寐以求的样式！！

内容折叠

用html语法写markdown的折叠很容易误判，导致只折叠一部分内容，其他内容乱识别

可以用这样的语句包裹内容，效果还凑合

1
2
3
{% spoiler "隐藏内容的标题" %}
markdown内容
{% endspoiler %}

需要先安装

npm install hexo-sliding-spoiler --save

修改样式在 hexo\node_modules\hexo-sliding-spoiler\assetsspoiler.css

这里改提示符

1
2
3
4
5
6
7
.spoiler.collapsed .spoiler-title:before {
    content: "Show: ";
}

.spoiler.expanded .spoiler-title:before {
    content: "Hide: ";
}

全自动翻译

translate: 两行js实现html全自动翻译，页面无需改动，无语言配置文件，无API Key，对SEO友好！

next主体就改 layout._layout.swig

直接加

src
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
  <script>
  translate.language.setLocal('chinese_simplified'); 
translate.setAutoDiscriminateLocalLanguage();
  translate.execute();
  </script>
<style>
.translateSelectLanguage{
    position: fixed;
    bottom:30px;
    left:185px;
    width: 220px;
    height: 30px;
    background-color: #ffffff;
    border-radius: 15px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    text-align: center;
}
</style>

加哪都行

引用文献

  1. 安装插件 npm install hexo-reference --save
  2. 引用格式 xxxxx<sup id="fnref:1"><a href="#fn:1" rel="footnote"><span class="hint--top hint--error hint--medium hint--rounded hint--bounce" aria-label="xxx“>[1]</span></a></sup>`
  3. 生成文献列表格式 `

效果：

  1. 鼠标悬停在文中会显示引用内容
  2. 引用列表会生成在文章末尾

缺点：

  • 标题级别间差别不大

    img

    • hexo + github 速度太慢！

注意

  • 开steam++加速器会导致不能deploy
    1. 1.xxx` ↩
-------------本文结束感谢您的阅读-------------
// 在最后添加