暂无图片
暂无图片
暂无图片
暂无图片
暂无图片

神器hexo的Matery主题

梵讯技术人 2021-06-24
2180

目录



前言一、成品预览二、准备工作    2.1 基础环境    2.2  项目配置文件三、Themes 准备    3.1 Themes下载四、配置 Themes     4.1 新建menu页    4.2 第三方插件安装        4.2.1 代码高亮        4.2.2 内容搜索        4.2.3 中文链接转拼音        4.2.4 文章字数统计        4.2.5 添加emoji表情支持五、总结



01


成品预览


02


准备工作

2.1 基础环境

    基于上一篇已搭建好基本的项目。(详细请看链接:hexo搭建blog神器

2.2  项目配置文件

    项目根目录下的 _config.yml 文件(非themes的)就是该项目的配置文件,上一篇文章中只是涉及到修改其中的 delpoy部分的内容(即将文章推送到github上)。

详细配置内容如下(参见:https://hexo.io/zh-cn/docs/configuration):

    # Site  站点配置
    title: Hexo
    subtitle: ''
    description: ''
    keywords:
    author: John Doe
    language: en
    timezone: ''


    # URL 网站url配置
    url: http://yoursite.com
    root: /
    permalink: :year/:month/:day/:title/
    permalink_defaults:
    pretty_urls:
    trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
    trailing_html: true # Set to false to remove trailing '.html' from permalinks


    # Directory 目录
    source_dir: source
    public_dir: public
    tag_dir: tags
    archive_dir: archives
    category_dir: categories
    code_dir: downloads/code
    i18n_dir: :lang
    skip_render:




    # Writing 写文章的配置
    new_post_name: :title.md # File name of new posts
    default_layout: post
    titlecase: false # Transform title into titlecase
    external_link:
    enable: true # Open external links in new tab
    field: site # Apply to the whole site
    exclude: ''
    filename_case: 0
    render_drafts: false
    post_asset_folder: false
    relative_link: false
    future: true
    highlight:
    enable: true
    line_number: true
    auto_detect: false
    tab_replace: ''
    wrap: true
    hljs: false


    # Home page setting 首页文章排序
    index_generator:
    path: ''
    per_page: 10
    order_by: -date


    # Category & Tag 分类和标签
    default_category: uncategorized
    category_map:
    tag_map:


    # Extensions 本篇重点,使用的主题
    theme: landscape


    ps: 配置内容还是相对简单的,其他的一些配置就没有列出来了
    复制


    03


    Themes 准备

        在hexo官网的主题页面(https://hexo.io/themes/),可以看到有很多的主题可供下载使用(目前显示有311个可供使用)。

        本次要演示的例子是上篇中展示的,主题名称是:Matery

    3.1 Themes下载

    主题github地址:https://github.com/blinkfox/hexo-theme-matery

    (1)进入项目目录下的 themes文件夹,将仓库clone下来

      git clone https://github.com/blinkfox/hexo-theme-matery.git
      ps: 这个步骤是真的慢,可以先去睡一觉
      复制

      (2)在项目的配置文件中将 themes
      由原本默认的 theme: landscape
      改为 theme: hexo-theme-matery

        # 项目中的 _config.yml
        # Extensions
        ## Plugins: https://hexo.io/plugins/
        ## Themes: https://hexo.io/themes/
        theme: hexo-theme-matery
        复制

        (3)清空原本生成的静态文件,生成新的静态页面文件

          # hexo clean 清除静态文件
          # hexo generate 生成新的静态文件
          hexo clean && hexo generate
          复制

          (4)启动服务器

            hexo server
            复制


            04


            配置 Themes

                至上一步,搭建切换至matery
            主题后,任需要一些配置操作,才能完成blog的定制化。

            4.1 新建menu页

                分别新建categories、tags、about、contact、friends页面,对应博客最上方的多个标签。

              # 新建命令分别为以下几个
              hexo new page "categories" # 用作展示所有分类
              hexo new page "tags" # 用作展示所有标签
              hexo new page "about" # 用作展示关于自我介绍的内容
              hexo new page "contact" # 用作展示所有留言信息
              hexo new page "friends" # 用作展示友情链接


              ps:
              (1) 在source目录下新建 _data目录,并新建 friends.json文件,用作友情链接的数据源
              (2) 需要在source目录下新建404页面文件,即 404.md
              复制
                # friends.json  官方提供的数据样例
                [{
                "avatar": "http://image.luokangyuan.com/1_qq_27922023.jpg",
                "name": "码酱",
                "introduction": "我不是大佬,只是在追寻大佬的脚步",
                "url": "http://luokangyuan.com/",
                "title": "前去学习"
                }, {
                "avatar": "http://image.luokangyuan.com/4027734.jpeg",
                "name": "闪烁之狐",
                "introduction": "编程界大佬,技术牛,人还特别好,不懂的都可以请教大佬",
                "url": "https://blinkfox.github.io/",
                "title": "前去学习"
                }, {
                "avatar": "http://image.luokangyuan.com/avatar.jpg",
                "name": "ja_rome",
                "introduction": "平凡的脚步也可以走出伟大的行程",
                "url": "https://me.csdn.net/jlh912008548",
                "title": "前去学习"
                }]


                # 404 页面文件内容(至少)
                # 注意:使用md编辑器粘贴下方内容的时候(如:Typora),
                # 请保证编辑器不会生成新的格式(Typora会在外部生成 ``` ```),
                # 应当在源码模式下粘贴(指的是使用Typora)


                ---
                title: 404
                date: 2018-09-30 17:25:30
                type: "404"
                layout: "404"
                description: "Oops~,我崩溃了!找不到你想要的页面 :("
                ---
                复制

                    创建完毕,会在source文件夹下生成对应的子文件夹,每一个子文件夹内生成一个index.md
                文件。


                4.2 第三方插件安装

                    此处安装的第三方插件,一般为已安装的插件或者theme方推荐的插件,也可选用其他替代插件,详细的替换方法可去theme github查看:https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md

                4.2.1 代码高亮

                matery主题中使用hexo-prism-plugin
                插件来做代码高亮。

                  npm i -S hexo-prism-plugin
                  复制

                  需要改项目 _config.yml
                  (非theme)文件中的代码高亮配置。

                    # 添加时注意缩进与空格
                    highlight:
                    enable: false


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

                    4.2.2 内容搜索

                    matery主题中使用 hexo-generator-search
                    插件作为内容搜索。

                      npm install hexo-generator-search --save
                      复制

                      需要在项目  _config.yml
                      (非theme)文件中添加。

                        # 添加时注意缩进与空格
                        search:
                        path: search.xml
                          field: post
                        复制

                        4.2.3 中文链接转拼音

                            如果文章名称是中文的,生成的永久链接也会有中文,官方给的说法是:不利于  SEO
                        (对于这一块没有深入研究),且 gitment
                        评论对中文链接也不支持。

                          npm i hexo-permalink-pinyin --save
                          复制

                          需要在项目  _config.yml
                          (非theme)文件中新增配置。

                            permalink_pinyin:
                            enable: true
                            separator: '-' # default: '-'
                            复制

                            4.2.4 文章字数统计

                                这个文章字数统计和阅读时长这样的信息,应该是从公众号开始兴起的吧,反正加上了会给人一种高level的感觉。

                              npm i --save hexo-wordcount
                              复制

                              需要在Matery主题下的  _config.yml
                              (非项目)文件中激活配置。

                                postInfo:
                                date: true
                                update: false
                                wordCount: false # 设置文章字数统计为 true.
                                totalCount: false # 设置站点文章总字数统计为 true.
                                min2read: false # 阅读时长.
                                readCount: false # 阅读次数.
                                复制

                                4.2.5 添加emoji表情支持

                                    表情所传达的信息,很多时候是文字所表达不出的,所以自从知道了emoji之后,好多时候都不自觉的插个表情玩一玩,因此强烈建议安装😏😏😏

                                  npm install hexo-filter-github-emojis --save
                                  复制

                                  需要在项目  _config.yml
                                  (非theme)文件中新增配置。

                                    githubEmojis:
                                    enable: true
                                    className: github-emoji
                                    inject: true
                                    styles:
                                    customEmojis:
                                    复制

                                    注:其他的配置信息,可自行查阅官方文档和Theme文档内容进行调整。

                                    05


                                    总结

                                        整体的配置流程相对固定,按照流程操作完就可以了,过程中出现的问题也都不难解决。完成上面的配置内容后,就可以开始创作大业了。




                                    文章转载自梵讯技术人,如果涉嫌侵权,请发送邮件至:contact@modb.pro进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。

                                    评论