Hướng dẫn Sử dụng Sigil để làm epub cho người mới làm quen từ A-Z

Đầu tiên, dùng lệnh:
F: <p>[
R: <p class="note">[

Lệnh này để đề phòng trường hợp 1 chú thích có hơn 1 thẻ p

Sau đó chạy plugin AddIDs, xem hướng dẫn ở phần làm chú thích ở trang 1 và làm y hệt thế. Sau đó thì thẻ p mà có class="note" sẽ có id đúng theo thứ tự. Rồi lại dùng lệnh sao cho chỉ số id rơi vào trong cặp [ ] và ra đúng như cái bạn cần.

À, các chú thích mới thêm vào cũng ở dạng <p>[1] Nội dung</p> nhé, số trong cặp [ ] là số mấy cũng được.

 

Có vẻ bạn chưa lo đến phần nội dung ebook. Bởi vì mỗi một chú thích mới thêm vào thì sẽ tương ứng với nội dung cần phải giải thích ở đâu đó. Vậy nên ở mỗi chỗ cần giải thích, bạn cứ thêm [1] vào (tất cả là [1] cũng được). Nếu chú thích của bạn đã ở dạng có link thì cần chuyển hết về dạng [chỉ số chú thích], cái này cũng là dùng lệnh nhé. Sau đó dùng lệnh:

F: \[(\d+)\]
R: <a>[\1]</a>

Rồi lại chạy plugin AddIDs với tag a, phần Attribute và Value bỏ trống, là thẻ a này cũng có id chạy theo thứ tự. Rồi lại dùng lệnh để chỉ số id mới sinh ra của thẻ a này nằm trong cặp [ ].

 

Cho mình hỏi chú thích dài quá xuống dòng kiểu gì? Mình dùng lệnh <br/> không được.

 

Tại sao lại không được nhỉ? Vậy bạn mở chế độ bookview gõ enter đúng chỗ đó, hoặc thêm </p> <p> vào chỗ đó.

 

Bác thử thay bằng <a id="notelink_\1">[\1]</a>. Hy vọng đỡ được công đoạn tạo id. Tuy nhiên nó chỉ có tính duy nhất khi bác đã có thể đánh số liên tục thành công cho các link. Em toàn làm thế. .

 

@4DHN Đúng rồi bác! . Nhưng vì đang ngập trong phần chú thích cuối trang nên em chưa mò tới

 

Bạn nào thử đi, rồi báo kết quả, đang bận việc quá.

 

Không được bạn @NQK ơi. Ý tôi là dù chỉ số chú thích cũ lộn xộn thế nào thì sau khi xử lý nó vẫn phải theo thứ tự. Bởi vì khi chèn chỉ những chú thích mới vào giữa những chú thích cũ, thì tự dưng sự lộn xộn xảy ra.

 

Bác dùng Regex Function để đánh lại số.

Sent from Oneplus One

 

Em làm theo thi tất cả chú thích ở chương nào đều nằm luôn ở cuối chương đấy. Em muốn gom nó vào một chỗ và nằm ở cuối sách thì làm thế nào bác?

 

Trước khi chạy plugin thì liên kết tất cả các file html thành 1 file.

 

Đơn giản như đan rỗ mà không nghĩ ra

 

Nhà Giả Kim này tên chương (sách giấy) có hình con lạc đà

Sent from Oneplus One

 

@NQK , @kaoaye : nhà giả kim Vui lòng đăng nhập hoặc đăng ký để xem link có chương hình con lạc đà nè. Kaoaye có thể đổi chú thích luôn vì file này lấy từ ebookvie

 

Ebook này có đấy bác. Dùng kindle khổ quá,convert từ epub cứ phải chỉnh sửa mới dùng được!

 

Mình lấy từ đấy mà

 

Cũng lâu lâu rồi mình không edit epub dạng này nữa. Vì lấy ở ebookvie nhiều mà cứ chuyển hết thì phí thời gian lắm.tốt nhất là kiếm cái app đọc được dạng này. Còn nếu chuyển cho kindle như bạn thì nếu nhớ không lầm thì lúc trước mình cài plugin của a Rafa ấy. Mở file epub bằng sigil, chạy plugin cái là xong. Lúc đó thì chuyển qua mobi dễ ợt.

 

@tranngocanh,

ebookvie dùng một css cố định. Em có thể tạo một css na ná như vậy (nếu muốn), bỏ hết các giá trị không phải epub (nhiều đấy) rồi dán vào là xong. Không cần edit gì cả.

Đầu tư lần đầu rồi các lần sau thời gian bỏ ra là 12 giây.

Ví dụ, với file này, em thử thay nội dung css này bằng nội dung sau, không động gì tời htm cả. Cứ sửa thêm cho đến khi thấy phù hợp, rồi làm cách nào đó lưu lại cái css đó để dùng.

Mã:

@import url(../Styles/fonts-books2.css);
body {
  margin: 0;
  text-align: justify;
  }
div, p {
  padding: 0;
  margin: 0;
  line-height: 1.3;
  orphans: 1;
  widows: 1;
}
h1, h2, h3, h4, #list-sections li a {
  font-family: "EBGaramond", Georgia, "Times New Roman", Palatino, Helvetica;
}
h1, h2 {
  margin-top: 25px;
  margin-bottom: 12px;
  line-height: 1.2;
  font-weight: 500;
}
h1 {
  font-size: 3.5em;
}
h2 {
  text-align: center;
  font-size: 2.5em;
  padding-top: 12px;
  margin-bottom: 8px;
}
h3, h4 {
  padding-top: 8px;
  margin-bottom: 4px;
  line-height: 1.2em;
  font-weight: 500;
}
h3 {
  font-size: 1.8em;
}
h4 {
  font-size: 1.5em;
}

img {
  width: auto;
  height: auto;
}
#container > .inner > div > p {
  font-size: 1em;
}
p {
  text-indent: 28px;
}
blockquote {
  margin: 0;
  padding: 8px 20px !important;
  color: #444;
}
@media only screen and (min-width: 600px) {
  blockquote {
    padding: 8px 50px !important;
  }
}
.center {
  text-align: center;
}
.left {
  text-align: left;
  text-indent: 0;
}
.right {
  text-align: right;
  text-indent: 0;
}
span.center, span.left, span.right {
  display: block;
}
li {
  margin-left: -10px;
}
li p {
  text-indent: 0;
}
hr {
  display: block;
  width: 50%;
  margin: 50px auto 40px auto;
  border: 0;
  border-top: 1px solid #dededc;
  border-bottom: 1px solid #dededc;
  padding: 2px;
}
.underline {
  /* Text underline */text-decoration: underline;
}
.underline.dotted {
  /* Text dotted */text-decoration: none;
  border-bottom: dotted 1px #444;
}
.line-through {
  text-decoration: line-through;
}
.bold {
  font-weight: bold;
}
.italic {
  font-style: italic;
}
.margintop {
  margin-top: 30px;
}
.c-22a5a5 {
  color: #22a5a5;
}
.c-4b2886 {
  color: #4b2886;
}
.c-0083c9 {
  color: #0083c9;
}
.c-99cf15 {
  color: #99cf15;
}
.c-1d5299 {
  color: #1d5299;
}
.c-00631b {
  color: #00631b;
}
.c-deba02 {
  color: #deba02;
}
.c-a4aed2 {
  color: #a4aed2;
}
.c-ababab {
  color: #888;
}
.c-d2232a {
  color: #d2232a;
}
.c-b67c00 {
  color: #b67c00;
}
.c-008126 {
  color: #008126;
}
.c-e6551d {
  color: #e6551d;
}
.c-333333 {
  color: #333;
}
.f-left {
  float: left;
  margin-right: 8px !important;
}
.f-right {
  float: right;
  margin-left: 8px !important;
}
/* panel */
.panel.c-22a5a5 {
  background: #22a5a5;
  color: #eee;
}
.panel.c-4b2886 {
  background: #4b2886;
  color: #eee;
}
.panel.c-0083c9 {
  background: #0083c9;
  color: #eee;
}
.panel.c-99cf15 {
  background: #99cf15;
  color: #333;
}
.panel.c-1d5299 {
  background: #1d5299;
  color: #eee;
}
.panel.c-00631b {
  background: #00631b;
  color: #eee;
}
.panel.c-deba02 {
  background: #deba02;
  color: #333;
}
.panel.c-a4aed2 {
  background: #a4aed2;
  color: #333;
}
.panel.c-ababab {
  background: #888;
  color: #eee;
}
.panel.c-d2232a {
  background: #d2232a;
  color: #eee;
}
.panel.c-b67c00 {
  background: #b67c00;
  color: #eee;
}
.panel.c-008126 {
  background: #008126;
  color: #eee;
}
.panel.c-e6551d {
  background: #e6551d;
  color: #eee;
}
.panel.c-333333 {
  background: #333;
  color: #eee;
}
img.f-left {
  padding-right: 8px !important;
  margin-right: 8px !important;
}
img.f-right {
  padding-left: 8px !important;
  margin-left: 8px !important;
}
.box {
  border: solid 1px #eee;
  border-radius: 3px;
  padding: 8px;
  margin: 8px;
}
.box p {
  text-indent: 0;
}
.w10 {
  max-width: 10%;
}
.w25 {
  max-width: 25%;
}
.w35 {
  max-width: 35%;
}
.w50 {
  max-width: 50%;
}
.w75 {
  max-width: 75%;
}
.w100 {
  max-width: 100%;
}
blockquote p, .no-indent {
  text-indent: 0;
}
p.photo.center {
  font-size: 0.8em;
}
.panel {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 20px;
  background: #de3f1c;
  color: #fff;
}
.panel > *, .box > * {
  margin: 0 auto;
  display: block;
  padding: 8px 20px;
}
.panel > img, .box > img {
  padding: 0;
}
.panel > h1, .panel > h2 {
  margin-top: 44px;
}
.panel.f-left:not(.w100) {
  margin-right: 20px !important;
  padding: 8px;
}
.panel.f-right:not(.w100) {
  margin-left: 20px !important;
  padding: 8px;
}
.panel a {
  color: #eee;
}
.panel a:hover {
  color: #fff;
}
.panel.grey a {
  color: #333;
}
.panel.grey a:hover {
  color: #de3f1c;
}
figure.f-left, figure.f-right {
  margin-top: 0 !important;
}
figure.f-left {
  margin-right: 12px !important;
  text-align: right;
}
figure.f-right {
  margin-left: 12px !important;
  text-align: left;
}
figure img {
  max-width: 100%;
}
figure figcaption {
  color: #444;
  font-size: 0.8em;
  line-height: 1.4em;
}
.dropcap {
  text-indent: 0;
}
.dropcap:first-letter, span.dropcap {
  float: left;
  font-size: 420%;
  margin: -0.2em 0.05em -0.3em 0;
}
.no-margin {
  margin: 0 !important;
}
.btn {
  border: solid 1px #c70927;
  border-radius: 8px;
  padding: 5px 8px;
  display: inline-block;
  text-align: center;
}
@media only screen and (max-width: 400px) {
  .w10, .w25 {
    max-width: 50%;
  }
  .w35, .w50, .w75 {
    max-width: 100%;
  }
  .f-left, .f-right, .panel.f-left, .panel.f-right {
    float: none;
    padding-right: 0 !important;
    margin-right: 0 !important;
    padding-left: 20px !important;
    margin-left: 20px !important;
  }
  .f-left {
    padding-left: 0 !important;
    margin-left: 20px !important;
    padding-right: 0 !important;
  }
  .f-right {
    padding-right: 0 !important;
    margin-right: 20px !important;
    padding-left: 0 !important;
  }
  img.f-left, img.f-right, figure.f-left, figure.f-right, .panel.f-left, .panel.f-right {
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  .f-left .f-left, .f-right .f-right, .f-left .f-right, .f-right .f-left {
    margin: 0 !important;
    padding: 0 !important;
    padding-right: 20px !important;
  }
  figure.f-left, figure.f-right {
    margin: 20px !important;
    width: auto !important;
  }
  figure.f-left.hero, figure.f-right.hero {
    margin: 0 !important;
    margin-bottom: 20px !important;
  }
  .panel.f-right:not(.w100), .panel.f-left:not(.w100) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .panel > *:not(span) {
    padding-left: 0;
    padding-right: 0;
  }
}
@media only screen and (min-width: 1024px) {
  .w25, .w35 {
    max-width: 320px;
  }
  .panel.f-left:not(.w100) {
    margin-left: 80px !important;
  }
  .panel.f-right:not(.w100) {
    margin-right: 80px !important;
  }
}
.size-1 {
  font-size: 1.5em;
}
.clear {
  clear: both;
}
.block {
  display: block;
}
/* display flex for grid view of photos*/
div.flex {
  font-size: 1em;
  display: block;
  -webkit-box-flex: 1;
  display: -ms-flex;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  text-align: center;
  /*align-items: center;*/-ms-justify-content: center;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-orient: horizontal;
  flex-direction: row;
}
#container > .inner > div.flex {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100%;
}
div.flex > * {
  margin: 4px;
}
div.flex > :not(figure) {
  padding: 4px 12px;
  max-width: 322px;
}
div.flex > img {
  width: 100%;
  height: 100%;
}
div.flex h1, div.flex h2, div.flex h3, div.flex h4 {
  text-align: left;
}
div.flex p {
  font-size: 0.8em;
  line-height: 1.4;
  text-align: left;
}
div.flex p.no-indent {
  margin: 4px 0;
}
div.flex p.no-indent img.w35, div.flex p.no-indent img.w50, div.flex p.no-indent img.w75 {
  max-width: 100%;
}
div.flex.panel {
  padding: 0;
}
#container > .inner > .panel:first-child {
  margin-top: -64px;
}
#container > .inner > .panel:last-child {
  margin-bottom: -64px;
  padding: 8px 20px;
}
@media only screen and (max-width: 600px) {
  div.flex {
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  div.flex > * {
    width: 45%;
  }
  div.flex > :not(figure) {
    width: 40%;
  }
}
@media only screen and (max-width: 400px) {
  div.flex {
    display: block;
  }
  div.flex > * {
    width: auto;
    margin: 0;
  }
  div.flex figcaption {
    margin-bottom: 20px;
  }
  div.flex > :not(figure) {
    width: auto;
    padding: 4px 20px;
  }
  div.flex > img {
    width: 100%;
    padding: 0;
  }
}
table {
  border-collapse: collapse;
  font-size: 0.9em;
  margin: 20px 0;
}
table thead {
  background: #eee;
}
table th, table td {
  border: solid 1px #eee;
  padding: 3px 8px;
}
figure figcaption {
  font-size: 0.8em;
  line-height: 1.3em;
  color: #444;
}
@object fullscreen;
figure.fullscreen {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  min-height: 100vh;
}
figure.fullscreen img {
  display: none;
}
figure.fullscreen figcaption {
  font-size: 3em !important;
}
figure.fullscreen figcaption::after {
  content: "⇣";
  position: absolute;
  right: 0%;
  bottom: -30%;
  font-size: 0.8em;
  font-weight: normal;
}
figure.fullscreen.left-bottom figcaption {
  text-align: left !important;
  max-width: none !important;
  margin-left: 0 !important;
  padding-right: 20% !important;
  bottom: 10% !important;
}
figure.fullscreen.right-bottom figcaption {
  text-align: right !important;
  max-width: none !important;
  margin-left: 0 !important;
  padding-left: 20% !important;
  bottom: 10% !important;
}
figure.fullscreen.center-bottom figcaption {
  text-align: center !important;
  max-width: none !important;
  margin-left: 0 !important;
  padding: 0 10% !important;
  bottom: 10% !important;
}
figure.fullscreen.left-top figcaption {
  text-align: left !important;
  max-width: none !important;
  margin-left: 0 !important;
  padding-right: 20% !important;
  top: 10% !important;
}
figure.fullscreen.center-top figcaption {
  text-align: center !important;
  max-width: none !important;
  margin-left: 0 !important;
  padding: 0 10% !important;
  top: 10% !important;
}
figure.fullscreen.right-top figcaption {
  text-align: right !important;
  max-width: none !important;
  margin-left: 0 !important;
  padding-left: 20% !important;
  top: 10% !important;
}
figure.fullscreen.left-middle, figure.fullscreen.center-middle, figure.fullscreen.right-middle {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */display: -webkit-flex;
  /* NEW - Chrome */display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */display: -ms-flexbox;
  display: flexbox;
  -webkit-box-flex-direction: row;
  -moz-box-flex-direction: row;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
}
figure.fullscreen.left-middle figcaption, figure.fullscreen.center-middle figcaption, figure.fullscreen.right-middle figcaption {
  position: static !important;
  margin: auto;
  max-width: none !important;
  width: 100% !important;
}
figure.fullscreen.left-middle figcaption {
  text-align: left !important;
  padding-right: 15% !important;
}
figure.fullscreen.center-middle figcaption {
  text-align: center !important;
  padding: 0 5% !important;
}
figure.fullscreen.right-middle figcaption {
  text-align: right !important;
  padding-left: 15% !important;
}
@media screen and (max-width: 600px), screen and (max-height: 600px) {
  figure.fullscreen figcaption {
    font-size: 2em !important;
  }
}
@media screen and (min-width: 800px), screen and (min-height: 800px) {
  figure.fullscreen.left-middle figcaption {
    padding-right: 30% !important;
  }
  figure.fullscreen.center-middle figcaption {
    padding: 0 20% !important;
  }
  figure.fullscreen.right-middle figcaption {
    padding-left: 30% !important;
  }
}
@end;
@object layout-section_4;
[section=section_4] .container {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */display: -webkit-flex;
  /* NEW - Chrome */display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */-webkit-box-flex-direction: row;
  -moz-box-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
  margin: 0 !important;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: 0 !important;
}
[section=section_4] .container .inner {
  width: 80%;
  /*background-color: rgba(255,255,255,0.7);*//*color: #333;*/padding: 8px;
  margin: auto;
  min-width: 280px;
  max-height: 100%;
  -webkit-overflow-scrolling: touch;
  overflow: auto;
}
@end;
@object layout-section_5;
@end;
@object layout-section_6;
@end;
@object layout-section_7;
@end;
@object layout-section_8;
@end;
@object layout-section_9;
@end;
@object layout-section_10;
@end;
@object layout-section_11;
@end;
@object layout-section_12;
@end;
@object layout-section_13;
@end;
@object layout-section_14;
@end;
@object layout-section_15;
@end;
@object layout-section_16;
@end;
@object layout-section_17;
@end;
@object layout-section_18;
@end;
@object layout-section_19;
@end;
@object layout-section_20;
@end;
@object layout-section_21;
@end;
@object layout-section_22;
@end;
@object layout-section_23;
@end;
@object layout-section_24;
@end;
@object layout-section_25;
@end;
@object layout-section_26;
@end;
@object layout-section_27;
@end;
@object layout-section_28;
@end;
@object layout-section_29;
@end;
@object layout-section_30;
@end;
@object layout-section_31;
@end;
@object layout-section_32;
@end;
@object layout-section_33;
@end;
@object layout-section_34;
@end;
@object layout-section_35;
@end;
@object layout-section_36;
@end;
@object layout-section_37;
@end;
@object layout-section_38;
@end;
@object layout-section_39;
@end;
@object layout-section_40;
@end;
@object layout-section_41;
@end;
@object layout-section_42;
@end;
@object layout-section_43;
@end;
@object layout-section_44;
@end;
@object layout-section_45;
@end;
@object layout-section_46;
@end;
@object layout-section_47;
@end;
@object layout-section_48;
@end;
@object layout-section_49;
@end;
@object layout-section_50;
@end;
@object layout-section_51;
@end;
@object layout-section_52;
@end;
@object layout-section_53;
@end;
@object layout-section_54;
@end;
@object layout-section_55;
@end;
@object layout-section_56;
@end;
@object layout-section_57;
@end;
@object layout-section_58;
@end;
@object layout-section_59;
@end;
@object layout-section_60;
@end;
@object layout-section_61;
@end;
@object layout-section_2;
@end;

 

Nếu chuyển bất cứ cuốn nào thì phí thời gian thật, và có nhất thiết phải chuyển bất cứ cuốn nào không? Cuốn sách mà mình thật sự muốn đọc chắc cũng không nhiều lắm đâu nhỉ?

1 plugin mà chuyển được hết chú thích dạng ẩn sang dạng link 2 chiều thì hơi khó tin, bởi vì có ebook của ebookvie có 4 hay 5 dạng chú thích cơ đấy.

 

Làm sao để biết cái giá trị nào không phải của epub hả bác?