hexo-theme-Anatolo

实时更新自动demo

博客样例（作者博客）

主题文档 Theme document

关于主题

基于ben02移植的Anatole主题进行了前端重构。

现在，Anatolo已经是一个类型安全的小巧现代化 Hexo 主题。Anatolo 前端的 js 文件仅仅只有不到 40KB 大小，保证极快的加载速度。

Anatolo 还在Anatole主题基础上增加了动态请求、帖子目录、黑暗模式、搜索框等多种理应有的功能，并对界面进行了进一步美化。

鸣谢

搜索框代码大量参考了 Icarus 的工作

码云功能和一些中国特色功能来自 Anatole-core

改进

• 引入了现代化前端打包器 Rollup.js, Typescript 与 TSX
• 暗黑模式支持
• 增加了文章概要的选项
• 增加了多语言支持
• 增加了可选的搜索框，依赖Fuse.js允许模糊搜索
• 增加了可选的标签页和标签云
• 增加了可选的目录（toc）支持和深度调整
• 调整了部分选项的可选性
• 增加了nav menu的编辑支持
• 增加了文章底部的copyright栏
• 增加了文章的字数统计
• 增加了部分社交账号支持
• 增加了显示网站备案号功能和百度统计
• 增加了Gitalk评论支持
• 使用Ajax来切换页面，减少加载的视觉噪音
• 移动端自动scroll页面，防止过多纠结于头像
• 允许自动化生成友链

已知bug （feature）

• 原主题的葡萄牙语支持无法更新
• TOC放置可能不够美观

Won’t fix

• 暗黑模式的评论区只对 Gittalk 有支持，如有需要请自行PR

使用

安装

克隆本仓库并安装依赖：

1
2
3

git clone https://github.com/Lhcfl/hexo-theme-anatolo.git themes/Anatolo
cd themes/Anatolo
pnpm i # 必须安装依赖

在hexo博客根目录：

1

npm install hexo-renderer-pug --save

配置

复制_config.example.yml为_config.yml
修改hexo根目录下的 _config.yml ： theme: Anatolo

更新、

在Anatolo的目录下

1

git pull origin master

开发

准备工作

进入Anatolo的目录，执行

1

pnpm i

安装所有依赖。

目录结构

• .github: GitHub 的 CI 配置文件，用于自动部署样例
• includes: 主题内置的 Hexo 脚本
• languages: I18n 文件
• layout 主题使用的模板，在服务端（也就是 hexo g）渲染成最后的 HTML
• scripts: 主题内置的 Hexo 脚本
• source: 主题需要的HTML资产
• src: 主题前端相关的 typescript 脚本。这些脚本会被 rollup 打包并压缩成一个 js/complied/bundle.js

代码格式化

对本主题做出修改后，使用下面的命令可以对代码进行格式化

1

pnpm format

详见 package.json

Welcome to use Anatolo. This tutorial will teach you all of Anatolo’s configurable items.

Install, configure and update

Download theme asserts By Github

Enter your root path of Hexo blog:

1

git clone https://gitee.com/Lhcfl/hexo-theme-anatolo.git themes/Anatolo

Install dependencies

1
2

npm install hexo-renderer-pug --save
npm install hexo-renderer-stylus --save

Configure

Copy _config.example.yml in themes/Anatolo to _config.yml
Modify _config.yml in the hexo root directory: theme: Anatolo

Upgrade

In the Anatolo root directory:

1

git pull origin master

Detailed explanation of configuration files

Todo…

欢迎使用Anatolo。本教程将教您Anatolo的所有可配置项目。

安装，配置与更新

下载主题文件

通过 GitHub

进入你的 Hexo Blog 根目录:

1

git clone https://gitee.com/Lhcfl/hexo-theme-anatolo.git themes/Anatolo

通过 Gitee 镜像

进入你的 Hexo Blog 根目录:

1

git clone https://gitee.com/Lhcfl/hexo-theme-anatolo themes/Anatolo

通过本地安装

本地安装不支持通过Github更新。
直接下载该主题的zip包解压至主题目录下，重命名为 Anatolo

安装依赖

1
2

npm install hexo-renderer-pug --save
npm install hexo-renderer-stylus --save

⚠️ 配置

复制 themes/Anatolo 下的 _config.example.yml ，粘贴为 _config.yml
修改hexo根目录下的 _config.yml ： theme: Anatolo

更新

在Anatolo的目录下

1

git pull origin master

配置文件详解

本部分提供对 config.yml 的中文解释。

这是默认的 config.example.yml

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

# 这片区域是博客的设置
# 这是网站的关键词
keywords: Blog,博客,Hexo
# 作者名
author: Yourname
# 网站描述
description: A simple and beautiful blog
# 默认配色方案
defaultTheme: light-mode # light-mode or dark-mode

# 网站图标。
# 如果你认为网站图标的大小不够好看，去调整 /source/css/style.styl
favicon: /images/favicon.webp
avatar: /images/logo.webp
logo_dir: /images/logo@2x.webp
logo_style: width:220px;

# 这是全站的版权声明设置
copyright:
  # 如果 show 被设置为 true，你的每篇博文都会显示一个版权声明。但你也可以在每篇文章的头部单独设置版权声明：
  # 例如: 
  # ---
  # title: xxx
  # copyright: "All rights reserved"
  # author: "Li Hua and Han Meimei"
  # ---
  # 也可以对某篇文章取消版权声明：
  # ---
  # title: xxx
  # copyright: disabled
  # ---
  show: true
  # 版权声明的默认文字
  default: "本文采用CC-BY-SA-3.0协议，转载请注明出处"
  # 在
  show_author: true

# 站点侧边栏底部
footbar:
  # 本意是用作描述Copyright的，不过你也可以改成
  copyright: 全站CC-BY-SA-3.0
  # 对于中国用户，如果你有网站备案：
  beian: 
  gongan: 


# 社交链接
# 你可以去 social_links.pug 增加更多的
github: https://github.com/Lhcfl
mail: yourname@example.com
zhihu: 
QQ: 
twitter:
instagram:
rss:
facebook:
weibo:

# 导航栏设置
menu:
  Home: /
  Archives: /archives
  Tags: /tags
  About: /about
  Links: /links

# 导航栏右边的按钮
rightbtn:
  back: true            # 显示后退按钮
  search: true          # 显示搜索按钮
  avatar: true          # 显示头像
  darkLightToggle: true # 显示暗色/亮色主题切换


# 其他设置
useSummary: false       # 打开它之后，文章会使用自动生成的概要，而不是你在文章中人工规定的 <!-- more -->

useTagCloud: false      # 使用标签云
tocMaxDepth: 6          # 目录的最高层级。设为0禁用目录。


  
# 评论
always_enable_comments: false # 无视文章的comments设置，总是允许评论

duoshuo: 
disqus: 
gentie: 
# Valine comments https://valine.js.org
valine:
  enable: false # if you want use valine, please set enable: true
  appid:  # your leancloud appid
  appkey:  # your leancloud appkey
  notify: false # true/false:mail notify !!!Test,Caution. https://github.com/xCss/Valine/wiki/Valine-%E8%AF%84%E8%AE%BA%E7%B3%BB%E7%BB%9F%E4%B8%AD%E7%9A%84%E9%82%AE%E4%BB%B6%E6%8F%90%E9%86%92%E8%AE%BE%E7%BD%AE
  verify: false # true/false:verify code
  avatar: mm # avatar style https://github.com/xCss/Valine/wiki/avatar-setting-for-valine
  placeholder: hello, world # comment box placeholder
gitment:
  enable: false
  owner: 'Your GitHub ID'
  repo: 'Repo to store comments'
  client_id: 'Your client ID'
  client_secret: 'Your client secret'
gitalk:
  enable: false
  owner: 'Your GitHub ID'
  repo: 'Repo to store comments'
  client_id: 'Your client ID'
  client_secret: 'Your client secret'

# 百度统计设置
# 请访问 https://tongji.baidu.com/ 
# 获取统计JS代码放入 Anatolo/source/js/baidu-tongji.js
Baidutongji: false

对每篇文章允许的设置

举例，如果你有一篇文章， hello world.md，它顶上应该有长这样的元信息：

1
2
3
4
5
6
7
8
9
10
11
12

---
title: Hello World
date: 2023-10-13 15:05:47
tags:
  - tag1
  - tag2
toc: true
title: xxx
summary: "hello? world!"
copyright: "All rights reserved"
author: "无名氏"
---

目录

在元信息中添加 toc: true 在页面上启用目录

文章摘要

如果你在元信息中添加 summary，则 Anatolo 会使用你提供的 summary 来生成首页的文章摘要。

友链

在你的Markdown中添加像这样的HTML

1
2
3
4
5
6
7

<div
  class="friend-link"
  data-avatar="https://头像所在的网址"
  data-href="https://友链地址"
  data-title="友链标题"
  data-description="友链描述"
></div>

来声明一条友链。友链会在访问网站时被动态展开：

相关代码在：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// src/utils/friend-link.tsx
const friendHTML = ({ avatar, href, title, description }: any) => (
  <div class="friend-link-container">
    <div class="friend-link-box">
      <aside class="friend-link-avatar">
        <img src={escapeHTML(avatar)} href={escapeHTML(href)} />
      </aside>
      <div class="friend-link-meta">
        <div class="friend-link-title">
          <a href={escapeHTML(href)}>{escapeHTML(title)}</a>
        </div>
        <div class="friend-link-description">{escapeHTML(description)}</div>
      </div>
    </div>
  </div>
);

avatar href title description 分别是 友链头像、友链地址、友链标题、友链描述。

Copyright与作者

1
2

copyright: "All rights reserved"
author: "无名氏"

copyright 是必填项，设置你的文章底下显示的版权声明是什么。如果你在主题配置中启用了默认显示Copyright，则将 copyright 设置成 disabled 就可以不显示了。你也可以直接填写空字符串 ""

author 是选择性的，设置你的文章的作者是谁。

特殊样式

在写文章的时候，你可以加入tip框

1
2
3

<div class="tip">
Tip框内的文字
</div>

渲染出来会有这样的样式：

Make sure all the code blocks highlighted correctly. All the code samples are come from the demo of https://highlightjs.org

This post is originated from here and is used for testing markdown style. This post contains nearly every markdown usage. Make sure all the markdown elements below show up correctly.

This is a image test post.

This post doesn’t have a title. Make sure it’s accessible.

The following contents should be invisible in home/archive page.

This is a video test post.

Youtube

Vimeo

This post contains 4 photos:

• Widescreen wallpaper
• Portrait photo
• Dual widescreen wallpaper
• Small photo

All photos should be displayed properly.

From Wallbase.cc