美文网首页JavaWeb软件开发好文选
完全免费搭建个人博客系列教程(二)

完全免费搭建个人博客系列教程(二)

作者: 不知名码农 | 来源:发表于2019-01-05 23:57 被阅读5次

    使用hexo+github/coding免费搭建个人博客,本文记录hexo博客的一些个性化配置。包括:

    • 修改主题、
    • 头像、
    • 评论、
    • 搜索、
    • DaoVoice在线联系、
    • 顶部加载条、
    • 访问量统计、
    • 第三方统计、

    个性化配置

    修改主题

    下载next主题,完成后,修改站点配置文件的 theme: landscape 为 theme: next,然后执行 hexo s 预览

    git clone https://github.com/iissnan/hexo-theme-next themes/next`
    

    增加头像并加旋转特效

    增加统计字数、阅读时长

    在主题配置文件themes/next/_config.yml中找到以下内容:将wordcount、min2read修改为true

    post_wordcount:
    item_text:  true
    wordcount:  true
    min2read:  true
    totalcount:  true
    separated_meta:  true
    

    本地完成以上配置之后还需要增加 hexo-wordcount插件,在命令行中执行以下命令:

    npm i --save hexo-wordcount`
    

    安装完毕之后,就可以预览了效果了。自定义样式,如 字数统计:***修改为 字数统计:***字,在themes/next/layout/_macro/post.swig中找到以下内容

    <span  title="{{ __('post.wordcount') }}">
    {{ wordcount(post.content) }}
    </span>
    

    修改为

    <span  title="{{ __('post.wordcount') }}">
    {{ wordcount(post.content) }} 字
    </span>
    

    阅读时长:***修改为 阅读时长:***分钟

    <span  title="{{ __('post.min2read') }}">`
    {{ min2read(post.content) }}`
    </span>
    

    修改为

    <span  title="{{ __('post.min2read') }}">
    {{ min2read(post.content) }} 分钟
    </span>
    

    即可。

    hexo增加七牛云图床及上传

    参考自: 使用VSCode+七牛云图床插件+自定义快捷键配置Hexo博文编写环境

    工具:

    • 使用VSCode进行博客编写;
    • qiniu-upload-image插件,需要进行配置;
    • vscode-Hexo插件;
    • 使用七牛云,点击访问作为图床,这个需要自己申请和认证哈,我的认证花了两天时间~~
      image.png

    这个是我的微信公众号,会不定期更新,欢迎交流~~


    weyoung.jpg

    相关文章

      网友评论

        本文标题:完全免费搭建个人博客系列教程(二)

        本文链接:https://www.haomeiwen.com/subject/ghjjrqtx.html