博客二之博客美化

原创 2018年02月01日 15:17:58

原文地址:博客二之博客美化
主题:NexT主题
内容较多,建议点击导航栏查看

优化分类

生成新post

生成新文章

  1. 生成新文章。默认模板是scaffolds/post.md,由站点配置文件中default_layout参数设置。使用默认模板时,下面主题可简化为hexo new <title>,当文章名有空格时,需用引号,引起来。

    hexo new <layout> <title>
  2. 查看新文章

    hexo g 
    hexo s
  3. 推送新文章

    hex d

生成草稿

  1. 生成草稿。生成文章在sources/_drafts目录下。

    hexo new draft <title>
  2. 查看草稿。本地预览草稿

    hexo g --draft
    hexo s --draft
  3. 发布草稿。移动到sources/_post目录下

    hexo publish draft <titile>

生成新菜单

  1. 生成新菜单即生成新目录

    hexo new page <title>

    如何生成一篇新的post

标题信息:字数统计+阅读时长

  1. 在根目录下安装 hexo-wordcount,运行:

    $ npm install hexo-wordcount --save
  2. 然后在主题的配置文件中,配置如下:

    
    #Post wordcount display settings
    
    
    #Dependencies: https://github.com/willin/hexo-wordcount
    
    post_wordcount:
      item_text: true
      wordcount: true
      min2read: true

底部信息:字数统计

  1. 切换到根目录,运行命令

    npm install hexo-wordcount --save
  2. 然后在themes/next/layout/_partials/footer.swig文件尾部加上:

    <div class="theme-info">
      <div class="powered-by"></div>
      <span class="post-count">博客全站共{{ totalcount(site) }}</span>
    </div>

底部信息:访问量统计

  1. 打开\themes\next\layout_partials\footer.swig文件,将下面代码粘贴在第一行:

    <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

    在最后一行添加显示统计的代码:

    <div class="theme-info">
      <div class="powered-by"></div>
      <i class="fa fa-user-md"></i><span id="busuanzi_container_site_pv">
      本站总访问量:<span id="busuanzi_value_site_pv"></span></span>
    </div>
  2. 在这里有两种不同计算方式的统计代码:
    pv的方式,单个用户连续点击n篇文章,记录n次访问量

    <span id="busuanzi_container_site_pv">
        本站总访问量<span id="busuanzi_value_site_pv"></span></span>

    uv的方式,单个用户连续点击n篇文章,只记录1次访客数

    <span id="busuanzi_container_site_uv">
      本站总访问量<span id="busuanzi_value_site_uv"></span></span>

    添加之后再执行hexo d -g,然后再刷新页面就能看到效果

  3. 一般把访问量与字数统计放在一起,则有:

    <div class="theme-info">
      <div class="powered-by"></div>
      <i class="fa fa-user-md"></i><span id="busuanzi_container_site_pv">
      本站总访问量:<span id="busuanzi_value_site_pv"></span></span>
      <span class="post-meta-divider">|</span>
      <span class="post-count">博客全站共{{ totalcount(site) }}</span>
    </div>

本文结束显示”感谢阅读”

  1. 在路径 \themes\next\layout\_macro 中新建passage-end-tag.swig文件,并添加以下内容:

    <div>
        {% if not is_index %}
            <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文结束<i class="fa fa-paw"></i>感谢您的阅读-------------</div>
        {% endif %}
    </div>
  2. 打开\themes\next\layout\_macro\post.swig文件,在post-body 之后添加如下代码:

    <div>
      {% if not is_index %}
        {% include 'passage-end-tag.swig' %}
      {% endif %}
    </div>
  3. 打开主题配置文件theme/next/_config.yml,在末尾添加:

    passage_end_tag:
      enabled: true

背景图片:

  1. 打开themes\next\source\css/_custom/custom.styl。这是一个自定义设置样式的文件,这里的css设置可以覆盖主题原来的。

    body {
        background:url(/uploads/background3.png);
        background-repeat: no-repeat;
        background-attachment:fixed;
        background-position:50% 50%; 
    }

    把图片添加到目录themes\next\source\uploads下,如果没有,新建一个。或者采用CDN引用。

设置阅读全文显示摘要图片

摘要配图,文章也有

  1. 在文章中使用 手动进行截断

    <div id="zhaiyao" style="width: 735px;height: 372px;">
    <img src="image.jpg" style="width: 100%;height: 100%" alt="wechat_jump_game" align=center />
    </div>
    摘要内容
    <!-- more -->

    参考:阅读全文

摘要配图,文章没有

  1. 在custom.styl(hexo/themes/next/source/css/ _custom/custom.styl)里设计一个专有容器

    //图片外部的容器方框 
    .out-img-topic {
      display: block;
      margin-bottom: 24px;
    }
    //图片
    img.img-topic {
      width: 100%;
    }
  2. 修改/themes/next/layout/ _macro/post.swig,在if is_indexif post.description and theme.excerpt_description
    之间添加以下代码:

    {% if post.images %}
        <div class="out-img-topic">
            <img src={{ post.images }} class="img-topic">
        </div>
    {% endif %}
  3. 在front-matter中加一个images字段

    images: "/images/摘要配图/"

    参考:博客摘要配图
    备注:我的博客于2018/1/29删除此设置

取消power,theme

  1. 在主题配置文件,设置powered为false,enable为false即可:

      # -------------------------------------------------------------
      # Hexo link (Powered by Hexo).
      powered: false
    
      theme:
        # Theme & scheme info link (Theme - NexT.scheme).
        enable: false
        # Version info of NexT after scheme info (vX.X.X).
        version: false

添加来必力评论

  1. 在主题配置文件_config.yml 中添加如下配置:

    
    # Support for LiveRe comments system.
    
    
    # You can get your uid from https://livere.com/insight/myCode (General web site)
    
    livere_uid: your uid

    uid在安装后可获得

添加jiathis分享

  1. 在主题配置文件中,设置jiathis为true。

    jiathis: true

    尝试没成功

添加打赏

  1. 添加打赏

    reward_comment: 说不定手滑呢!
    wechatpay: http://res.cloudinary.com/chenfengkg/image/upload/v1514352686/blog/wechat.png
    alipay: http://res.cloudinary.com/chenfengkg/image/upload/v1514352691/blog/alipay.jpg
    
    #bitcoin: /images/bitcoin.png
    

添加搜索

  1. 安装hexo-generator-searchdb。在站点的根目录下执行以下命令:

    npm install hexo-generator-searchdb --save
  2. 配置站点配置文件,新增以下内容到任意位置:

    search:
      path: search.xml
      field: post
      format: html
      limit: 10000
  3. 配置主题配置文件

    
    # Local search
    
    local_search:
      enable: true

    配置完先hexo clean,再hexo generate

添加菜单

  1. hexo new page “photography” //新建摄影菜单
  2. 在主题配置文件中menu下添加photography: /photography || 图标名,图标名在FontAwesome上找,/photography是访问路径,修改为http://www.baidu.com 则直接跳转到百度。
  3. 在hexo>theme>next>languages>zh-Hans.yml中,在menu下添加photography: 摄影
    参考:添加菜单分类

添加更新时间

  1. 在主题文件设置display_updated: true
  2. 在文章开头增加updated: 2015-12-13 20:18:54
    参考:文章更新时间设置

使用MathJax

  1. 启用mathjax

    mathjax:
      enable: true
      cdn: //cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML

    如果出现字符识别错误,在前面手动加\来escape它。

生成站点地图

googlesitemap

  1. 安装插件npm install hexo-generator-sitemap --save
  2. 打开站点配置文件,添加

    sitemap:
      path: sitemap.xml
  3. 输入 hexo g -d,然后输入chenfengkg.cn/sitemap.xml可看到生成的文件
  4. 登陆Webmaster Central,点击ADD A PROPERTY输入博客网址
  5. 验证网页所有权,使用HTML tag验证。将元数据添加到theme/next/layout/_partial/head.swig这个文件下,然后hexo g -d,然后点击Verify验证。
  6. 点击提交网页,点击sitmap,然后点击ADD/TEST SITMAP输入sitemap.xml的地址,然后点击提交。
    参考:如何向google提交sitemap

百度sitemap

  1. 安装插件npm install hexo-generator-baidu-sitemap
  2. 打开站点配置文件,添加

    baidusitemap:
      path: baidusitemap.xml
  3. 输入 hexo g -d,然后输入chenfengkg.cn/baidusitemap.xml可看到生成的文件
  4. 登录百度站长平台,点击 网页抓取-> 链接提交,在自动提交中选择 sitemap,输入域名+ baidusitemap.xml。
  5. 推送方式,自动推送。在主题配置文件中修改:

    baidu_push: true
  6. 然后等待
    参考:提交 sitemap 及解决百度爬虫无法抓取 GitHub Pages 链接问题
    让Baidu和Google收录Hexo博客

添加robot.txt

登录百度站长平台 , 点击 网页抓取->Robots-> 检测并更新。 这样百度爬虫会检测并更新 robots.txt,
并会在新的 ip 地址上抓取内容,不然还是会抓取原来的 GitHub 上的 ip 地址,导致抓取失败。更新完成
后,我们再次在抓取诊断中测试,这时应该就会抓取成功了。
tips:如果之前已经上传过 robots.txt 导致更新不成功的话,可以试着删除 robots.txt, 重新上传。

  1. 在sources目录下创建robots.txt文件
  2. 在robots.txt中添加:

    User-agent: *
    Disallow: /vendors/
    Disallow: /js/
    Disallow: /css/
    Disallow: /fonts/
    Disallow: /vendors/
    Disallow: /fancybox/
    Allow: /
    Allow: /archives/
    Allow: /categories/
    Allow: /tags/
    Sitemap: http://chenfengkg.cn/sitemap.xml
    Sitemap: http://chenfengkg.cn/baidusitemap.xml
  3. hexo g -d提交
    参考:hexo优化
    Sitemap和Robots.txt SEO优化技巧

小技巧

  1. 插件生成的 sitemap 的文章链接,都是以站点配置文件中的 url 为基础的,如果将博客绑定了域名,最好将 url 字段填写为绑定的域名。
  2. 不想生成 sitemap 的页面,可在页面最上方以 — 分割的区域内,即 Front-matter 中,添加代码 sitemap: false。

文章链接优化

  1. 去除URL中的时间
    Hexo 默认的文章链接形式为 domain/year/month/day/postname,分级较多,造成 URL较长,不利于搜索引擎检索。编辑站点配置文件_config.yml,将 permalink 字段改为 permalink: :title/。将其改为 domain/postname的形式。 也可以将permalink字段改为 permalink: :year-:month-:day/:title/,变成domain/year-month-day/postname 形式。

添加音乐

  1. 网易云音乐。网易云音乐->某首歌曲->生成外链播放器,在layout\_macro\sidebar.swig文件,在<section></section>标签下添加:

    <div id="music163player">
        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=280 height=86 src="//music.163.com/outchain/player?type=2&id=38358214&auto=0&height=66">
        </iframe>
    </div>
  2. 使用html标签

    <video poster="https://封面图.jpg" src="https://什么什么什么.mp4" style="max-height :100%; max-width: 100%; display: block; margin-left: auto; margin-right: auto;" controls="controls" loop="loop" preload="meta">Your browser does not support the video tag.</video>
  3. 使用插件
    安装插件npm install hexo-tag-aplayer --save,在文章中添加

    {% aplayer "歌曲名" "歌手名" "https://什么什么什么.mp3" "https://封面图.jpg" "lrc:https://歌词.lrc" %}

    添加歌单:

    {% aplayerlist %}
    {
        "autoplay": false,
        "showlrc": 3,
        "mutex": true,
        "music": [
            {
                "title": "歌曲名",
                "author": "歌手名",
                "url": "https://什么什么什么.mp3",
                "pic": "https://封面图.jpg",
                "lrc": "https://歌词.lrc"
            },
            {
                "title": "歌曲名",
                "author": "歌手名",
                "url": "https://什么什么什么.mp3",
                "pic": "https://封面图.jpg",
                "lrc": "https://歌词.lrc"
            }
        ]
    }
    {% endaplayerlist %}

加密文件

  1. 安装加密插件npm install hexo-bolg-encrypt --save
  2. 启用插件。在站点配置文件中添加

    
    # Security
    
    
    ##
    
    encrypt:
        enable: true
  3. 加密文章。

    ---
    
    title: hello world
    date: 2016-03-30 21:18:02
    tags:
        - fdsafsdaf
    password: Mike         
    abstract: Welcome to my blog, enter password to read.
    
    message: Welcome to my blog, enter password to read.
    ---
    

在首页隐藏指定的文章

  1. 修改文件。修改文件theme/next/layout/index.swig,定位修改 post_template.render(post, true)为:

    {% if post.visible !== 'hide'%}
      {{ post_template.render(post, true) }}
    {% endif %}
  2. 设置文章

    title: 关于Hexo next主题如何在首页隐藏指定的文章
    date: 2016-05-08 22:21:29
    tags:
    …
    …
    categories: Notes-随笔
    visible: hide 这里如果加上hide则该文章就不会在文章首页显示,如果留空则表示默认显示

    关于Hexo next主题如何在首页隐藏指定的文章

设置cnd加速前端

  1. 在主题配置文件theme/next/_config.yml,修改vendor:

    vendors:
      # Internal path prefix. Please do not edit it.
      _internal: lib
      # Internal version: 2.1.3
      jquery: //cdn.bootcss.com/jquery/2.1.3/jquery.min.js
      # Internal version: 2.1.5
      # Fancybox: http://fancyapps.com/fancybox/
      fancybox: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.pack.js
      fancybox_css: //cdn.bootcss.com/fancybox/2.1.5/jquery.fancybox.min.css
      # Internal version: 1.0.6
      fastclick: //cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js
      # Internal version: 1.9.7
      lazyload: //cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js
      # Internal version: 1.2.1
      velocity: //cdn.bootcss.com/velocity/1.3.1/velocity.min.js
      # Internal version: 1.2.1
      velocity_ui: //cdn.bootcss.com/velocity/1.3.1/velocity.ui.min.js
      # Internal version: 0.7.9
      ua_parser: //cdn.bootcss.com/UAParser.js/0.7.12/ua-parser.min.js
      # Internal version: 4.4.0
      # http://fontawesome.io/
      fontawesome: //cdn.bootcss.com/font-awesome/4.6.2/css/font-awesome.min.css
    

    hexo博客next主题修改静态资源为CDN

添加留言板

  1. 打开主题配置文件,即 Hexo/themes/next/_config.yml 在 menu 下添加board 字段:

      board: /board/ || book
  2. 执行hexo new page board
  3. 在hexo>theme>next>languages>zh-Hans.yml中,在menu下添加board: 留言
    参考:hexo怎么添加留言板?

网站分析

  1. 添加google analytics,在主题配置文件中设置:

    google_analytics: your track id

    博客分析

实践问题

图片存放地点

解决办法:采用CDN引用,CDN选择cloudinary
参考:Hexo博客搭建之在文章中插入图片

CNAME重定向无效

原因:CNAME文件位置放错
解决:将CNAME文件放在sources/目录下,与_posts目录并列

百度无法抓取github上的文章

原因:github拒绝百度的抓取
解决方法:同时部署到github和coding

  1. 注册coding,新建项目,配置SSH
  2. 在站点配置文件修改部署配置:

    deploy:
    - type: git
      repo: https://github.com/chenfengkg/chenfengkg.github.io.git
      branch: master
    - type: git
      repo: https://git.coding.net/chenfengk/blog-my.git
      branch: master
  3. hexo clean,hexo g-d将博客部署到coding上
  4. 点击项目中的pages服务页面,部署来源选择master分支,与站点文件要一致,然后填写自定义域名。
  5. DNS配置,登陆阿里云,点击用户名下管理控制找到云解析服务。
    在解析codingnet时选择默认,解析github时选择世界
  6. 修改主题目录下layout/_partials/footer.swig文件,去除广告。

    <div class="theme-info">
     {{ __('Hosted by') }} 
     <a href="https://pages.coding.me" style="font-weight: bold">Coding Pages</a>
    </div>

    还需要在coding主页项目page页面设置,勾选已放置Hosted by Coding Pages。可查看coding帮助文档
    将博客同时部署到 github 与 coding
    coding.net绑定自定义域名
    hexo部署远程库
    coding帮助文档

百度链接提交抓取失败,ip为以前githubip

原因:以前博客放在github上,现在采用coding.net作为国内访问,github作为国外访问。
解决办法:用抓取诊断工具抓取,ip出错点击报错。
参考:百度站点ip变更

hexo git部署警告 warning: LF will be replaced by CRLF

Git会把LF替换为CRLF,不重要, 可以禁用此功能。在MinGW窗口中输入:

git config --global core.autocrlf false

参考:Windows git “warning: LF will be replaced by CRLF”

摘要图按比例缩放,图片不一样,各摘要大图片小不一样

解决方法,添加一个div,用image填充div:

<div id="zhaiyao" style="width: 735px;height: 372px;">
<img src="image.jpg" style="width: 100%;height: 100%" alt="wechat_jump_game" align=center />
</div>
摘要内容
<!-- more -->

参考:用image填充div

摘要图片大小不一样

解决办法:用算法修改某个文件夹下所有文件的尺寸
opencv修改图片大小

参考

  1. hexo的next主题个性化教程:打造炫酷网站
  2. Next主题打造炫酷的个性化Hexo博客
  3. swig语法介绍
  4. 打造个性超赞博客Hexo+NexT+GithubPages的超深度优化
版权声明:本文为博主原创文章,未经博主允许不得转载。

博客代码大全----美化你的BLOG Css

更换整体页面背景的源代码:body{background:url(博客整体页面背景图片地址) repeatscroll!important;}更换页面题图logo图片的源代码:.logo{backgr...
  • jcwz
  • jcwz
  • 2007年08月14日 15:33
  • 1011

美化博客的一些实用方法

最困难之时,就是我们离成功不远之日。——凯撒 想到自己写博客到现在也有1个月左右的时间了,这一个月间因为博客不美观而修改自己博客也有数次了,现在对我现在的博客的排版还算满意,接下来说下我美化...
  • qq_30151545
  • qq_30151545
  • 2016年02月02日 23:31
  • 576

个人Wordpress美化

添加链接功能,模板函数文件添加 add_filter('pre_option_link_manager_enabled','__return_true'); 使用WP User Avatar增加头像。...
  • u011686226
  • u011686226
  • 2016年07月15日 09:40
  • 925

如何美化自己的BLOG

下面的三个美化BLOG的方法是用的最多的,是最常见的.显示时钟.可以是JS编码的时钟,网上有很多,只需要将其代码加到BLOG里就可以了.也可以是FLASH形式的时钟,网上有一个比较不错的,代码如下.效...
  • arui319
  • arui319
  • 2004年12月21日 13:06
  • 1459

CSDN-栏目美化

有没有觉得博客模板里的板块不够用呢? 那就自己添加吧,下面举几个例子~QQ链接 只需将“你的QQ号”修改一下即可(你亦可做修改,比如将链接改成在一张图片上,这个只做参考) 其实关键是那个qq链接的网...
  • jackypigpig
  • jackypigpig
  • 2017年04月19日 19:08
  • 288

美化你的CSDN博客!

转载自:下一站源码下面的代码拷贝到你的Blog公告中就可。当然有些是定制的,比如google的广告;比如看到你博客的人员在世界上的分布的地图。 这些需要你到如下网站定制:google的广告: www....
  • heitaojieke
  • heitaojieke
  • 2006年11月12日 09:50
  • 537

自定义css样式美化博客园

自定义css样式美化博客园首先说明,我选用的博客皮肤是MTClean,以下样式在其他皮肤下有些并不适用。针对MTClean皮肤的美化/* 设置tongqingliu顶部间距*/ h1 { ma...
  • qq_22186119
  • qq_22186119
  • 2017年10月27日 22:12
  • 525

博客美化

博客美化,得学学。 新浪小北http://blog.sina.com.cn/jiangbei1008
  • huzhengnan
  • huzhengnan
  • 2011年11月21日 19:39
  • 758

美化你的Blog之HeaderBar

相信很多Blogger都想自己动手美化blog,但是很多人都不会PhotoShop或CorelDraw。不用担心,有一个工具能够让你在几分钟内制作出满意的HeaderBar。"AAA Logo"就是这...
  • Lodger007
  • Lodger007
  • 2006年07月25日 19:27
  • 2124

Python之实际应用——脚本美化

文件夹展示 使用说明 双击运行批处理文件“脚本美化.bat”即可美化当前文件夹下所有html文件 Python(htmlBeautiful.py)代码 from bs4 imp...
  • Triagen
  • Triagen
  • 2017年03月05日 23:29
  • 183
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:博客二之博客美化
举报原因:
原因补充:

(最多只允许输入30个字)