github+hexo搭建自己的博客网站(三)主题之外的一些基本配置(图片位置,文章目录功能)

使用的yilia主题之后,还需要进行自己的定制配置

1、图片的位置

比如打赏的支付宝二维码图片,是在当前博客source/assets/img/下 (不是当前主题)

配置:(在yilia主题下文件里themes\yilia文件夹下的_config.yml)

# 打赏基础设定:0-关闭打赏; 1-文章对应的md文件里有reward:true属性,才有打赏; 2-所有文章均有打赏
reward_type: 1
# 打赏wording
reward_wording: ‘谢谢你请我吃糖果‘
# 支付宝二维码图片地址,跟你设置头像的方式一样。比如:/assets/img/alipay.jpg
alipay: /assets/img/alipay.jpg
# 微信二维码图片地址
weixin: /assets/img/weixin.png

2、添加文章目录功能

2.1添加css样式

打开themes\yilia\source下的main.266c1c.css文件,添加如下代码

/* 新添加的 */
#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;
}

这个代码在也放到了github上:https://github.com/saucxs/saucxs.github.io下的main.266c1c.css文件

2.2修改article.ejs文件

  • 使用的是Hexotoc函数
  • 打开themes\yilia\layout\_partial文件夹下的article.ejs文件
  • 然后若想要文章显示目录,在每篇文章开头加入:toc: true
   <!-- 目录内容 -->
        <% if (!index && post.toc){ %>
            <p class="show-toc-btn" id="show-toc-btn" onclick="showToc();" style="display:none">
            <span class="btn-bg"></span>
            <span class="btn-text">文章导航</span>
            </p>
            <div id="toc-article" class="toc-article">
                <span id="toc-close" class="toc-close" title="隐藏导航" onclick="showBtn();">×</span>
                <strong class="toc-title">文章目录</strong>
                <%- toc(post.content) %>
           </div>
           <script type="text/javascript">
            function showToc(){
                var toc_article = document.getElementById("toc-article");
                var show_toc_btn = document.getElementById("show-toc-btn");
                toc_article.setAttribute("style","display:block");
                show_toc_btn.setAttribute("style","display:none");
                };
            function showBtn(){
                var toc_article = document.getElementById("toc-article");
                var show_toc_btn = document.getElementById("show-toc-btn");
                toc_article.setAttribute("style","display:none");
                show_toc_btn.setAttribute("style","display:block");
                };
           </script>
        <% } %>
        <!-- 目录内容结束 -->
---
layout: post
title: HelloEveryone-braveToWorld
date: 2017-08-22 09:17:10
toc: true
tags:
    - 杂谈
    - 笔记
---

时间: 08-26

github+hexo搭建自己的博客网站(三)主题之外的一些基本配置(图片位置,文章目录功能)的相关文章

github+hexo搭建自己的博客网站(六)进阶配置(搜索引擎收录,优化你的url)

详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定了域名: http://www.chengxinsong.cn hexo+github博客网站源码(可以clone,运行,看到博客演示.觉得可以给颗星星):https://github.com/saucxs/hexo-blog-origin.git 一.搜索引擎收录 1.验证网站所有权 登录百度站长平台:http://zhanzhang.baidu.com,只要有百度旗下的账号就可以登录,登录成功之后在站点

github+hexo搭建自己的博客网站(七)注意事项(避免read.me,CNAME文件的覆盖,手动改github page的域名)

详细的可以查看hexo博客的演示:https://saucxs.github.io/ 绑定域名可以查看:http://www.chengxinsong.cn 可以查看在github上生成的静态文件(如果觉得可以请给颗星星):https://github.com/saucxs/saucxs.github.io.git 注意1:怎么避免 .md 文件被解析? Hexo原理就是hexo在执行hexo generate时会在本地先把博客生成的一套静态站点放到public文件夹中,在执行hexo depl

github+hexo搭建自己的博客网站(四)主题之外的一些基本配置(统计配置,网站访问量显示)

1.百度.谷歌统计配置 百度统计配置 申请账号:https://tongji.baidu.com/web/welcome/login 在代码获取的地方只要填入key即可 注册的时候,填的域名和url,我选的都是https://saucxs.github.io/ 在yilia主题下文件里themes\yilia文件夹下的_config.yml)找到这个baidu_analytics # Miscellaneous baidu_analytics: 'ace6dXXXXXXXXXXfbc' goog

在Github上搭建自己的博客网站

程序员都应该有写博客的习惯,博客可以作为知识管理,提升自己.当然写博客的地方有很多,CSDN,博客园以及新浪,网易等等.但是如果使用Github Pages来搭建一个有自己域名的独立网站,会不会更加炫酷呢?当然这方面的教程网上也很多,这里主要是我自己实现后的经验总结和注意事项. 这是最完整的教程,虽然是针对Windows的,但是我在mac上一步步做下来也是可以实现的.大家也可以照着做.链接:http://cnfeat.com/2014/05/10/2014-05-11-how-to-build-

Django搭建博客网站(三)

Django搭建博客网站(三) 第三篇主要记录view层的逻辑和template. Django搭建博客网站(一) Django搭建博客网站(二) 结构 网站结构决定我要实现什么view. 我主要要用view展示首页,标签页,网站管理员(也就是本人啦)信息页,以及文章详情页. settings.py 因为到这个阶段需要编写html文件了,但是每一个网页的每一行代码都靠自己去写,各种渲染也靠自己去写的话,太麻烦了,Django提供了html模板功能,可以在settings.py里面进行配置. #

新浪SAE上搭建WordPress个人博客网站-开篇

新浪SAE上搭建WordPress个人博客网站-开篇 2014年5月29日 在开始这篇博客之前,笔者在这里先普及两个东西: SAE,Sina App Engine的简称,是新浪的内部开发的云计算平台,在这里开发者可以创建Web应用和移动应用.我们创建好的应用就可以部署到SAE服务器上,它会帮我们进行负载均衡,SAE提供很多功能和服务,详细内容请到http://sae.sina.com.cn/进行查看. WordPress想必很多个人站长都非常熟悉了,它是一种使用PHP语言和MySQL数据库开发的

Github pages和Hexo搭建自己的博客

title: Hello Hexo date: 2018-08-30 21:14:27 tags: hexo photo: https://avatars1.githubusercontent.com/u/31088082?s=400&u=7a99ff83916afb3f4c5312bd78a1be17fe0e34ed&v=4 --- 电脑环境是Windows,安装好git后,所有搭建操作均在git bash内完成 1.需要安装git, node.js, npm 注:第一次安装Git会让配

在Github上搭建自己的博客(Windows平台)

折腾了好久,终于在Github上搭建了自己的博客.这里面总结一下过程希望对大家能有所帮助. Github建博优缺点 和 csdn,新浪,网易相比,在Github上可以自己实现功能 和阿里云,VPS相比,github托管的代码是免费的 github上只能托管静态网页,后台有数据库的这种动态网站不能托管 你有一个Github的账号 懂一些基本的Web开发相关的知识 Ruby运行时,可以在Windows或者linux环境下进行安装 建站的过程 在github创建网站的代码库,名字必须为username

CentOS 7 yum安装LAMP,LNMP并搭建WordPress个人博客网站

本次实验要进行的是在CentOS7.2,内核版本3.10.0-327.el7.x86_64的环境下搭建LAMP和LNMP,并在此之上做一个WordPress博客网站. [[email protected] ~]# uname -a Linux Shining.ACG 3.10.0-327.el7.x86_64 #1 SMP Thu Nov 19 22:10:57 UTC 2015 x86_64 x86_64 x86_64 GNU/Linux [[email protected] ~]# cat