如何快速有效的编写hexo 中 的文章

之前刚搭建的时候,是使用命令行

hexo new '新建一个文章'

打开编辑器,使用markdown格式写好文章后再执行

hexo g

hexo d

这样操作感觉并不方便,

于是查到了 可以使用hexo-admin插件来实现,

很方便

 

进入hexo 目录

 

执行 npm install --save hexo-admin

即可

 

然后再执行 hexo g

hexo s

 

打开具体显示如下

 

 

 

 

如果要设置登录账号和密码

在配置文件中设置

 

在配置文件加入

其中 hexo-publish.sh

#!/usr/bin/env sh
hexo clean
hexo g -d

你也可以加入自己想要的命令

 

记得修改执行权限 chmod +x hexo-publish.sh

 

# hexo-admin authentification
admin:
  username: test
  password_hash: $121212121212zLCFe/fn6p4dTmHIVCIRLCFe/fn6p4dTmHIVCIRiZNF2aTYlptpq
  secret: docker2019is01best
  Command: 'hexo-publish.sh' # expire: 60*1

 

 

  • 1
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
编写 Hexo 主题需要掌握前端开发技术,主要包括 HTML、CSS、JavaScript 等。以下是一个简单的 Hexo 主题示例,供参考: 1. 创建主题目录 在 Hexo 的根目录下创建一个名为 `my-theme` 的目录,用来存放主题相关的文件。 2. 创建主题文件 在 `my-theme` 目录下创建以下文件: - `layout/_partial/head.ejs`:页面头部信息,包括 `<head>` 标签和 CSS 样式文件引入。 - `layout/_partial/header.ejs`:页面头部,包括网站标题、导航栏等。 - `layout/_partial/footer.ejs`:页面底部,包括版权信息、友情链接等。 - `layout/_partial/sidebar.ejs`:侧边栏,包括分类、标签、归档等内容。 - `layout/_partial/pagination.ejs`:分页组件,用于文章列表分页。 - `layout/_partial/scripts.ejs`:页面底部的 JavaScript 脚本引入。 - `layout/index.ejs`:网站首页模板。 - `layout/post.ejs`:文章详情页面模板。 - `layout/page.ejs`:独立页面模板。 3. 编写模板文件 打开 `index.ejs` 文件,输入以下代码: ```html <!DOCTYPE html> <html lang="zh-CN"> <%- partial('head') %> <body> <%- partial('header') %> <main class="container"> <div class="row"> <div class="col-md-8"> <%- partial('article') %> <%- partial('pagination') %> </div> <div class="col-md-4"> <%- partial('sidebar') %> </div> </div> </main> <%- partial('footer') %> <%- partial('scripts') %> </body> </html> ``` 以上代码是一个简单的页面布局模板,其使用了 Bootstrap 作为页面样式框架。`<%- partial('head') %>`、`<%- partial('header') %>`、`<%- partial('article') %>` 等是 EJS 引擎的语法,用于引入模板的其他文件。 4. 编写 CSS 样式 在 `my-theme` 目录下创建一个名为 `css` 的目录,用于存放 CSS 样式文件。在 `css` 目录下创建一个名为 `style.css` 的文件,输入以下代码: ```css /* 导航栏样式 */ .navbar-brand { font-size: 24px; font-weight: bold; } .navbar-nav > li > a { color: #333; font-size: 16px; font-weight: bold; } .navbar-nav > li.active > a { color: #fff; background-color: #333; } /* 文章列表样式 */ .article-title { font-size: 24px; margin-bottom: 10px; } .article-meta { color: #999; margin-bottom: 20px; } /* 分页组件样式 */ .pagination { margin-top: 20px; } .pagination > li > a, .pagination > li > span { padding: 5px 10px; border: 1px solid #ccc; } .pagination > li.active > a, .pagination > li.active > span { background-color: #333; color: #fff; border-color: #333; } /* 侧边栏样式 */ .sidebar-title { font-size: 18px; font-weight: bold; margin-bottom: 10px; } .sidebar-list { list-style: none; margin: 0; padding: 0; } .sidebar-list > li > a { color: #333; } ``` 以上代码定义了导航栏、文章列表、分页组件、侧边栏等样式。 5. 集成 JavaScript 脚本 在 `my-theme` 目录下创建一个名为 `js` 的目录,用于存放 JavaScript 脚本文件。在 `js` 目录下创建一个名为 `main.js` 的文件,输入以下代码: ```js $(function () { // 导航栏激活状态 $('.navbar-nav > li').click(function () { $(this).addClass('active').siblings().removeClass('active'); }); }); ``` 以上代码使用了 jQuery,用于实现导航栏点击激活状态。 6. 应用主题 将 `my-theme` 目录复制到 Hexo 的 `themes` 目录下,然后在 Hexo 的配置文件 `_config.yml` 设置主题名称为 `my-theme`: ``` theme: my-theme ``` 执行 `hexo generate` 命令重新生成静态文件,然后执行 `hexo server` 命令启动本地服务器,即可预览新主题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

芝麻开门2015

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值