增强cactus对中文和markdown样式的支持

(Updated: )
develop
cactus, markdown, hexo,

Cactus-CN

Cactus(仙人掌)是一个为Hexo开发的主题,拥有清简的样式,但在支持中文字体方面略显不足,锯齿感明显,无有代码块和表格样式,在此主题的基础上,我对其进行些许增强和改进,包括在代码块和表格样式,以及符合国情的备案号指定。

🌵 项目地址 🌵 原版演示 🌵 修改版演示

使用说明

特征

  • 增强:中文字体
  • 增强:代码高亮与对比度
  • 增强:行级代码块样式
  • 增强:表格样式
  • 添加:指定网站备案号
  • 修正:发布文章未指定作者,作者项指向博客名称
  • 删除:替换Disqus评论方案为Valine
  • 删除:谷歌分析/百度统计

安装

  1. 在博客的根目录下操作:

    $ git clone https://github.com/xuthus5/hexo-theme-cactus.git themes/cactus

  2. 修改根目录下的 config.yml 文件的 theme 选项.

    # theme: landscape
theme: cactus

  3. 创建 关于我 页面，请运行:

    $ hexo new page about

    文件将被创建在 source/about/index.md 下, 我认为这是必要的操作，它是对你个人的介绍，网站导航默认情况下也将引用它。

  4. 创建一篇文章

    $ hexo new post "hello world"

    创建的文章将被创建在 source/_posts/hello-world.md 下.

  5. 运行: hexo generate 或者 hexo server

  6. 如何发表你的博客!

配置

下面讨论几个比较重要的选项，这些选项在相关的_config.yml中都会被找到.

  1. 在根目录下的 _config.yml 中指定主题:

    # _config.yml
theme_config:
  colorscheme: white

  2. 在主题的 _config.yml 下指定主题色彩方案，有4套方案分别是，white、classic、dark、light，建议white，本主题只做了white适配

    # themes/cactus/_config.yml
colorscheme: white

    你可以在 themes/cactus/source/css/_colors下自定义颜色方案.

  3. 项目自定义导航选项，在根目录下的 _config.yml文件中:

    nav:
  Home: /
  About: /about/
  Writing: /archives/
  Projects: http://github.com/probberechts
  LINK_NAME: URL

  4. 内容分页

  • 仅显示制定数目的文章 (默认选项)

    posts_overview:
  show_all_posts: false
  post_count: 5

  • 显示所有文章

    posts_overview:
  show_all_posts: true

  1. 个人项目清单

    手动创建文件 source/_data/projects.json 按照如下格式写入内容，即可在首页展示你的项目

    [
    {
       "name":"Hexo",
       "url":"https://hexo.io/",
       "desc":"A fast, simple & powerful blog framework"
    },
    {
       "name":"Font Awesome",
       "url":"http://fontawesome.io/",
       "desc":"The iconic font and CSS toolkit"
    }
]

  2. 固定链接

    手动创建文件 source/_data/links.json 按照格式如 projects.json 即可在首页展示固定链接

    [
    {
       "name":"API",
       "url":"/api/",
       "desc":"local url"
    },
    {
       "name":"Google",
       "url":"https://google.com/",
       "desc":"remote url"
    }
]

  3. 社交媒体链接

    可以在首页自动添加指向您的社交媒体帐户的链接。更新主题下的 _config.yml:

    social_links:
  github: your-github-url
  twitter: your-twitter-url
  mail: mailto:name@server.com
  qq: tencent://message/?uin=qq
  NAME: your-NAME-url

    你可以自定义 NAME 只要它在 Font Awesome icon 中存在，就有可能被你使用。

  4. 多语言配置

    目前主题提供的语言支持在 languages/* 下,如果您想使用上面列出的语言之一，只需将配置文件语言项language 设置为所需的语言(例如fr)。如果你希望添加额外的语言翻译支持（例如，添加日语（ja）翻译支持）：

    1. 配置文件_config.yml 设置语言项 language为ja

    2. 在themes/cactus/languages/ 中创建一个文件 ja.yml

    3. 复制内容themes/cactus/languages/default.yml并将其粘贴到ja.yml文件中

    4. 用日语翻译替换所有英文字符串

    注意: Cactus 不支持多语言站点 即你只能指定一种语言供展示.

  5. RSS

    将rss字段设置为_config.yml以下值之一：

    1. rss: false 将完全禁用rss（默认）。

    2. rss: atom.xml 设置特定的Feed链接。

    3. rss:留空以使用hexo-generator-feed插件。

  6. 代码高亮

代码高亮插件默认highlight 选择一个可用的colorschemes(默认github-gist)并将其添加到_config.yml：

```yml
highlight: COLORSCHEME_NAME
```

你仍然可以使用prism 请跟随如下操作 安装完 [hexo-prism-plugin](https://github.com/ele828/hexo-prism-plugin) 插件

```bash
npm i -S hexo-prism-plugin
```

安装完毕后，在**网站配置文件**做如下配置：
```yaml
highlight:
  enable: false

prism_plugin:
  mode: 'preprocess'    # realtime/preprocess
  theme: 'tomorrow'
  line_number: false    # default false
  custom_css:
```

  1. 标签与分类

    标签和分类需要被包含在文章的前端:

    title: 标签与分类
date: 2017-12-24 23:29:53
tags:
- Foo
- Bar
categories: 
- Baz
---

This post contains 2 tags and 1 category.

  2. 标签页

    首先创建页面 tags

    hexo new page tags

    然后修改页面的 type 值为 tags

    ---
title: tags
date: 2019-09-22 14:58:00
type: tags
---

  3. 分类页

    首先创建页面 categories

    hexo new page categories

    然后修改页面 type 值为 categories

  4. 本地搜索

    首先，安装hexo-generate-search 插件，它将生成一个搜索索引文件。

    $ npm install hexo-generator-search --save

    接下来，创建一个显示搜索引擎的页面：

    $ hexo new page search

    指定该页面的 type: search .

    title: Search
type: search
---

    最后，编辑_config.yml并添加导航菜单的链接。

    nav:
  search: /search/

版权

声明：本作基于hexo-theme-cactus进行局部美化 使用字体: FiraCode@2 Noto Sans SC