Hexo相关
安装
安装准备
- Node.js (Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本)
- Git
安装Hexo
- 全局安装:
npm install -g hexo-cli
- 局部安装:
安装以后,可以使用以下两种方式执行 Hexo:npm install hexo
npx hexo <command>
- 将 Hexo 所在的目录下的 node_modules 添加到环境变量之中即可直接使用
hexo <command>
:echo 'PATH="$PATH:./node_modules/.bin"' >> ~/.profile
建站
安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。
$ hexo init <folder>
$ cd <folder>
$ npm install
新建完成后,指定文件夹的目录如下:
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
安装git
主要是用于发布
进博客目录安装:
npm install hexo-deployer-git --save
其他配置
具体可见官方文档:https://hexo.io/zh-cn/docs/
主题及主题升级
参看每个主题官方说明文档
hexo-theme-fluid
https://github.com/fluid-dev/hexo-theme-fluid
hexo-theme-matery
https://github.com/blinkfox/hexo-theme-matery/blob/develop/README_CN.md
添加Google广告
以下针对ejs
,Next
主题使用的pug
类似,只是代码语法稍微改下
- 添加配置开关
主题配置文件your_theme\_config.yml
中添加广告控制开关:
并在展示广告的代码位置添加判断控制#google ad by show_ad_post: enable: true # Google Webmaster tools verification. # See: https://www.google.com/webmasters google_site_verification: xxxxxxxxxxxxxxxxxxxxxxx
if (theme.show_ad_post && theme.show_ad_post.enable)
- 添加广告代码
从Google Adsense
账户中获取相应的广告代码
在your_theme\layout\_partial\head.ejs
的<head></head>
标签里面添加<!-- adsbygoogle --> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script> (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "xxxxxxxx", enable_page_level_ads: true }); </script>
- 添加展示广告
在Google Adsense
账户中配置广告并添加广告单元,获取相应代码,在自己想展示的位置添加代码。
如我是在layout\_partial\post-detail-toc.ejs
和layout\_partial\post-detail.ejs
添加:<!-- adsbygoogle --> <% if (theme.show_ad_post && theme.show_ad_post.enable) { %> <% if (theme.google_site_verification) { %> <meta name="google-site-verification" content="xxxxxxxxxxxxxxxxx" /> <% } %> <!-- 添加获取的代码 --> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="xxxxxx" data-ad-slot="xxxx"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <% } %>
参考:https://zhuanlan.zhihu.com/p/66052182
其他操作
- 本地预览
npx hexo clean && npx hexo g && npx hexo s ``` ## Hexo升级 **先备份整个目录!!!** Hexo: `3.9.0-->5.2.0` ### 使用淘宝源的 cnpm 替换 npm ```shell npm install -g cnpm --registry=https://registry.npm.taobao.org # 升级 npm cnpm install -g cnpm # 清除 npm 缓存 cnpm cache clean -f
更新 package.json 中的 hexo 及个插件版本
进入 主目录,执行如下命令:# 检查之前安装的插件,都有哪些是可以升级的 cnpm install -g npm-check # 升级系统中的插件 cnpm install -g npm-upgrade npm-check npm-upgrade
更新 hexo 及所有插件
cnpm update
查看 hexo 版本
hexo -v
报错
Error1:
cnpm : 无法加载文件 C:\Users\hp\AppData\Roaming\npm\cnpm.ps1,
原因:在此系统上禁止运行脚本
解决:
1、在系统中搜索框 输入 Windos PowerShell
2、点击“管理员身份运行
”
3、输入“ set-ExecutionPolicy RemoteSigned
”回车
4、根据提示,输入A
,回车
5、再次回到cnpm -v
执行成功。
参考: https://blog.csdn.net/chengjingxuang123/article/details/105470815/
ps:不只是cnpm
命令,包括pnpm
、yarn
等这些命令,如果执行时,报这样的错误,都可以通过此方法解决。前提是,如果是用npm
命令来安装这些CLI
命令工具,必须安装到全局环境中,才能生效。
Error2:
升级后本地预览:
hexo g
hexo s
网页打开发现显示以下类容:
{% extends '_layout.swig' %} {% import '_macro/post.swig' as post_template %} {% import '_macro/sidebar.swig' as sidebar_template %} {% block title %}{{ title }}{% if theme.index_with_subtitle and subtitle %} – {{ subtitle }}{% endif %}{% endblock %} {% block page_class %} {% if is_home() %}page-home{% endif -%} {% endblock %} {% block content %}
{% for post in page.posts %} {{ post_template.render(post, true) }} {% endfor %}
{% include '_partials/pagination.swig' %} {% endblock %}
原因:Hexo 5 把 swig 渲染插件删了,需要单独安装
解决:
npm i hexo-renderer-swig
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 DD'Notes!
评论