Fexo 文档_html/css_WEB-ITnose
打开博客根目录的 _config.yml设为 theme: fexo
升级
$ cd themes/fexo$ git pull
配置主题
主题配置全部在 theme/fexo里面完成,所里下面所有配置指的是配置 theme/fexo/_config.yml。
设置基本信息
blog_name: Forsignerslogan: Find the bug of the world
设置头像
# relative urlavatar: /images/avatar.jpg# or absolute urlavatar: https://avatars0.githubusercontent.com/u/2668081?v=3&s=460
设置favicon
favicon: /favicon.ico
设置关键词
关键词主要作用是优化SEO
keywords: forsigner,前端,设计,Hexo主题,前端开发,用户体验,设计,frontend,design,nodejs,JavaScript
自定义博客名的字体
由于中文字体文件太大,有的快10M,所以 Fexo 没有引入中文字体,导致博客名有点难看。
但是可以通过提取字体来减小字体文件大小,让字体只有几KB。
一下步骤可以让你实现自定义博客名字体,包括英文和中文:
- 下载免费可用的ttf格式字体
- 利用Web-Fontmin 提取字体,然后下载 Web 字体和样式
- 在博客根目录的s source文件夹新建两个子目录: fonts 和 css
- 把下载的字体方式fonts文件夹,把CSS文件放入css文件夹
- 修改 theme/fexo/_config.yml:
# 这是css文件里的font-familiy的值 ,例如里面是 font-familiy: "myfontName"blog_name_font_familiy: myFontNamefonts_css_path: - /css/calligraffittiregular.css - /css/second-font.css
设置首页内容
你可以设置是否在首页直接显示文章
init_page_content: HOME_NAV # HOME_NAV | POST
设置首页导航
home_nav: - name: Blog url: /archives - name: Github url: https://github.com/forsigner target: _blank - name: Douban url: http://www.douban.com/people/forsigner/ target: _blank - name: Twitter url: https://twitter.com/forsigner target: _blank
设置页面导航
page_nav: - 博客: /archives/ - 分类: /category/ - 标签: /tag/ - 友链: /link/ - 关于: /about/ - RSS: /atom.xml
设置页面导航样式
page_nav_style: CIRCLE # CIRCLE|ROUND_RECT
设置面包屑
breadcrumb: isShow: true # true|fase
设置盒子
toolbox: isShow: true # true|fase
设置文章标题对齐方式
post: header_align: center # left|center
启用分类页面
- 在博客根目录执行 hexo new page category
- 修改 my-blog/source/category/index.md里面的内容:
---title: categorylayout: categorycomments: false---
启用标签页面
- 在博客根目录执行 hexo new page tag
- 修改 my-blog/source/tag/index.md里面的内容:
---title: taglayout: tagcomments: false---
启用友链页面
- 在博客根目录执行 hexo new page link
- 修改 my-blog/source/link/index.md里面的内容:
---title: linklayout: linkcomments: false---
启用关于页面
- 在博客根目录执行 hexo new page about
- 修改 my-blog/source/about/index.md里面的内容:
---title: aboutlayout: aboutcomments: false---
启用统计
google_analytics:baidu_analytics: 57e94d016sfsf1fba3xxxx8a2b0263af0

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit
