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

(Updated: )
hexo
cactus, hexo, markdown

Cactus-CN

Cactus(仙人掌)是一个为Hexo开发的响应式个人网站主题,拥有清简的样式。我在采纳它作为我的博客主题时,感觉它在支持中文字体方面略显不足，有十分明显的锯齿感，于是在此主题的基础上，修改了些许样式，以符合个人审美。相信你对hexo有所了解,我将主题的配置文件项都给翻译了一遍,按照提示来就行了。

:cactus: 项目地址
:cactus: 修改版演示
:cactus: 原版演示

使用说明

特征

  • 中文字体增强
  • 修正发布文章未指定作者时作者项指向博客名称
  • 加强代码高亮对比度
  • 加强行级代码块样式
  • 加强表格样式
  • 删除Disqus功能
  • 删除谷歌分析/百度统计

安装

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

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

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

    1
    2
    # theme: landscape
    theme: cactus

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

    1
    $ hexo new page about

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

  2. 创建一篇文章

    1
    $ hexo new post "hello world"

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

  3. 运行: hexo generate 或者 hexo server

  4. 如何发表你的博客!

配置

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

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

    1
    2
    3
    # _config.yml
    theme_config:
      colorscheme: white

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

    1
    2
    # themes/cactus/_config.yml
    colorscheme: white

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

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

    1
    2
    3
    4
    5
    6
    nav:
      Home: /
      About: /about/
      Writing: /archives/
      Projects: http://github.com/probberechts
      LINK_NAME: URL

  4. 内容分页

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

      1
      2
      3
      posts_overview:
        show_all_posts: false
        post_count: 5

    • 显示所有文章

      1
      2
      posts_overview:
        show_all_posts: true

  5. 个人项目清单

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    [
        {
           "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"
        }
    ]

  6. 社交媒体链接

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

    1
    2
    3
    4
    social_links:
      github: your-github-url
      twitter: your-twitter-url
      NAME: your-NAME-url

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

  1. 多语言配置

    目前主题提供的语言支持在 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 不支持多语言站点.

  2. RSS

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

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

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

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

  3. 代码高亮

    选择一个可用的colorschemes(默认github-gist)并将其添加到_config.yml：

    1
    highlight: COLORSCHEME_NAME

  4. 标签与分类

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    title: 标签与分类
    date: 2017-12-24 23:29:53
    tags:
    - Foo
    - Bar
    categories: 
    - Baz
    ---

    This post contains 2 tags and 1 category.

  1. 标签页

    首先创建页面 tags

    1
    hexo new page tags

    然后修改页面的 type 值为 tags

    1
    2
    3
    4
    5
        ---
        title: tags
        date: 2019-09-22 14:58:00
    type: tags
        ---

  1. 分类页

    首先创建页面 categories

    1
    hexo new page categories

    然后修改页面 type 值为 categories

  2. 本地搜索

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

    1
    $ npm install hexo-generator-search --save

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

    1
    $ hexo new page search

    指定该页面的 type: search .

    1
    2
    3
    title: Search
    type: search
    ---

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

    1
    2
    nav:
      search: /search/

版权

声明：本作基于hexo-theme-cactus进行局部美化

使用字体:

​ FiraCode

​ SourceHanSansCN