Nana
Home Archives Categories Tags Codes About
Home Archives Categories Tags Codes About

官方样式和主题样式示例

工作内容总结

测试一下据说这里是文章的摘抄，会被 excerpt 摘抄覆盖 （但是如果你在首页看到我就似乎没有）

public class Demo{}

console.log("我叫丰木木")

引言

content 在文章中插入引言，可包含作者、来源和标题

[author[source]] [link] [source_link_title]

样例

Do not just seek happiness for yourself. Seek happiness for all. Through kindness. Through mercy.

NEW: DevDocs now comes with syntax highlighting. http://devdocs.io

Every interaction is both precious and an opportunity to delight.

代码块

code snippet

图片及图片大小

效果见后文搜索部分

<img src="/images/algolia-apiKey-catalog.png" width="400" style="margin-left:100px">
![image](/images/algolia-apiKey-catalog.png)
![image](/images/algolia-apiKey.png)

文章日期

文章配置中写入

date: 2021-08-16

Markdown

标题

# 一级标题
## 二级标题
## 三级标题

该模块就不弄实例了，免得影响文章目录，具体也可参照目录和本文作为该块示例

字体

**加粗文字**
*斜体文字*
<small>字体变小</small>
<big>字体变大</big>
<font face="黑体">我是黑体字</font>
<font face="微软雅黑">我是微软雅黑</font>
<font face="STCAIYUN">我是华文彩云</font>
<font color=red>我是红色</font>
<font color=lightgrey>我是浅灰色</font>
<font color=#008000>我是绿色</font>
<font color=Blue>我是蓝色</font>
<font size=5>我是尺寸</font>
<font face="黑体" color=green size=5>我是黑体，绿色，尺寸为5</font>
————————————————
版权声明：本文为CSDN博主「heimu24」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/heimu24/article/details/81189700

加粗文字
斜体文字
字体变小
字体变大
我是黑体字
我是微软雅黑
我是华文彩云
我是红色
我是浅灰色
我是绿色
我是蓝色
我是尺寸
我是黑体，绿色，尺寸为5

空格

&emsp; 一个中文字大小
&ensp; 1/2个中文字大小
&nbsp; 一个空格键大小
&thinsp; 最小的空格

  一个中文字大小
  1/2个中文字大小
  一个空格键大小
  最小的空格

换行

aaa<br>bbb

表格|表格
---|---
aaa|bbb<br>ccc

aaa
bbb

同样可用于表格内换行

表格 表格
aaa bbb
ccc

Aomori

Hexo 是一款快速、简洁且高效的博客框架，拥有超快生成速度，支持 Markdown，一键部署和高度可扩展性。本项目是基于 Hexo 一系列优势所开发出来的一款主题，主题特性如下

  • 丰富的网站样式
  • 丰富的主题配置
  • 优化图片视频播放
  • 出色的SEO优化
  • 响应式布局
  • 开源并持续更新
  • …

Demo

主题示例博客

安装主题

将 下载 的 ZIP 包解压放置到 Hexo 主题目录下即可

开始使用

基本使用配置，需要在全局 _config.yml 进行以下设置

  1. 启用主题
theme: hexo-theme-aomori

System.out.println();
  1. 关闭 Hexo 默认 Highlight 代码高亮
highlight:
  enable: false

主题可选功能

主题可选配置，需要在全局 _config.yml 进行以下设置

头像

aomori_logo: /images/avatar.jpg

站点标题打字动画

aomori_logo_typed_animated: true

头部菜单

aomori_menu:
  Home: /
  Archives: /archives

侧边栏菜单

aomori_widgets:
  - toc # 文章导航
  - category  #文章分类
  - tag # 文章标签
  - recent_posts  # 最新文章
  - archive #文章归档

知识共享使用许可

aomori_copyright: true # or false

社交媒体

icon 填入 Boxicons Icon Name

url 链接地址

aomori_social:
  -
    icon: # 图标 name 字段
    type: # 图标 type 字段
    url: # 你的社交媒体链接
  -
    icon:
    type:
    url:

百度链接提交

aomori_baidu_sitepush: true  # or false

百度统计

aomori_baidu_analytics: ''

Google 统计

aomori_google_analytics: 'UA-XXXXX-X'

Google Site Verification

aomori_google_site:
  enable: true
  id: XXX

不蒜子 统计

由 不蒜子 提供的计数服务

aomori_busuanzi: true

Emoji Favicon

在 Favicon 显示 Emoji

aomori_favicon: 🎮

文章可选功能

配置文件：文章 Front-matter

插入链接（效果见下-封面图片）

注意此处 ]( 中间不能有空格，否则失效

 [资源文件夹](https://hexo.io/zh-cn/docs/asset-folders)

封面图片

使用 相对路径，参照 资源文件夹

cover: xxx.jpg

封面视频

使用 完整链接，便于使用 CDN

每篇文章只能有一个封面视频，并且封面图片和封面视频只能同时存在其中一个

video:
  src: src # 完整视频链接
  poster: poster # 完整视频封面图链接

文字头部图片

可配多张，使用 相对路径 ，参照 资源文件夹

photos:
- xxx.jpg
- xxx.jpg

转载链接

可配多条

url 跳转链接 / title 显示标题

link_reprint:
  -
    url: url
    title: title
  -
    url: url
    title: title

配置后文章列表将会显示徽章提示。

参考链接

可配多条

url 跳转链接 / title 显示标题

link_refer:
  -
    url: url
    title: title
  -
    url: url
    title: title

置顶

在 Hexo 目录下安装依赖

npm i hexo-generator-index -S

在文章 Front-matter 增加选项

sticky: 100

更多使用方法 点击查看。

配置后文章列表将会显示徽章提示。

Video

我们对文章内容里面的视频做了优化处理，你只需要在写文章的时候直接使用 HTML 的 Video 标签 <video src="xxx"/> 即可。

页面可选功能

配置文件：页面头部

隐藏侧边栏

sidebar: false

文章可选风格

配置文件：文章头部

Tweet

layout: tweet

文章评论

配置文件：全站 _config.yml

Disqus

填入 Disqus ID

aomori_disqus_shortname: ''

DisqusJS

使用 DisqusJS 搭配 Disqus API 在中国大陆访问会更加友好

配置详情参照 https://github.com/SukkaW/DisqusJS

aomori_disqusjs:
  enable: true
  shortname: ""
  siteName: ""
  api: ""
  apikey: ""
  nesting: 4
  nocomment: "这里冷冷清清的，一条评论都没有"
  admin: ""
  adminLabel: ""

Gitalk

配置详情参照 https://github.com/gitalk/gitalk

aomori_gitalk:
  enable: true
  clientID: GitHub Application Client ID
  clientSecret: GitHub Application Client Secret
  repo: GitHub repo
  owner: GitHub repo owner
  admin: 
    - GitHub repo owner and collaborators
    - GitHub repo owner and collaborators
  distractionFreeMode: true // Facebook-like distraction free mode

Valine

配置详情参照 https://valine.js.org/

aomori_valine:
  enable: true
  appId: ''
  appKey: ''

Remark42

配置详情参照 https://github.com/umputun/remark42

aomori_remark42:
  enable: true
  host: ''
  site_id: ''
  max_shown_comments: 10
  theme: "light"
  locale: "en"
  show_email_subscription: false

页面

默认页面

  1. 首先创建页面
hexo new page xxx
  1. 前往 source/xxx/index.md，文件，设置 Front-matter
title:
comment: true # or false

设置 comment 为 true 会打开页面的评论功能

友情链接页面

  1. 首先创建页面
hexo new page friends
  1. 前往 source/friends/index.md 文件，设置 Front-matter
title: 友情链接 # 文章标题
layout: friends
comment: true # 是否需要评论 true: 是 false: 否

  1. 创建数据，参照 数据文件夹

  2. 创建 source/_data/friends.json，格式如下

[
  {
    "name": "test1",
    "url": "https://linhong.me"
  },
  {
    "name": "test2",
    "url": "https://linhong.me"
  }
  ...
]

摄影/图像作品展示

  1. 首先创建页面
hexo new page photography
  1. 前往 source/photography/index.md 文件，设置 Front-matter
title: 我的摄影 # 文章标题
layout: photography
sidebar: false

  1. 创建数据，参照 数据文件夹

  2. 创建 source/_data/photography.json，格式如下

[
    {
        "photo": "https://xxx.jpg",
        "title": "This is title.",
        "icon": {
            "name": "unsplash",
            "type": "logo",
            "url": "https://linhong.me"
        },
        "place": "China"
    },
    {
        "photo": "https://xxx.jpg",
        "title": "This is title.",
        "icon": {
            "name": "unsplash",
            "type": "logo",
            "url": "https://linhong.me"
        },
        "place": "China"
    },
    ...
]

icon 字段参数基于 Boxicons

搜索

Algolia

  1. 注册 Algolia 账号，并创建 Index

  2. 安装 hexo-algolia

npm install --save hexo-algolia
  1. 在站点 _config.yml 填入 Algolia 配置
algolia:
    applicationID: 'applicationID'
    apiKey: 'apiKey' # Search-Only API Key
    indexName: '...'

配置在 Algolia > API Keys 可以找到

这里似乎有点难找，具体是在下图位置(顺便试一下插入 HTML 限定图片大小的写法)
>
（图1）
image
（图2）
image
（图3）

  1. 运行下面的命令更新数据
$ export HEXO_ALGOLIA_INDEXING_KEY=Admin API Key # Use Git Bash 
(# set HEXO_ALGOLIA_INDEXING_KEY=Admin API Key # While using Windows command line)
$ hexo clean
$ hexo algolia

注意，以后发新文章后都需要运行 hexo algolia 更新搜索数据

  1. 在站点 _config.yml 打开搜索功能
aomori_search_algolia: true

Enjoy.

依赖安装列表

  • 配置文章在首页置顶
    npm i hexo-generator-index -S sticky: 100
    在文章 Front-matter 增加选项
    sticky: 100

文章转载自 hexo-theme-aomori 使用文档

文章参考文献

hexo-theme-aomori 中文使用文档

hexo-theme-aomori 英文使用文档

本作品采用 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可。