Hexo相关


安装

安装准备

  • Node.js (Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本)
  • Git

安装Hexo

  • 全局安装:
    npm install -g hexo-cli
  • 局部安装:
    npm install hexo
    安装以后,可以使用以下两种方式执行 Hexo:
    1. npx hexo <command>
    2. 将 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广告

以下针对ejsNext主题使用的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.ejslayout\_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命令,包括pnpmyarn等这些命令,如果执行时,报这样的错误,都可以通过此方法解决。前提是,如果是用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

参考: https://github.com/ahonn/hexo-theme-even/issues/266


文章作者: shell
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 shell !
评论
  目录