Hexo + yilia 搭建博客可能会遇到的所有疑问

摘要:Hexo + yilia 搭建博客可能会遇到的所有疑问!!!文章目录、设置文章显示长度,不展开全文、相册、引入音乐、引入视频、网站统计量显示

1.hexo yilia 文章目录

为了方便查看每篇文章的目录结构,可以定位到想看的地方,特地找了下如何实现这个功能。

  • 新版本的 yilia 已经自带了这个文章目录功能,只需要在每篇文章开头加入:toc: true 即可,他会自动根据文章来进行目录划分。

  • 如果你用的还是老版本的话,可以使用方法二

    • 打开themes\yilia\source下的main.234bc0.css文件,直接在后面添加如下代码:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      
      
      /* 新添加的 */
      #container .show-toc-btn,#container .toc-article{display:block}
      .toc-article{z-index:100;background:#fff;border:1px solid #ccc;max-width:250px;min-width:150px;max-height:500px;overflow-y:auto;-webkit-box-shadow:5px 5px 2px #ccc;box-shadow:5px 5px 2px #ccc;font-size:12px;padding:10px;position:fixed;right:35px;top:129px}.toc-article .toc-close{font-weight:700;font-size:20px;cursor:pointer;float:right;color:#ccc}.toc-article .toc-close:hover{color:#000}.toc-article .toc{font-size:12px;padding:0;line-height:20px}.toc-article .toc .toc-number{color:#333}.toc-article .toc .toc-text:hover{text-decoration:underline;color:#2a6496}.toc-article li{list-style-type:none}.toc-article .toc-level-1{margin:4px 0}.toc-article .toc-child{}@-moz-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@-webkit-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@-o-keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}@keyframes cd-bounce-1{0%{opacity:0;-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}60%{opacity:1;-o-transform:scale(1.01);-webkit-transform:scale(1.01);-moz-transform:scale(1.01);-ms-transform:scale(1.01);transform:scale(1.01)}100%{-o-transform:scale(1);-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.show-toc-btn{display:none;z-index:10;width:30px;min-height:14px;overflow:hidden;padding:4px 6px 8px 5px;border:1px solid #ddd;border-right:none;position:fixed;right:40px;text-align:center;background-color:#f9f9f9}.show-toc-btn .btn-bg{margin-top:2px;display:block;width:16px;height:14px;background:url(http://7xtawy.com1.z0.glb.clouddn.com/show.png) no-repeat;-webkit-background-size:100%;-moz-background-size:100%;background-size:100%}.show-toc-btn .btn-text{color:#999;font-size:12px}.show-toc-btn:hover{cursor:pointer}.show-toc-btn:hover .btn-bg{background-position:0 -16px}.show-toc-btn:hover .btn-text{font-size:12px;color:#ea8010}
      .toc-article li ol, .toc-article li ul {
          margin-left: 30px;
      }
      .toc-article ol, .toc-article ul {
          margin: 10px 0;
      }
      
    • 修改 article.ejs 文件
      打开 themes\yilia\layout\_partial 文件夹下的 article.ejs 文件, 在  <% } %> 下面加入如下内容(注意位置)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      
      
      
      <% if (!index && post.toc){ %>
          
      	
      × 文章目录 <%- toc(post.content) %>
      <% } %>

      然后若想要文章显示目录,在每篇文章开头加入:toc: true 即可。

      参考文章:Hexo+yilia主题实现文章目录和添加视频

2.hexo yilia 设置文章显示长度,不展开全文

yilia 主题中可以用  截取文章的显示长度,如果你想在哪截取文章,就在那行使用该字符。

Hexo + yilia 搭建博客可能会遇到的所有疑问_第1张图片

3.hexo yilia 相册

QAQ 本人太懒了,没做这个功能,不过我把我参考的链接共享出来,有空在去研究研究
参考地址:Hexo+Github实现相册功能

4.hexo yilia 引入音乐

Hexo + yilia 搭建博客可能会遇到的所有疑问_第2张图片

如下图,可以在网易云音乐里搜到你想要引入的音乐,然后点击如下的 “生成外链播放器” 即可:

Hexo + yilia 搭建博客可能会遇到的所有疑问_第3张图片

Hexo + yilia 搭建博客可能会遇到的所有疑问_第4张图片

5.hexo yilia 引入视频

是在之前相册功能的基础之上,相册功能的实现点击这里查看

  • 添加视频样式css

    • 打开当前博客source\photos文件夹下的ins.css文件
    • 加入如下内容
      1
      2
      3
      4
      5
      6
      7
      8
      9
      
      
      /* ====== video ===== */
      .video-container {
      z-index: 1;
      position: relative;
      padding-bottom: 56.25%;
      margin: 0 auto;
      }
      .video-container iframe, .video-container object, .video-container embed {z-index: 1;position: absolute;top: 0;left: 7%;width: 85%;height: 85%;box-shadow: 0px 0px 20px 2px #888888;}
      
  • 添加视频

    • 我这里添加的是优酷上面的视频
    • 在当前博客source\photos文件夹下建立videos.ejs文件
    • 内容如下:
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      27
      28
      29
      30
      31
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      
      
      ---
      layout: post
      slug: "photos"
      title: "相册"
      noDate: "true"
      comments: "true"
      reward: "true"
      open_in_new: false
      ---
      
      
      

      指弹_女儿情



      指弹_友谊地久天长



      指弹_Always with me


  • 最终效果

    • 电脑端
      Hexo + yilia 搭建博客可能会遇到的所有疑问_第5张图片

    • 手机端
      Hexo + yilia 搭建博客可能会遇到的所有疑问_第6张图片

参考网址:Hexo-yilia主题实现文章目录和添加视频

6.hexo yilia 网站统计量显示

6.1网站访问量显示

  • 效果:
    Hexo + yilia 搭建博客可能会遇到的所有疑问_第7张图片
  • 实现:
    • 我使用了不蒜子第三方的统计插件,网址:http://ibruce.info/2015/04/04/busuanzi/
    • themes\yilia\layout\_partial下的footer.ejs中加入如下代码即可
      Hexo + yilia 搭建博客可能会遇到的所有疑问_第8张图片
1
2
3
4
5
6
7
8
9
   
总访问量: | 总访客:

6.2网站 ip 访问量显示(友盟)

  • 效果:
    网站 ip 访问量显示
  • 实现:

    • 我使用了友盟第三方的统计插件,网址:http://www.umeng.com/
    • 首先注册一个帐号->进入个人中心->首先映入眼睛的是一片空白的,什么产品都没有->展开全部产品->选择U-Web网站统计->点击立即使用->添加站点->接下来看图

      Hexo + yilia 搭建博客可能会遇到的所有疑问_第9张图片
      Hexo + yilia 搭建博客可能会遇到的所有疑问_第10张图片
      Hexo + yilia 搭建博客可能会遇到的所有疑问_第11张图片
      Hexo + yilia 搭建博客可能会遇到的所有疑问_第12张图片

    • 复制代码,在themes\yilia\layout\_partial下的footer.ejs中加入如下代码即可
      Hexo + yilia 搭建博客可能会遇到的所有疑问_第13张图片

1
2
3
  • 这里用自己复制过来的代码放进去就行了
  • 可在友盟上查看最近的访问量数据

6.3网站 ip 访问量统计(百度)

  • 申请账号:https://tongji.baidu.com/web/welcome/login
  • 在代码获取的地方只要填入key即可

Hexo + yilia 搭建博客可能会遇到的所有疑问_第14张图片

1
2
3
# Miscellaneous
baidu_analytics: '454d1a5ba8ed29xxxxxxxx'
google_analytics: ''

Hexo + yilia 搭建博客可能会遇到的所有疑问_第15张图片

你可能感兴趣的:(Hexo)