添加的代码如下:
<%
var sUrl = url.replace(/index\.html$/, '');
sUrl = /^(http:|https:)\/\//.test(sUrl) ? sUrl : 'https:' + sUrl;
%>
<% if ((theme.declare_type === 2 || (theme.declare_type === 1 && post.declare)) && !index){ %>
本文作者:
<% if(config.author != undefined){ %>
<%= config.author%>
<% }else{%>
请在博客根目录“_config.yml”中填入正确的“author”
<%}%>
本文链接:
<%= sUrl%>
版权声明:
本作品采用
<%= theme.licensee_name%>
进行许可。转载请注明出处!
<% if(theme.licensee_img != undefined){ %>
<% } %>
<% } else {%>
<% } %>
2、版权添加样式
在yilia/source/main.0cf68a.css
添加如下代码:
.declare {
background-color: #eaeaea;
margin-top: 2em;
border-left: 3px solid #ff1700;
padding: .5em 1em; }
3、添加配置文件
修改themes/yilia/_config.yml
:
## 版权声明
declare_type: 1
licensee_url: https://creativecommons.org/licenses/by-nc-sa/4.0/ # 当前应用的版权协议地址。
licensee_name: '知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议' # 版权协议的名称
licensee_img: https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png # 版权协议的Logo
在需要进行版权声明的文章的md文件头部,设置属性declare: true。
版权基础设定:
- 0-关闭声明;
- 1-文章对应的md文件里有declare: true属性,才有版权声明;
- 2-所有文章均有版权声明
4、修改博客的url
修改主目录下的_config.yml
中的url,改成自己的地址。
url: https://dta0502.github.io/
root: /
permalink: :year/:month/:day/:title/
permalink_defaults:
十二、添加sitemap
npm install hexo-generator-sitemap --save
hexo clean
hexo g
查看public文件夹,可以看到sitemap.xml
文件。
sitemap的初衷是给搜索引擎看的,为了提高搜索引擎对自己站点的收录效果,我们最好手动到Google和百度等搜索引擎提交sitemap.xml
。
Google提交sitemap.xml
的详细过程见:让Google搜索到搭建在Github Pages上的博客。
十三、Url持久化
我们可以发现hexo默认生成的文章地址路径是 【网站名称/年/月/日/文章名称】
。
这种链接对搜索爬虫是很不友好的,它的url结构超过了三层,太深了。
下面我推荐安装hexo-abbrlink
插件:
npm install hexo-abbrlink --save
然后配置_config.yml
# permalink: :title/
permalink: archives/:abbrlink.html
abbrlink:
alg: crc32 # 算法:crc16(default) and crc32
rep: hex # 进制:dec(default) and hex
十四、鼠标点击小红心的设置
- 在
hexo/themes/yilia/source
文件目录下添加love.js
文件。
!function(e,t,a){function r(){for(var e=0;e<s.length;e++)s[e].alpha<=0?(t.body.removeChild(s[e].el),s.splice(e,1)):(s[e].y--,s[e].scale+=.004,s[e].alpha-=.013,s[e].el.style.cssText="left:"+s[e].x+"px;top:"+s[e].y+"px;opacity:"+s[e].alpha+";transform:scale("+s[e].scale+","+s[e].scale+") rotate(45deg);background:"+s[e].color+";z-index:99999");requestAnimationFrame(r)}function n(){var t="function"==typeof e.onclick&&e.onclick;e.onclick=function(e){t&&t(),o(e)}}function o(e){var a=t.createElement("div");a.className="heart",s.push({el:a,x:e.clientX-5,y:e.clientY-5,scale:1,alpha:1,color:c()}),t.body.appendChild(a)}function i(e){var a=t.createElement("style");a.type="text/css";try{a.appendChild(t.createTextNode(e))}catch(t){a.styleSheet.cssText=e}t.getElementsByTagName("head")[0].appendChild(a)}function c(){return"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}var s=[];e.requestAnimationFrame=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)},i(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),n(),r()}(window,document);
- 在
hexo/themes/yilia/layout/_partial/footer.ejs
文件的最后, 添加以下代码:
十五、Hexo-Yilia代码块行号显示错乱问题
这是因为yilia/source/main.0cf68a.css
文件中的pre标签的样式造成的,将white-space: pre-wrap;
注释掉即可,这个问题是自动换行造成的,使用不自动换行的white-space: pre;
即可,这样样式代码块部分会自动出现底部滚动条,行号错乱问题就没有了。
然后改一下滚动块样式:
::-webkit-scrollbar-track:hover{background-color:rgba(255, 255, 255, 0.75)}
下面是修改后的代码块:
十六、添加相册
1、创建可以点击链接
如果想单独创建一个可以单击的链接,方法是相同的,首先进入您的博客目录执行
hexo new page photos
立即在source下生成photos/index.md
文件,这里index.md
需要删除。
然后在主题站点的配置文件theme/yilia/_config.yml
中添加点击的文案和跳转到位置:
menu:
主页: /
分类: /categories
归档: /archives
相册: /photos/index.html
2、拷贝他人的 photos 内容
可以参考别人做好的博客,下载source/photos
下的所有文件,拷贝到你对应的位置。
一般只需要修改ins.js
文件的render()
函数。这个函数式用来渲染数据的,里面配置了展示图片的链接地址,图片具体操作见下面。这里主要就修改minSrc、Src两个变量,改成自己的照片缩略图、照片的链接。
var render = function render(res) {
var ulTmpl = "";
for (var j = 0, len2 = res.list.length; j < len2; j++) {
var data = res.list[j].arr;
var liTmpl = "";
for (var i = 0, len = data.link.length; i < len; i++) {
var minSrc = 'https://raw.githubusercontent.com/dta0502/BlogPhotos/master/min_photos/' + data.link[i];
var src = 'https://raw.githubusercontent.com/dta0502/BlogPhotos/master/photos/' + data.link[i];
var type = data.type[i];
var target = src + (type === 'video' ? '.mp4' : '.jpg');
src += '';
3、图片放置
图片命名格式
最前面是日期,然后用_
进行分隔,后面是图片的描述信息,注意不要包含_
和.
符号。
举例来说:
2018-10-05_西湖文化广场.jpg
图片放置目录
然后在Hexo根目录下创建photos
和min_photos
文件夹,然后把图片原图放置到photos
文件夹下,后面会用Python脚本对这个原图进行压缩处理,自动生成一个缩略图在min_photos
文件夹下。
4、处理图片并引入图片
Python脚本处理图片
接下来就是最后一步,也是最重要的一步了,使用Python写的脚本,生成一套大图和一套小图,随即生成json文件,这个文件保存在source/photos/data.json
中。
脚本下载地址:BlogPhotos
这里需要下载两个.py脚本(ImageProcess.py
、tool.py
),其中ImageProcess.py
是tool.py
这个脚本用到的。
然后执行tool.py
脚本即可生成一套大图和一套小图,并且在source/photos/
下生成这个json文件。
上传图片到Github
然后我把photos
和min_photos
文件夹全部上传到Github上,然后得到了原图和缩略图的链接,这个链接就是ins.js
文件的render()
函数中需要修改的链接。
每次更新图片,都需要重新执行以下Python脚本,并且将图片上传到GitHub上。
5、测试是否成功
hexo clean && hexo g && hexo s
详细版本见我的个人博客:Hexo-Yilia进阶笔记