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

Cactus-CN

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

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

使用说明

特征

  • 增强:中文字体
  • 增强:代码高亮与对比度
  • 增强:行级代码块样式
  • 增强:表格样式
  • 添加:指定网站备案号
  • 修正:发布文章未指定作者,作者项指向博客名称
  • 删除:替换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 设置语言项 languageja

    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