boizz / hexo-theme-laughing Goto Github PK

View Code? Open in Web Editor NEW

185.0 7.0 29.0 2.31 MB

A lightweight hexo theme

License: MIT License

JavaScript 5.63% HTML 9.22% CSS 85.14%

hexo pug grunt sass hexo-theme

hexo-theme-laughing's Introduction

Laughing theme for hexo

简单轻量的hexo主题。

Demo: lalala.lol

外观

响应式布局，宽松设计，还原最佳阅读体验。

功能

10分钟快速配置
支持多说评论，自由开启评论，主题定制样式
简易二次开发

安装

安装hexo-render-pug

Laughing主题使用pug模板引擎开发，所以首先需要在主程序中安装依赖组件。

npm install hexo-renderer-pug --save

cd themes
git clone [email protected]:BoizZ/hexo-theme-laughing.git

修改主程序的_config.yml文件

theme: hexo-theme-laughing

主题配置文档

主题的配置都放在了 _config.yml 文件里面。

网站图标

favicon: /favicon.ico

SEO

站点标题、副标题、描述沿用站点的配置。

## 关键字
keywords: Hexo, Gruntjs, Nodejs, Reactjs, Vuejs

页头

菜单按钮风格目前支持两种：dark，light。

## 页面背景
page_background: /default_images/page_background.jpg

## 页面菜单按钮风格
page_menu_button: dark

## 文章背景
post_background: /default_images/post_background.jpg

## 文章菜单按钮风格
post_menu_button: light

## 标题占位字：无标题类型文章的标题占位字
title_plancehold: '随笔'

## 自定义菜单
navication:
  - name: Lalala.lol
    link: http://lalala.lol

作者信息

作者的名字沿用站点的配置。

## head：作者头像
## signature：作者签名
author:
  head: /default_images/author_head.gif
  signature: Only when you plant the flowers can you really smell their fragrance.

内容宽度

可自定义内容的最大显示宽度。

content_width: 600

社交信息

主题内置的社交图标目前有：facebook, twitter, weibo, wechat, github, stackoverflow, linkin, email, segmentfault, flickr, zhihu, disqus, douban, bilibili

如需新增请在Issues里面提出

## name：名称
## icon：图标（请使用配置文件里面给出的图标）
## link：指向当前社交账号的链接
social:
  - name: GitHub
    icon: github
    link: http://github.com/BoizZ

多说

多说是自由开启的，默认开启，如果不需要则在配置文件里面关闭即可。

需要注意的是，多说的url配置默认使用站点的配置。请更改站点配置中url为自己的域名。

## enable：是否开启多说（true：开启，false：关闭）
## siteName：多说账号种填写的网站名称
duoshuo:
  enable: true
  siteName: ueibo

版权

## record: 备案名称（若无则填写 false）
## hexo: 是否显示“POWER BY HEXO”
## laughing：是否显示“THEME BY LAUGHING”
copyright:
  record: false
  hexo: true
  laughing: true

二次开发

Laughing主题遵循简易开发模式，以文件层级及命名细分模块，二次开发比较简单。

模板引擎

Laughing主题使用pug作为模板引擎，在开发前请确保已经安装了hexo-render-pug插件，如未安装，请在Hexo程序根目录运行以下命令进行安装：

npm install hexo-renderer-pug --save

安装Grunt

Laughing主题使用sass作为预编译样式语言，使用grunt监听文件变化并编译成css。当然，sass是基于ruby的，需要在电脑上安装ruby；

进入主题目录，运行以下命令安装grunt以及其他依赖：

npm install

参考

hexo-theme-laughing's People

Contributors

Stargazers

Watchers

hexo-theme-laughing's Issues

Can not view open_graph on twitter

Hi I use this theme in my blog.

This theme can not display open_gragh.
Finally I found open_graph of twitter needs description meta data.
I tried fix this issue, but It's just rush job.

    - var title = page.title ? page.title + ' - ' + config.title : config.title + (config.subtitle ? (' - ' + config.subtitle) : '')
      if path === "index.html"
        //- open_graph command not work well in index.html and I add params
        | !{open_graph({twitter_id:twitter_id,image:theme.page_background,description:title})}    
        meta(name="description",content=title)
      else
        | !{open_graph({twitter_id:twitter_id})}
        meta(name="description",content=config.description)

hexo-theme-laughing 主题，似乎不支持表格？

| 属性 | 描述 |
| :--- | :--- |
|title | 文章标题 |
|date | 文章编写的时间，这里可以随意修改|
|categories | 文章分类目录，可以为空|
|tags | 文章标签，可空，多标签请用格式[tag1,tag2,tag3]|
|permalink | 文章在url中如何表示|
|description | 对本页的描述，相当于是一个简介，如果这个定义了，就会在首页中出现这里的内容而不会出现整个文章详细内容。|

如以上部分？

属性	描述
title	文章标题
date	文章编写的时间，这里可以随意修改
categories	文章分类目录，可以为空
tags	文章标签，可空，多标签请用格式[tag1,tag2,tag3]
permalink	文章在url中如何表示
description	对本页的描述，相当于是一个简介，如果这个定义了，就会在首页中出现这里的内容而不会出现整个文章详细内容。

git clone 问题反馈

cd themes
git clone [email protected]:BoizZ/hexo-theme-laughing.git

在centos下遇到了github ssh permission deny的问题，这里可以修改为

git clone https://github.com/BoizZ/hexo-theme-laughing.git

How Can I change the percent of the content

i think the percent of the content is a little small. how can i change it .

npm install hexo-renderer-pug --save 执行失败了吗？

macs-iMac-2:hexo mac$ pwd
/Users/mac/blog/hexo
macs-iMac-2:hexo mac$ npm install hexo-renderer-pug --save
npm WARN deprecated [email protected]: Please use pug-load for pug-loader@<=1.0.2.
[email protected]
updated 1 package in 4.343s

hexo clean
hexo g
hexo d

博文显示不了。

能不能做个统计访问量的功能？以及感觉功能也可再丰富一些，辛苦大佬了！

我怎么安装不上啊，按着步骤来的，换成laughing主题出现乱码，求教

extends ./_partial/layout.pug block content include ./_partial/page_header.pug ul.post-list(style='max-width:'+ theme.content_width +'px') each post in page.posts.data li p.date #{time(post.date, 'LL')} if post.title h4.title a(href=url_for(post.path)) #{post.title} .excerpt !{post.excerpt} else .no-title !{post.content} if post.photos && post.photos.length a(href=url_for(post.path)) img.photo(src=post.photos[0]) ul.meta li i.icon.icon-author | #{config.author} li i.icon.icon-clock | #{parseInt(post.content ? post.content.length/900 : 0)} Minutes li i.icon.icon-category | !{list_categories(post.categories)} include ./_partial/pagination.pug