玩命加载中 . . .

主页 归档 分类 标签

Hexo主题学习

更新:
web / hexo
字数统计: 1.2k   |   阅读时长≈ 5 分钟

hexo主题

我使用的是一名在官网留言的的网友的主题文件。

安装有两种方法当时。

一种是 npm 命令，

第二种是拷贝到项目根目录下 themes文件夹下，

然后在根目录配置 _config.yml里的

theme: hexo-theme- #主题名

他提供了一个极简主题，方便快速搭建博客。

这是目录结构有一部是我自己的修改，和增加的功能。

项目目录

D:.
│  .gitattributes
│  .gitignore
│  .npmignore
│  .stylintrc
│  .travis.yml
│  index.js
│  LICENSE
│  logo.png
│  move_config.js
│  package.json
│  README.md
│  rollup.config.js
│  _config.yml
│
├─.github
│  │  config.yml
│  │  FUNDING.yml
│  │
│  ├─ISSUE_TEMPLATE
│  │      bug-report.md
│  │      feature-request.md
│  │      other.md
│  │      question.md
│  │
│  └─workflows
│          npmpublish.yml
│
├─languages
│      de.yml
│      default.yml
│      en.yml
│      es.yml
│      fr.yml
│      ja.yml
│      ko.yml
│      nl.yml
│      no.yml
│      pt.yml
│      ru.yml
│      vi.yml
│      zh-CN.yml
│      zh-TW.yml
│
├─layout
│  │  archive.ejs
│  │  categories.ejs
│  │  friends.ejs
│  │  index.ejs
│  │  layout.ejs
│  │  page.ejs
│  │  plain-page.ejs
│  │  post.ejs
│  │  tags.ejs
│  │
│  ├─partial
│  │      addShowdowOnPC.ejs
│  │      articleEnd.ejs
│  │      my.ejs
│  │      pageEncryption.ejs
│  │
│  └─_partial
│      │  ads.ejs
│      │  after-footer.ejs
│      │  archive-post.ejs
│      │  archive.ejs
│      │  article.ejs
│      │  ayer.ejs
│      │  baidu-analytics.ejs
│      │  broadcast.ejs
│      │  float-btns.ejs
│      │  footer.ejs
│      │  google-analytics.ejs
│      │  head.ejs
│      │  katex.ejs
│      │  lock.ejs
│      │  mathjax.ejs
│      │  modal.ejs
│      │  music.ejs
│      │  sidebar.ejs
│      │  viewer.ejs
│      │
│      └─post
│              albums.ejs
│              author.ejs
│              busuanzi.ejs
│              category.ejs
│              clipboard.ejs
│              date.ejs
│              gallery.ejs
│              gitalk.ejs
│              justifiedGallery.ejs
│              minivaline.ejs
│              nav.ejs
│              search.ejs
│              share.ejs
│              tag.ejs
│              title.ejs
│              tocbot.ejs
│              topping.ejs
│              twikoo.ejs
│              updated.ejs
│              valine.ejs
│              word.ejs
│
├─screenshots
│      hexo-theme-ayer.png
│
├─scripts
│  │  default_config.js
│  │
│  ├─events
│  │  │  index.js
│  │  │
│  │  └─lib
│  │          hello.js
│  │          merge-configs.js
│  │
│  ├─filters
│  │      index.js
│  │      meta_generator.js
│  │
│  ├─helpers
│  │      ayer-plus-vendors.js
│  │      wordcount.js
│  │
│  ├─lib
│  │      core.js
│  │
│  └─utils
│          join-path.js
│          object.js
│
├─source
│  │  404.html
│  │  favicon.ico
│  │
│  ├─css
│  │  │  clipboard.styl
│  │  │  custom.styl
│  │  │  my.styl
│  │  │  mySmallScreen.styl
│  │  │
│  │  └─fonts
│  │          remixicon.css
│  │          remixicon.eot
│  │          remixicon.svg
│  │          remixicon.ttf
│  │          remixicon.woff
│  │          remixicon.woff2
│  │
│  ├─dist
│  │      main.css
│  │      main.js
│  │
│  ├─images
│  │      404.jpg
│  │      alipay.jpg
│  │      ayer-side.svg
│  │      ayer.png
│  │      ayer.svg
│  │      beian.png
│  │      cover1.jpg
│  │      cover7.jpg
│  │      forkme.png
│  │      gitee.png
│  │      github.png
│  │      hexo-tag-chart.png
│  │      hexo.png
│  │      mouse.cur
│  │      sponsor.jpg
│  │      wechat.jpg
│  │
│  └─js
│          busuanzi-2.3.pure.min.js
│          clickBoom1.js
│          clickBoom2.js
│          clickLove.js
│          dz.js
│          jquery-3.6.0.min.js
│          lazyload.min.js
│          search.js
│          tocbot.min.js
│
└─source-src
    │  main.js
    │
    ├─css
    │  │  style.styl
    │  │  _darkmode.styl
    │  │  _extend.styl
    │  │  _mixins.styl
    │  │  _normalize.styl
    │  │  _remixicon.styl
    │  │  _variables.styl
    │  │
    │  └─_partial
    │          ads.styl
    │          albums.styl
    │          apple.styl
    │          archive.styl
    │          article.styl
    │          articles.styl
    │          ayer.styl
    │          categories.styl
    │          float.styl
    │          footer.styl
    │          friends.styl
    │          gallery.styl
    │          gitalk.styl
    │          highlight.styl
    │          justifiedGallery.styl
    │          layout.styl
    │          lists.styl
    │          mobile.styl
    │          navbar.styl
    │          pace.styl
    │          reward.styl
    │          search.styl
    │          share.styl
    │          sidebar.styl
    │          tag.styl
    │          tocbot.styl
    │          totop.styl
    │
    ├─js
    │      ayer.js
    │      share.js
    │
    └─util

tips：

如何快速打印文件目录结构呢？window

tree -f

.github

这个主要是 Git 的工作目录，这里简单介绍一下里面的一些文件和文件夹作用。

.gitgnore忽略Git监听的配置文件

README.md 项目的介绍文件，是文档总目录。

package.json项目的一些配置信息

.gitattributes比较有意思，会详细点介绍

这是一篇中文的介绍

这是官方原文

git 行尾

git 行尾1

  • 他是设置其文件夹路径下的所有文件

    匹配的文件 属性1 属性2  ...
    ↓这个是主题的里的一个属性，它的作用是强制设置语言类型
    *.html linguist-language=javascript

  • 属性的四种写法

    • 设置 属性 key
    • 不设置属性 -key
    • 设置键值对 key=value
    • 不声明属性，用来覆盖其它文件声明，!key
    • text = auto 行尾自动转换
      • 行尾规范，有机会学习学习一下。行尾规范主要是换行方式，window 和 mac 开发换行方式不同。
    • diff 属性

ISSUE_TEMPLATE主要是给 PR用的模板形式

workflows同样可以参考上面，在搜索栏里可以找到，这个主要是可配置化的自动化工作流程，

主要是用的也是 yml语法

阅读扩展

[^yml vs json]: whitch is better

config.yml文件 工作流的一部分文件

FUNDING.yml赞赏作者

languages

语言配置

layout

主题主要采用 ejs编写

js 代码中可以ejs渲染布尔，数字，字符串，之前以为不行，现在看来是ide报错限制我。

代码提示，本身无错误，难受报错，等我手撸一个 vscode插件，诸君待我披甲归来。

vscode 插件开发介绍博客

中文插件开发文档

code support

解决了，奋战几天，突然脑子灵光一闪，随手一查就就有个暂时性解决方法。呜呜呜，这插件的文档又长又没人带。

解决ejs在script的预期表达式问题

scripts

hexo 扩展

source

加载对应的文件夹 css 和 js

<%- js('/js/xxx') %>
<%- css('/css/xxx') %>

dist打包文件夹

rollup

作者采用 roullup构建工具,对 source-src的目标文件映射到 source文件夹内

滚动条bug

假如滚动条事件不生效有可能是因为他的滚动条是其它节点而不是window或者什么。

hexo高阶再深入

后续再写

thanks

rollup 构建工具

rollup

辅助函数

<%- css("path is folder source/css")  %>
<%- js("path is folder source/js")  %>
---------------- The End and I hope sunshines on the outside. ----------------
  • 版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！
  • Copyrights © 2022 Ma
  • 访问人数: | 浏览次数:

      请我喝杯咖啡吧~

      支付宝
      微信