the mvm.github.io
Initial Release of V2.0.0
ตอนนี้ไซต์สาธิตทำมิเรอร์ใน IPFS!
โดย Armando Maynez ตาม V1.0 โดย Artem Sheludko
Adam Blog 2.0 เป็นธีม Jekyll ที่สร้างขึ้นเพื่อเข้ากันได้ 100% กับหน้า GitHub หากคุณไม่คุ้นเคยกับหน้า GitHub คุณสามารถตรวจสอบเอกสารของพวกเขาสำหรับข้อมูลเพิ่มเติม คู่มือของ Jonathan McGlone เกี่ยวกับการสร้างและโฮสต์เว็บไซต์ส่วนตัวบน GitHub ก็เป็นทรัพยากรที่ดีเช่นกัน
Jekyll เป็นเครื่องกำเนิดเว็บไซต์ที่รับรู้บล็อกที่เรียบง่ายและคงที่สำหรับเว็บไซต์ส่วนบุคคลโครงการหรือองค์กร โดยทั่วไป Jekyll ใช้เนื้อหาหน้าเว็บของคุณพร้อมกับไฟล์เทมเพลตและสร้างเว็บไซต์ที่สมบูรณ์ สำหรับข้อมูลเพิ่มเติมโปรดเยี่ยมชมเว็บไซต์ Jekyll อย่างเป็นทางการสำหรับเอกสารของพวกเขา Codecademy ยังมีหลักสูตรที่ยอดเยี่ยมเกี่ยวกับวิธีการปรับใช้ไซต์ Jekyll สำหรับผู้เริ่มต้นที่สมบูรณ์
ความงามของการโฮสต์เว็บไซต์ของคุณบน GitHub คือคุณไม่จำเป็นต้องติดตั้ง Jekyll บนคอมพิวเตอร์ของคุณ ทุกอย่างสามารถทำได้ผ่านตัวแก้ไขรหัส GitHub โดยมีความรู้น้อยที่สุดเกี่ยวกับวิธีการใช้ Jekyll หรือบรรทัดคำสั่ง สิ่งที่คุณต้องทำคือเพิ่มโพสต์ของคุณไปยังไดเรกทอรี _posts และแก้ไขไฟล์ _config.yml เพื่อเปลี่ยนการตั้งค่าไซต์ ด้วยความรู้พื้นฐานเกี่ยวกับ HTML และ CSS คุณสามารถปรับเปลี่ยนเว็บไซต์ตามความชอบของคุณ ทั้งหมดนี้สามารถทำได้ผ่านตัวแก้ไขรหัส GitHub ซึ่งทำหน้าที่เหมือนระบบการจัดการเนื้อหา (CMS)
<tweet> </tweet> แท็กใน markdown ของคุณตรวจสอบธีมที่ดำเนินการ
หน้าหลักมีลักษณะเช่นนี้:
ตัวเลือกโหมดมืดในเมนูหลัก:
หน้าโพสต์ดูเหมือนว่า:
การตอบสนองที่กำหนดเอง 404:
โหมดมืดมีลักษณะเช่นนี้:
สำหรับการติดตั้งในพื้นที่เต็มรูปแบบของ Adam Blog 2.0 ให้ดาวน์โหลดสำเนา Adam Blog 2.0 ของคุณเองและเปิดซิปลงในไดเรกทอรีของตัวเอง จากนั้นเปิดเครื่องมือบรรทัดคำสั่งที่คุณชื่นชอบป้อน bundle install แล้วป้อน jekyll serve ไซต์ของคุณควรเปิดใช้งานในพื้นที่ที่ http: // localhost: 4000
หากคุณยังใหม่กับ Jekyll ฉันขอแนะนำให้ตรวจสอบเอกสารที่ https://jekyllrb.com/ หรือมีการสอนโดยนิตยสาร Smashing
หากคุณกำลังโฮสต์เว็บไซต์ของคุณในหน้า GitHub การเปลี่ยนแปลงไฟล์ _config.yml (หรือไฟล์อื่น ๆ ) จะบังคับให้สร้างไซต์ของคุณใหม่ด้วย Jekyll การเปลี่ยนแปลงใด ๆ ที่เกิดขึ้นควรจะสามารถดูได้ในไม่ช้า หากคุณกำลังโฮสต์เว็บไซต์ของคุณในพื้นที่คุณต้องเรียกใช้ jekyll serve อีกครั้งสำหรับการเปลี่ยนแปลงที่จะเกิดขึ้น
ตรงไปที่ไดเรกทอรี _posts เพื่อดูโพสต์ทั้งหมดที่อยู่ในเว็บไซต์และเพื่อดูตัวอย่างของไฟล์โพสต์โดยทั่วไป คุณสามารถทำซ้ำโพสต์เทมเพลตและเริ่มเพิ่มเนื้อหาของคุณเอง
แยกที่เก็บนี้ลงในบัญชีของคุณเอง
คุณสามารถโฮสต์ไซต์ Jekyll ของคุณได้ฟรีพร้อมหน้า GitHub คลิกที่นี่สำหรับข้อมูลเพิ่มเติม
เมื่อ https://USERNAME.github.io/ อร์กถ้าคุณใช้เป็นปลายทางที่เก็บชื่อผู้ใช้ https://USERNAME.github.io/REPONAME/ USERNAME.github.io . หมายเหตุ: หากคุณกำลังโฮสต์หลาย ๆ เว็บไซต์ภายใต้ชื่อผู้ใช้ GitHub เดียวกันคุณจะต้องใช้หน้าโครงการแทนหน้าผู้ใช้ - เพียงเปลี่ยนชื่อที่เก็บเป็นสิ่งอื่นนอกเหนือจาก 'http://username.github.io'
นอกเหนือจาก GitHub-username.github.io repo ที่แมปกับ URL รากคุณสามารถให้บริการไซต์ได้โดยใช้สาขา GH-PAGES สำหรับ repos อื่น ๆ
สิ่งนี้จะทำให้คุณต้องแก้ไข _config.yml เช่น So:
# Site settings
title : Repo Name
email : [email protected]
author : Your Name
description : " Repo description "
baseurl : " /repo-name "
url : " https://github-username.github.io "สิ่งนี้จะช่วยให้มั่นใจได้ว่าเส้นทางสัมพัทธ์ที่ถูกต้องถูกสร้างขึ้นสำหรับสินทรัพย์และโพสต์ของคุณ
แก้ไขไฟล์ _config.yml ซึ่งอยู่ในไดเรกทอรีรูทด้วยข้อมูลของคุณ
# Site settings
title : The Title for Your Website
description : ' A description of your blog '
permalink : ' :title:output_ext ' # how the permalinks will behave
baseurl : " / " # the subpath of your site, e.g. /blog
url : " " # the base hostname & protocol for your site, e.g. http://example.com
logo : " " # the logo for your site
logo-icon : " " # a smaller logo, typically squared
logo-icon-SEO : " " # must be a non SVG file, could be the same as the logo-icon
# Night/Dark mode default mode is "auto", "auto" is for auto nightshift (19:00 - 07:00), "manual" is for manual toggle, and "on/off" is for default on/off. Whatever the user's choice is, it will supersede the default setting of the site and be kept during the visit (session). Only the dark mode setting is "manual", it will be always kept on every visit (i.e. no matter the browser is closed or not)
night_mode : " auto "
logo-dark : " /assets/img/branding/MVM-logo-full-dark.svg " # if you want to display a different logo when in dark mode
highlight_theme : syntax-base16.monokai.dark # select a dark theme for the code highlighter if needed
# Author settings
author : Your Name # add your name
author-pic : ' ' # a picture of you
about-author : ' ' # a brief description of you
# Contact links
email : [email protected] # Add your Email address
phone : # Add your Phone number
website : # Add your website
linkedin : # Add your Linkedin handle
github : # Add your Github handle
twitter : # Add your Twitter handle
bandcamp : # Add your Bandcamp username
# Tracker
analytics : # Google Analytics tag ID
fbadmin : # Facebook ID admin
# Paginate
paginate : 6 # number of items to show in the main page
paginate_path : ' page:num '
words_per_minute : 200 # default words per minute to be considered when calculating the read time of the blog posts ในการกำหนดค่าจดหมายข่าวโปรดสร้างบัญชีใน https://mailchimp.com ตั้งค่าแบบฟอร์มการลงทะเบียนเว็บและวางลิงค์จากแบบฟอร์มการลงทะเบียนแบบฝังในไฟล์ config.yml :
# Newsletter
mailchimp : " https://github.us1.list-manage.com/subscribe/post?u=8ece198b3eb260e6838461a60&id=397d90b5f4 " ในการกำหนดค่า disqus ให้ตั้งค่าไซต์ disqus ด้วยชื่อเดียวกับเว็บไซต์ของคุณ จากนั้นใน _config.yml ให้แก้ไขค่า disqus_identifier เพื่อเปิดใช้งาน
# Disqus
discus_identifier : # Add your discus identifier
comments_curtain : yes # leave empty to show the disqus embed directlyข้อมูลเพิ่มเติมเกี่ยวกับวิธีการตั้งค่า disqus
ปรับแต่งสีของไซต์ แก้ไข /assets/css/main.css ดังนี้:
html {
--shadow : rgba ( 32 , 30 , 30 , .3 );
--accent : # DB504A ; /* accent */
--accent-dark : # 4e3e51 ; /* accent 2 (dark) */
--main : # 326273 ; /* main color */
--main-dim : # 879dab ; /* dimmed version of main color */
--text : # 201E1E ;
--grey1 : # 5F5E58 ;
--grey2 : # 8D897C ;
--grey3 : # B4B3A7 ;
--grey4 : # DAD7D2 ;
--grey5 : # F0EFED ;
--background : # ffffff ;
}
html [ data-theme = "dark" ] {
--accent : # d14c47 ; /* accent */
--accent-dark : # CD8A7A ; /* accent 2 (dark) */
--main : # 4C6567 ; /* main color */
--main-dim : # 273335 ; /* dimmed version of main color */
--text : # B4B3A7 ;
--grey1 : # 8D897C ;
--grey2 : # 827F73 ;
--grey3 : # 76746A ;
--grey4 : # 66645D ;
--grey5 : # 4A4945 ;
--background : # 201E1E ;
--shadow : rgba ( 180 , 179 , 167 , .3 );
} ปรับแต่งแบบอักษรไซต์ แก้ไข /assets/css/main.css ดังนี้:
...
--font1 : 'Lora' , charter , Georgia , Cambria , 'Times New Roman' , Times , serif ; /* body text */
- - font2 : 'Source Sans Pro' , 'Helvetica Neue' , Helvetica , Arial , sans-serif ; /* headers and titles */
- - font1 - light : 400;
- - font1 - regular : 400;
- - font1 - bold : 600;
- - font2 - light : 200;
- - font2 - regular : 400;
- - font2 - bold : 700;
... หากคุณเปลี่ยนฟอนต์คุณจะต้องแก้ไข /_includes/head.html ดังต่อไปนี้: การเขียนบทและเปลี่ยนบรรทัดต่อไปนี้ด้วยแบบอักษรและน้ำหนักแบบอักษรใหม่ของคุณ:
< link href =" https://fonts.googleapis.com/css?family=Lora:400,600|Source+Sans+Pro:200,400,700 " rel =" stylesheet " > ลบทุกอย่างภายใน <style></style> ก่อนบรรทัดด้านบน:
< style >
/* latin */
@font-face {
font-family: 'Lora';
...
</ style > คุณจะพบโพสต์ตัวอย่างใน /_posts/ ไดเรกทอรีของคุณ ไปข้างหน้าและแก้ไขโพสต์ใด ๆ และสร้างเว็บไซต์ใหม่เพื่อดูการเปลี่ยนแปลงของคุณสำหรับหน้า GitHub สิ่งนี้จะเกิดขึ้นโดยอัตโนมัติทุกครั้ง คุณสามารถสร้างเว็บไซต์ใหม่ได้หลายวิธี แต่วิธีที่พบบ่อยที่สุดคือการเรียกใช้ jekyll serve ซึ่งเปิดตัวเว็บเซิร์ฟเวอร์และปรับปรุงเว็บไซต์ของคุณโดยอัตโนมัติเมื่อมีการอัปเดตไฟล์
ในการเพิ่มโพสต์ใหม่เพียงเพิ่มไฟล์ในไดเรกทอรี _posts ที่เป็นไปตามอนุสัญญาของ YYYY-MM-DD-name-of-post.md และรวมถึงเรื่องที่จำเป็น ดูโพสต์ตัวอย่างใด ๆ เพื่อรับแนวคิดเกี่ยวกับวิธีการทำงาน หากคุณมีเว็บไซต์ที่สร้างขึ้นด้วย Jekyll เพียงคัดลอกโพสต์ของคุณเพื่อย้ายไปยัง Adam Blog 2.0
ตัวเลือกเรื่องด้านหน้าสำหรับแต่ละโพสต์คือ:
---
layout : post # ensure this one stays like this
read_time : true # calculate and show read time based on number of words
show_date : true # show the date of the post
title : Your Blog Post Title
date : XXXX-XX-XX XX:XX:XX XXXX
description : " The description of your blog post "
img : # the path for the hero image, from the image folder (if the image is directly on the image folder, just the filename is needed)
tags : [tags, of, your, post]
author : Your Name
github : username/reponame/ # set this to show a github button on the post
toc : yes # leave empty or erase for no table of contents
---แก้ไขบล็อกของคุณโดยใช้ Markdown นี่คือคำแนะนำที่ดีเกี่ยวกับวิธีการใช้งาน
ลบรูปภาพภายใน /assets/img/posts/ และอัปโหลดรูปภาพของคุณเองสำหรับโพสต์ของคุณ
ตรวจสอบให้แน่ใจว่าหน้า GitHub เปิดอยู่ในการตั้งค่าที่เก็บและชี้ไปที่สาขาหลักหรือสาขาหลัก (ที่คุณโคลน repo นี้)
หากคุณคุ้นเคยกับ Jekyll โครงสร้างไดเรกทอรี Adam Blog 2.0 ไม่ควรเป็นเรื่องยากเกินไป ไฮไลท์บางอย่างของความแตกต่างที่คุณอาจสังเกตเห็นระหว่างโครงสร้างไดเรกทอรีเริ่มต้น ข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่โฟลเดอร์และไฟล์เหล่านี้สามารถพบได้ในเว็บไซต์เอกสาร Jekyll
Adam Blog 2.0/
├── _includes # Theme includes
├── _layouts # Theme layouts (see below for details)
├── _posts # Where all your posts will go
├── assets # Style sheets and images are found here
| ├── css # Style sheets go here
| | └── _sass # Folder containing SCSS files
| | └── main.css # Main SCSS file
| | └── highlighter # Style sheet for code syntax highlighting
| └── img #
| └── posts # Images go here
├── _pages # Website pages (that are not posts)
├── _config.yml # Site settings
├── Gemfile # Ruby Gemfile for managing Jekyll plugins
├── index.html # Home page
├── LICENSE.md # License for this theme
├── README.md # Includes all of the documentation for this theme
├── feed.xml # Generates atom file which Jekyll points to
├── 404.html # custom and responsive 404 page
├── all-posts.json # database of all posts used for infinite scroll
├── ipfs-404.html # 404 page for IPFS
├── posts-by-tag.json # database of posts by tag
├── robots.txt # SEO crawlers exclusion file
├── search.json # database of posts used for search
└── sitemap.xml # automatically generated sitemap for search engines หากต้องการเริ่มต้นจากศูนย์อย่างสมบูรณ์เพียงแค่ลบไฟล์ทั้งหมดในโฟลเดอร์ _posts , assets/img/posts และเพิ่มเนื้อหาของคุณเอง ทุกอย่างในไฟล์ _config.yml สามารถแก้ไขได้เพื่อให้เหมาะกับความต้องการของคุณ เปลี่ยนไฟล์ favicon.ico เป็น favicon ของคุณเอง
หากคุณมีใบเสนอราคาทวีตในโพสต์บล็อกของคุณและต้องการให้เป็นแบบคลิกเพื่อทวีตบล็อกคุณเพียงแค่ใช้แท็ก <tweet></tweet> ทุกอย่างระหว่างพวกเขาจะถูกแปลงในกล่องคลิกเพื่อทวีต
เป็นไปได้ที่จะติดตามสถิติเว็บไซต์ของคุณผ่าน Google Analytics คล้ายกับ Disqus คุณจะต้องสร้างบัญชีสำหรับ Google Analytics และป้อน Google ID ที่ถูกต้องสำหรับเว็บไซต์ของคุณภายใต้ google-ID ในไฟล์ _config.yml ข้อมูลเพิ่มเติมเกี่ยวกับวิธีการตั้งค่า Google Analytics
Atom ได้รับการสนับสนุนโดยค่าเริ่มต้นผ่าน Jekyll-Feed ด้วย Jekyll-Feed คุณสามารถตั้งค่าตัวแปรการกำหนดค่าเช่น 'title', 'คำอธิบาย' และ 'ผู้แต่ง' ในไฟล์ _config.yml
ไฟล์ฟีดอะตอมของคุณจะอยู่ที่ https://your.site/feed.xml ตัวอย่าง
ไอคอนโซเชียลมีเดียทั้งหมดได้รับความอนุเคราะห์จากตัวอักษรที่ยอดเยี่ยม คุณสามารถเปลี่ยนไอคอนที่ปรากฏขึ้นรวมถึงบัญชีที่เชื่อมโยงไปยังในไฟล์ _config.yml
Adam Blog 2.0 ออกมาจากกล่องด้วย Mathjax ซึ่งช่วยให้คุณสามารถแสดงสมการทางคณิตศาสตร์ในโพสต์ของคุณผ่านการใช้ Latex เพียงเพิ่ม Mathjax: yes ในหน้าตาของโพสต์ของคุณ
< p style = " text-align : center " >
( theta _ {t+1} = theta _ {t} - dfrac{eta}{sqrt{hat{v} _ t} + epsilon} hat{m} _ t ) .
</ p >
Adam Blog 2.0 ให้บริการที่เน้นไวยากรณ์ผ่านบล็อกรหัสที่ไม่พอใจ การไฮไลต์ไวยากรณ์ช่วยให้คุณสามารถแสดงซอร์สโค้ดในสีและฟอนต์ที่แตกต่างกันขึ้นอยู่กับว่าภาษาการเขียนโปรแกรมกำลังแสดงอยู่ คุณสามารถค้นหารายการภาษาการเขียนโปรแกรมที่รองรับทั้งหมดได้ที่นี่ อีกทางเลือกหนึ่งคือการฝังรหัสของคุณผ่านส่วนสำคัญ
คุณสามารถเลือกธีมสีสำหรับไฮไลต์ไวยากรณ์ในไฟล์ _config.yml :
highlight_theme : syntax-base16.monokai.dark # select a theme for the code highlighterดูไดเรกทอรีปากกาเน้นข้อความสำหรับการอ้างอิงเกี่ยวกับตัวเลือก
Jekyll ให้การสนับสนุนสำหรับ Markdown ปรุงแต่ง GitHub ซึ่งช่วยให้คุณสามารถจัดรูปแบบโพสต์ของคุณโดยใช้ไวยากรณ์ Markdown
ตรวจสอบเอกสาร Jekyll สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการใช้ประโยชน์สูงสุดจาก Jekyll ไฟล์ข้อบกพร่อง/คุณสมบัติทั้งหมดที่ GitHub Repo ของ Jekyll หากคุณมีคำถามคุณสามารถถามพวกเขาเกี่ยวกับ Jekyll Talk
หากคุณต้องการทำคำขอคุณสมบัติหรือรายงานข้อผิดพลาดหรือการพิมพ์ผิดในเอกสารโปรดส่งปัญหา GitHub หากคุณต้องการบริจาคเงินให้ส่งคำขอดึง - เป็นโบนัสฉันจะให้เครดิตผู้สนับสนุนทั้งหมดด้านล่าง! หากนี่เป็นคำขอดึงครั้งแรกของคุณอาจเป็นประโยชน์ในการอ่านใน GitHub Flow ก่อน
Adam Blog 2.0 ได้รับการออกแบบเป็นฐานสำหรับผู้ใช้ในการปรับแต่งและเหมาะสมกับความต้องการเฉพาะของตนเอง โปรดจำไว้ว่าเมื่อขอคุณสมบัติและ/หรือส่งคำขอดึง ตัวอย่างของการเปลี่ยนแปลงที่ฉันชอบที่จะเห็นคือสิ่งที่จะทำให้ไซต์ใช้งานง่ายขึ้นหรือวิธีที่ดีกว่าในการทำสิ่งต่าง ๆ โปรดหลีกเลี่ยงการเปลี่ยนแปลงที่ไม่เป็นประโยชน์ต่อผู้ใช้ส่วนใหญ่
ชุดรูปแบบนี้ฟรีและซอฟต์แวร์โอเพ่นซอร์ส คุณอาจใช้มันตามที่คุณต้องการเนื่องจากมีการแจกจ่ายภายใต้ใบอนุญาต MIT หากคุณมีปัญหาใด ๆ คำถามหรือข้อเสนอแนะอย่าลังเลที่จะยื่นปัญหา GitHub
