搭建博客(一) —— 基础

Author Avatar
xiaoLit Created: Oct 09, 2018 Updated: Sep 10, 2019

Material Design图片库
hexo-theme-material配置文件详细描述
我使用的HEXO+ GitHub page的形式搭建自己的博客,参考大佬
material的文档挂了许久,暂时代替说明文档,Material Theme Verison: 1.5.0

一、material-1.5.5和1.5.6版本使用过程中出现报错

解决方案issue#686
修改layout/_widget/dnsprefetch.ejs文件。修改内容如下:

<% } else if(theme.comment.use.startsWith("disqus")) { %>

修改为

<% } else if(theme.comment.use && theme.comment.use.startsWith("disqus")) { %>

二、图床

更新
现在七牛云需要绑定备案网站麻烦至极,可以改用微博图床。推荐IPic


综合各种因素,七牛云足以。
纯界面操作这位大佬Jackier图片贴的非常详细,看了就懂。

三、独立页面

1. 添加任意侧栏功能

pages: 
    title:                               #可以填写任意标题
        link: "http://example.com"       #点击跳转的链接
        icon: link                       #图标 可以到Material Design图片图找
        divider: false                   #分割线

2. 友情链接页面

创建

  • hexo目录下的source文件夹内创建一个名为links(只是建议,可根据自己喜好修改)的文件夹。
  • 然后在文件内创建一个名为index.mdMarkdown文件。
  • index.md文件内写入如下内容即可。
---
title: links
date:
layout: links
---

title 可修改,layout 不可修改。

添加数据

  • 同样在在hexo目录下的source文件夹内创建一个名为_data(禁止改名)的文件夹。
  • 然后在文件内创建一个名为 links.yml 的文件。
  • 单个友情链接的格式为:
    Name:
    link: http://example.com
    avatar: http://example.com/avatar.png
    descr: "这是一个描述"
  • 添加多个友情链接,只需要根据上面的格式重复填写即可。
  • Name 改为友情链接的名字,例如 Jack。
  • http://example.com为友情链接的地址。
  • http://example.com/avatar.png 为友情链接的头像。
  • 这是一个描述 为友情链接描述。

开启

在主题_config.yml文件下加入

pages:
    友情链接: "/links/"

3. 时间线

创建

hexo 目录下的 source 文件夹内创建一个名为 timeline(只是建议,可根据自己喜好修改)的文件夹。
然后在文件内创建一个名为 index.mdMarkdown 文件。
在 index.md 文件内写入如下内容即可。

---
title: timeline
date:
layout: timeline
---

title 可修改,layout 不可修改。

开启

pages:
   时间轴:
        link: "/timeline"
        icon: timeline
        divider: false

四、评论系统

material本身也集成了很多其他主流的评论系统大家可以自行选择。但我综合各种因素,例如使用是否方便,是否需要备案,是否需要翻越某个神秘的墙体,选择了gitalk

1. 注册OAuth Application

点击此处 来注册一个新的 OAuth Application。注意最后一个Authorization callback URL要填写自己博客的url。注册成功后得到一个Client IDClient Secret

2. 配置参数

material_config.yml中找到Comment Systems相关配置。

# Comment Systems
comment:
    use: "gitalk"
    gitalk_repo: gitalk            #这里是因为我在第一步中注册 OAuth Application 的 repo 名字叫做 gitalk
    gitalk_owner: xiaoLit          #这里当然是 github 用户名了
    gitalk_client_id: ******       #这里是第一步的Client ID
    gitalk_client_secret: ******   #这里是第一步的Client Secret

3. 部署

配置好后部署就可以了。

注意: 有可能会出现Error: Validation Failed错误。这是由于创建gitalk时会将当前posturl作为label创建一个issue,而issuelabel长度最大只支持50个字符,如果文章标题有过多中文或长度太长,都会产生这个问题。
解决方案:在该目录~/themes/material/layout/_widget/comment/gitalk/main.ejs

<script>
    var gitalk = new Gitalk({
            clientID: '<%= theme.comment.gitalk_client_id %>',
            clientSecret: '<%= theme.comment.gitalk_client_secret %>',
            repo: '<%= theme.comment.gitalk_repo %>',
            owner: '<%= theme.comment.gitalk_owner %>',
            admin: ['<%= theme.comment.gitalk_owner %>'],
            // facebook-like distraction free mode
            distractionFreeMode: false,
            id: '<%=  page.title.substr(0,48) %>'  //额外加入了这句
        })
   gitalk.render('gitalk-container')
</script>

#617

五、topPost

使用该插件可以将指定文章置顶。
npm install hexo-helper-post-top --save
使用在您需要置顶文章的 front-matter 中,添加 top: true 即可置顶。

六、搜索功能

Material 主题内置了 google swiftype local 三种搜索系统。
需要在文章内搜索的话使用本地搜索,需要安装hexo-generator-search插件。

$ npm install hexo-generator-search --save

2. 配置参数

  • 修改文件:博客/themes/material/_config.yml
search:
    use: local #此处使用了本地搜索
  • 修改文件:博客/_config.yml
search:
  path: search.xml
  field: post

七、新版prettify自动折行替换为不折行并添加滚动条

1. 解决方案issues#616

  • source/css/prettify.css直接替换为
@charset "UTF-8";

/* for color-themes-for-google-code-prettify */
/* Automatically add a scroll bar instead of a newline */
pre{
    white-space: pre;
}

#post-content .prettyprint{
    padding: 1.2em;
    border-radius: 0;
}

#post-content ol,#post-content ul{
    padding-left: 32px;
    font-size: 1rem;
    margin: 0;
    overflow: initial;
}

#post-content pre code, #post-content pre tt {
    padding-right: 2em;
}

#post-content .prettyprint li.L0, #post-content .prettyprint li.L1,
#post-content .prettyprint li.L2, #post-content .prettyprint li.L3,
#post-content .prettyprint li.L4, #post-content .prettyprint li.L5,
#post-content .prettyprint li.L6, #post-content .prettyprint li.L7,
#post-content .prettyprint li.L8, #post-content .prettyprint li.L9 {
    padding-left: 0.5em;
}
  • source/css/prettify.min.css直接替换为:
pre{white-space:pre}#post-content .prettyprint{padding:1.2em;border-radius:0}#post-content ol,#post-content ul{padding-left:32px;font-size:1rem;margin:0;overflow:initial}#post-content pre code,#post-content pre tt{padding-right:2em}#post-content .prettyprint li.L0,#post-content .prettyprint li.L1,#post-content .prettyprint li.L2,#post-content .prettyprint li.L3,#post-content .prettyprint li.L4,#post-content .prettyprint li.L5,#post-content .prettyprint li.L6,#post-content .prettyprint li.L7,#post-content .prettyprint li.L8,#post-content .prettyprint li.L9{padding-left:.5em}

八、去代码掉行

看代码还是一行舒服
默认hanabi是支持的,只需要

hanabi:
    enable: true
    line_number: true

可是material-1.5.5和1.5.6版本使用prettify不支持去掉行号,那么就只有暴力处理了。
修改themes/material/layout/_partial 下的文件import_js.ejs

$('pre').addClass('prettyprint linenums').attr('style', 'overflow:auto;');
替换为:
$('pre').addClass('prettyprint').attr('style', 'overflow:auto;');

九、使用公共CDN加速

您可以使用由 jsDelivr 提供的公共 CDN 加速 Material 主题引用的静态文件,只需要在 materialcdn 中填入你的 CDNURL 路径即可。默认为空、从网站源站加载。

修改文件: 博客/themes/material/_config.yml

注意!填入的 URL 末尾不需要带 / !
例如,您可以这么配置:

vendors:
    materialcdn: https://cdn.jsdelivr.net/gh/viosey/hexo-theme-material@1.5.6/source

根据自己使用不同版本去寻找相应的链接,查看对应版本链接

还有一些推荐的第三方库的CDN
BootCDN
jsDelivr

十、安装prettify的正确姿势

更新
分割线以下安装步骤为老版的内容,1.5.5和1.5.6版本无需再用此方法。

  • 直接改主题下_config.yml文件即可:
prettify:
    enable: true
    theme: "vibrant-ink"

集成了大部分prettify,可在目录themes/material/source/css/prettify查看具体名字,觉得挨个尝试麻烦的话可以直接到这里看效果然后填写目录下的相应主题名字。



开始看了 @旭丶Joy 大佬的文章设置prettify发现代码块滚动条异常。于是去爬论坛,发现这个问题在issue#383中解决,并且在issue#616优化过,也就是新版本是包含的。所以猜想应该该主题支持的方式有可能不同,于是在issue#395找到了该姿势。

1. 安装code-prettify

  • git clone https://github.com/google/code-prettify.git
  • 将src重命名为prettify,然后目录prettify拷贝至你的 hexo 博客的 source/vendors/下, vendors是新建的目录

2. 安装color-themes-for-google-code-prettify

$ cd yourproject
$ npm i color-themes-for-google-code-prettify -S
$ cd node_modules/color-themes-for-google-code-prettify/dist
$ cp -r themes ../../../themes/material/source/vendors/prettify/

其实就是安装color-themes-for-google-code-prettify, 将dist/themes拷贝到themes/material/source/vendors/prettify/

3. prettify用法

  • 主题下的_config.template.yml追加以下内容:
prettify:
    enable: true   # if true, customcss.enable must be true
    theme: "vibrant-ink" # default value: "vibrant-ink"   # "theme-name without .css"

# custom css
customcss:
    enable: true
    csspath: [  # css file path
        "/css/custom-prettify.min.css"
    ]
  • 在主题下的layout/_partial/head.ejs追加下面内容:
<% if (theme.prettify.enable){ %>
        <!-- prettify代码高亮主题css引入 -->
        <link href="/vendors/prettify/themes/<%= theme.prettify.theme %>.css" rel="stylesheet">
    <% } %>

    <!-- 自定义css引入 -->
    <% if (theme.customcss.enable){ %>
        <% if (theme.customcss.csspath) { %>
            <% for (var i in theme.customcss.csspath) { %>
                <link href="<%= theme.customcss.csspath[i] %>" rel="stylesheet">
            <% } %>
        <% } %>
    <% } %>
  • 在主题下的layout/_partial/import_js.ejs加入以下内容:
<!-- prettify代码高亮js引入 -->
<% if (theme.prettify.enable){ %>
    <script src="/vendors/prettify/prettify.js" type="text/javascript"></script>
<%}%>

<!-- Window Load-->
<script type="text/ls-javascript" id="window-load">
    $(window).on('load', function() {
        // Post_Toc parent position fixed
        $('.post-toc-wrap').parent('.mdl-menu__container').css('position', 'fixed');
    });

    $(function() {
        <!-- prettify代码高亮js引入 -->
        <% if (theme.prettify.enable){ %>
            $('pre').addClass('prettyprint linenums').attr('style', 'overflow:auto;');
            prettyPrint();
        <%}%>
    })
</script>
  • 网站下的_config.template.yml文件修改以下内容:
highlight:
    enable: false

4. 最后验收成果啦

$ hexo clean
$ hexo g
$ hexo s

叮!搞定!