Raw

If certain content is causing processing issues in your posts, wrap it with the raw tag to avoid rendering errors.

Asset Folders

Image

Inserts an image with specified size.

Embedding an image using markdown

hexo-renderer-marked 3.1.0 introduced a new option that allows you to embed an image in markdown without using asset_img tag plugin.

To enable:

_config.yml
post_asset_folder: true
marked:
prependRoot: true
postAsset: true

/2020/01/02/foo/image.jpg
/2020/01/02/foo.md
Once enabled, an asset image will be automatically resolved to its corresponding post’s path. For example, “image.jpg” is located at “/2020/01/02/foo/image.jpg”, meaning it is an asset image of “/2020/01/02/foo/“ post, ![](image.jpg) will be rendered as

<img src="/2020/01/02/foo/image.jpg">.

embed image

“foo.jpg” is located at http://example.com/2020/01/02/hello/foo.jpg.

Default (no option)

<img src="/2020/01/02/hello/foo.jpg">

Global Asset Folder

Global Asset Folder
Assets are non-post files in the source folder, such as images, CSS or JavaScript files. For instance, If you are only going to have a few images in the Hexo project, then the easiest way is to keep them in a source/images directory. Then, you can access them using something like

![](/images/image.jpg).

for vscode edit the md file as open the source directory as project file

dont use Post Asset Folder

For users who expect to regularly serve images and/or other assets, and for those who prefer to separate their assets on a post-per-post basis, Hexo also provides a more organized way to manage assets. This slightly more involved, but very convenient approach to asset management can be turned on by setting the post_asset_folder setting in _config.yml to true.

_config.yml
post_asset_folder: true

With asset folder management enabled, Hexo will create a folder every time you make a new post with the hexo new [layout] <title> command. This asset folder will have the same name as the markdown file associated with the post.

Place all assets related to your post into the associated folder, and you will be able to reference them using a relative path, making for an easier and more convenient workflow.

dont use this method

Relative Image Path
The build-in way to include images in your posts works fine, but it is a little aside the normal way to declare images in Markdown. The plugin [Hexo Asset Link] corrects that. After installing via npm install hexo-asset-link –save you can write this:

![Test Image](hello-world/image-1.png)
The best is, that VS Code’s Markdown can now show the image.

hexo and vscode img path problem

$ npm i -s hexo-asset-link

YAMLException: end of the stream or a document separator is expected hexo

add

1
2
3

---
title
---

unable to access ‘https://github.com/lucfe2010/lucfe-hexo.git/‘: OpenSSL SSL_read: SSL_ERROR_SYSCALL, errno 0

git config –global http.sslVerify “false”

每个用户唯一的一个PAGE REPOSITORY
USERNAME.github.io
网站地址默认为https://USERNAME.github.io

1. Open Git Bash.

navigate to the location where you want to store your site’s source files, replacing PARENT-FOLDER with the folder you want to contain the folder for your repository.

2. cd PARENT-FOLDER
   

3. initialize a local Git repository, replacing REPOSITORY-NAME with the name of your repository.

$ git init REPOSITORY-NAME

4. Change directories to the repository.

1
2

$ cd REPOSITORY-NAME
# Changes the working directory

• 5.1. chose to publish your site from the docs folder on the default branch, create and change directories to the docs folder.

1
2
3

$ mkdir docs
# Creates a new folder called docs
$ cd docs

• 5.2. chose to publish your site from the gh-pages branch, create and checkout the gh-pages branch.

1
2
3
4

$ git checkout --orphan gh-pages
# Creates a new branch, with no history or contents, called gh-pages, and switches to the gh-pages branch
$ git rm -rf .
# Removes the contents from your default branch from the working directory

6. To create a new Jekyll site, use the jekyll new command:

$ jekyll new –skip-bundle .

Creates a Jekyll site in the current directory

7. Open the Gemfile that Jekyll created.

Add “#” to the beginning of the line that starts with gem “jekyll” to comment out this line.

Add the github-pages gem by editing the line starting with # gem “github-pages”. Change this line to:

gem “github-pages”, “~> GITHUB-PAGES-VERSION”, group: :jekyll_plugins
Replace GITHUB-PAGES-VERSION with the latest supported version of the github-pages gem. You can find this version here: “Dependency versions.”

The correct version Jekyll will be installed as a dependency of the github-pages gem.

gem “github-pages”, “~> 228”, group: :jekyll_plugins

Save and close the Gemfile.

8. intall some dependecies

Bundler
Conveniently, bundler has a feature to alias a Gem-server to another one. This way, you can leave your Gemfile source ‘https://rubygems.org‘ at the top of each Gemfile.
Run this command:
bundle config mirror.https://rubygems.org https://gems.ruby-china.com
To remove the aliasing, just delete the appropriate line in ~/.bundle/config.

bundle config mirror.https://rubygems.org https://gems.ruby-china.com

bundle config mirror.https://rubygems.org https://rubygems.org

From the command line, run bundle install.

9. make any necessary edits to the _config.yml file. This is required for relative paths when the repository is hosted in a subdirectory.

1
2

baseurl: "/lucfe/" # the subpath of your site, e.g. /blog
url: "https://lucfe2010.github.io" # the base hostname & protocol for your site, e.g. http://example.com

10.Run your Jekyll site locally.
$ bundle add webrick
$ bundle exec jekyll serve

10. Add and commit your work.

git add .
git commit -m ‘Initial GitHub pages site with Jekyll’

11.Add your repository on GitHub.com as a remote, replacing USER with the account that owns the repository and REPOSITORY with the name of the repository.

$ git remote add origin https://github.com/USER/REPOSITORY.git

如果你clone下来一个别人的仓库，在此基础上完成你的代码，推送到自己的仓库可能遇到如下问题： error: remote origin already exists.表示远程仓库已存在。 因此你要进行以下操作： 1、先输入git remote rm origin 删除关联的origin的远程库

12.Push the repository to GitHub, replacing BRANCH with the name of the branch you’re working on.

git branch -M main
git push -u origin main

git push -u origin BRANCH

13. Configure your publishing source

main branch,doc/ folder

gh-pages, / folder

1. optinal

permalink

_config.yml

# Outputting
permalink: none

PERMALINK STYLE URL TEMPLATE
date /:categories/:year/:month/:day/:title:output_ext
none /:categories/:title:output_ext

Markdown › Copy Files: Destination
Defines where files copied created by drop or paste should be created. This is a map from globs that match on the Markdown document to destinations.
item value

when copy image to vs code the ![](),is relative path like
../../../assets/images/2023-09-05-jekyll-wiki/image-6.png

Directory Structure

_includes

These are the partials that can be mixed and matched by your layouts and posts to facilitate reuse. The liquid tag

can be used to include the partial in _includes/file.ext.

_layouts

These are the templates that wrap posts. Layouts are chosen on a post-by-post basis in the front matter, which is described in the next section. The liquid tag {{ content }} is used to inject content into the web page.

_posts

Your dynamic content, so to speak. The naming convention of these files is important, and must follow the format: YEAR-MONTH-DAY-title.MARKUP. The permalinks can be customized for each post, but the date and markup language are determined solely by the file name.

_site

This is where the generated site will be placed (by default) once Jekyll is done transforming it. It’s probably a good idea to add this to your .gitignore file.

index.html or index.md and other HTML, Markdown files

Provided that the file has a front matter section, it will be transformed by Jekyll. The same will happen for any .html, .markdown, .md, or .textile file in your site’s root directory or directories not listed above.

The Gemfile and Gemfile.lock files are used by Bundler to keep track of the required gems and gem versions you need to build your Jekyll site.

Assets
Any file in /assets will be copied over to the user’s site upon build unless they have a file with the same relative path. You can ship any kind of asset here: SCSS, an image, a webfont, etc.

All files in /assets will be output into the compiled site in the /assets folder just as you’d expect from using Jekyll on your sites.

theme

To locate a theme’s files on your computer:

Run bundle info –path followed by the name of the theme’s gem, e.g., bundle info –path minima for Jekyll’s default theme.

This returns the location of the gem-based theme files.

Customization

To override the default structure and style of minima, simply create the concerned directory at the root of your site, copy the file you wish to customize to that directory, and then edit the file.
e.g., to override the _includes/head.html file to specify a custom style path, create an _includes directory, copy _includes/head.html from minima gem folder to <yoursite>/_includes and start editing that file.

To modify any stylesheet you must take the extra step of also copying the main sass file (_sass/minima.scss in the Minima theme) into the _sass directory in your site’s source.

An alternative, to continue getting theme updates on all stylesheets, is to use higher specificity CSS selectors in your own additional, originally named CSS files.

Converting gem-based themes to regular themesPermalink

Suppose you want to get rid of the gem-based theme and convert it to a regular theme, where all files are present in your Jekyll site directory, with nothing stored in the theme gem.

To do this, copy the files from the theme gem’s directory into your Jekyll site directory. (For example, copy them to /myblog if you created your Jekyll site at /myblog. See the previous section for details.)

Then you must tell Jekyll about the plugins that were referenced by the theme. You can find these plugins in the theme’s gemspec file as runtime dependencies. If you were converting the Minima theme, for example, you might see:

spec.add_runtime_dependency “jekyll-feed”, “> 0.12”
spec.add_runtime_dependency “jekyll-seo-tag”, “> 2.6”

You should include these references in the Gemfile.

You could list them individually in both Gemfile and _config.yml.

1
2
3
4

# ./Gemfile

gem "jekyll-feed", "~> 0.12"
gem "jekyll-seo-tag", "~> 2.6"

1
2
3
4
5
6

# ./_config.yml


plugins:
  - jekyll-feed
  - jekyll-seo-tag

If you’re publishing on GitHub Pages you should update only your _config.yml as GitHub Pages doesn’t load plugins via Bundler.

Either way, don’t forget to bundle update.

Finally, remove references to the theme gem in Gemfile and configuration. For example, to remove minima:

Open Gemfile and remove gem “minima”, “~> 2.5”.
Open _config.yml and remove theme: minima.
Now bundle update will no longer get updates for the theme gem.

Docsify makes it easy to create a documentation website, but is not a static-site generator and is not SEO friendly.

Docusaurus

• Docusaurus is a static-site generator. It builds a single-page application with fast client-side navigation, leveraging the full power of React to make your site interactive. It provides out-of-the-box documentation features but can be used to create any kind of site (personal website, product, blog, marketing landing pages, etc).

The docs feature provides users with a way to organize Markdown files in a hierarchical format.

Extend and customize with React

MDX:Write interactive components via JSX and React embedded in Markdown.

MDX allows you to use JSX in your markdown content. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast.

MDX has no runtime, all compilation occurs during the build stage

jekyll

ruby

Static
Markdown, Liquid, HTML & CSS go in. Static sites come out ready for deployment.

Blog-aware
Permalinks, categories, pages, posts, and custom layouts are all first-class citizens here.

Simple
No more databases, comment moderation, or pesky updates to install—just your content.

moderation

适度；适中；合理
the quality of being reasonable and not being extreme
评审

pesky
causing trouble; annoying.

hexo

Hexo provides the Nunjucks template engine by default

Valine was born in August 7, 2017. It’s a fast, simple & efficient Leancloud based no back end comment system.

Theoretically, but not limited to static blog. Hexo, Jekyll, Typecho, Hugo, Ghost, Docsify and other blog or document programs are currently using Valine.

valine 需要 leancloud

leancloud开发版：开发版让用户可以在开发阶段和个人项目中免费使用 LeanCloud 的大部分功能。大部分商业应用在发布给外部用户后会超过开发版的用量限制，将会需要升级到商用版。

Jinja is a fast, expressive, extensible templating engine. Special placeholders in the template allow writing code similar to Python syntax. Then the template is passed data to render the final document.

Nunjucks is essentially a port of jinja2

A notable feature of Hexo is tag plugins. Tag plugins are snippets of code you can add to your Markdown files without having to write complex or messy HTML to render specific content.

Octopress plugins.

Tag Plugins
Tag plugins are different from post tags. They are ported from Octopress and provide a useful way for you to quickly add specific content to your posts.

theme layout
Layout folder. This folder contains the theme’s template files, which define the appearance of your website. Hexo provides the Nunjucks template engine by default, but you can easily install additional plugins to support alternative engines such as EJS or Pug. Hexo chooses the template engine based on the file extension of the template (just like the posts). For example:

layout.ejs - uses EJS
layout.njk - uses Nunjucks

• hexojs/warehouse

A JSON database with Models, Schemas, and a flexible querying interface. It powers the wildly successful static site generator Hexo.

Hugo

• The Single Binary Approach
  Some static site generators install a single binary and don’t require complex dependency management. The single binary approach gets things set up quickly and easily.

One of the advantages of using Hugo is that it doesn’t depend on client-side JS.

Hugo supports unlimited content types, taxonomies, menus, dynamic API-driven content, and more, all without plugins.

Hugo ships with pre-made templates to make quick work of SEO, commenting, analytics and other functions. One line of code, and you’re done.

Hugo’s Go-based templating

Octopress is basically some guy’s Jekyll blog you can fork and modify.
Octopress is single product with a theme, plugins, and command line automation, the best I could offer the Jekyll community was a pile of source code.

Octopress is an obsessively designed framework for Jekyll blogging. It’s easy to configure and easy to deploy.

EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. No religiousness about how to organize things. No reinvention of iteration and control-flow. It’s just plain JavaScript.

迭代
the process of repeating a mathematical or computing process or set of instructions again and again, each time applying it to the result of the previous stage
(computer science) executing the same set of instructions a given number of times or until a specified result is obtained

religiousness虔诚
the quality of being extremely conscientious

conscientious一丝不苟的,认真的
Someone who is conscientious is very careful to do their work properly.

• Example

1
2
3

<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

• Tags

1
2
3
4
5
6
7
8
9

<% 'Scriptlet' tag, for control-flow, no output
<%_ ‘Whitespace Slurping’ Scriptlet tag, strips all whitespace before it
<%= Outputs the value into the template (HTML escaped)
<%- Outputs the unescaped value into the template
<%# Comment tag, no execution, no output
<%% Outputs a literal '<%'
%> Plain ending tag
-%> Trim-mode ('newline slurp') tag, trims following newline
_%> ‘Whitespace Slurping’ ending tag, removes all whitespace after it

• Includes
  Includes are relative to the template with the include call. (This requires the ‘filename’ option.) For example if you have “./views/users.ejs” and “./views/user/show.ejs” you would use <%- include(‘user/show’); %>.

You’ll likely want to use the raw output tag (<%-) with your include to avoid double-escaping the HTML output.

1
2
3
4
5

<ul>
  <% users.forEach(function(user){ %>
    <%- include('user/show', {user: user}); %>
  <% }); %>
</ul>

• Layouts
  EJS does not specifically support blocks, but layouts can be implemented by including headers and footers, like so:

1
2
3
4
5
6
7
8

<%- include('header'); -%>
<h1>
  Title
</h1>
<p>
  My page
</p>
<%- include('footer'); -%>

config

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

config: {
    title: 'Lucfe Knowledge Documentation',
    subtitle: '',
    description: '',
    author: 'lucfe',
    language: 'en',
    timezone: '',
    url: 'http://lucfe2010.github.io/lucfe-hexo',
    root: '/lucfe-hexo/',
    permalink: ':title/',
    permalink_defaults: null,

    ...

}

language

<html lang={language ? language.substr(0, 2) : ''}>

config.head

_config.yml
head:
# URL or path to the website’s icon
favicon: /assets/images/favicon_l.png
# Web application manifests configuration
# https://developer.mozilla.org/en-US/docs/Web/Manifest
manifest:
# Name of the web application (default to the site title)
name:

    ...

meta:
rss

{rss ? <link rel="alternate" href={url_for(rss)} title={config.title} type="application/atom+xml" /> : null}

config.head.favicon

head:
# URL or path to the website’s icon
favicon: /assets/images/favicon_l.png

{favicon ? <link rel="icon" href={url_for(favicon)} /> : null}

article

article:
# Code highlight settings
highlight:
# Code highlight themes
# https://github.com/highlightjs/highlight.js/tree/master/src/styles
theme: atom-one-light

article highlight theme

highlight

variant = ‘default’
# the theme variant 'default' or 'cyberpunk'

see cnd

let hlTheme, images;
if (highlight && highlight.enable === false) {
hlTheme = null;
} else if (article && article.highlight && article.highlight.theme) {
hlTheme = article.highlight.theme;
} else {
hlTheme = ‘atom-one-light’;
}

title

config.title
site title

page

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

page: {
    base: '',
    total: 1,
    current: 1,
    current_url: '',
    posts: _Query { data: [Array], length: 5 },
    prev: 0,
    prev_link: '',
    next: 0,
    next_link: '',
    __index: true,
    path: 'index.html',
    lang: 'en',
    canonical_path: 'index.html'
  }

article (page)

Variable Description Type
page.title Article title string
page.date Article created date Moment.js object
page.updated Article last updated date Moment.js object
page.comments Comment enabled or not boolean
page.layout Layout name string
page.content The full processed content of the article string
page.excerpt Article excerpt string
page.more Contents except article excerpt string
page.source The path of the source file string
page.full_source Full path of the source file string
page.path The URL of the article without root URL. We usually use url_for(page.path) in theme. string
page.permalink Full (encoded) URL of the article string
page.prev The previous post, null if the post is the first post ???
page.next The next post, null if the post is the last post ???
page.raw The raw data of the article ???
page.photos The photos of the article (Used in gallery posts) array of ???
page.link The external link of the article (Used in link posts) string

Post (post):

Same as page layout but add the following variables.

Variable Description Type
page.published True if the post is not a draft boolean
page.categories All categories of the post array of ???
page.tags All tags of the post array of ???

Home (index)

Variable Description Type
page.per_page Posts displayed per page number
page.total Total number of pages number
page.current Current page number number
page.current_url The URL of current page string
page.posts Posts in this page (Data Model) object
page.prev Previous page number. 0 if the current page is the first. number
page.prev_link The URL of previous page. ‘’ if the current page is the first. string
page.next Next page number. 0 if the current page is the last. number
page.next_link The URL of next page. ‘’ if the current page is the last. string
page.path The URL of current page without root URL. We usually use url_for(page.path) in theme. string

Archive (archive):

Same as index layout but add the following variables.

Variable Description Type
page.archive Equals true boolean
page.year Archive year (4-digit) number
page.month Archive month (2-digit without leading zeros) number

page.month page.year

Category (category):

Same as index layout but add the following variables.

Variable Description Type
page.category Category name string

Tag (tag):

Same as index layout but add the following variables.

Variable Description Type
page.tag Tag name string

page.permalink

Full (encoded) URL of the article string

canonical_url = page.permalink

{canonical_url ? <link rel="canonical" href={canonical_url} /> : null}

hexo theme helpers

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

helper: {
    date: [Function: bound dateHelper],
    date_xml: [Function: bound toISOString],
    time: [Function: bound timeHelper],
    full_date: [Function: bound fullDateHelper],
    relative_date: [Function: bound relativeDateHelper],
    time_tag: [Function: bound timeTagHelper],
    moment: [Function: bound hooks],
    search_form: [Function: bound moized(searchFormHelper)],
    strip_html: [Function: bound striptags],
    trim: [Function: bound ],
    titlecase: [Function: bound toTitleCase],
    word_wrap: [Function: bound wordWrap],
    truncate: [Function: bound truncate],
    escape_html: [Function: bound escapeHTML],
    fragment_cache: [Function: bound fragmentCache],
    gravatar: [Function: bound gravatarHelper],
    is_current: [Function: bound isCurrentHelper],
    is_home: [Function: bound isHomeHelper],
    is_home_first_page: [Function: bound isHomeFirstPageHelper],
    is_post: [Function: bound isPostHelper],
    is_page: [Function: bound isPageHelper],
    is_archive: [Function: bound isArchiveHelper],
    is_year: [Function: bound isYearHelper],
    is_month: [Function: bound isMonthHelper],
    is_category: [Function: bound isCategoryHelper],
    is_tag: [Function: bound isTagHelper],
    list_archives: [Function: bound listArchivesHelper],
    list_categories: [Function: bound listCategoriesHelper],
    list_tags: [Function: bound listTagsHelperFactory],
    list_posts: [Function: bound listPostsHelper],
    meta_generator: [Function: bound metaGeneratorHelper],
    open_graph: [Function: bound openGraphHelper],
    number_format: [Function: bound numberFormatHelper],
    paginator: [Function: bound paginatorHelper],
    partial: [Function: bound partial],
    markdown: [Function: bound markdownHelper],
    render: [Function: bound render],
    css: [Function: bound moized(cssHelper)],
    js: [Function: bound moized(jsHelper)],
    link_to: [Function: bound linkToHelper],
    mail_to: [Function: bound moized(mailToHelper)],
    image_tag: [Function: bound imageTagHelper],
    favicon_tag: [Function: bound faviconTagHelper],
    feed_tag: [Function: bound feedTagHelper],
    tagcloud: [Function: bound tagcloudHelperFactory],
    tag_cloud: [Function: bound tagcloudHelperFactory],
    toc: [Function: bound tocHelper],
    relative_url: [Function: bound ],
    url_for: [Function: bound ],
    full_url_for: [Function: bound ],
    inspect: [Function: bound inspectObject],
    log: [Function: bound log],
    cdn: [Function: bound ],
    fontcdn: [Function: bound ],
    iconcdn: [Function: bound ],
    is_categories: [Function: bound ],
    is_tags: [Function: bound ],
    __: [Function (anonymous)],
    _p: [Function (anonymous)]
  }

Templates

partial
Loads other template files. You can define local variables in locals.

<%- partial(layout, [locals], [options]) %>
Option Description Default
cache Cache contents (Use fragment cache) false
only Strict local variables. Only use variables set in locals in templates. false
fragment_cache
Caches the contents in a fragment. It saves the contents within a fragment and serves the cache when the next request comes in.

<%- fragment_cache(id, fn);
Examples:

<%- fragment_cache(‘header’, function(){
return ‘

Conditional Tags

is_current
Check whether path matches the URL of the current page. Use strict options to enable strict matching.

<%- is_current(path, [strict]) %>
is_home
Check whether the current page is home page.

<%- is_home() %>
is_post
Check whether the current page is a post.

<%- is_post() %>
is_archive
Check whether the current page is an archive page.

<%- is_archive() %>
is_year
Check whether the current page is a yearly archive page.

<%- is_year() %>
is_month
Check whether the current page is a monthly archive page.

<%- is_month() %>
is_category
Check whether the current page is a category page.
If a string is given as parameter, check whether the current page match the given category.

<%- is_category() %>
<%- is_category(‘hobby’) %>

is_tag
Check whether the current page is a tag page.
If a string is given as parameter, check whether the current page match the given tag.

<%- is_tag() %>
<%- is_tag(‘hobby’) %>

helper.is_post()

helper.is_archive()

https://lucfe2010.github.io/lucfe-hexo/archives/

helper.is_month()

https://lucfe2010.github.io/lucfe-hexo/archives/2023/09/

helper.is_year()

https://lucfe2010.github.io/lucfe-hexo/archives/2023/

helper._p()

Templates
Use __ or _p helpers in templates to get the translated strings. The former is for normal usage and the latter is for plural strings. For example:

en.yml
index:
title: Home
add: Add
video:
zero: No videos
one: One video
other: %d videos
<%= __(‘index.title’) %>
// Home

<%= _p(‘index.video’, 3) %>
// 3 videos

helper._p(‘common.archive’, Infinity);

if (helper.is_tag()) {
title = helper._p(‘common.tag’, 1) + ‘: ‘ + page.tag;
}

if (helper.is_categories()) {
title = helper._p(‘common.category’, Infinity);}

URL

url_for
Returns a url with the root path prefixed. You should use this helper instead of config.root + path since Hexo 2.7.

<%- url_for(path) %>

gravatar
Inserts a Gravatar image.

<%- gravatar(‘a@abc.com‘ {s: 40, d: ‘http://example.com/image.png'}) %>
// http://www.gravatar.com/avatar/b9b00e66c6b8a70f88c73cb6bdb06787?s=40&d=http%3A%2F%2Fexample.com%2Fimage.png

url_for

cdn fontcdn and iconcdn

cdn()

{hlTheme ? <link rel="stylesheet" href={cdn('highlight.js', '11.7.0', 'styles/' + hlTheme + '.css')} /> : null}

hlTheme

fontcdn()

1
2
3
4
5
6

<link rel="stylesheet" href={fontCssUrl[variant]} />

const fontCssUrl = {
            default: fontcdn('Ubuntu:wght@400;600&family=Source+Code+Pro', 'css2'),
            cyberpunk: fontcdn('Oxanium:wght@300;400;600&family=Roboto+Mono', 'css2')
        };

iconcdn()

<link rel="stylesheet" href={iconcdn()} />

HTML Tags

css

<%- css(‘style.css’) %>
//

js

<%- js(‘script.js’) %>
//

link_to

<%- link_to(‘http://www.google.com‘, ‘Google’, {external: true}) %>
// Google

image_tag
favicon_tag
feed_tag

List

list_categories

Inserts a list of all categories.

<%- list_categories([options]) %>
Option Description Default
orderby Order of categories name
order Sort of order. 1, asc for ascending; -1, desc for descending 1
show_count Display the number of posts for each category true
style Style to display the category list. list displays categories in an unordered list. list
separator Separator between categories. (Only works if style is not list) ,
depth Levels of categories to be displayed. 0 displays all categories and child categories; -1 is similar to 0 but displayed in flat; 1 displays only top level categories. 0
class Class name of category list. category
transform The function that changes the display of category name.
suffix Add a suffix to link. None

list_tags

Inserts a list of all tags.

<%- list_tags([options]) %>
Option Description Default
orderby Order of categories name
order Sort of order. 1, asc for ascending; -1, desc for descending 1
show_count Display the number of posts for each tag true
style Style to display the tag list. list displays tags in an unordered list. list
separator Separator between categories. (Only works if style is not list) ,
class Class name of tag list. tag
transform The function that changes the display of tag name.
amount The number of tags to display (0 = unlimited) 0
suffix Add a suffix to link. None

list_archives

Inserts a list of archives.

<%- list_archives([options]) %>
Option Description Default
type Type. This value can be yearly or monthly. monthly
order Sort of order. 1, asc for ascending; -1, desc for descending 1
show_count Display the number of posts for each archive true
format Date format MMMM YYYY
style Style to display the archive list. list displays archives in an unordered list. list
separator Separator between archives. (Only works if style is not list) ,
class Class name of archive list. archive
transform The function that changes the display of archive name.

list_posts

Inserts a list of posts.

<%- list_posts([options]) %>
Option Description Default
orderby Order of posts date
order Sort of order. 1, asc for ascending; -1, desc for descending 1
style Style to display the post list. list displays posts in an unordered list. list
separator Separator between posts. (Only works if style is not list) ,
class Class name of post list. post
amount The number of posts to display (0 = unlimited) 6
transform The function that changes the display of post name.

tagcloud

Inserts a tag cloud.

<%- tagcloud([tags], [options]) %>
Option Description Default
min_font Minimal font size 10
max_font Maximum font size 20
unit Unit of font size px
amount Total amount of tags 40
orderby Order of tags name
order Sort order. 1, sac as ascending; -1, desc as descending 1
color Colorizes the tag cloud false
start_color Start color. You can use hex (#b700ff), rgba (rgba(183, 0, 255, 1)), hsla (hsla(283, 100%, 50%, 1)) or color keywords. This option only works when color is true.
end_color End color. You can use hex (#b700ff), rgba (rgba(183, 0, 255, 1)), hsla (hsla(283, 100%, 50%, 1)) or color keywords. This option only works when color is true.

Miscellaneous

paginator
Inserts a paginator.

<%- paginator(options) %>
Option Description Default
base Base URL /
format URL format page/%d/
total The number of pages 1
current Current page number 0
prev_text The link text of previous page. Works only if prev_next is set to true. Prev
next_text The link text of next page. Works only if prev_next is set to true. Next
space The space text &hellp;
prev_next Display previous and next links true
end_size The number of pages displayed on the start and the end side 1
mid_size The number of pages displayed between current page, but not including current page 2
show_all Display all pages. If this is set true, end_size and mid_size will not works. false

toc
Parses all heading tags (h1~h6) in the content and inserts a table of contents.

Date & Time

date
Inserts formatted date. date can be unix time, ISO string, date object, or Moment.js object. format is date_format setting by default.

<%- date(date, [format]) %>
Examples:

<%- date(Date.now()) %>
// 2013-01-01

<%- date(Date.now(), ‘YYYY/M/D’) %>
// Jan 1 2013
date_xml
Inserts date in XML format. date can be unix time, ISO string, date object, or Moment.js object.

<%- date_xml(date) %>
Examples:

<%- date_xml(Date.now()) %>
// 2013-01-01T00:00:00.000Z
time
Inserts formatted time. date can be unix time, ISO string, date object, or Moment.js object. format is time_format setting by default.

<%- time(date, [format]) %>
Examples:

<%- time(Date.now()) %>
// 13:05:12

<%- time(Date.now(), ‘h:mm:ss a’) %>
// 1:05:12 pm
full_date
Inserts formatted date and time. date can be unix time, ISO string, date object, or Moment.js object. format is date_format + time_format setting by default.

<%- full_date(date, [format]) %>
Examples:

<%- full_date(new Date()) %>
// Jan 1, 2013 0:00:00

<%- full_date(new Date(), ‘dddd, MMMM Do YYYY, h:mm:ss a’) %>
// Tuesday, January 1st 2013, 12:00:00 am

<%- toc(str, [options]) %>
Option Description Default
class Class name toc
list_number Displays list number true
max_depth Maximum heading depth of generated toc 6
Examples:

<%- toc(page.content) %>

inferno

Component

1
2
3
4
5
6
7
8
9

Class component:

import { Component } from 'inferno';

class MyComponent extends Component {
  render() {
    ...
  }
}

class declare

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

export declare class Component<P = {}, S = {}> implements IComponent<P, S> {
    state: S | null;
    props: {
        children?: InfernoNode;
    } & P;
    context: any;
    displayName?: string;
    refs?: any;

    ...

    constructor(props?: P, context?: any);

    ...

    render(_nextProps: P, _nextState: S, _nextContext: any): InfernoNode | undefined;
}

This is the base class for Inferno Components when they’re defined using ES6 classes.

icarus theme COMPONENTS

js regex Pattern

1
2
3

let img;
const imgPattern = /<img [^>]*src=['"]([^'"]+)([^>]*>)/gi;
img = imgPattern.exec(page.content);

body

the rendered html from another layout files.
也就是layout文件夹第一层的中去除layout.jsx的其他*.jsx文件

OpenGraph and Structured Data

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<OpenGraph
    type="blog"
    title="Page title"
    language="Page language"
    description="Page description"
    date="Page publish date"
    updated="Page update date"
    author="Page author"
    keywords="keyword1,keyword2,..."
    images={[ '/path/to/image.png' ]}
    url="/path/to/page"
    siteName="Site name"
    twitterId="Twitter ID"
    twitterCard="summary"
    twitterSite="Twitter Site"
    googlePlus="/path/to/google/plus"
    facebookAdmins="Facebook admin ID"
    facebookAppId="Facebook APP ID" />



<StructuredData
    title="Page title"
    url="/page/url"
    author="Page author name"
    publisher="Page publisher name"
    publisherLogo="/path/to/logo"
    description="Page description"
    images={[ '/path/to/image' ]}
    date="Page publish date"
    updated="Page update date" />

meta tags

1
2
3
4
5
6

<MetaTags meta={meta} />

<Meta meta={[
    'name="generator";content="Hexo 4.2.0"'
    'property="article:author";content="PPOffice"'
]} />

WebApp

1
2
3
4
5
6
7
8
9

<WebApp
    name="******"
    manifest="/path/to/manifest.json"
    tileIcon="/path/to/image"
    themeColor="#000000"
    icons={[
        { src: '/path/to/image', sizes: '128x128 256x256' },
        { src: '/path/to/image', sizes: '512x512' },
    ]} />

followIt

{followItVerificationCode ? <meta name="follow.it-verification-code" content={followItVerificationCode} /> : null}

let followItVerificationCode = null;
if (Array.isArray(config.widgets)) {
const widget = config.widgets.find(widget => widget.type === ‘followit’);
if (widget) {
followItVerificationCode = widget.verification_code;
}
}

hexo theme develop example

languages 文件夹放有一个或多个语言文件。

layout 文件夹下面用于存放页面文件，通常第一层有 Index 首页 、 Archive 归档页 、 Tag 标签页 、 Category 分类页 、 Post 文章页 、 Page 页面详情页 、 layout 布局 ，一般还会创建一个公共页面的文件夹，该文件夹用于放置一个页面的部分内容，用于复用。

source 文件夹用于放一些资源文件，例如： 字体 、 CSS 、 JS 、 图片 等，也会根据他们的文件类型进行再次分类，图片放到图片的文件夹，JS 放到 JS 的文件夹。

先从 layout.ejs 文件开始，该文件是布局文件，其他页面都按照其来进行渲染，编写时遵循 HTML5 规范

1
2
3
4
5
6
7
8
9
10
11
12
13

<!DOCTYPE html>
<html lang="<%= config.language %>">
<head>
    <%- partial('common/head') %>
</head>
<body>
    <%- partial('common/header') %>
    <div class="wrapper">
        <%- body %>
    </div>
    <%- partial('common/footer') %>
</body>
</html>

config.language 表示使用根目录配置文件中 language 属性，假设配置文件中该属性填的是 zh-CN ，则最终渲染成 。

partial() 用于引入公共布局，当引用后，每个页面都会存在你引用的这个布局，上面一共引用了三个文件 head 、 header 、 footer ，三个文件都在 common 文件夹下，这时候应该建立该文件夹，并在下面创建对应的三个 ejs 文件。假设 head.ejs 中的内容为 this is head ，最终渲染成如下：（每个页面都会存在此内容）

Hexo 预置数据 即变量

post.ejs 文件内容如下：

1
2
3
4
5
6
7
8

---
title: 这是一篇文章
tip: hexo 开发

---

主内容...
文章页面最终渲染成：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    head
</head>
<body>
    header
    <div class="wrapper">
        <div class="post">
            <h1>这是一篇文章</h1>
            <p>hexo 开发</p>
            <div class="post-content">
                主内容...
            </div>
        </div>
    </div>
    footer
</body>
</html>

下面做一个 关于 页面的例子：

首先在根目录资源文件夹创建一个名为 about 的文件夹，再到该文件夹下创建一个 index.md 文件，内容为：

1
2
3
4
5

---
title: 关于
type: 'about'
---
这是一个关于页面内容

到主题文件夹中布局文件夹中创建一个 about.ejs 页面，内容为：

// 假设引入友情链接文件
<% if (is_page() && page.type === ‘links’) { %> // is_page() 是啥请看官方文档 - 辅助函数
<%- partial(‘links’) %>
<% } %>
最终渲染结果

列表

官方文档中有 list_categories 、 list_posts 等函数，都有具体的使用方法，在这里对于列表我写出我常用的方法。

文章列表：

对于文章通常有两种，一种是每页只显示 config.per_page 数量的文章，带有分页，另外一种是一个页面显示所有文章。

// 带分页，使用 Hexo 预置变量 page.posts
<% page.posts.each(function(post) { %> // 因为这里有个对象 post

<% post.title %>

post-card 文件内容为：

// 一个页面显示所有文章
<% site.posts.each(function(post) { %>

<% post.title %>

主题中原有的 category.ejs 和 tag.ejs 文件都是属于单个对象的页面

category.ejs 页面只显示单个分类，当你点击分类 1 跳转过去的页面就是 category ，它不会显示出网站中所有的分类。

想要全部显示出来，需要自行创建一个页面categories 、 tags

MAKE A PROJECT DIRECTORY
Create a directory for your project using the mkdir command (short for make directory):

mkdir eleventy-sample
Now move into that directory with the cd command (short for change directory):

cd eleventy-sample

INSTALL ELEVENTY

CREATE A package.json

Installing Eleventy into a project requires a package.json file. The npm command (provided by Node.js) will create one for you with npm init -y. -y tells npm to use default values and skips the command line questionnaire.

npm init -y

INSTALL ELEVENTY

@11ty/eleventy is published on npm and we can install and save it into our project’s package.json by running:

npm install @11ty/eleventy --save-dev
You may also install Eleventy globally but the package.json installation method above is recommended.

RUN ELEVENTY

We can use the npx command (also provided by Node.js) to run our local project’s version of Eleventy. Let’s make sure our installation went okay and try to run Eleventy:

npx @11ty/eleventy

CREATE SOME TEMPLATES

A template is a content file written in a format such as Markdown, HTML, Liquid, Nunjucks, and more, which Eleventy transforms into a page (or pages) when building our site.

Let’s run two commands to create two new template files.

1
2

echo '<!doctype html><title>Page title</title><p>Hi</p>' > index.html
echo '# Page header' > README.md

Alternatively, you can create these using any text editor—just make sure you save them into your project folder and they have the correct file extensions.

After you’ve created an HTML template and a Markdown template, let’s run Eleventy again with the following command:

npx @11ty/eleventy
The output might look like this:

1
2
3
4
5

npx @11ty/eleventy
[11ty] Writing _site/README/index.html from ./README.md (liquid)
[11ty] Writing _site/index.html from ./index.html (liquid)
[11ty] Wrote 2 files in 0.04 seconds (v2.0.1)
We’ve compiled our two content templates in the current directory into the output folder (_site is the default).

GAZE UPON YOUR TEMPLATES

Use –serve to start up a hot-reloading local web server.

npx @11ty/eleventy –serve
Your command line might look something like:

1
2
3
4
5
6
7

npx @11ty/eleventy --serve
[11ty] Writing _site/index.html from ./index.html (liquid)
[11ty] Writing _site/README/index.html from ./README.md (liquid)
[11ty] Wrote 2 files in 0.04 seconds (v2.0.0)
[11ty] Watching…
[11ty] Server at http://localhost:8080/
Open http://localhost:8080/ or http://localhost:8080/README/ in your favorite web browser to see your Eleventy site live! When you save your template files—Eleventy will refresh the browser with your new changes automatically!

USE A BUILD SCRIPT

When deploying your Eleventy site, the goal is to provide your chosen host with your project’s build output (the _site folder by default). The command you run is usually configured via a build script in your package.json file. It might look like this:

DEPOLY ON GITHUB PAGES.0B

FILENAME package.json

1
2
3
4
5
6

{
  "scripts": {
    "build": "npx @11ty/eleventy"
  }
}

New files in your GitHub repo

.nojekyll file: Open a plain-text editor and save an empty file in the root of your repo (where you have the .eleventy.js) with the filename .nojekyll. This will stop GitHub from trying to build your site as a Jekyll site.

.github directory: Create a new directory in the root of your repo and name it .github (yes, starting with a period). Inside that directory, make a directory named workflows. Open a plain-text editor and save a file inside the workflows directory called build.yml. Copy the contents from my build.yml file here.
Note: my build.yml file was updated 6/14/23 with Node version improvements thanks to Simon Wiles

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

name: Build Eleventy
on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - name: Use Node.js current
        uses: actions/setup-node@v3
        with:
          node-version: current

      - name: Install dependencies & build
        run: |
          npm ci
          npm run build

          
      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3.8.0
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          #publish_dir is the folder on the docker instance which eleventy builds the pages to.
          #it is not the docs folder in the repository
          publish_dir: _site
          #publish_branch is the branch in the repository.
          #this is where you need to point GitHub pages
          publish_branch: gh-pages

Depending on your Eleventy setup, you may need to change publish_dir in your build.yml file. My Eleventy site builds to a folder called dist. If yours builds to a folder with a different name, change it in this file.

GitHub configuration

Creating a gh-pages branch

Using the GitHub interface, you’ll need to create a new branch of your repo called gh-pages where the built version of your site will be hosted from. If you’re looking at your repo on GitHub, you should see a little button that says main towards the upper left, under the <> Code tab. Click that button, then type gh-pages into the field that says Find or create a branch. This will create a new branch called gh-pages

important!!!!
the gh-pages branch will be update by the github page action definded up right in the workflow. so dont use the gh-pages branch for editing content

Actions configuration

Go into the settings for your repo, click on Actions in the set of tabs on the left, then General.
Make sure that “Allow all actions and reusable workflows” is selected,
and at the bottom of that page, under Workflow permissions make sure that you have “Read and write permissions” selected.

GitHub Pages configuration

Go into the settings for your repo, and click on “Pages” in the set of tabs on the left. Use the dropdown under Source to choose the gh-pages branch.

Building the sitePermalink

In theory, if you’ve set up all these things, anytime you push changes to GitHub, it will trigger an action that will build the site and move those files to the GitHub Pages hosting environment.

If everything isn’t set up just right, you’ll get an email that an action failed. Click the “View workflow run” link in the email, which will take you to a page with information on the failed workflow. Click on the text in the middle panel where you see a red circle with an x – what the text says depends on where exactly it failed. Eventually you’ll see text reflecting where exactly the process failed, and you can search parts of that error message to figure out what’s going wrong.

layout

Eleventy Layouts are special templates that can be used to wrap other content.

first

To denote that a piece of content should be wrapped in a template, use the layout key in your front matter, like so:

content-using-layout.md

1
2
3
4
5
6
7
8

---

layout: "layouts/mylayout.njk"
title: My Rad Markdown Blog Post

---
`# {{ title }}`

This will look for a mylayout.njk Nunjucks file in your includes folder at _includes/layouts/mylayout.njk.

Next, we need to create a mylayout.njk file. It can contain any type of text, but here we’re using HTML:

FILENAME _includes/mylayout.njk

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

{% raw %}

---
title: My Rad Blog

---

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
  </head>
  <body>{% raw %}
    {{ content | safe }}{% endraw %}
  </body>
</html>
{% endraw %}

If you are using a language that contains curly braces, you will likely need to place and tags around your code. Since Jekyll 4.0 , you can add render_with_liquid: false in your front matter to disable Liquid entirely for a particular document.

Note that the layout template will populate the content data with the child template’s content.

Also note that we don’t want to double-escape the output, so we’re using the provided Nunjucks safe filter here (see more language double-escaping syntax below).

FRONT MATTER DATA IN LAYOUTS

Layouts can contain their own front matter data! It’ll be merged with the content’s data on render. Content data takes precedence(优先), if conflicting keys arise.

Front matter data set in a content template takes priority over layout front matter! Chained layouts have similar merge behavior. The closer to the content, the higher priority the data.

SOURCES OF DATA
When the data is merged in the Eleventy Data Cascade, the order of priority for sources of data is (from highest priority to lowest):

1. Computed Data
2. Front Matter Data in a Template
3. Template Data Files
4. Directory Data Files (and ascending Parent Directories)
5. Front Matter Data in Layouts (this moved in 1.0) ⬅
6. Configuration API Global Data
7. Global Data Files

Open the Command Palette (Ctrl+Shift+P), start typing the Python: Create Environment command to search, and then select the command.

The command then presents a list of interpreters that can be used for your project.

Ensure your new environment is selected by using the Python: Select Interpreter command from the Command Palette.

day 01

print function

1
2

print("print('what to print')")
print('print("what to print")')

string

print("Hello world!\nHello World!")

output
Hello world!
Hello World

1
2

print ("Hello" + " Angela")
print ("Hello" + " " "Angela")

Hello Angela
Hello Angela

print("Hello world!")

1
2
3

  File "c:\Users\lcf\Documents\learning\udemy_python\02.py", line 6
    print("Hello world!")
IndentationError: unexpected indent

print(("Hello world")

1
2
3

    print(("Hello world")
         ^
SyntaxError: '(' was never closed

print('string concatenation with "+" sign')

string concatenation with “+” sign

input

input("some prompt")

print("Hello " + input("What is your name?"))

print(len(input("What is your name? ")))

variable

1
2

name = input("What is your name? ")
print(name)

What is your name? lucfe
lucfe

1
2
3
4
5

name = "Jack"
print(name)

name = "Angela"
print(name)

Jack
Angela

print(len(input("What is your name? ")))

1
2
3

name = input("What is your name? ")
length = len(name)
print(length)

What is your name? lucfe
5

–

1
2
3
4
5
6
7
8
9

a = input("a: ")
b = input("b: ")

c = b
b = a
a = c

print("a = " + a)
print("b = " + b)

a: 146
b: 645
a = 645
b = 146

1
2

name = "Jack"
print(nama)

1
2
3
4
5

Traceback (most recent call last):
  File "c:\Users\lcf\Documents\learning\udemy_python\01.04.py", line 12, in <module>
    print(nama)
          ^^^^
NameError: name 'nama' is not defined. Did you mean: 'name'?

day 02

data type

string

1
2

print("Hello"[0])
print("123" + "358")

integer

print(123 + 345)

print(12_34_435_4)

float

3.1415

boolean

True
False

len(132)

1
2
3
4

Traceback (most recent call last):
  File "c:\Users\lcf\Documents\learning\udemy_python\02.01.py", line 13, in <module>
    len(132)
TypeError: object of type 'int' has no len()

num_char = len(input("what is your name?"))
print("your name " + num_char + " characters.")

print(“your name “ + num_char + “ characters.”)
~~~~~~~~~~~~~^~~~~~~~~~
TypeError: can only concatenate str (not “int”) to str

new_num_char = str(num_char)

print(type(1234))

<class 'int'>

float("100.5)

1
2
3
4
5
6
7

two_digit_num = input("your number is?")
print(type(two_digit_num))
first_digit = int(two_digit_num[-2])
second_digit = int(two_digit_num[-1])
answer = str(first_digit + second_digit)

print("your answer is " + answer)

mathmatical operator

7 - 4
3 * 2
2 ** 3
6 / 3

print(type(6/2))
<class 'float'>

pemdas

parentheses ()
exponents **
multiplication/division * /
addition/subtraction + -

left to right

1
2

print(3 * 3 + 3 / 3 - 3)
print(3 * (3 + 3) / 3 - 3)

7.0
3.0

print(8 / 3)
print(round(8 / 3))
print(round(8 / 3, 2))
print(8 // 3)
print(type(8 // 3))

2.6666666666666665
3
2.67
2
<class 'int'>

% remainder

1
2
3
4

score = 4
score -= 2
# score = score - 2
print(score)

2

1
2
3
4
5
6

score = 0
height = 1.8
isWinning = True
name = "john"

print(f"your name is {name},your score is {score}, your height is {height}, your are winning is {isWinning}")

your name is john,your score is 0, your height is 1.8, your are winning is True

pay_each = round(pay_each)

33.6

pay_each = "{:.2f}".format(pay_each)

33.60

day 03

if condition:
do this
else:
do that

1
2
3
4
5
6
7
8
9

height = int(input("what is your height? "))
if height > 120:
  print("you can")
else:
  print("you cant")

height >= 120
height == 120
height != 120

1
2
3
4
5
6

number = int(input("number pls? "))
even_odd = number % 2
if even_odd == 1:
  print("odd")
else:
  print("even")

if condition1:
if condition2:
do this
else:
do that
else:
do else

if condition1:
do A
elif condition2:
do B
else:
do that

year = int(input(“which year? “))

1
2
3
4
5
6
7
8
9
10

if year % 4 == 0:
  if year % 100 == 0:
    if year % 400 == 0:
      print("a leap year")
    else:
      print("not a leap year")
  else:
    print("a leap year")
else:
  print("not a leap year")

if condition1:
do A
if condition2:
do B
if condition3:
do C

logical operators

and or not

1
2
3
4
5
6

print("""dfas
ag
ags
ags""")

print('you\'re good "student"')

day 04

randomisation

mersenne twister

python module

1
2

import random
print(random.randint(1, 10))

random module

Returns a random integer between a and b (both inclusive).

random.random() -> Returns the next random floating point number between [0.0 to 1.0)

1
2
3

import random
random_float = random.random()
print(random_float)

0.0000000… -> 0.9999999…
0.9597056472657862

print(random_float * 5)

0.000000… –> 4.99999…
2.441770790800433

list

have order

fruits = [item1, item2]

data structure

day 05

for item in items_list:
do someting on item

1
2

students_heights = input("a list of student height").split()
range(0, len(students_heights))

rge = range(1, 10)

<class 'range'>

Return an object that produces a sequence of integers from start (inclusive) to stop (exclusive) by step.

1
2
3
4
5
6
7

print(students_scores)
max_score = 0
for score in students_scores:
  if max_score < score:
    max_score = score

# max_score = max(students_scores)

Randomize a List using Random.Shuffle()
Random.Shuffle() is the most recommended method to shuffle a list. Python in its random library provides this inbuilt function which in-place shuffles the list.

letters[random.randint(0, len(letters)-1)]

random.choice(letters)

day 06

python buildin funtions

1
2
3
4
5

def my_function():
  print("Hello")
  print("Bye")

my_function()

range(6)

day 07

How To Use Break, Continue, and Pass Statements when Working with Loops in Python 3

1
2
3
4

# import moduel_07_01
# stages = moduel_07_01.stages

from moduel_07_01 import stages

day 08

argument parameter

def my_function(something)
#do this with something

my_function(123)

somthing -> parameter
123 -> arguments

positional argument
keyword argument

greet_with(name = "Angela", location = "London")
greet_with(location = "London", name = "Angela")

math.ceil(-23.11) : -23.0
math.ceil(300.16) : 301.0
math.ceil(300.72) : 301.0

math.floor(-23.11) : -24.0
math.floor(300.16) : 300.0
math.floor(300.72) : 300.0

1
2
3
4
5

#for n in range(len(alphabet)):
#  if letter == alphabet[n]:
#    letter_index = n
#    break
letter_index = alphabet.index(letter)

day 09

dictionares

{key: value}

1
2
3
4
5
6
7

dic1 = {
  "bug": "asd",
  "function": "asdfq",
  123: "asgqe",
  "name": 164,
}

dic1[“bug”]
dic1[123]

dic1[“bog”]
KeyError: ‘bog’

add a pair
dic1[“Loop”] = “asdf asdf wrye”

wipe a dic
dic1 = {}

edit an item
dic1[“bug”] = “sdaf dasfa das g”

1
2
3

for key in dic1:
  print(key)
  print(dic1[key])

{
key: [list],
key2: {dict},
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# nesting a list in a dictionary
travel_log = {
  "france": ["paris", "lille", "dijon"],
  "germany": ["berlin", "hamburg"],
}

# nesting a dictionary in a dictionary

travel_log = {
  "france": {
    "visited_cities": ["paris", "lille", "dijon"],
    "total_visits": 12,
  },
  "germany": {
    "visited_cities": ["berlin", "hamburg"],
    "total_visits": 6,
  },
}

# nesting a dictionary in a list

travel_log = [
  {
    "country": "france",
    "visited_cities": ["paris", "lille", "dijon"],
    "total_visits": 12,
  }, 
  {
    "country":"germany",
    "visited_cities": ["berlin", "hamburg"],
    "total_visits": 6,
  }
]

day 10

1
2
3
4

def my_function():
  return 3 * 2

result = my_function

str.title()
Return a titlecased version of the string where words start with an uppercase character and the remaining characters are lowercase.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

def add(a, b):
  return a + b

def sub(a, b):
  return a - b

def multi(a, b):
  return a * b

def div(a, b):
  return a / b

operations = {
  "+": add,
  "-": sub,
  "*": multi,
  "/": div,
}

cal_function = operations["*"]
cal_function(2, 3)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# local scope
# in a function
# any named object, not just variables

def drink_potion():
  potion_strenth = 2
  print(f"{potion_strenth}")

drink_potion()

# global scope
# not in a function

player_health = 10

def drink_potion():
  potion_strenth = 2
  print(f"{potion_strenth}")
  print(f"{player_health}")

# no block scope
# if statement

game_level = 3
enemies = ['skeleton', 'zombie', 'alien']
if game_level < 5:
  new_enemy = enemies[0]

print(f"{new_enemy}")

1
2
3
4
5
6
7
8
9
10
11
12

enemies = 1

def increse_enemies():
  enemies = 2
  print(f"{enemies}")

# 2

increse_enemies()
print(f"{enemies}")

# 1

1
2
3
4
5
6
7
8
9
10
11
12
13

enemies = 1

def increse_enemies():
  global enemies
  enemies = 2
  print(f"{enemies}")

# 2

increse_enemies()
print(f"{enemies}")

# 2

1
2
3
4
5
6
7
8

enemies = 1
def increse_enemies():

  print(f"{enemies}")
  return enemies + 1

enemies = increse_enemies()

# global constant

PI = 3.1415926

day 13

debug

day 14

day 15

day 16

object oriented programming oop

attribute
has

method
does

class
type/blueprint

object

car = CarBlueprint()

object.attribute
car.speed

object.method()
car.move()

day 17

class name PascalCase

not camelCase

else: snake_case

initialize -> construtor

def init(self):

day 18

dont
from turtle import *

module alias
import turtle as t

installing moduel

tuple

tuple_a = (1, 2, 3)

= list(tuple)

day 19

event listeners

higher order function

object state

instance

day 20

day 21

class inheritance

slicing list/dictionary

[2: 5: 2]
[::-1]

day 22

create the screen

create the paddle

create the ball and move

detect collision with wall and bounce

detect collision with paddle

detect when paddle misses

keep score

day 23

move the turtle with keypress

create and move the cars

detect collision with car

detect when turtle reaches the other side

create a scoreboard

day 24

read/write files

1
2
3
4
5

with open("data.txt") as file:
    return file.read()

with open("data.txt", mode="w") as file:
    file.write(str(self.high_score))

absolute file path

relative file path
./ working directry or “”

../ working directory parent folder

1
2
3
4
5

strip_name = name.strip()
mail_content = start_content.replace("[name]", strip_name)

with open("Input/Names/invited_names.txt") as invited_names_file:
    invited_names = invited_names_file.readlines()

The readlines() method returns a list containing each line in the file as a list item.

The replace() method replaces a specified phrase with another specified phrase.
Note: All occurrences of the specified phrase will be replaced, if nothing else is specified.

string.strip(characters)
Remove spaces at the beginning and at the end of the string:
include “\n”

day 25

csv files

1
2
3
4

import csv

with open("data.csv") as data_file:
    weather_data = csv.reader(data_file)

pandas -> data analysis

1
2
3
4

# print(data["temp"])
# print(type(data["temp"]))
# print(data)
# print(type(data))

Series column
DataFrame table

import pandas

data = pandas.read_csv(“data.csv”)

print(data[data["day"] == "Monday"])
print(type(data[data["day"] == "Monday"])) -> DataFrame

ser.iloc[0]
Purely integer-location based indexing for selection by position.

Series.item()
Return the first element of the underlying data as a Python scalar.

1
2
3
4
5
6
7
8

data_dict = {
    "students": ["Amy", "James", "Angela"],
    "scores": [76, 56, 65],
}
data = pandas.DataFrame(data_dict)
data.to_csv("score_data.csv")

print(data)

day 26

comprehension

create a list from a exsiting list

1
2
3
4
5
6
7
8
9
10

# new_list = [new_item for item in list]

numbers = [1, 2, 3]
new_list = []
for n in numbers:
    add_1 = n + 1
    new_list.append(add_1)


n_list = [n+1 for n in numbers]

1
2
3

numbers = range(1, 5)
print(type(numbers))
new_list = [n * 2 for n in numbers]

1
2
3

name = "Angela"
new_list = [letter for letter in name]
print(new_list)

1
2
3
4
5

names = ['Alwe', 'Betaafh', 'carol', 'dava']
short_names = [name for name in names if len(name) < 5]
print(short_names)
long_names = [name.upper() for name in names if len(name) >= 5]
print(long_names)

[‘Alwe’, ‘dava’]
[‘BETAAFH’, ‘CAROL’]

int(num.strip()) -> int(num)

new_dict = {new_key:new_value for item in list}
new_dict = {new_key:new_value for (key, value) in dict_1.items()}

1
2
3

names = ['Alwe', 'Betaafh', 'carol', 'dava']
student_scores = {item: random.randint(0, 100) for item in names}
print(student_scores)

{‘Alwe’: 45, ‘Betaafh’: 95, ‘carol’: 21, ‘dava’: 24}

1
2

student_scores = {'Alwe': 45, 'Betaafh': 95, 'carol': 21, 'dava': 24}
passed_student = {student: score for (student, score) in student_scores.items() if score >= 60}

The split() method splits a string into a list.

You can specify the separator, default separator is any whitespace.

1
2
3
4
5
6
7
8
9

student_dict = {
    "student": ["Angela", "James", "Lily"],
    "score": [56, 76, 98]
}

# for key, value in student_dict.items():
for (key, value) in student_dict.items():
    print(key)
    print(value)

1
2
3
4
5
6

for (index, row) in student_data.iterrows():
    print(index)
    print(row)
    print(type(row))
    print(row["student"])
    print(type(row["student"]))

1
2
3
4
5
6
7
8
9
10
11

0

student    Angela
score          56
Name: 0, dtype: object

<class 'pandas.core.series.Series'>

Angela

<class 'str'>

day 27

tkinter

gui

function advanced argument

default value

# def my_function(a=0, b, c=0):
def my_function(b, a=0, c=0):

=…

any number of arguments
unlimited position arguments

1
2
3
4
5
6
7
8
9
10

def add(*args):
    result = 0
    print(type(args))
    for n in args:
        print(n)
        result += n
    return result

result = add(1, 2, 3, 4)
print(result)

<class 'tuple'>

1
2
3
4
5
6
7
8

def calc(n, **kwargs):
    print(type(kwargs))
    print(kwargs)
    n += kwargs["add"]
    n *= kwargs["multi"]
    return n

calc(2, add=3, multi=5)

<class 'dict'>
{‘add’: 3, ‘multi’: 5}

1
2
3
4
5
6
7
8
9

class Car:
    def __init__(self, **kwargs):
        self.make = kwargs["make"]
        # self.model = kwargs["model"]
        self.model = kwargs.get("model")


my_car = Car(make="Nissan")
print(my_car.model)

None

Options control things like the color and border width of a widget. Options can be set in three ways:

At object creation time, using keyword arguments
fred = Button(self, fg="red", bg="blue")
After object creation, treating the option name like a dictionary index
fred["fg"] = "red"
fred["bg"] = "blue"
Use the config() method to update multiple attrs subsequent to object creation
fred.config(fg="red", bg="blue")

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

## label

my_label = tkinter.Label(text="label text", font=("Arial", 24, "bold"))
my_label.pack()

## button

def button_click():
    print("I am clicked")

button = tkinter.Button(text="Click Me", command=button_click)
button.pack()

## entry

input = tkinter.Entry(width=10)
input.pack()

input_text = input.get()

day 28

dynamic type

a = 1
a = “Hello”

day 29

1
2
3
4

passwords_1 = ['a', 'b']
passwords_2 = ['c', 'd']
passwords_3 = ['e', 'f']
passwords = passwords_1 + passwords_2 + passwords_3

final_password = "".join(passwords)

messagebox.showinfo(title="oops", message="Please dont leave any fields empty!")

is_ok = messagebox.askokcancel(title=f"{website}", message=f"Email: {username}\nPassword: {password}\n Is it ok to save?")

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

label_username = Label(text="Email/Username:")
label_username.grid(row=2, column=0)



text_website = Entry(width=45)
text_website.focus()
# text_website.delete(0, END)
text_website.grid(row=1, column=1, columnspan=2)

text_username = Entry(width=45)
text_username.insert(0, "lucfe2010@gmail.com")
text_username.grid(row=2, column=1, columnspan=2)


button_password = Button(text="Generate Password", command=generate_password)
button_password.grid(row=3, column=2)

1
2
3
4
5
6
7
8

window = Tk()
window.title("password manager")
window.config(padx=50, pady=50)

canvas_main = Canvas(width=200, height=200, highlightthickness=0)
bg_img = PhotoImage(file="logo.png")
canvas_main.create_image(100, 100, image=bg_img)
canvas_main.grid(column=1, row=0)

day 30

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# # FileNotFoundError
# with open("a_file.txt") as file:
#     file.read()


# #KeyError
# a_dictionary = {"key": "value"}
# value = a_dictionary["non_existent_key"]


# # index error
# fruit_list = ["apple", "banana", "pear"]
# fruit = fruit_list[3]


# #type error
# text = "abc"
# print(text + 5)

1
2
3
4
5
6
7
8
9
10
11
12

try:
    # something that might cause an exception
    pass
except:
    # do this if there was an exception
    pass
else:
    # do this if there were no exceptions
    pass
finally:
    # do this no matter what happens
    pass

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

try:
    file = open("a_file.txt")
    a_dictionary = {"key": "value"}
    # value = a_dictionary["non_existent_key"]
except FileNotFoundError:
    print("there was an error")
    open = open("a_file.txt", "w")
except KeyError as e:
    print(f"key error{e}")
else:
    print("no error here")
    content = file.read()
    print(content)
finally:
    open.close()

1
2
3
4
5
6
7
8

height = float(input("height: "))
weight = int(input("weight: "))

if height > 3:
    raise ValueError("human should not be over 3 meters")

bmi = weight / height ** 2
print(bmi)

1
2
3
4
5
6
7
8
9
10
11

fruits = ["Apple", "Pear", "Orange"]

def make_pie(index):
    try:
        fruit = fruits[index]
    except IndexError as e:
        print("Fruit pie")
    else:
        print(fruit + " pie")

make_pie(4)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

facebook_posts = [
    {"likes": 21, "Comments": 2},
    {"likes": 13, "Comments": 2, "Shares": 1},
    {"likes": 33, "Comments": 8, "Shares": 3},
    {"Comments": 4, "Shares": 2},
    {"Comments": 1, "Shares": 1},
    {"likes": 19, "Comments": 3},
]

total_like = 0

#
# for post in facebook_posts:
#     try:
#         post_likes = post['likes']
#     except KeyError:
#         post_likes = 0
#     finally:
#         total_like = total_like + post_likes
# print(total_like)

for post in facebook_posts:
    try:
        total_like = total_like + post['likes']
    except KeyError:
        pass
print(total_like)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

phonetic_dict = {row["letter"]: row.code for (index, row) in data.iterrows()}
print(phonetic_dict)

# is_end = True
# while is_end:
#     word = input("enter a word: ").upper()
#     try:
#         output_list = [phonetic_dict[letter] for letter in word]
#     except KeyError:
#         print("sorry, only letters in the alphabet")
#     else:
#         print(output_list)
#         is_end = False


def generate_phonetic():
    word = input("enter a word: ").upper()
    try:
        output_list = [phonetic_dict[letter] for letter in word]
    except KeyError:
        print("sorry, only letters in the alphabet")
        generate_phonetic()
    else:
        print(output_list)


generate_phonetic()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

website = text_website.get()
username = text_username.get()
password = text_password.get()

new_data = {
    website: {
        "email": username,
        "password": password,
    }
}


try:
    with open("data.json", "r") as fp:
        data = json.load(fp)
except FileNotFoundError:
    with open("data.json", "w") as fp:
        json.dump(new_data, fp, indent=4)
else:
    data.update(new_data)
    with open("data.json", "w") as fp:
        json.dump(data, fp, indent=4)
        print(data)
finally:
    text_website.delete(0, END)
    text_password.delete(0, END)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

def search():
    website = text_website.get()
    try:
        with open("data.json", 'r') as fp:
            data = json.load(fp)
            # website_infos = data[website]

    except FileNotFoundError:
        messagebox.showinfo(message="no data yet")
    # except KeyError:
    #     messagebox.showinfo(message=f"no password stored for {website}")
    else:
        if website in data:
            website_infos = data[website]
            email_info = website_infos["email"]
            password_info = website_infos["password"]
            messagebox.showinfo(title=website, message=f"email: {email_info}\npassword: {password_info}")
            pyperclip.copy(password_info)
        else:
            messagebox.showinfo(message=f"no password stored for {website}")
        # email_info = website_infos["email"]
        # password_info = website_infos["password"]
        # messagebox.showinfo(title=website, message=f"email: {email_info}\npassword: {password_info}")
        # pyperclip.copy(password_info)

day 31

https://en.wiktionary.org/wiki/Wiktionary:Frequency_lists
https://github.com/hermitdave/FrequencyWords

google excel
=GOOGLETRANSLATE(A2,"fr","en")

https://cloud.google.com/translate/docs/languages?hl=zh-cn

1
2
3
4
5
6
7
8
9
10
11
12

French,English
partie,part
histoire,history
chercher,search
seulement,only
police,police
pensais,thought
aide,help
demande,request
genre,kind
mois,month
frère,brother

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

import random
from tkinter import *
import pandas

BACKGROUND_COLOR = "#B1DDC6"

current_card = {}
try:
    data = pandas.read_csv("data/words_to_learn.csv")
except FileNotFoundError:
    data = pandas.read_csv("data/french_words.csv")

# to_learn = data.to_dict() # {'French': {0: 'partie', 1: 'histoire',...}, 'English': {0: 'part', 1: 'history', 2:
to_learn = data.to_dict(orient="records")  # [{'French': 'partie', 'English': 'part'}, {'French': 'histoire', ...


def is_known():
    to_learn.remove(current_card)
    df = pandas.DataFrame(to_learn)
    # df.to_csv("data/words_to_learn.csv")  ## need to remove the index row
    df.to_csv("data/words_to_learn.csv", index=False)
    # print(len(to_learn))
    next_card()


def next_card():

    # print(to_learn)
    global current_card
    current_card = random.choice(to_learn)
    french_word = current_card["French"]

    canvas.itemconfig(title, text="French", fill="black")
    canvas.itemconfig(word, text=french_word, fill="black")
    canvas.itemconfig(card_bg_img, image=card_front_img)

    global flip_timer
    window.after_cancel(flip_timer)
    flip_timer = window.after(3000, func=flip_card)


def flip_card():
    canvas.itemconfig(title, text="English", fill="white")
    canvas.itemconfig(word, text=current_card["English"], fill="white")
    # card_back_img = PhotoImage(file="images/card_back.png")  ## this is not work
    canvas.itemconfig(card_bg_img, image=card_back_img)


window = Tk()
window.title("Flashy")
window.config(padx=50, pady=50, bg=BACKGROUND_COLOR)

flip_timer = window.after(3000, func=flip_card)

canvas = Canvas(width=800, height=526)
canvas.config(bg=BACKGROUND_COLOR, highlightthickness=0)
canvas.grid(row=0, column=0, columnspan=2)

card_front_img = PhotoImage(file="images/card_front.png")
card_back_img = PhotoImage(file="images/card_back.png")
card_bg_img = canvas.create_image(400, 263, image=card_front_img)

title = canvas.create_text(400, 150, text="Title", font=("Ariel", 40, "italic"))
word = canvas.create_text(400, 263, text="word", font=("Ariel", 60, "bold"))

wrong_img = PhotoImage(file="images/wrong.png")
unknown_button = Button(image=wrong_img, command=next_card)
unknown_button.config(highlightthickness=0)
unknown_button.grid(row=1, column=0)

right_img = PhotoImage(file="images/right.png")
known_button = Button(image=right_img, command=is_known, highlightthickness=0)
known_button.grid(row=1, column=1)

next_card()

window.mainloop()