Hexo 是一個靜態博客框架,有著許多優秀的主題可以選擇,但有些主題可能需要用到 jQuery。下面介紹如何在 Hexo 中使用 jQuery。
1. 安裝 jQuery
npm install jquery --save
2. 修改配置文件
在 Hexo 的配置文件 _config.yml 中添加以下代碼:
plugins:
hexo-jquery
注意:如果是使用 NexT 主題的話,這一步可以省略。
3. 引入 jQuery
在 Hexo 中,可以通過修改主題的 _config.yml 或者使用 Hexo 插件來引入 jQuery。
方法一:修改主題的 _config.yml
在主題根目錄下找到 _config.yml,找到 layout: post(或者其他 layout),在<head>
標簽內添加以下代碼:
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
注意:這里使用的是 BootCDN 提供的 jQuery,也可以使用其他 CDN 或者自己下載 jQuery。
方法二:使用 Hexo 插件
在 Hexo 中,有一個官方插件 hexo-asset-image,可以將指定目錄下的文件打包到文章所在目錄下。按照以下步驟即可使用 hexo-asset-image 引入 jQuery。
(1) 安裝 hexo-asset-image 插件
npm install hexo-asset-image --save
(2) 配置插件
在 Hexo 的配置文件 _config.yml 中添加以下代碼:
asset_image:
enable: true
prefix: assets
(3) 下載 jQuery 并保存到指定目錄
在 Hexo 的根目錄下新建 assets/js 目錄,將下載好的 jQuery.min.js 放入該目錄。
(4) 引入 jQuery
在文章中的引用 jQuery 的位置,輸入以下代碼即可引入 jQuery:
<script src="{% asset_path js/jquery.min.js %}"></script>
注意:在文章中使用該方法需要先安裝 hexo-asset-image 插件,并在 Hexo 的配置文件 _config.yml 中配置。
到此,就完成了在 Hexo 中使用 jQuery 的全部步驟。希望本文能對 Hexo 的使用者們有所幫助。