惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Cyberwarzone
Cyberwarzone
F
Full Disclosure
V
Visual Studio Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
有赞技术团队
有赞技术团队
J
Java Code Geeks
博客园 - 【当耐特】
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
博客园 - 叶小钗
L
LINUX DO - 最新话题
T
Threatpost
S
SegmentFault 最新的问题
Vercel News
Vercel News
云风的 BLOG
云风的 BLOG
C
Cyber Attacks, Cyber Crime and Cyber Security
Google DeepMind News
Google DeepMind News
Know Your Adversary
Know Your Adversary
S
Schneier on Security
V
Vulnerabilities – Threatpost
D
DataBreaches.Net
G
GRAHAM CLULEY
Latest news
Latest news
P
Privacy International News Feed
D
Darknet – Hacking Tools, Hacker News & Cyber Security
C
CXSECURITY Database RSS Feed - CXSecurity.com
Scott Helme
Scott Helme
L
Lohrmann on Cybersecurity
T
The Exploit Database - CXSecurity.com
Security Latest
Security Latest
G
Google Developers Blog
L
LangChain Blog
MyScale Blog
MyScale Blog
Project Zero
Project Zero
N
News and Events Feed by Topic
Hacker News - Newest:
Hacker News - Newest: "LLM"
大猫的无限游戏
大猫的无限游戏
P
Proofpoint News Feed
Blog — PlanetScale
Blog — PlanetScale
阮一峰的网络日志
阮一峰的网络日志
N
News | PayPal Newsroom
www.infosecurity-magazine.com
www.infosecurity-magazine.com
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
SecWiki News
SecWiki News
T
Tor Project blog
C
Check Point Blog
Google Online Security Blog
Google Online Security Blog
GbyAI
GbyAI
The Last Watchdog
The Last Watchdog
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
WordPress大学
WordPress大学

kok的笔记本

macOS 里 神秘的 kernel_task ,为什么一直在写入硬盘? 产品 node_modules 为什么总是这么大:一次从原理到实践的瘦身记录 谁来救救我的Mac存储空间-清理工具横评:付费vs免费,从界面到命令行 2023 读书推荐 写给播客嘉宾的录制说明书 在 Electron 中使用 Vue Devtools 几何原本中勾股定理的证明 Mac 安装软件时提示 已损坏,无法打开 应该怎么办 PegBoard 你的数字白板 少数派读者与作者的 NewsLetter 闲棋冷子-2-2021年我读过哪些很棒的书 闲棋冷子-1-相信你的身体,它不会骗你 修复 macOS 中 Cisco Anyconnect 报的奇怪Bug 我的 NAS 使用记录 Omniplan 入门教程 Hugo升级0.74记录 一年级产品经理需要掌握什么知识? 无籍之谈-3-和盖盖聊聊尼尔·盖曼与中外科幻 露营笔记-装备篇 无籍之谈-2-和鹏仔聊华尔街兴盛史,给小白投资者的一些建议 介绍一下《无籍之谈》 无籍之谈-1-和不土聊佛学,谈谈《一心走路》《僧侣与哲学家》 高达模型入门 - 工具整理 5 分钟了解 Sketch 的新特性 Tint - 色调 Hugo 主题移动端开发的一些心得 修复 macbook 键盘连击问题 在 Hugo 中使用 Open Graph 提升分享效果 选小米10 还是小米10 Pro? 利用 Python 批量合并 Excel 文件 为什么家国梦不好玩? 高雄85大楼 Mac优秀软件推荐-Itsycal 找到并和正确使用无版权资源 Excel 常用函数 一 无线吸尘器挑选指南 钢铁、蒸汽与 19 世纪 聊聊《铁道之旅》 如何挑选一个电脑电源? 有用的正则表达式 给psd瘦身 2019第二季度读书总结 组装 ITX 黑苹果主机 Intel CPU 挑选指南 常用的 Markdown 工具 2019第一季度读书总结 怎么用尺规作图画75°角? 在 Hugo 中使用 Sass 真正的换位思考-《爱的沟通》读书笔记 Hugo 中使用思维导图 反叛公司中的治理者和顾问玩法 如何搭配成为一个盐系男生? 反叛公司 Rebel Inc. 入门指南 如何评估需求,预估开发成本? 小米8、小米8SE、小米8青春版参数对比 微信外部链接内容管理规范分析 在售 iPhone 参数对比 给Hugo blog中增加一些插件 微信 MacOS 多开的一些实践 矩阵与线性变换的概念理解 尺规作图小习题 用 hugo 和 netlify 搭建blog 介绍我自己 瓜摊老板 Really? EDM邮件营销,你需要知道 果子沟大桥 喀赞其的马车 清晨的木梨硡 青龙寺的狮子 用一个特殊方法解决同位词问题 语义化 html 标签 数模的基本思路和写作攻略 hexo blog 搭建 0.1,0.1^0.1,为什么数值是波动的? 智能手机之旅 老师和学生的博弈 这些使用抗生素的方式,你做的对吗? 炼金术与钢之炼金术师 kok的笔记本 kok的笔记本 中国长征运载火箭家族-PegBoard
hexo 主题开发
kokdemo · 2016-02-04 · via kok的笔记本

hexo作为一个比较受欢迎的静态blog生成器,其个性主题也是比较受大家欢迎的点。只要有一定的js,css,jade的开发栈就可以实现一个功能强大的主题效果。

当然如果要好看则是另外一回事了……

如果你并不想要折腾主题的话,我推荐以下几个有趣强大的主题,直接拖到hexo的theme文件夹就好。(什么,你不会?建议你可以换简单一些的blog,比如wordpress?)

  1. NexT 简洁而强大 https://github.com/iissnan/hexo-theme-next
  2. Jacman 比较俏皮的风格 https://github.com/wuchong/jacman
  3. Apollo 足够简单,我目前用的就是我自己修改过的apollo主题(增强了一点功能,原版的apollo没有tag和category……) https://github.com/pinggod/hexo-theme-apollo

更多的主题见这里 https://hexo.io/themes/

言归正传,因为hexo本身就比较简单,因此分几步来讲:

hexo的路由机制

hexo能够自动解析的页面有

  • index 首页
  • post 文章
  • page 分页
  • archive 日期归档
  • category 分类归档
  • tag 标签归档

这里的每一个页面都对应了主题文件夹下,layout的一个文件。因此建立主题的时候,这些文件都是可选的。当然,index是必选的。

hexo的变量

实际上,如果你就这么简单的创建了文件,并不会加载出文件来,hexo在渲染文件的时候,会根据页面上的一些变量来进行操作。
这部分的内容hexo已经给好了,比如说全局变量就有:

  • site 网站变量
  • page 页面内容
  • config 网站设置,也就是写在_config.yml中的内容
  • theme 主题设置,也就是写在theme/_config.yml中的内容
  • path 页面路径
  • url 完整网址
  • env 环境变量

更多的不在这里赘述,看官方文档 https://hexo.io/zh-cn/docs/variables.html

我就用Apollo的一段模板来解释一下吧。

    //- Post Page
    mixin post(item)
        .post
            article.post-block
                h1.post-title
                    != item.title 
                +postInfo(item)
                .post-content
                    != item.content

其中mixin post(item) 是jade的语法,指重用jade块,这里不详细说了,有兴趣的可以戳 https://cnodejs.org/topic/5368adc5cf738dd6090060f2

这里的参数就是一篇文章post,因此,我们就可以代码块中调用item.title文章标题,item.content文章内容。

同样的,只要我想,我也可以给里面插入item.date页面建立日期,item.updated页面更新日期,item.excerpt页面摘要。

同样的页面,如果在NexT中的写法如下:

这里本来会有NexT的swig代码,然而不知道为什么hexo文章中只要有了这些代码立马报错…… 我也是醉了,就这样吧,关于NexT代码的分析就无疾而终了…… 有兴趣的看这里 https://github.com/iissnan/hexo-theme-next/blob/master/layout/archive.swig

NexT的功能就多很多了,这里读取了页面变量page中的所有文章posts,是一个数组,数组中的每一项都对应着一个文章,所以就可以看到这里读取了post.date作为年份,当然这里使用了一个辅助函数。

我在开发的过程中还找到了一些有用的变量,比如上面说到的 page.posts 中的每一个文章中,都有一个 tags.data 属性,这也是一个数组,可以读取这篇文章中所有的tag名称。 categories属性则是一个对象,可以用foreach的方法进行访问。

hexo的辅助函数

上一段你可能已经看到了date()函数,这就是hexo 提供的辅助函数,比较常用的函数有:

  • url_for() 生成一个全局可用的路径
  • js() 导入一个js
  • image_tag() 插入图片
  • is_home() 判断是不是首页,这类函数还有很多
  • date() 插入格式化的日期
  • tagcloud() 插入标签云

善用这些辅助函数,可以让你少些很多冗余的代码,因此在开脑洞施工之前,先看看这个功能官方是不是已经做了。

那么第一篇就写这么多,更多的也可以看hexo的官网。

祝你折腾的愉快