博客更换ICARUS主题

前言

最近无意间留意到一个比较符合我口味的主题,也许是因为Next主题被我看腻了,于是就换了icarus然后接下来当然是各种折腾,总算是告一段落可以安心的做别的事情了。

主题介绍

主题地址:https://github.com/ppoffice/hexo-theme-icarus

这个主题可以完全替代Next主题,比较让我喜欢的是简洁大气的界面风格,另外还有细致的侧边栏以及订制功能,总结一下特点如下:

  1. 整体的界面美观大方。
  2. Icarus包含常用的搜索,评论,分享和其他插件。
  3. 可设置文章头图片。
  4. 超过70种highlight.js样式可选。
  5. 可以自定义侧边栏。
  6. 字体风格漂亮。
  7. 可在文章内自定义菜单。
  8. 响应式布局。

pug模板引擎(下)

逻辑语法

以下是关于模板逻辑的语法。

JavaScript代码

不输出的代码

用 - 开始一段不直接进行输出的代码。

1
2
- for (var x = 0; x < 3; x++)
li item
1
2
3
<li>item</li>
<li>item</li>
<li>item</li>

输出的代码

用=开始一段带有输出的代码,它应该是可以被求值的一个JavaScript表达式。为安全起见,它将被HTML转义。

1
2
3
p
= '这个代码被 <转义> 了!'
p= '这个代码被 <转义> 了!'

1
2
3
4
5

<p>这个代码被 &lt;转义&gt; 了!
</p>
<p>这个代码被 &lt;转义&gt; 了!</p>
​`

不转义的输出代码

用 != 开始一段不转义的,带有输出的代码。这将不会做任何转义,所以用于执行用户的输入将会不安全。

1
2
3
p
!= '这段文字<strong>没有</strong>被转义!'
p!= '这段文字' + '<strong>没有</strong>被转义!'

1
2
<p>这段文字<strong>没有</strong>被转义!</p>
<p>这段文字<strong>没有</strong>被转义!</p>

pug模板引擎(上)

安装

1
sudo npm install pug

但命令行提示pug命令未找到,接下来安装pug-cli,注意一定要全局安装,否则无法正常编译。

1
sudo npm install pug-cli -g

查看版本

1
2
3
>>> $ pug --version
pug version: 2.0.3
pug-cli version: 1.0.0-alpha6

生成HTML

新建文件命名为index.pug

1
2
3
4
html
head
title dp2px
body

在命令行输入

1
2
>>> $ pug index.pug 
rendered index.html

你会发现在同目录生成了一个index.html文件,内容如下

1
<html><head><title>dp2px</title></head><body></body></html>

接下来我们使用pug -w实现自动编译。

1
>>> $ pug index.pug -w

我使用的VS Code,你可以让你的编辑器左右两边显示,方便实时查看。

pug

Nodejs结构和创建

本文参考自《Node.js开发指南》和《Node.js实战》两本书。

异步I/0

Node.js最大的特点就是采用了异步I/0与事件驱动的架构设计。

1
2
3
$.post('/resource.json', function(data){
console.log(data);
})

这一小段代码是jQuery中的Ajax请求,我们知道这个结果函数是异步的,等服务器响应结果后才会执行。

对于一些高并发的需求,传统的解决方法是多线程模型,每个业务提供一个线程系统,通过切换和调度线程来实现高并发中的等待开销。但是这样做无疑又增加了线程管理和调度的开销。

Nodejs采用的是单线程模型,对于所有的I/O操作(阻塞操作)都采用类似上面Ajax请求的异步的请求方式,避免了频繁切换线程。

nodejs的单线程模型

Hexo打造可以自由配置的网站通知和页面通知

最近本站要更换域名,所以我就想做一个首页和文章内通知,于是就有了这篇文章。

首先打开theme/next/layout/_layout.swig文件找到如下代码中的content-wrap节点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<main id="main" class="main">
<div class="main-inner">
<div class="content-wrap">
<div id="content" class="content">
{% block content %}{% endblock %}
</div>
{% include '_third-party/duoshuo-hot-articles.swig' %}
{% include '_partials/comments.swig' %}
</div>
{% if theme.sidebar.display !== 'remove' %}
{% block sidebar %}{% endblock %}
{% endif %}
</div>
</main>

在content-wrap节点中添加下面代码

1
2
3
4
5
6
7
8
9
10
11
12
13
{% if theme.main_notify.enable%}
{% if theme.main_notify.pageshow %}
{% if page.notify === '' %}
<p class="content-notify marquee">{{ theme.main_notify.notify }}</p>
{% else %}
<p class="content-notify marquee">{{ page.notify }}</p>
{% endif %}
{% elseif page.notify !== '' %}
<p class="content-notify marquee">{{ page.notify }}</p>
{% elseif page.title === ''%}
<p class="content-notify marquee">{{ theme.main_notify.notify }}</p>
{% endif %}
{% endif %}

上面这段代码的逻辑是判断是否要显示通知,我们实际的通知布局只就是p标签

1
<p class="content-notify marquee">通知的内容</p>

Hexo Next博客配置和SEO优化

SEO优化

在Gitlab上面搭建的博客,最近又买了域名给搭建了起来,文章有了,但是发现百度和Google的索引量比较少,乘着国庆假期抽空又折腾了一番,添加了百度和google收录,更换了静态资源cdn地址,对静态资源进行了压缩。

静态资源压缩

百度收录

在搜索引擎中输入site:<域名>, 如果没有被收录可以点击“网址提交”来提交网站。百度链接提交

生成站点地图

我们需要使用npm自动生成网站的sitemap,然后将生成的sitemap提交到百度和其他搜索引擎。

1
2
npm install hexo-generator-sitemap --save     
npm install hexo-generator-baidu-sitemap --save

使用GitHub/GitLab/码云搭建个人博客

我为什么要搭建个人博客

前段时间我在用印象笔记做一些整理和知识归纳,感觉很不舒服,后来装了一个马克飞象花了了70多人名币用来作为印象笔记的markdown编辑器,这样确实舒服了不少。

但是紧接着我就想既然总结了一些东西干嘛不发布到我的博客上去呢(当时我的博客在CSDN),我只能从马克飞象中复制黏贴到博客上去,感觉又重复写了一遍,瞬间有了一键部署博客的想法。

hexo install

后来我结合我之前在github上搭建的个人博客,百度了一下看有没有GitLab和码云上面的类似博客系统,结果还真让我给找到了,不但找到了而且个人感觉非常棒,接下来来看看我是怎么做的。

3D Adapter Ajax Android AndroidStudio Animation Anroid Studio AppBarLayout AsyncTask Babel Banner Buffer Bulma ByteBuffer C++ C11 C89 C99 CDN CMYK CSS Camera Raw Canvas Chrome Class ContentProvider CoordinatorLayout C语言 DML DOM Dagger Dagger2 Darktable Demo Document DownloadManage ES2015 ESLint Element Elements Error Exception Extensions File FileProvider FileSave Flow Fresco GCC Git Git flow GitHub GitLab Github flow Gitlab flow Glide Gradle GrideView Groovy HTML HTML5 Handler HandlerThread Hexo Hilo Hybrid I/O IDEA IO ImageMagick ImageView IntelliJ Intellij Intent Interpolator JCenter JNI JS Java JavaScript JsBridge Kotlin Lab Lambda Lifecycle Lint Linux ListView Looper MQTT MVC MVP Maven MessageQueue Modbus Momentum MySQL NDK NIO Next Nodejs ObjectAnimator Okhttp Oracle VM Permission PhotoShop Physics Process Python RGB RS-232 RTU RecyclerView Remote-SSH Retrofit Runnable RxAndroid RxJava SE0 SQLite SSH SharePreference Spring SpringBoot Statubar Style Task Theme Thread Tkinter UI UIKit UML VM virtualBox VS Code VUE ValueAnimator ViewPropertyAnimator Vue Vue CLI Vue.js Web WebGL Web前端 Workbench Zdog api apk axios background blur bookmark by关键字 cli compileOnly component computed css css3 c语言 databases demo flex flexbox flow gradient hexo hotfix html iOS icarus icarus主题 implementation init jQuery javascript launchModel linear logo merge methods mvp offset photos pug query radial rxjava2 scss servlet shell slot slot-scope svg tkinter tomcat transition unicode utf-8 v-slot vector virtual box vscode watch webpack 七牛 下载 中介者模式 串口 临潼石榴 主题 书签 书籍 事件 享元模式 亮度 仓库 代理模式 位运算 依赖注入 修改,tables 光和色 入坑 入门视频教程 全套视频教程 内存 内核 内部分享 函数 函数式编程 分支 分析 列表 创建 删除 动画 单例模式 发布 可空性 合并 同向性 后期 启动模式 命令 命令模式 响应式 响应式编程 图层 图床 图形图像 图片压缩 图片处理 图片轮播 地球 域名 基础 增加 备忘录模式 外观模式 多线程 大爆炸 天气APP 太白山 头文件 奇点 字符串 字符集 存储引擎 宇宙 宏定义 实践 对比度 属性 属性动画 岐山擀面皮 岐山肉臊子 岐山香醋 工作流 工具 工厂模式 年终总结 开发技巧 开发流程 异常 弱引用 思想 恒星 打包 扫盲 技巧 指令 指针 接口 插件 插值 插槽 摄影 操作系统 攻略 故事 数据存储 数据库 数据类型 数组 文件 新功能 旅行 旋转木马 时序图 时空 时间简史 曲线 最佳实践 服务 杂谈 权限 枚举 架构 查询 标准库 标签选择器 样式 核心 框架 案例 桥接模式 检测工具 模块化 模板 模板引擎 模板方法模式 油泼辣子 泛型 洛川苹果 浅色状态栏 混合模式 渐变 渲染 游戏 源码 源码分析 滤镜 瀑布流 灰度 热修复 版本 版本回退 版本控制 状态栏 状态模式 生活 界面 留言板 直方图 相册 相对论 眉县猕猴桃 知识点 码云 磁盘 科学 笔记 策略模式 类图 系统广播 系统概述 系统,发行版, GNU 索引 组件 组合模式 绑定 结构 结构体 编码 编程 网易云信 网格布局 网站广播 网站通知 网络 美化 联合 背景 背景混合 脚手架 膨胀的宇宙 自学Android 自定义 自定义View 自定义插件 色调 蒙版 虚拟 虚拟机 补码 补齐 表单 表达式 装饰模式 西安 观察者模式 规范 视图 视频 视频教程 解耦器模式 设计 设计原则 设计模式 访问者模式 语法 责任链模式 贪吃蛇 走马灯 转换 软件工程 软引用 过滤器 运算符 进程 迭代子模式 适配器 适配器模式 选择器 通信 通道 配置 链表 锐化 错误 键盘 闭包 降噪 陕西地方特产 面向对象 项目优化 项目构建 饱和度 高斯模糊 黑洞
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×